ES6 数组新增语法

Posted afanadmin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6 数组新增语法相关的知识,希望对你有一定的参考价值。

ES6新增语法

/* 
    Array.from(类数组); 把一个类数组转换成一个真正的数组
        类数组: 有下标有length;
        返回值:转换之后的新数组
        属于Array构造函数下面的方法,不是数组方法;

*/
{
    let aLis = document.querySelectorAll("#list li");
    console.log(aLis);
    
    // {
    //     aLis.map(item=>{
    //         return item;
    //     });
    // }

    {
        aLis = Array.from(aLis);
        aLis.map(item=>{
            return item;
        })
    }
}

Array.from方法详解:

{
    let aLis = document.querySelectorAll("#list li");
    let arr = [];
    // aLis = Array.from(aLis,(item,index)=>{
    //     console.log(item,index,this);
    //     return index;
    // },arr);//this指向了window;

    aLis = Array.from(aLis,function(item,index){
        console.log(item,index,this);
        return index;
    },arr);//this指向了arr;
    
    // 第二种方法:展开运算符
    aLis = [...aLis];

    console.log(aLis);//0,1,2,3
}

Array.of方法:

{
    console.log(Array.of(1,2,3,4,"a"));//把里面的东西转成一个新数组
}

Array.isArray():

{ 
    let aLis = document.querySelectorAll("#list li");
    aLis = Array.from(aLis);
    console.log(Array.isArray(aLis));//检测是否是数组
}

数组下的方法:

arr.find(); arr.findIndex();

{
    let arr = [1,2,3,4]//["a","b","c","d"];
    let val = arr.find((item,index)=>{
        if(item>=3){
            return true;
        }
    });
    val = arr.find(item=>item>=3);
    console.log(val);
    // 查找数组中满足要求的第一个元素的值

    let index = arr.findIndex(item=>item>=3);
    console.log(index);
    // 查找数组中满足要求的第一个元素的值的索引值;
}

arr.flat();数组扁平化

{
    // 数组扁平化:把二维数组改为一维数组;
    let arr = [
        ["小明",18],
        ["小刚",20],
        [
            1,
            [2,3],
            [4,5,
                [
                    [6,7]
                ]
            ]
        ]
    ];
    // console.log(arr.flat(1));//["小明", 18, "小刚", 20]
    // console.log(arr.flat(3));
    console.log(arr.flat(Infinity));//无限层
}

arr.flatMap();数组扁平化,包含了filter方法

{
    let arr = [
        ["小明",18],
        ["小刚",20]
    ];
    let newArr = arr.flatMap((item,index)=>{
        // console.log(item,index);
        item = item.filter((item,index)=>{
            return index == 0;
        });
        return item;
    });
    console.log(newArr);
}
arr.fill();
{
    let arr = [1,2,3,4];
    arr.fill("a",1,2);//填充,第几位,结束
    console.log(arr);
}

arr.includes();

{
    let arr = ["a","b","c","d","e"];
    console.log(arr.includes("a",0));//判断数组中是否包含一个指定的值
}

 

以上是关于ES6 数组新增语法的主要内容,如果未能解决你的问题,请参考以下文章

三阶段课程——Day02(ES6简介let和const)(数据类型和数据结构:字符串扩展Symbol数组新增方法对象新增SetMap数组解构对象解构...运算符)

ES6系列_6之新增的数组知识

ES6新的特性有哪些?

ES6 新增语法

ES6新增方法

javascript es6新增语法之`${}`