美文网首页
es6学习笔记整理(五)数组扩展

es6学习笔记整理(五)数组扩展

作者: 尤樊容 | 来源:发表于2018-02-09 16:55 被阅读9次

    数组新增特性

    Array.from

    伪数组和集合转化为数组Array.from(数组)
    类似于map的功能,映射
    Array.from(数组,function (){})转化数组的同时还可以遍历

            let p = document.querySelectorAll('p');
            let pArr = Array.from(p);
            console.log(p);//不是真正的数组
            console.log(pArr);
            pArr.forEach(function (item) {
                console.log(item.textContent);
            });
    
            console.log(Array.from([1,4,7], function (item) {return item*2}));
    
    Array.of

    把一组数据变量转换成数据类型

            let arr = Array.of(1,4,7,2,5,8);
            console.log('arr:', arr);//[1,4,7,2,5,8]
    
            let empty = Array.of();
            console.log('empty:', empty);//[]
    
    copyWithin

    copyWithin(要替换的位置,读取数据的位置,读取截止位置(不包括该位置))
    在当前数组内部,将指定位置的成员复制到指定位置
    使用频率不高

    console.log([1,2,3,4,5,6,7,8].copyWithin(1,4,6));//1,5,6,3,4,5,6,7,8
    
    find/findIndex查找

    es5中需要自己遍历,或者使用第三方库Underscore
    es6已经可以直接实现了
    find找出第一个就不找了
    findIndex找出符合条件的元素位置

    console.log([1,2,3,4,5,6,7,8].find(function (item) {return item>5}));//6
    console.log([1,2,3,4,5,6,7,8].findIndex(function (item) {return item>5}));//5
    
    fill

    填充数组,替换

    console.log('fill1:',['a', 4, 'b', undefined].fill(7));//[7, 7, 7, 7]
    console.log('fill2:',['a', 4, 'b', undefined].fill(7, 1, 3));//["a", 7, 7, undefined]
    
    entries\keys\values

    遍历相关(使用频率比较高)
    keys() 返回数组下标集合
    values() 返回数组元素
    entries() 下标、元素都可以返回

    for(let index of [0,'a',2,3,'c'].keys()){
        console.log('keys',index);//0,1,2,3,4
    }
    
    for(let value of [0,'a',2,3,'c'].values()){
        console.log('values',value); //0,'a',2,3,'c' 有兼容问题,需要有babel-polyfill兼容包
    }
    
    for(let [index,value] of [0,'a',2,3,'c'].entries()){
        console.log('entries', index,value);
    }
    
    inludes

    includes() 数组中是否包括该值
    和find/findIndex功能差不多,但find/findIndex更强大
    还解决了NaN不等于NaN的问题

    console.log([1,2,3,NaN].includes(3));//true
    console.log([1,2,3,NaN].includes(NaN));//true
    

    相关文章

      网友评论

          本文标题:es6学习笔记整理(五)数组扩展

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