ES6基础入门（二）—— 数组的扩展

最新推荐文章于 2021-04-14 17:25:45 发布

原创最新推荐文章于 2021-04-14 17:25:45 发布 · 137 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ES6

es6 专栏收录该内容

17 篇文章

订阅专栏

本文深入探讨了JavaScript中数组的最新特性，包括三点运算符、Array.from()、Array.of()等方法的应用，以及find、findIndex、fill等实用功能，为开发者提供了丰富的代码示例和实践指导。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、数组的扩展

1.三点运算符
rest参数，将一个数组转化为逗号分隔的序列。
<script>
    //定义两个数组
    let arr1 = [1,2,3];
    let arr2 = [4,5,6];
    //1.三点运算符，把数组转换成一个用逗号链接的序列
    let arr3 = [...arr1,...arr2];
    console.log(arr3);
    console.log(...arr1);
    
    //使用场景：三点运算实现数组插入
    let arr3 = [1,2,3,...arr2,7,8,9]; //插入到新的数组
    console.log(arr3);
    
    //2.Array.from()方法：将伪数组（类似数组的对象）转化为真数组
    //js常见的伪数组：html元素数组，arguments --->伪数组
    let divArr =  document.querySelectorAll("div");
    divArr = Array.from(divArr);
    console.log(divArr);
    console.log([1,2,3]);
    divArr.forEach(function(item,index){
        console.log(item)
    })
    //案例2：封装test方法
   function test(){
    console.log(arguments);
    //将arguments转化为真数组
    let args = Array.from(arguments);
    args.forEach(function(item,index){
        console.log(item)
    })
}
test(1,2,3);

    //3.Array.of():将多个元素组合成一个数组
    let arr = Array.of(1,2,3,4,5)
    console.log(arr); //(5) [1, 2, 3, 4, 5]
    
    //4.Array.prototype.copyWithin(target,start,end):从数组的第terget元素开始用start个元素到end结束的元素进行替换
    console.log([1,2,3,4,5,6].copyWithin(0,4,6));  //(6) [5, 6, 3, 4, 5, 6]
    
    //自定查找条件，查找符合条件的元素，就不需要我们再去遍历
    //5.Array.prototype.find():查找第一个符合条件（回调函数返回true）的元素
    let arr = [1,2,3,4,5];
    //item---数组的元素
    let res = arr.find(function(item){
        return item>3;
    });
    console.log(res);   //4
    
    //6.Array.prototype.findIndex():查找第一个符合条件（回调函数返回true)的元素的索引
     let arr = [1,2,3,4,5];
    //item---数组的元素
    let res = arr.findIndex(function(item){
        return item>3;
    });
    console.log(res);   //3
    
    //7.Array.prototype.fill():将数组用某个元素填充
    console.log([1,2,3,4].fill(10));   //(4) [10, 10, 10, 10]
    
    //fill(value,start,end)
    //表示范围的索引都是包头不包尾
    console.log([1,2,3,4,5,6,7].fill('a',0,4));  //(7) ["a", "a", "a", "a", 5, 6, 7]
    
    //8.Array.prototype.entries() keys()  values(): 返回键、值、实体遍历器
    let arr = [1,2,3,4,5];  //迭代器
    for(let value of arr.values()){
        console.log(value);  //1 2 3 4 5
    };
    //获取数组的key
    for (let index of arr.keys()){
        console.log(index)  //0 1 2 3 4 
    }
    //解构赋值
   for(let [index,value] of arr.entries()){
        console.log(index,value)
    }
    
    //9.Array.prototype.includes():返回数组是否包含某个元素  
        let arr  = [1,2,3,4,5,NaN]
        console.log(arr.includes(4)) //true
        console.log(NaN)  //能够识别NaN
        console.log(arr.includes(NaN)) //true   //能够识别NaN
</script>