关于javascript:ES6新增APIArray篇二

Array.prototype.copyWithin

函数类型：

/**
* @author: forceddd
* @desc:  将数组中的，从 start 地位开始至 end 地位（不蕴含 end 处的元素）完结的元素，进行浅复制，并从 target 处开始笼罩该数组。最初将批改后的数组返回
* @param {number} target 复制到数组的起始笼罩地位, 默认值为 0
* @param {number} start 开始复制元素的地位，默认值为 0
* @param {number|undefined} end 完结复制元素的地位，默认值为数组长度
* @return {any[]} 扭转之后的数组
*/
<T>(target?: number, start?: number, end?: number | undefined)=> T[]

copyWithin将数组中的，从 start 地位开始至 end 地位（不蕴含 end 处的元素）完结的元素，进行 浅复制 ，并从target 处开始笼罩该数组。最初将批改后的原数组返回。

// 不传入参数时，都应用默认值，相当于 [1, 2, 3].copyWithin(0,0,3)
// 首先复制了数组中的 [0, 3) 的局部，即[1,2,3]
// 而后从数组的下标 0 处开始笼罩，笼罩之后失去[1, 2, 3]
console.log([1, 2, 3].copyWithin()); //[1, 2, 3]
// 从数组的下标 1 处开始笼罩，复制的局部为[1, 2, 3]，从原数组的下标 1 处开始笼罩，原数组只残余两个地位，所以后果为[1, 1, 2]
console.log([1, 2, 3].copyWithin(1)); //[1, 1, 2]

有几点须要留神的是：

第一，copyWithin会批改原数组，返回的是 批改之后的原数组，而不是创立的一个新数组。

const arr = [1, 2, 3];
const res = arr.copyWithin(1, 0);

console.log(arr === res, arr);//true [1, 1, 2]

第二，当 target>=arr.length 时，不会产生复制行为，间接返回没有进行任何批改的原数组。

const arr = [1, 2, 3];
const res = arr.copyWithin(6, 2);
// 返回没有进行任何批改的原数组
console.log(arr === res, arr); //true [1, 2, 3]

第三，当 target、start 或者 end 传入正数时，代表此时的 从数组开端开始计算 ，如果传入的值是-1，就代表 倒数第一个 元素的地位。

const arr = [1, 2, 3];
const res = arr.copyWithin(-2, 2);
// 从下标 2 开始复制失去的复制局部为 [3]
// 从 -2，即倒数第二个元素开始笼罩，就失去了 [1, 3, 3]
console.log(arr === res, arr); //true [1, 3, 3]

Array.prototype.fill

函数类型：

/**
* @author: forceddd
* @desc: 将数组从 start 地位开始至 end 完结（不包含 end）的局部都赋值为 value
* @param {any} value 用来给数组中元素赋值的值
* @param {number} start 赋值的起始地位，默认为 0
* @param {number} end 赋值的完结地位，默认为数组的长度
* @return {*} 返回值为赋值之后的原数组
*/
(value?: any, start?: number, end?: number) => any[];

fill 将数组从 start 地位开始至 end 完结（不包含end）的局部都赋值为value，而后将数组返回。

console.log(Array(4).fill()); //[undefined, undefined, undefined, undefined]
console.log(Array(4).fill(0)); //[0, 0, 0, 0]
console.log(Array(4).fill(0, 1, 2)); //[<1 empty item>, 0, <2 empty items>]

fill和 copyWithin 一样，返回的也是 原数组 ，并且当start 或者 end 为正数时，也是和 copyWithin 雷同的解决形式。

除此之外，从代码中也能够看出，fill会产生空位元素，而且如果 value 值为对象，则赋值时应用的是 对象的援用。换句话说：

const v = [];
const arr = Array(4).fill(v);
console.log(arr[0] === arr[1]); //true
arr[0].push(1);
console.log(arr);//[[ 1], [1], [1], [1] ]

Array.prototype.find

函数类型：
```
/**
* @author: forceddd
* @desc:   找到数组中使得 findFn 返回值为 true 的第一个元素并将其返回
* @param {FindFn} findFn 数组每一项上执行的函数
* @param {any} thisArg 回调函数 findFn 中的 this 对象
* @return {*}
*/
(findFn: FindFn, thisArg?: any) => any;
/**
* @author: forceddd
* @param {any} item 数组中的元素
* @param {number} index 以后元素在数组中的下标
* @param {any} arr 数组实例
* @return {boolean} 
*/
type FindFn = (item: any, index: number, arr: any[]) => boolean;
```
find会返回数组中使得回调函数返回值为 true 的第一个 元素，如果没有这样的元素，会返回undefined。
```
console.log([1, 2, 3].find((v) => v >= 2));//2
```
在 ES6 之前，应用 indexOf 办法须要进行严格匹配（===）能力断定元素是否存在，应用 some 办法尽管能够自定义比对的回调函数，然而只能返回boolean，而不能取得元素自身。

须要留神的是，find中回调函数的 执行次数 是依据数组的下标决定的，下标 [0 , arr.length - 1] 的范畴都会执行一次，它不关怀以后元素的值，所以在以后元素是空位元素的时候，find中的回调函数会把 元素值 作为 undefined 执行一次，这和 map、forEach 等函数是不同的。
```
[1, , 3, 4].find((v) => console.log(v)); //1 undefined 3 4
[1, , 3, 4].map((v) => console.log(v)); //1 3 4
```
另外，当 find 中的回调函数第一次执行时，它的执行次数 [0 , arr.length - 1] 就曾经确定了，并且 不会再扭转 。这也就意味着，假如咱们要解决的数组arr 长度为 5，在回调函数执行的过程中，咱们批改了arr，使其长度成为了10，或者咱们删除了一个元素，使其长度变为4，回调函数都会执行5 次。当元素被删除的状况下，回调函数在执行时拜访不到该元素，会以 undefined 代替该元素继续执行。
```
[1, 2, 3, 4].find((v, i, arr) => {
// 删除一个元素
i === 0 && arr.pop();
console.log({v, i});
}); 
//{v: 1, i: 0}
//{v: 2, i: 1}
//{v: 3, i: 2}
//{v: undefined, i: 3}
```
Array.prototype.findIndex

findIndex与 find 办法基本相同，只有返回值有区别，findIndex返回的是符合条件的元素下标，在没有这样的元素时，会返回-1。

keys，values，entries

函数类型：

type Keys = () => Iterator<number>;
type Values = () => Iterator<any>;
type Entries = () => Iterator<[number, any]>;

keys，values，entries都不须要任何参数，返回的都是一个迭代器。不同点在于迭代器中的值别离是数组的下标、数组的元素以及数组的下标和数组元素组成的 [i , v] 模式的键值对。

const it = ['a', 'b', 'c'].entries();
console.log(it.next()); //{value: [ 0, 'a'], done: false }
console.log(it.next()); //{value: [ 1, 'b'], done: false }
console.log(it.next()); //{value: [ 2, 'c'], done: false }
console.log(it.next()); // {value: undefined, done: true}

新增的原型办法