优秀简洁的代码往往会让人眼前一亮,赏心悦目
数组去重
- 通过内置数据解构特性进行去重[] => set => []
- 通过遍历并判断是否存在进行去重[many items].forEach(item => (item <不存在于> uniqueArr) && uniqueArr.push(item))
例如:const arr = [1, 2, 2, 4, 4, 5, 6, 6]
- 方法一:const res1 = Array.from(new Set(arr));
- 方法二:const res2= arr.filter((item, index) => {
return arr.indexOf(item, 0) === index;
}) - 方法三:const res3= arr.reduce((prev,cur) => prev.includes(cur) ? prev : […prev,cur],[]);
数组的最后一个元素
- 使用at(-1)获取数组中位置最后的一个元素
例如:const arr = [1, 2, 2, 4, 4, 5, 6, 6]
console.log(arr.at(-1)) // 倒数第一个值
console.log(arr.at(-2)) // 倒数第二个值
console.log(arr.at(0)) // 正数第一个
console.log(arr.at(1)) // 正数第二个
数组对象的相关转换
- 对象到数组:Object.entries()
- 数组转对象:Obecjt.fromEntries()
例如:const arr = [[‘name’: ‘asd’], [age: ‘18’]]
const res = Object.fromEntries(arr) // { name: ‘asd’, age: ‘18’ }
短路操作
通过短路操作避免后续表达式的执行
- a或b:a真b不执行
- a且b:a假b不执行
例如:
或操作a || b:该操作只要有一个条件为真值时,整个表达式就为真;即a为真时,b不执行;
且操作a && b:该操作只要有一个条件为假值时,整个表达式就为假;即a为假时,b不执行;
基于默认值的对象赋值
通过对象解构合并进行带有默认值的对象赋值操
- a或b:{…defaultData, …data}
多重条件判断优化
单个值与多个值进行对比判断时,使用includes进行优化
- [404,400,403].includes
例如 if (type === ‘a’ || type === ‘b’ || type === ‘c’) {} 可以转换成
const typelist = [ ‘a’, ‘b’, ‘c’]
if (typelist.includes(type))
交换两个值
通过对象解构操作进行简洁的双值交换
- [a, b] = [b, a]
解释:这里相当于使用了一个数组对象同时存储了a和b,该数组对象作为了临时变量
之后再将该数组对象通过解构操作赋值给a和b变量即可
位运算
通过位运算提高性能和简洁程度
replace()的回调
通过传入回调进行更加细粒度的操作
sort()的回调
通过传入回调进行更加细粒度的操作
- 根据字母顺序排序
- 根据真假值进行排序
数字升序:arr.sort((a,b)=>a-b)
按字母顺序对字符串数组进行排序:arr.sort((a, b) => a.localeCompare(b))