기사 디렉토리
- 18가지 JS 최적화 팁으로 똥산 코드의 90%를 해결할 수 있습니다! ! !
-
- 1. 화살표 기능
- 2. 할당 변수 구조화
- 3. 문자 연결을 위해 템플릿 리터럴을 사용하세요.
- 4. 배열 및 객체 작업에 스프레드 연산자를 사용하세요
- 5. 루프 단순화
- 6. 판단을 단순화하라
- 7. 객체 구조화 및 기본 매개변수를 사용하여 함수 매개변수 단순화
- 8. 순수 함수 및 함수 합성과 같은 함수형 프로그래밍 개념을 사용하세요.
- 9. 객체 리터럴을 사용하여 객체 생성 및 정의를 단순화하세요.
- 10. 코드 가독성을 높이기 위해 적절한 이름 지정 및 주석 사용
- 11. 조건부 판단 최적화
- 함수 매개변수 "2" 이하가 가장 좋습니다.
- 12. 해석적 언어를 사용하라
- 13. 객체에 비공개 멤버를 갖도록 허용 - 클로저를 통해 구현
참고: https://blog.csdn.net/techforward/article/details/131961841
18가지 JS 최적화 팁으로 똥산 코드의 90%를 해결할 수 있습니다! ! !
1. 화살표 기능
// 传统函数定义
function add(a, b) {
return a + b;
}
// 箭头函数简化
const add = (a, b) => a + b;
2. 할당 변수 구조화
// 获取对象中的指定属性值
const firstName = person.firstName;
const lastName = person.lastName;
// 直接赋值对象,指定属性赋值
const {
firstName, lastName } = person;
console.log(fistName)
console.log(lastName)
3. 문자 연결을 위해 템플릿 리터럴을 사용하세요.
// 传统字符串拼接
const val = 'Hello ' + name + '!';
// 模板字面量简化
const val = `Hello ${
name}!`;
4. 배열 및 객체 작업에 스프레드 연산자를 사용하세요
// 合并数组
const combined = [...array1, ...array2];
// 复制对象
const clone = {
...original };
5. 루프 단순화
// 遍历数组
const doubled = numbers.map(num => num * 2);
// 过滤数组
const evens = numbers.filter(num => num % 2 === 0);
6. 판단을 단순화하라
// 传统条件判断
let message;
if (isSuccess) {
message = 'Operation successful';
} else {
message = 'Operation failed';
}
// 三元运算
const message = isSuccess ? 'Operation successful' : 'Operation failed';
7. 객체 구조화 및 기본 매개변수를 사용하여 함수 매개변수 단순화
// 传统参数设置默认值
function greet(name) {
const finalName = name || 'Guest';
console.log(`Hello, ${
finalName}!`);
}
// 对象解构和默认参数简化
function greet({
name = 'Guest' }) {
console.log(`Hello, ${
name}!`);
}
8. 순수 함수 및 함수 합성과 같은 함수형 프로그래밍 개념을 사용하세요.
// 纯函数
function add(a, b) {
return a + b;
}
// 函数组合
const multiplyByTwo = value => value * 2;
const addFive = value => value + 5;
const result = addFive(multiplyByTwo(3));
9. 객체 리터럴을 사용하여 객체 생성 및 정의를 단순화하세요.
// 传统对象创建
const person = {
firstName: 'John',
lastName: 'Doe',
age: 30,
};
// 对象字面量简化
const firstName = 'John';
const lastName = 'Doe';
const age = 30;
const person = {
firstName, lastName, age };
10. 코드 가독성을 높이기 위해 적절한 이름 지정 및 주석 사용
11. 조건부 판단 최적화
다른 경우라면
// param {status} status 活动状态:1:成功 2:失败 3:进行中 4:未开始
let txt = '';
if (status == 1) {
txt = "成功";
} else if (status == 2) {
txt = "失败";
} else if (status == 3) {
txt = "进行中";
} else {
txt = "未开始";
}
스위치 케이스
let txt = '';
switch (status) {
case 1:
txt = "成功";
break;
case 2:
txt = "成功";
break;
case 3:
txt = "进行中";
break;
default:
txt = "未开始";
}
캡슐화 결정
// 好的
shouldShowSpinner(fsm, listNode){
return fsm.state === 'fetching' && isEmpty(listNode)
}
if(shouldShowSpinner(fsm, listNode)){
//...doSomething
}
Object.sign은 기본 객체에 기본값을 할당합니다.
const menuConfig = {
title: 'Order',
buttonText: 'Send',
cancellable: true
};
function createMenu(config) {
Object.assign({
title: 'Foo',
body: 'Bar',
buttonText: 'Baz',
cancellable: true
}, config) // {} 目标对象,config 源对象
}
createMenu(menuConfig);
주목:
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
简单来说,就是Object.assign()是对象的静态方法,可以用来复制对象的可枚举属性到目标对象,利用这个特性可以实现对象属性的合并。
Object.assign(target, ...sources)
参数: target--->目标对象
source--->源对象
返回值:target,即目标对象
함수 매개변수 "2" 이하가 가장 좋습니다.
// 不好的
function createMenu(title, body, buttonText, cancellable) {
// ...
}
// 好的
const menuConfig = {
title: 'Foo',
body: 'Bar',
buttonText: 'Baz',
cancellable: true
};
function createMenu(menuConfig){
// ...
}
12. 해석적 언어를 사용하라
13. 객체에 비공개 멤버를 갖도록 허용 - 클로저를 통해 구현
// 不好的
const Employee = function(name) {
this.name = name;
};
Employee.prototype.getName = function getName() {
return this.name;
};
const employee = new Employee('John Doe');
console.log(`Employee name: ${
employee.getName()}`); // Employee name: John Doe
delete employee.name;
console.log(`Employee name: ${
employee.getName()}`); // Employee name: undefined
// 好的
const Employee = function(name){
this.getName = function(){
return name
}
}
const employee = new Employee('John Doe');
console.log(`Employee name: ${
employee.getName()}`); // Employee name: John Doe
delete employee.name;
console.log(`Employee name: ${
employee.getName()}`); // Employee name: undefined