ES6 新增的 Array 操作

https://juejin.im/post/5c846af3f265da2da835a875

 

1、find 和 findIndex

find() 传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回这个元素，并且终止搜索。

const arr = [1, "2", 3, 3, "2"]
console.log(arr.find(n => typeof n === "number")) // 1
复制代码

findIndex() 与 find() 类似，只是返回的是，找到的这个元素的下标。

const arr = [1, "2", 3, 3, "2"]
console.log(arr.findIndex(n => typeof n === "number")) // 0

2、fill

用指定的元素填充数组，其实就是用默认内容初始化数组。基本用法：[].fill(value, start, end)

该函数有三个参数：填充值(value)，填充起始位置(start，可以省略)，填充结束位置(end，可以省略，实际结束位置是end-1)。

// 采用一个默认值，填充数组
const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
arr1.fill(7);
console.log(arr1); // [7,7,7,7,7,7,7,7,7,7,7]

// 制定开始和结束位置填充，实际填充结束位置是前一位。
const arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
arr2.fill(7, 2, 5);
console.log(arr2); // [1,2,7,7,7,6,7,8,9,10,11]

// 结束位置省略，从起始位置到最后。
const arr3 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
arr3.fill(7, 2);
console.log(arr3); // [1,2,7,7,7,7,7,7,7,7,7]

3、from

将类似数组的对象（array-like object）和可遍历（iterable）的对象转为真正的数组。

const set = new Set(1, 2, 3, 3, 4);
Array.from(set)  // [1,2,3,4]

Array.from('foo'); // ["f", "o", "o"]

4、of

Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

Array.of() 和 Array 构造函数之间的区别在于处理整数参数：Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个长度为7的空数组（注意：这是指一个有7个空位的数组，而不是由7个undefined组成的数组）。

Array.of(7);       // [7] 
Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

5、copyWithin

选择数组的某个下标，从该位置开始复制数组元素，默认从0开始复制。也可以指定要复制的元素范围。基本用法：[].copyWithin(target, start, end)

const arr = [1, 2, 3, 4, 5];
console.log(arr.copyWithin(3));
 // [1,2,3,1,2] 从下标为3的元素开始，复制数组，所以4, 5被替换成1, 2

const arr1 = [1, 2, 3, 4, 5];
console.log(arr1.copyWithin(3, 1)); 
// [1,2,3,2,3] 从下标为3的元素开始，复制数组，指定复制的第一个元素下标为1，所以4, 5被替换成2, 3

const arr2 = [1, 2, 3, 4, 5];
console.log(arr2.copyWithin(3, 1, 2));
// [1,2,3,2,5] 从下标为3的元素开始，复制数组，指定复制的第一个元素下标为1，结束位置为2，所以4被替换成2

6、includes

判断数组中是否存在该元素，参数：查找的值、起始位置，可以替换 ES5 时代的 indexOf 判断方式。

const arr = [1, 2, 3];
arr.includes(2); // true
arr.includes(4); // false
复制代码

另外，它还可以用于优化 || 的判断写法。

if (method === 'post' || method === 'put' || method === 'delete') {
    ...
}

// 用 includes 优化 `||` 的写法
if (['post', 'put', 'delete'].includes(method)) {
    ...
}

7、entries、values 和 keys

entries() 返回迭代器：返回键值对

//数组
const arr = ['a', 'b', 'c'];
for(let v of arr.entries()) {
    console.log(v)
}
// [0, 'a'] [1, 'b'] [2, 'c']

//Set
const arr = new Set(['a', 'b', 'c']);
for(let v of arr.entries()) {
    console.log(v)
}
// ['a', 'a'] ['b', 'b'] ['c', 'c']

//Map
const arr = new Map();
arr.set('a', 'a');
arr.set('b', 'b');
for(let v of arr.entries()) {
    console.log(v)
}
// ['a', 'a'] ['b', 'b']
复制代码

values() 返回迭代器：返回键值对的 value

//数组
const arr = ['a', 'b', 'c'];
for(let v of arr.values()) {
    console.log(v)
}
//'a' 'b' 'c'

//Set
const arr = new Set(['a', 'b', 'c']);
for(let v of arr.values()) {
    console.log(v)
}
// 'a' 'b' 'c'

//Map
const arr = new Map();
arr.set('a', 'a');
arr.set('b', 'b');
for(let v of arr.values()) {
    console.log(v)
}
// 'a' 'b'
复制代码

keys() 返回迭代器：返回键值对的 key

//数组
const arr = ['a', 'b', 'c'];
for(let v of arr.keys()) {
    console.log(v)
}
// 0 1 2

//Set
const arr = new Set(['a', 'b', 'c']);
for(let v of arr.keys()) {
    console.log(v)
}
// 'a' 'b' 'c'

//Map
const arr = new Map();
arr.set('a', 'a');
arr.set('b', 'b');
for(let v of arr.keys()) {
    console.log(v)
}
// 'a' 'b'