数组扩展【ES6】

迈克尔·德尔 ：“困难只是暂时的,放弃则是永恒的。坚持下去,你会找到解决的办法。”

目录 数组扩展：扩展运算符：Array.from():Array.of():find：findIndex：与find相对比的findLast【ES13】:与findIndex相对比的findLastIndex【ES13】:fill:flat：flatMap：

数组扩展： 扩展运算符：

能够快速的进行数组的复制、数组的合并、与解构进行结合。

数组的复制：

let arr1 = [1, 2, 3]; let arr2 = arr1.concat(); console.log(arr2.pop());// 3 console.log(arr1); // [1, 2, 3] 因为concat()方法复制的不会之后的操作不会改变原数组 let arr1 = [1, 2, 3]; let arr2 = [...arr1]; arr2.pop(); console.log(arr2); //[1, 2] console.log(arr1); //[1, 2, 3]

数组的合并：

let arr1 = [1, 2, 3]; let arr2 = arr1.concat(4, 5, 6); console.log(arr2); // [1, 2, 3, 4, 5, 6] console.log(arr1); // [1, 2, 3] let arr1 = [1, 2, 3]; let arr2 = [4, 5, 6]; console.log(...arr1, ...arr2); // 1 2 3 4 5 6

与解构进行结合：

let myarr = [1, 2, 3, 4, 5, 6, 7, 8]; let [a, b, ...c] = myarr; console.log(a); // 1 console.log(b); // 2 console.log(c); // [3, 4, 5, 6, 7, 8] Array.from():

我们之前经常用 arguments 获取函数被调用时传入的所有参数。arguments 对象不是真正的数组，但它具有类似数组的属性和方法，如 length 属性和通过索引访问元素的能力。然而，它不支持数组的其他方法，如 push、pop、slice 等。

function myFunction () { console.log(arguments); // Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ] console.log(arguments[0]); // 1 } myFunction(1, 2, 3);

而我们的Array.from可以将类似数组的东西转化为真正的数组。

function myFunction () { console.log(Array.from(arguments));// [1, 2, 3] } myFunction(1, 2, 3); <ul> <li>111111111111</li> <li>111111111111</li> <li>111111111111</li> </ul> <script> let olis = document.querySelectorAll('li'); console.log(Array.from(olis)); </script> Array.of():

将一组值转化为数组，即新建数组。弥补 Array 创建数组只传一个参数的时候的短板，Array 传一个参数的时候，你会创建一个具有指定长度但元素均为 undefined 的新数组。这个参数定义了数组的长度属性。

let arr = [1, 2, 3]; let arr1 = Array(5, 6, 7); let arr2 = Array(3); // 传一个参数的时候，你会创建一个具有指定长度但元素均为 undefined 的新数组。这个参数定义了数组的长度属性 let arr3 = Array.of(8, 9, 10); let arr4 = Array.of(1); console.log(arr); // [1, 2, 3] console.log(arr1); // [5, 6, 7] console.log(arr2); // [empty × 3] console.log(arr3); // [8, 9, 10] console.log(arr4); // [1] 就算传一个参数也可以创建成数组 find：

返回满足条件的第一个元素。

let arr = [11, 12, 13, 14, 15]; let res = arr.find((item) => { return item > 13 }) console.log(res); //14 findIndex：

返回第一个满足条件元素的索引值。

let arr = [11, 12, 13, 14, 15]; let res = arr.findIndex((item) => { return item > 13 }) console.log(res); //3 与find相对比的findLast【ES13】:

从后往前找，返回后面第一个满足条件的元素。

let arr = [11, 12, 13, 14, 15]; let res = arr.findLast((item) => { return item > 13 }) console.log(res); //15 与findIndex相对比的findLastIndex【ES13】:

从后往前找，返回后面第一个满足条件元素的索引值。

let arr = [11, 12, 13, 14, 15]; let res = arr.findLastIndex((item) => { return item > 13 ) console.log(res); //4 fill:

可以充当填充的作用！

let arr = new Array(3).fill('kitty'); console.log(arr);// ['kitty', 'kitty', 'kitty']

可以用来替换元素（可以全部替换也可以选择起始位置和结束为止来进行替换元素）：

let arr = [11, 22, 33]; let arr1 = [11, 22, 33]; console.log(arr.fill('Alice')); // ['Alice', 'Alice', 'Alice'] console.log(arr1.fill('Alice', 1, 2)); //[11, 'Alice', 33] flat：

flat 方法用于将嵌套数组“展平”成一个新数组，即移除数组的嵌套层级。它接受一个可选的深度参数，表示要展平的嵌套层数。如果未指定深度，则默认为 1，意味着它只会展平一层嵌套的数组。

let arr = [1, 2, 3, [4, 5, 6]] console.log(arr.flat());// [1, 2, 3, 4, 5, 6] console.log(arr);// [1, 2, 3, [4, 5, 6]] flat不会改变原数组 let arr = [ ['安庆', '安阳', '鞍山'], ['北京', '保定', '包头'] ] console.log(arr.flat()); // ['安庆', '安阳', '鞍山', '北京', '保定', '包头'] flatMap：

flatMap 方法首先使用提供的映射函数对数组中的每个元素进行映射，然后将结果展平到一个新数组中。与 map 方法不同，flatMap 会将映射函数返回的每个数组展平，而不是保留它们作为嵌套数组。这使得 flatMap 特别适合于处理嵌套数组，并且想要将嵌套的元素映射到一个单一的数组中的情况。

let arr = [ { name: "A", list: ['安庆', '安阳', '鞍山'] }, { name: "B", list: ['北京', '保定', '包头'] } ] let res = arr.flatMap(function (item) { return item.list }) console.log(res); // ['安庆', '安阳', '鞍山', '北京', '保定', '包头']