18 の JS 最適化のヒントで、山のようなコードの 90% を解決できます。！！

参考：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.assign はデフォルト値をデフォルトオブジェクトに割り当てます。

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