Fork me on GitHub

代码优化笔记

Array.find代替findIndex

查找一个数组中的元素是否存在并获取的时候,我们通常使用findIndex,找到index再根据index获取到,例如:

1
2
3
const arr = [{key: 1}, {key: 2}];
const index = arr.findIndex(row => row.key === 2);
console.log(arr[index]);

以上代码可以简化成这样:

1
2
const arr = [{key: 1}, {key: 2}];
console.log(arr.find(row => row.key === 2));

当然,如果不想获取,只想判断是否存在该元素,可以直接

=> true```
1
2
3
4
5
6
7
8
9
### [...]代替concat
连接两个数组的方法有很多,我就说几种,比如:
```js
const a = [1, 2, 3];
const b = [4, 5, 6];
let c;

  1. 将两个数组使用concat连接,产生c数组;
1
2
3
产生新的数组c
c = a.concat(b);
console.log(c); // [1, 2, 3, 4, 5, 6]
  1. 将b迭代push到a
1
2
3
4
5
6
7
不产生新的数组
b.forEach(row => a.push(row));
console.log(a); // [1, 2, 3, 4, 5, 6]
或者
Array.prototype.push.apply(a, b);
Array.prototype.push.call(a, ...b);
  1. 使用es6的扩展运算符
    1
    2
    3
    4
    ```js
    c = [...a, ...b];
    a.push(...b);

灵活使用结构赋值

平时我们在获取到接口返回的数据的时候,会发现,后台的数据命名和我们前端的大不相符,很是诡异,同时可能和前端要渲染的事先定义的变量名有不同,我们通常会这么做:

1
2
3
4
5
6
const { his_evidences, his_flag } = data;
const myData = {
myEvidences: his_evidences,
myFlag: his_flag
}

当需要获取的属性多了,代码就很累赘了;这时我们可以充分利用结构赋值的一个特性,即结构赋值可以分配变量名,如下:

1
2
const { his_evidences: myEvidences, his_flag: myFlag } = data;
const myData = { myEvidences, myFlag };

~和indexOf()结合使用

~符号表示按位取反,有一个公式,

= -(x + 1);```,所以当x=-1的时候~x为false(0);明白了这个特性,那么平时我们在操作findIndex的时候就可以派上用场了。比如:
1
2
3
4
5
6
7
8
9
10
11
12
```js
const arr = [{key: 1}, {key: 2}];
// 代替arr.findIndex(row => row.key === 1) !== -1
if(~arr.findIndex(row => row.key === 1)) {
console.log('find it');
}
if(arr.find(row => row.key === 1)) {
console.log('find it');
}

生成N个[2,32)范围内的不重复整数

1
2
3
4
5
6
7
8
let func = n => Array(31)
.fill()
.map((item, index) => ({num: index+2, hash: Math.random()}))
.sort((a,b) => a.hash - b.hash)
.map(a => a.num)
.slice(0, n)
func(10); // [19, 25, 20, 22, 18, 23, 31, 29, 15, 4]

Object.values() 的应用

平时的应用场景中,常常会用到数据的解析,例如一个数组格式为

1
2
3
4
5
const arr = [
{name: 'candy', value: 2},
{name: 'xx', value: 3},
{name: 'dd', value: 4}
]

想要得到

1
2
3
4
5
{
candy: 2
xx: 3,
dd: 4
}

在早些时候大多数人都会使用常规的数组迭代,然后属性遍历的方法,循环遍历数组元素,然后取出name作为key,value作为值得到结果,只需一行代码就解决。

1
2
arr.map(({name, value}, i) => ({[name]: value})).reduce((prev, next) => Object.assign({}, prev, next));
-------------本文结束感谢您的阅读-------------
如果您觉得受益了,欢迎打赏鼓励。