??、|| 运算符进行简化
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 };