ES6 new API: Array (two)

New prototype method

1. Array.prototype.copyWithin

   Function type:

   /**
   * @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 the array, from start starting position to end position ( not contain end element at) the end of the element, for shallow copy , and from target at the beginning of the array covers. Finally, return the modified original array.

//不传入参数时，都使用默认值，相当于 [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 ]

There are a few things to note:

First, copyWithin will modify the original array, returns original array after revision , rather than creating a new array.

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

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

Second, when target>=arr.length , will not , and directly return to the original array without any modification.

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

Third, when target , start or end incoming negative , it represents the case counted from the end of the array , if the value is passed -1 , on behalf penultimate a position of the element.

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 ]

2. Array.prototype.fill

   Function type:

   /**
   * @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 array from start starting position to end end (not including end ) portions are assigned value , and then returned array.

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 , the returned original array , and when start or end is negative number , it is also copyWithin same way as 061a4abb247aae.

In addition, the code can also be seen, fill generated vacancies element, and if value value objects , is used when the assignment is object reference . in other words:

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 ] ]

3. Array.prototype.find

   Function type:

   /**
    * @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 returns an array such that the return value of the callback function true of first element, if no such element will return undefined .

console.log([1, 2, 3].find((v) => v >= 2));//2

Before ES6, the use of the indexOf method requires strict matching ( === ) to determine whether the element exists. The some method can customize the callback function for the comparison, but it can only return boolean instead of the element itself.

It should be noted that the number of executions of find of the callback function in is determined based on the subscript array. The range of the subscript [ 0 , arr.length - 1 ] will be executed once. It does not care about the value of the current element, so the current element is vacant when elements, find callback function will in element values as undefined once, and this map , forEach and other functions are different.

[1, , 3, 4].find((v) => console.log(v)); //1 undefined 3 4
[1, , 3, 4].map((v) => console.log(v)); //1 3 4

In addition, when find is executed for the first time, its execution times [ 0 , arr.length - 1 ] have been determined, and will not change . This means that if the length of arr 5 , during the execution of the callback function, we modify arr to make the length 10 , or we delete an element to make the length 4 , The callback function will execute 5 times. When the elements are deleted case, the callback function can not access the element in the implementation, will undefined instead of the element continues.

[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 }

4. Array.prototype.findIndex

   findIndex and find are basically the same, only the return value is different. findIndex returns the subscript of the element that meets the conditions. When there is no such element, it will return -1 .

5. keys，values，entries

   Function type:

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

keys , values , entries do not require any parameters, and all it returns are an iterator. The difference is that the values in the iterator are array subscripts, array elements, and key-value pairs in the form of [ 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 }