24-数组的扩展

一、运算符

1. rest参数 ...变量名，主要用于函数的调用

{
    function fn(...arg){  //类似于arguments对象
        console.log(arg)
    }
    fn(1,2,3)
}

二、方法

1. Array.from()方法：

用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。

实际应用中，常见的类似数组的对象是DOM操作返回的NodeList集合，以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组。

{
    let uls = document.getElementsByTagName("li");
    let ulArr = Array.from(uls);
    ulArr.push('a')
    console.log(ulArr)   // [li, li, "a"]
} 

function fn(){
    console.log(arguments)
    let arr = Array.from(arguments);
    arr.push(4)
    console.log(arr)
}
fn(1,2,3)

2. Array.of()方法：把一组值转换成数组

{
    console.log( Array.of(1,2,3,4,"a")) //[1, 2, 3, 4, "a"]
}

3. copyWithin()：

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

Array.prototype.copyWithin(target, start = 0, end = this.length)

target（必需）：从该位置开始替换数据。
start（可选） ： 从该位置开始读取数据，默认为0。如果为负值，表示倒数。
end（可选） ： 到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。
这三个参数都应该是数值，如果不是，会自动转为数值。

{ 
    //正数
    console.log(["a", "b", "c", 40, 50].copyWithin(0, 3, 5)) //[40, 50, "c", 40, 50]
    // 第一个参数是被替换数据的开始位置
    // 第二个参数是替换数据开始的位置，包含此位置数据，从0开始
    // 第三个参数是替换数据结束的位置，不包含此位置数据，从0开始

    //负数
    console.log([1, 2, 3, 4, 5].copyWithin(0, -3, -2))  // [3, 2, 3, 4, 5]
    // 第一个参数是被替换数据的开始位置
    // 第二个参数是替换数据开始的位置，包含此位置数据，倒数从1开始
    // 第三个参数是替换数据结束的位置，不包含此位置数据，倒数从1开始
    //注意：结束位置的值要比开始位置的值大，不然不起作用
}

4. find(value,index,arr)和findIndex(value,index,arr)：

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

findIndex()：数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

这两个方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。

{
    let arr = [1,2,3,5];
    let re = arr.find(item=>{
        return item > 2   
    })
    console.log(re);   //3
}
{
    let arr = [1,2,3,5];
    let re = arr.findIndex(item=>{
        return item > 2   
    })
    console.log(re);   //2  3在下标2的位置
}

5. fill()：fill方法使用给定值，填充一个数组。

//参数1:替换的内容；参数2:开始位置；参数3:结束位置
{
    let arr = ["a","b","c",'d'];  
    console.log(arr.fill('o',0,3));   //[o, o, o, d]
}

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

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

{
    let arr = ["a","b","c",'d'];
    for(let k of arr.keys()){
        console.log(k)  
        //0 1 2 3 
    }
    for(let k of arr.values()){
        console.log(k)  
        //a b c d
    }
    for(let [k,v] of arr.entries()){
        console.log(k,v)  
        //0, "a"
        //1, "b"
        //2, "c"
        //3, "d"
    }
}

7. includes()方法：表示某个数组是否包含给定的值，返回布尔值

{
    let arr = ["a","b","c",'d'];
    console.log(arr.indexOf("b"))    //1
    console.log(arr.indexOf("o"))    //-1
    console.log(arr.includes("c"))   //true
    console.log(arr.includes("o"))   //false
}