ES6中数组的扩展(方法)

一、扩展运算符在数组中的使用

1. 用于赋值数组

        let arr1=[100,200,300,[500]]
        let arr2=[...arr1];//浅拷贝,将arr1中的值或引用拷贝到arr2中
        console.log(arr2==arr1);//false
        arr1[0]=400;
        console.log(arr2);//不受影响
        arr1[3][0]=600;
        // console.log(arr2);//受影响(只拷贝了一层)

2. 用于数组的合并

 console.log([...[1,2,3],...[4,5,6]]);

3. 和解构赋值相结合

        let [a,...list]=[1,...["a","b"]];
            //...list是剩余运算符(list是变量) ...["a","b"]是扩展运算符,将数组展开

4. 将字符串转为数组

        console.log([..."str"]);

二、ES6中,数组新增的方法

 1.  Array.from(可遍历的结构[,回调函数]);  回调函数的功能:相当于map(),将函数的返回值放在数组中 / / 将一个可遍历的解构转为真正的数组

        let arr3=Array.from("string",(ele,index)=>{
            console.log(ele,index);
            return ele+index
        });
        console.log(arr3);// ['s0', 't1', 'r2', 'i3', 'n4', 'g5']
        // 举例:
    arr3=Array.from({length:2},()=>"jack")//{length:2}是类数组(类似于arguments),长度为2 没有内容而已
    console.log(arr3);// ['jack', 'jack']
    // 回调函数调用的次数根据前面遍历里的对象的长度来

2.Array.of()方法用于将一组值,转换为数组。

 这个方法的主要目的,是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异。Array.of基本上可以用来替代Array()或new Array(),并且不存在由于参数不同而导致的重载。它的行为非常统一。

            Array.of(3, 11, 8) // [3,11,8]
            Array.of(3) // [3]
            Array.of(3).length // 1
        // 这个方法的主要目的,是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异。
            Array() // []
            Array(3) // [, , ,]
            Array(3, 11, 8) // [3, 11, 8]
        // Array.of基本上可以用来替代Array()或new Array(),并且不存在由于参数不同而导致的重载。它的行为非常统一。
            Array.of() // []
            Array.of(undefined) // [undefined]
            Array.of(1) // [1]
            Array.of(1, 2) // [1, 2]

3.arr.copyWithIn(target[,start,end]) 实例的方法,用于从数组的指定位置拷贝元素到另一个指定的位置中去

            // target: 粘贴到指定目标的索引位置,没说明复制谁就是全部复制,超出数组长度的部分舍去

            // start:  元素复制的起始位置

            // end:    元素复制的结束位置(包左不包右)

        arr3=[1,2,3,4,5,6,7,8,9].copyWithin(3);
        console.log(arr3);//[1, 2, 3, 1, 2, 3, 4, 5, 6] 后面的[7,8,9]超出数组长度,舍去
        arr3=[1,2,3,4,5,6,7,8,9].copyWithin(1,3,6);
        console.log(arr3);//[1, 4, 5, 6, 5, 6, 7, 8, 9]

4.arr.find(回调函数[,绑定this])  返回第一个满足条件的值

        var x=3;
        arr3=[1,2,3,4,5,6,7,8,9].find((ele)=>{
            console.log(this.x);//3
            return ele>this.x;//返回第一个大于this.x的值
        },{x:5});//绑定this this指向{x:5}这个对象
        console.log(arr3);//4  箭头函数

        var x=3;
        arr3=[1,2,3,4,5,6,7,8,9].find(function(ele){
            return ele>this.x;//返回第一个大于this.x的值
        },{x:5});
        console.log(arr3);//6

        arr3=[1,2,3,4,5,6,7,8,9].find(function(ele){
            return ele>this.x;//返回第一个大于this.x的值
        }.bind({x:5}));//返回函数 用call返回的是值
        console.log(arr3);//6

5.arr.findIndex(回调函数):返回第一个满足条件的元素的下标

        let arr=[1,2,3,4,5,6,7,8,9];
        let  arr1=arr.findIndex(function(ele){
            console.log(ele);
            return ele>this.init;
        },{init:4})
        console.log(arr1);//4

6.arr.fill(value[,start,end]):给数组填充值

        start 填充开始的位置  end填充结束的位置   包左不包右
        注意:如果填充的类型是一个引用类型,填充的是同一个引用(地址),而不是深拷贝对象
 如果要修改里面的内容,那么就只能自己手动添加了,不能用fill填充

        arr=[100,200,300,400,500];
        arr1=arr.fill(600,1,3);
        let arr9=arr.fill(null)
        console.log(arr1);
        console.log(arr9);

        let arr2=new Array(3).fill({name:"Mike"})
        console.log(arr2);
        arr2[0].name="Jack";
        console.log(arr2);

7.arr.entries():返回一个数组的迭代对象(键值对)

        arr=[100,200,300,400,500];
        console.log(arr.entries());;
        for (const [index,value] of arr.entries()) {
            console.log(value,index);
        }
        let l=arr.entries();//键值对
        // let l=arr.keys();//键名
        // let l=arr.values();//键值对
        // l.next();
        console.log(l.next());//得到的是一个对象,值在value中
        console.log(l.next());
        console.log(l.next());
        console.log(l.next);
        console.log(l.next);//ƒ next() { [native code] }
        console.log(l.next);

8.Object.fromEntries()方法是Object.entries()的逆操作,用于将一个键值对数组转为对象。

            Object.fromEntries([
            ['foo', 'bar'],
            ['baz', 42]
            ])
            // { foo: "bar", baz: 42 }

9.arr.includes(值[,start,end]):表示某个数值是否包含给定的值,返回的是布尔值

         start:开始查找位置 end:结束位置 包左不包右

        arr=[100,200,300,400,500,NaN];
        console.log(arr.includes(400));
        console.log(arr.includes(100,2));
        console.log(arr.includes(NaN,2));//true  可以识别nan
        console.log(arr.indexOf(NaN));//false  nan与谁都不等,包括自己

10.arr.flat():将嵌套的数组拉平为一维数组,拉平层数默认为1

        arr=[1,[2,3,[4,[5]]],,6];//最外面的是0层,不会保存空位
        console.log(arr.flat(2));  
        console.log(arr.flat(Infinity));//直接将多维数组拉平为一维数组 

11. arr.flatMap():原数组的每个成员执行一个函数(相当于执行Array.prototype.map()),然后对返回值组成的数组执行flat()方法。该方法返回一个新数组,不改变原数组。

        // 先执行map方法,再执行flat

        arr=[1,2,3].flatMap((ele,index)=>{
            return [ele,index];
        })
        console.log(arr);//map返回值是数组,然后将二维数组拉平[1, 0, 2, 1, 3, 2]
        // arr.flatMap(function callback(currentValue[, index[, array]]) {
        // ...
        // }[, thisArg])//this指向
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值