Some new methods of ES6 array

Table of contents

        1.Array.from()

        2.Array.of()

        3.Array.copyWithin()

        4.Array.find()和Array.findIndex()

        5.Array.fill()

        6.Array.keys()、Array.values()和Array.entries()

        7.Array.includes()

        8.Array.flat()和Array.flatMap()


 

        1.Array.from()

        Array.from()method creates a new, shallow copy of an Array instance of an Array-like or Iterable object.

console.log(Array.from('foo'));
// 输出: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
// 输出: Array [2, 4, 6]

        2.Array.of()

        Array.of()method creates a new array instance with a variable number of arguments, regardless of the number or types of arguments.

        Array.of()Array The difference between the constructor  and  the constructor is the handling of integer parameters: Array.of(7) an array with a single element  7 is created  , while  Array(7) an empty array of length 7 is created ( note: this refers to an array with 7 empty slots, not an array with undefinedarray of 7 )

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

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

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

   

        3.Array.copyWithin()

        copyWithin()The method shallow copies part of an array to another location in the same array and returns it without changing the length of the original array.

const array1 = ['a', 'b', 'c', 'd', 'e'];

// 将索引3处的元素复制到索引0
console.log(array1.copyWithin(0, 3, 4));
// 输出: Array ["d", "b", "c", "d", "e"]

// 将从索引3到结尾的所有元素复制到索引1
console.log(array1.copyWithin(1, 3));
// 输出: Array ["d", "d", "e", "d", "e"]
// 这里因为我们需要赋值的元素只是一个,所以我们选中n个复制的元素后,复制时会将选中的元素全部复制到需要赋值的元素处,需要赋值的元素后的n-1个元素也会被赋值改变

        4.Array.find()和Array.findIndex()

        The find() method returns the first value in the array that satisfies the condition, otherwise it returns undefined. The findIndex() method returns the index value of the first element satisfying the condition in the array, or -1 if no element meeting the condition is found.

const array1 = [5, 12, 8, 130, 44];

const result1 = array1.find(element => element > 10)
console.log(result1)        //12        //返回的是满足条件的第一个值

const result2 = array1.findIndex(element => element > 10)
console.log(result2)        // 1        //返回满足条件的第一个值的索引

        5.Array.fill()

        The fill() method uses a fixed value (value) to fill all elements in the array from the start index (start) to the end index (end). Does not include terminating index.

const array1 = [1, 2, 3, 4];

// f将索引2-4之间的值填充为0
console.log(array1.fill(0, 2, 4));
// 输出: [1, 2, 0, 0]

// 从索引1开始全部填充为5
console.log(array1.fill(5, 1));
// 输出: [1, 5, 5, 5]

console.log(array1.fill(6));
// 输出: [6, 6, 6, 6]

        6.Array.keys()、Array.values()和Array.entries()

        keys()method returns an object containing each indexed key in the array Array Iterator.

        values() method returns a new  Array Iterator object containing the values ​​for each index of the array.

        entries()method returns a new Array Iterator object containing key/value pairs for each index in the array.     

let array1 = ['a','b','c']

for(let index of array1.keys()){
    console.log(index)
}
//0    //1    //2

for(let index of array1.values()){
    console.log(index)
}
//'a'    //'b'    //'c'

for(let index of array1.entries()){
    console.log(index)
}
//[0,'a']    //[1,'b']    //[2,'c']

        7.Array.includes()

                        The includes() method is used to check whether an element is contained in the array, and returns true if it contains an element, otherwise it returns false.

let array1 = ['a','b','c']

let result1 = array1.includes('a')
let result2 = array1.includes('d')

console.log(result1)        //true
console.log(result1)        //false

        8.Array.flat()和Array.flatMap()

        flat() The method will recursively traverse the array according to a specified depth, and combine all the elements with the elements in the traversed sub-array to return a new array.

        flatMap() method first maps each element using the map function, then compresses the result into a new array. It is  almost the same as map attached to a flat  with a depth of 1   , but  flatMap is usually slightly more efficient when combined into one method.

const arr1 = [0, 1, 2, [3, 4]];

console.log(arr1.flat())
// 输出: [0, 1, 2, 3, 4]

const arr2 = [0, 1, 2, [[[3, 4]]]];

console.log(arr2.flat(2));
// expected output: [0, 1, 2, [3, 4]]

console.log(arr2.flat(3));
// expected output: [0, 1, 2, 3, 4]
// flat()  括号内有一个可选的参数deepth,表示排平数组的层数
var arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]);
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

// 只有一层
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

Guess you like

Origin blog.csdn.net/Jsy_997/article/details/124590406