数组扩展

1 扩展运算符

1.1什么是扩展运算符

扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列，目前也可以用来展开数组。

let arr = [1, 2, 3];
console.log(...arr);

console.log([1,2,...[3,4,5],6]);//[1,2,3,4,5,6]Copy to clipboardErrorCopied

该运算符常常用于函数调用。

//2.抓住一一对应关系
function fn(x, y, z) {
    console.log(x, y, z)
}
fn(...arr);Copy to clipboardErrorCopied

1.2 其他应用

• 复制数组
• 合并数组
• 解构赋值
• 字符串转换为数组

// 1.复制数组：（ES5中直接复制，会产生引用关系）（ES5可以使用concat方法复制数组）
let arr2 = [1, 2, 3];
let arr3 = [...arr2];
arr3.push(4);
console.log(arr2, arr3);

//2.合并数组
let arr4 = [...arr2, ...arr3];
console.log(arr4);

//3.解构复制
//生成一个数组 (此时扩展运算符必须在最后一个)
let [a, b, ...newarr] = [1, 2, 3, 4, 5, 5, 6, 8, 9];
console.log(newarr);

//4.字符串转数组
let arr5 = [..."hello"];
console.log(arr5);Copy to clipboardErrorCopied

2 数组的新方法

2.1 Array对象的新方法

Array.from

Array.from 把伪数组转换成数组(可以使用数组的方法)

let oLis = document.getElementsByTagName("li");//伪数组
for (let i in oLis) {
    console.log(i)//有问题
    oLis[i].style.color = "red";
}

//伪数组使用数组的方法也不可以
oLis.forEach(function (item, index) {
    console.log(item, index)
});//oLis.forEach is not a function

//3.使用Array.from
// console.log(Array.from(oLis));
// for (let i in Array.from(oLis)) {
//     oLis[i].style.color = "red";
// }Copy to clipboardErrorCopied

Array.of

将一组数字转换成数组 弥补Array的不足

let arr1 = Array.of(1, 2, 3, 4);
console.log(arr1);
let arr2 = Array.of(1);
console.log(arr2);Copy to clipboardErrorCopied

2.2 Array原型上的新方法

copyWithin

数组实例的copyWithin()方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组

它接受三个参数。

• target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
• start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示从末尾开始计算。
• end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算。

{
    let arr = [1, 2, 3, 4, 5, 6, 7, 8];
    arr.copyWithin(0, 4, 6);
    console.log(arr);//[5, 6, 3, 4, 5, 6, 7, 8]
}
{
    let arr = [1, 2, 3, 4, 5, 6, 7, 8];
    arr.copyWithin(0, 3);
    console.log(arr);// [4, 5, 6, 7, 8, 6, 7, 8]
}Copy to clipboardErrorCopied

fill

使用固定值填充数组

fill方法用于空数组的初始化非常方便。数组中已有的元素，会被全部抹去。

fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。

let arr2 = [1, 2, 3, 4, 5, 6, 7, 8];
arr2.fill("a");
console.log(arr2);

['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']Copy to clipboardErrorCopied

entries()，keys() 和 values()

ES6 提供三个新的方法——entries()，keys()和values()——用于遍历数组。它们都返回一个遍历器对象,可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

//3.entries,keys,values  配合for of解构遍历数组的
//keys 是所有数组的下标
let arr3 = ["a", "b", "c", "d", "e"];
console.log(arr3.keys());//Array Iterator
for (index of arr3.keys()) {
    console.log(index);
}
//values 所有数组的值
for (item of arr3.values()) {
    console.log(item);
}
//values
for (item of arr3.entries()) {
    console.log(item);
}Copy to clipboardErrorCopied

find() 和 findIndex()

数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined

let arr4 = ["a", "b", "c", "d", "e"];
let result = arr4.find(function (item, index, arr) {
    console.log(item, index, arr)
    return typeof item == "string"
})
console.log(result);


let arr4 = [{name:"xiaowang1"},{name:"xiaowang2"},{name:"xiaowang3"}];
let result = arr4.findIndex(function (item, index, arr) {
    return typeof item.name == "xiaowang2"
})
console.log(result);Copy to clipboardErrorCopied

includes()

includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似

let arr6 = [1, 2, 3, ["a"]];
console.log(arr6.includes(1));//true
console.log(arr6.includes(["a"]));//falseCopy to clipboardErrorCopied

flat()

• 数组的成员有时还是数组，Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。

• flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1

• 如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数

{
    //二维数组
    let arr = [1, 2, [3, 4]];
    console.log(arr.flat())
}
{
    //多维数组 想拉平 可以传入参数
    let arr = [1, 2, [3, [5, 6, 7]]];
    console.log(arr.flat(2))
}
{
    //如果不知道自己的数组有多少层  那么可以传递infinity 代表无穷大
    let arr = [1, 2, [3, [5, 6, 7]]];
    console.log(arr.flat(Infinity))
}