New prototype method

  1. Array.prototype.copyWithin

    Function type:

    /** * @author: forceddd * @desc: shallow copy all elements in an array from start to end, and overwrite the array from target. * @param {number} target = 0 * @param {number} start = 0 The default value is 0 * @ param {number | undefined} end end replication element position, the default value is an array length * @ return {any []} change after array * / < T > (target? : number, start? : number, end? : number | undefined)=> T[]Copy the code

    CopyWithin makes a shallow copy of the elements in the array starting at start and ending at end, excluding the elements at end, and overwrites the array starting at target. Finally, the modified array is returned.

    CopyWithin (0,0,3) // First copy the part of the array [0,3], that is, [1,2,3] // then overwrite the array from the subscript 0. After overwriting, you get [1, 2, 3] console.log([1, 2, 3].copyWithin()); [1, 2, 3] [1, 2, 3] [1, 2, 3] So the result of [1, 1, 2]. The console log ([1, 2, 3]. CopyWithin (1)); / / [1, 1, 2]Copy the code

    There are a few things to note:

    First, copyWithin modifies the original array and returns the modified array instead of creating a new one.

    const arr = [1, 2, 3]; const res = arr.copyWithin(1, 0); console.log(arr === res, arr); //true [ 1, 1, 2 ]Copy the code

    Second, when target>=arr. Length, no copy occurs and the array is returned without modification.

    const arr = [1, 2, 3]; const res = arr.copyWithin(6, 2); // Return the original array console.log(arr === res, arr) without any modifications; //true [ 1, 2, 3 ]Copy the code

    Third, when target, start, or end is passed a negative number, it is calculated from the end of the array. If the value passed is -1, it is the position of the penultimate element.

    const arr = [1, 2, 3]; const res = arr.copyWithin(-2, 2); [1, 3, 3] console.log(arr === res, arr); //true [ 1, 3, 3 ]Copy the code

  2. Array.prototype.fill

    Function type:

    /** * @author: forceddd * @desc: Value * @param {any} Value Specifies the value used to assign values to elements in the array * @param {number} start specifies the starting position of the assignment. Default is 0 * @param {number} end end assignment position, default is the length of the array * @return {*} return value of the assigned array */ (value? : any, start? : number, end? : number) => any[];Copy the code

    Fill assigns value to the portion of the array from start to end (excluding end) and returns the 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> ]
Copy the code

    Fill, like copyWithin, returns the original array and is treated the same way as copyWithin when start or end is negative.

    In addition, as you can see from the code, fill produces empty elements, and if value is an object, the assignment uses a reference to the object. 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]]Copy the code

  3. Array.prototype.find

    Function type:

    /** * @author: forceddd * @desc: Find the first element in the array that made findFn return true and return it * the function that is executed on each item of the @param {findFn} array * @param {any} thisArg callback in findFn * @return {*} */ (findFn: FindFn, thisArg? : any) => any; /** * @author: Forceddd * @param {any} The element in the item array * @param {number} index The subscript of the current element in the array * @param {any} arr array instance * @return {Boolean} */ type FindFn = (item: any, index: number, arr: any[]) => boolean;Copy the code

    Find returns the first element in the array that causes the callback to return true, or undefined if there is no such element.

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

    Prior to ES6, using indexOf required a strict match (===) to determine the existence of an element. Using some allowed you to customize the callback function for the comparison, but only returned Boolean, not the element itself.

    The number of times the find callback is executed is determined by the index of the array. The range of indices [0, arr. Length-1] is executed once. The callback function in find executes the element value as undefined, unlike functions like map and forEach.

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

    In addition, when the callback function in find is executed for the first time, its number of executions [0, arr.Length-1] is determined and does not change. This means that if we’re dealing with an array arR of length 5 and we change the arR to length 10 or we delete an element to length 4 during the callback, the callback will execute 5 times. When an element is deleted, the callback function cannot access the element during execution and continues execution with undefined instead.

    [1, 2, 3, 4] find (= (v, I, arr) > {/ / delete an element I = = = 0 && arr. Pop (); console.log({ v, i }); }); //{ v: 1, i: 0 } //{ v: 2, i: 1 } //{ v: 3, i: 2 } //{ v: undefined, i: 3 }Copy the code

  4. Array.prototype.findIndex

    The findIndex method is the same as the find method except that it returns the index of the element. If there is no such element, it returns -1.

  5. Keys, values, entries

    Function type:

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

    Keys, values, and entries do not require any parameters and return an iterator. The difference is that the values in the iterator are subscripts of the array, elements of the array, and key-value pairs of the array’s subscripts and elements in the form [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 }
Copy the code