ES6数组 - 新增的数组接口方法

一：find() 返回符合条件的第一个元素
find方法接收2个参数，第一个参数为一个回调函数，第二个参数指定回调函数里的this。大概如下：find(function(value, index, thisArray){}, this)。
其中，回调函数本身接受三个参数：元素的值，元素的下标，数组本身；回调函数的功能逻辑是想要寻找的元素应当满足的某种条件。一旦某个元素满足这个条件，则立即返回当前元素，不再查找。这就意味着，find()方法会返回满足条件的第一个元素。我们来看一下具体示例：

let obj = {level: 3};
let array = [1, 2, 3, 4, 5];
let foundItem = array.find(function (value, index, array) {
    return value > this.level;
}, obj);
console.log(foundItem); // 4

我们通过find()方法的第二个参数传入obj，这时候回调函数里面的this.level就是obj.level为3，我们找到array里第一个大于3的元素，所以得到4.

这里有一点需要注意的是，如果你要指定find()的第二个参数，那么回调函数不能用箭头函数。我们都知道箭头函数的this在其定义的时候就确定，不能给其指定一个新的this，这样是不起作用的。

二：findIndex() 返回符合条件的第一个元素下标
findIndex()和find()的参数一样，唯一的区别是findIndex()返回的是第一个满足条件的元素的下标：

let obj = {name: 'a'};
let array = ['a', 'b', 'a'];
let foundIndex = array.findIndex(function (value, index, array) {
    return value === this.name;
}, obj);
console.log(foundIndex); // 0

返回第一个满足条件的元素的下标：0。

三：fill()
fill()方法用某个值填充数组，它接受三个参数, fill(value, startIndex, endIndex)：

1: value用来填充的数值
2: startIndex 填充的开始坐标
3: endIndex 填充结束的坐标，不包含此坐标

我们来看看具体的示例：

1: 三个参数都齐全的情况

let array = [0, 1, 2, 3];
array.fill('a', 0, 2);
console.log(array); //["a", "a", 2, 3]

2: 不传startIndex和endIndex的情况

let array = [0, 1, 2, 3];
array.fill('a');
console.log(array); //["a", "a", "a", "a"]

这种情况即是用第一个参数填充整个数组。

3: 不传endIndex的情况

let array = [0, 1, 2, 3];
array.fill('a', 1);
console.log(array);//[0, "a", "a", "a"]

这种情况即是用第一个参数从startIndex一直填充到数组结尾。

四：copyWithin()
copyWithin()方法，顾名思义是拷贝数组自身的某些数据来填充数组本身。它也接受三个参数，copyWithin(pastedStartIndex, copyStartIndex, copyEndIndex):

1: pastedStartIndex 开始黏贴数据的坐标
2: copyStartIndex copy开始的坐标
3: copyEndIndex copy结束的坐标，但是不包括此坐标

来看看代码示例：

1: 三个参数都齐全的情况

let array = [0, 1, 2, 'D', 'E', 'F', 'G', 'H', 'I'];
array.copyWithin(3, 0, 5);
console.log(array); // [0, 1, 2, 0, 1, 2, "D", "E", "I"]

我们来分析一下结果的由来：
1: copyStartIndex = 0，copyEndIndex = 5，那么被copy的元素是： 0, 1, 2, 'D', 'E' 。
2: pastedStartIndex = 3，那就是从原本的'D'元素所在的坐标开始一一对应地用0, 1, 2, 'D', 'E'覆盖原本的元素 ，其他位置上的元素不变。
3: 所以得到结果：[0, 1, 2, 0, 1, 2, "D", "E", "I"]

2: 没有copyStartIndex和copyEndIndex的情况

let array = [0, 1, 2, 'D', 'E', 'F', 'G', 'H', 'I'];
array.copyWithin(3);
console.log(array); // [0, 1, 2, 0, 1, 2, "D", "E", "F"]

copyStartIndex的默认值为0，copyEndIndex = array.length;所以当不给以上参数时，表示拷贝整个数组。

3: 没有copyEndIndex的情况

其实上面第二点已经说了，copyEndIndex默认值为array.length。所以copyEndIndex没有传的情况，就表示从copyStartIndex开始copy到整个数组结尾：

let array = [0, 1, 2, 'D', 'E', 'F', 'G', 'H', 'I'];
array.copyWithin(3, 4);
console.log(array); //[0, 1, 2, "E", "F", "G", "H", "I", "I"]

以上就是关于ES6给Array新增的接口方法。