ES6数组新增的一些方法

目录

        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()方法对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

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()方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

        Array.of() 和 Array 构造函数之间的区别在于处理整数参数：Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个长度为7的空数组（注意：这是指一个有7个空位(empty)的数组，而不是由7个undefined组成的数组）

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()方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。

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()

        find()方法返回数组中第一个满足条件的值，否则返回undefined。findIndex()方法返回数组中第一个满足条件的元素的索引值，若没有找到满足条件的元素，则返回-1.

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()

        fill()方法用一个固定值（value）来填充数组中从开始索引（start）到结束索引（end）在内的所有元素。不包括终止索引。

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()方法返回一个包含数组中每个索引键的Array Iterator对象。

        values() 方法返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值。

        entries()方法返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。     

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()

                        includes()方法用于检测数组中是否含有某个元素，含有元素则返回true，否则返回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() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

        flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 连着深度值为1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。

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