JavaScript代码优化技巧

??、|| 运算符进行简化

1、空值合并操作符??如果没有定义左侧返回右侧。如果是，则返回左侧。这种方法非常实用，有时候仅仅只是想判断一个字段有没有值，而不是把空字符串或者0也当做false处理。

let a = obj ?? {}  
// 等价于 =>>  
let a;  
if( obj === null ||  obj === undefined ){  
    a = {}  
}else{  
    a = obj;  
}`

2、逻辑或操作符||，这里要注意的是0和''也会认为是false
如果||前面的值是0 '' false null undefined NaN其中的任意一种，则直接返回||后面的值

let a = obj || {}  
// 等价于 =>>  
let a;  
if( obj === 0 || obj === "" || obj === false || obj === null || obj === undefined || isNaN(obj) ){  
    a = {}  
} else {  
    a = obj;  
}

includes简化判断

if( obj === 0 || obj === "" || obj === false || obj === null || obj === undefined ){  
// ...  
}  
// 使用includes简化  
if([0, '', false, null, undefined].includes(obj)){  
// ...  
}

逻辑空赋值(??=)

const a = { duration: 50 };  
  
a.duration ??= 10;  
console.log(a.duration);  
// 输出: 50  
  
a.speed ??= 25;  
console.log(a.speed);  
// 输出: 25

快速生成1-10的数组

// 方法一  
const arr1 = [...new Array(10).keys()]  
// 方法二  
const arr2 = Array.from(Array(10), (v, k) => k)
// 生成1-10，通过map的特性
const arr2 = [...Array(10)].map((v, i) => i + 1)

快速生成10个[]的数组（二维数组）

//二维数组不能直接写成`new Array(10).fill([])`
//因为`fill`里传入引用类型值会导致每一个数组都指向同一个地址，改变一个数据的时候其他数据也会随之改变，详见mdn官方说明
// 错误写法  
const arr = new Array(10).fill([])
// 正确写法  
const arr = new Array(10).fill().map(() => new Array())

数组降维

是否还在用递归给一个多维数组降维？如果是，那应该知道一下es6的 flat() 方法。
如果不确定需要降维的数组有多深，可以传入最大值作为参数Infinity，默认值深度为1

const arr = [1, [2, [3, 4], 5], 6]  
const flatArr = arr.flat(Infinity) // 输出 [1, 2, 3, 4, 5, 6]
//flatMap数组降维
const arr = [1, 2, 3, 4]  
const result = arr.flatMap(v => [v, v * 2])
console.log(result); // 输出 [1, 2, 2, 4, 3, 6, 4, 8]

从数组中删除重复项

const numbers = [1, 1, 20, 3, 3, 3, 9, 9];  
const uniqueNumbers = [...new Set(numbers)]; // 输出 [1, 20, 3, 9]

交换两个变量

let x = 1;  
let y = 2;  
// 交换变量  
[x, y] = [y, x];

将对象的值收集到数组中

const info = { name: "Matt", country: "Finland", age: 35 };  
// 利用for循环插入到数组中  
let data = [];  
for (let key in info) {  
    data.push(info[key]);  
}  
// Object.values直接收集到数组中
const data = Object.values(info);

Array.map()的简写

想要拿到接口返回的特定字段的值，可以用解构赋值和对象的简写方法对map方法简写。
比如接口返回数据，此时如果只想要数据里的id和name。

// 接口返回数据  
res = [{ id: 1, name: 'zhangsan', age: 16, }, { id: 2, name: 'lisi', age: 20, gender: 1}]  
// 第一种方法：箭头函数、 解构赋值  
const data = res.map(({id, name}) => ({id, name}))  
// 第二种方法：箭头函数、返回对象（相对更容易理解）  
const data = res.map(v => ({id: v.id, name: v.name}))

使用箭头函数简化函数定义

// 传统函数定义  
function num(a, b) {  
    return a + b;  
}  
    
// 箭头函数简化  
const num = (a, b) => a + b;

使用解构赋值简化变量声明

// 传统变量声明  
const first = person.first;  
const last = person.last;  
// 解构赋值简化  
const { first, last } = person;

使用模板字面量进行字符串拼接

// 传统字符串拼接  
const greeting = 'Hello, ' + name + '!';  
// 模板字面量简化  
const greeting = `Hello, ${name}!`;

使用展开运算符进行数组和对象操作

// 合并数组  
const combined = [...array1, ...array2];  
// 复制对象  
const clone = { ...original };

使用数组的高阶方法简化循环和数据操作

// 遍历数组并返回新数组  
const doubled = numbers.map(num => num * 2);  
// 过滤数组  
const evens = numbers.filter(num => num % 2 === 0);

使用条件运算符简化条件判断

// 传统条件判断  
let message;  
if (isSuccess) {  
    message = 'success';  
} else {  
    message = 'error';  
}  
// 条件运算符简化  
const message = isSuccess ? 'success' : 'error';

使用对象解构和默认参数简化函数参数

// 传统参数设置默认值  
function greet(name) {  
    const finalName = name || 'Guest';  
    console.log(`Hello, ${finalName}!`);  
}
 // 对象解构和默认参数简化  
function greet({ name = 'Guest' }) {  
    console.log(`Hello, ${name}!`);  
}

使用函数式编程概念如纯函数和函数组合

// 纯函数  
function add(a, b) {  
    return a + b;  
} 
// 函数组合  
const multiplyByTwo = value => value * 2;  
const addFive = value => value + 5;  
const result = addFive(multiplyByTwo(3));

使用对象字面量简化对象的创建和定义

// 传统对象创建  
const person = {  
    firstName: 'John',  
    lastName: 'Doe',  
    age: 30,  
};  
// 对象字面量简化  
const firstName = 'John';  
const lastName = 'Doe';  
const age = 30;  
const person = { firstName, lastName, age };