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

2018-02-09  本文已影响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
上一篇下一篇

猜你喜欢

热点阅读