美文网首页
数组的拓展

数组的拓展

作者: keknei | 来源:发表于2017-07-26 22:56 被阅读11次

    扩展运算符(spread)是三个点(...)

    {
           let arr=[1,2,3];
           console.log(...arr);//1 2 3
    
            //如果拓展运算符后面是一个空数组,那么就什么也不执行
           let a=[];
           console.log([...[],1]);//[1]
    }
    

    它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。
    拓展运算符有些情况下也可以将字符串和伪数组转化为真正的数组,不过外面还得包一层中括号

    {
        console.log([...'string']);// ["s", "t", "r", "i", "n", "g"]
        function show(){
              console.log([...arguments]);//[1, 2, 3, 4, 5]
        }
        show(1,2,3,4,5);
    }
    

    用途

    • 1合并数组
    {
           let arr1=[1,3];
           let arr2=[4,3];
           let arr=[];
           console.log(arr.concat(arr1,arr2));//[1,3,4,3]
           //拓展运算符
           console.log([...arr,...arr1,...arr2]);//[1, 3, 4, 3]
    }
    
    • 2结构赋值
    {
           const [a,...arr]=[1,2,3,45,5];
           console.log(a);//1
           console.log(arr);//[2, 3, 45, 5]
           //只能放在参数的最后一位,否则会报错。
           const [a,...arr1]=[1,23];
           console.log(arr1);//报错
    }
    
    • 3扩展运算符还可以将字符串转为真正的数组
    {
            console.log([...'hello']);//["h", "e", "l", "l", "o"]
            console.log(...'hello');//h e l l o
            let str=...'hello';//报错
    }
    

    Array.from()

    {
            const json={
                0:'name',
                1:'age',
                 length:2
             };
             console.log(Array.from(json));//["name", "age"]
    
             function show(){
                 console.log(arguments);//[1, 2, 3, 4, callee: function, Symbol(Symbol.iterator): function]
                 console.log(Array.from(arguments));//[1, 2, 3, 4]
             }
            show(1,2,3,4);
    
            console.log(Array.from('hello'));//["h", "e", "l", "l", "o"]
    }
    

    可以将伪数组和可遍历的的对象转化为真正的数组,也可以将字符串转化为数组

    Array.of()的操作,将完美一下new Array的方法

    {
           console.log(Array.of(1,2,3));//[1,2,3]
           console.log(Array.of());//[]
           console.log(new Array(3));//[undefined × 3]
           console.log(Array.of(3));//[3]
    }
    

    copyWithin(target,start,end)自己玩自己的方法并且会改变自己,跟splice不同,splice可以添加数组以外的元素

    {
          let arr=[1,2,3,4,5,6];
          console.log(arr.copyWithin(1,3,5));//[1,4,5,4,5,6];
          console.log(arr.copyWithin(1,3));//[1,4,5,6,5,6]
          console.log(arr.copyWithin(0,-2,-1));//[5,2,3,4,5,6];
    }
    

    第二个console是在注释第一个console的情况下打印出来的,对应的第三个console是在注释第一个和第二个console情况下打印出来的,如果不注释不是这种情况,因为copyWidth()会改变原来的数组

    target(必需):从该位置开始替换数据。
    start(可选):从该位置开始读取数据,默认为0。如果为负值,表示倒
    数。
    end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。

    数组的find()和findIndex()

    {
           let arr=[1,2,3,4];
           arr.find((num)=>{
               if (num>2){
                   console.log(num);// 3 4
               }
           });
          //find方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组。
          arr.find((value,index,obj)=>{
              if (value>2){
                 console.log(value+':'+index+':'+obj);//3:2:1,2,3,4  4:3:1,2,3,4
              }
           });
           //找出数组中第一个大于2的成员。如果没有符合条件的成员,则返回undefined。
           console.log(arr.find((value,index,obj)=>{
                 return value>2;
            }));//3
           //返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。
           console.log(arr.findIndex((value,index,obj)=>{
               return value>2;
           }));//2
    }
    

    数组的fill()方法

    {
           //fill方法使用给定值,填充一个数组。
           let arr=[1,2,3];
           arr.fill(9);
           console.log(arr);//[9,9,9]
    
            console.log(new Array(3).fill(2));//[2,2,2]
            //fill方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。
            console.log(arr.fill(7,1,2));//[1,7,3]
    }
    

    数组实例的 entries(),keys() 和 values()

    {
          const arr=[1,2,3,4,5];
    
          for (let index of arr.keys()){
               console.log(index);//0 1 2 3 4
          }
           console.log(Object.keys(arr));// ["0", "1", "2", "3", "4"]
    
           for (let [index,val] of arr.entries()){
               console.log(index+':'+val);//0:1 1:2 2:3 3:4 4:5
           }
    
            console.log(Object.values(arr));//[1, 2, 3, 4, 5]
            // for (let val of arr.values()){
            //     console.log(val);//报错 chrome 和 Firefox 不知道为什么
            // }
    }
    

    数组实例的 includes()

    {
          let arr=[1,2,3,4,5,NaN];
          console.log(arr.includes(4));//true
          console.log(arr.includes(10))//false
    
          //该方法的第二个参数表示搜索的起始位置,默认为0。如果第二个参数为负数,则表示倒数的位置
          console.log(arr.includes(5,-4));//true
    }
    

    数组的空位

    {
           //由于空位的处理规则非常不统一,所以建议避免出现空位。
           console.log(Array.from([,,,]));//[undefined, undefined, undefined]
           console.log(...[1,,2]);//1 undefined 2
           console.log([,'a','b',,].copyWithin(2,0)); // [,"a",,"a"]
    
            // entries()
            console.log([...[,'a'].entries()]); // [[0,undefined], [1,"a"]]
    
            // keys()
            console.log([...[,'a'].keys()]); // [0,1]
    
            // values()
            //console.log([...[,'a'].values()]); // [undefined,"a"]
    
             // find()
             console.log([,'a'].find(x => true)); // undefined
    
             // findIndex()
             console.log([,'a'].findIndex(x => true)); // 0
    }
    

    ES5 对空位的处理,已经很不一致了,大多数情况下会忽略空位,ES6 则是明确将空位转为undefined

    </br>
    万年不变的国际惯例,如果想看更详细的资料,请狠狠的点击这里
    </br>
    </br>

    相关文章

      网友评论

          本文标题:数组的拓展

          本文链接:https://www.haomeiwen.com/subject/ixcakxtx.html