zoukankan      html  css  js  c++  java
  • ES6扩展——数组的新方法(Array.from、Array.of、Array.fill、Array.includes、keys values entries 、find)

    1、Array.from(objec,回调函数)将一个ArrayLike对象或者Iterable对象(类数组对象)转换成一个数组

    1)该类数组对象必须具有length属性,用于指定数组的长度。如果没有length属性,那么转换后的数组是一个空数组
    2)该类数组对象的属性名必须为数值型或字符串型的数字
                //新的方法
                
                //Array.from可以把一个类数组的对象转成数组
                //该类数组对象的属性名必须为数值型或字符串型的数字
                const obj = {
                    0:1,
                    1:22,
                    2:false,
                    length:2  //false不在数组中是因为length为2
                };
                //from()方法的作用是将一个ArrayLike对象或者Iterable对象转换成一个Array
                //还可以接收第二个参数,是一个回调函数
                console.log(Array.from(obj, item => item * 2));  //[2,44]
                
                //其他将类数组转换成数组的方法(相对from方法少了第二个参数):
                Array.prototype.slice.call();
                [].slice.call();
                [...]

    2、Array.of()将传入的参数合并为一个数组

                //Array.of把传进去的参数合成一个数组
                console.log(Array.of(1,2,'123',false));  //[1,2,'123',false]
                

    3、Array().fill(num,start,end)填充数组并且指定范围

                //Array().fill(num,start,end)填充数组并且指定范围,不包括end脚标
                //可以很方便的去指定一个数组的默认值
                let arr = new Array(5);  //[empty * 5]
                let arr1 = new Array(5).fill(0);  //[0,0,0,0,0]
                //如果数组原先有值,fill会覆盖掉
                console.log([1,2,3].fill(0));  //[0,0,0]
                //指定范围
                let arr3 = new Array(5).fill(0,0,3);  //[0,0,0,empty*2]
                //new Array()这个构造函数会根据参数进行重载,只有一个参数的时候就是表示数组的长度,有多个参数就会作为数组的成员
                

    4、Array.includes()返回布尔值,用来判断数组中是否存在某一项

                //Array.includes()返回布尔值,用来判断数组中是否存在某一项
                var arr = [1,2,3,4];
                console.log(arr.includes(1));  //true
                console.log(arr.includes(55));  //false
                

    5、keys  values   entries

                
                //keys可以拿到数组中的每一个下标
                const arr = [1,2,3,444];
                console.log(arr.keys());  //Array Iterator{} 迭代器接口
                for(let i of arr.keys()){
                    console.log(i);  //四行的值分别是:0 1 2 3
                }
                
                //values可以拿到数组中的每一项
                for(let v of arr.values()){
                    console.log(v);  //四行的值分别是:1 2 3 444
                }
                
                //entries可以同时拿到下标和对应的值,返回的是数组
                for(let u of arr.entries()){
                    console.log(u);  //四个数组:[0,1]  [1,2]  [2,3]  [3,444]
                }
                //可以解构赋值,同时拿到下标跟值
                for(let [i,v] of arr.entries()){
                    console.log(i,v);  //四行的值分别是:0 1    1 2     2 3    3 444
                }
                
                

    6、find方法根据条件(回调)按顺序遍历数组,当回调返回true时,就返回当前遍历到的值。这个方法用的比较多

                //find 根据条件(回调)按顺序遍历数组,当回调返回true时,就返回当前遍历到的值
                const res = [1,7,6,3].find(function(value,index,arr){
                    console.log('value:',value);
                    console.log('index:',index);
                    console.log('arr',arr);
                    return value % 2 === 0;
                });
                console.log(res);  //6
                
                //也可以写成箭头函数
                const res1 = [1,7,6,3].find((value,index,arr) => value % 2 === 0 );
                console.log(res1);  //6
                

    7、findIndex根据条件(回调)按顺序遍历数组,当回调返回true时,就返回当前遍历到的下标。这个方法用的比较多

                //findIndex 根据条件(回调)按顺序遍历数组,当回调返回true时,就返回当前遍历到的下标
                const res2 = [1,7,6,3].findIndex((value,index,arr) => value % 2 ===0 );
                console.log(res2);  //返回数值6的脚标:2
                //findIndex跟indexOf相似,只是indexOf无法判断有没有NaN,但是findIndex可以判断
                const res3 = [1,7,6,3,NaN].findIndex((value,inde,arr) => 
                    Number.isNaN(value));
                console.log(res3);  //4
  • 相关阅读:
    一些必不可少的Sublime Text 2插件
    sublime text 使用小技巧
    Azure Queue 和 Service Bus Queue的比较
    怎么使用Windows Azure Queue Storage 服务
    配置 SharePoint 2010 使用本机默认 SQL Server 实例 Pan
    将两个字符串中相同的地方str2无重复的输出
    javascript笔记
    C#中怎样使控件随着窗体一起变化大小(拷来学习)
    在pictureBox中画方格矩阵地图,方法比较笨,有好方法望指导
    通过一个小推理写出的程序,结果出乎意料……有哪位知道为什么吗 已解决
  • 原文地址:https://www.cnblogs.com/rickdiculous/p/13211458.html
Copyright © 2011-2022 走看看