es6-数组扩展

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/grapelove01/article/details/82725082

数组新增特性

• Array.from
• Array.of
• copyWithin
• find\findIndex
• fill
• entries\keys\values
• includes

Array.from

集合转数组

{
  let p=document.querySelectorAll('p');
  let pArr=Array.from(p); // 集合转数组
  pArr.forEach(function(item){
    console.log(item.textContent);
  });
}

实现类似 map() 的遍历

{ // Array.from()第二个参数，接收一个函数，进行遍历
  console.log(Array.from([1,3,5],function(item){return item*2})); // [2, 6, 10]，参数2是函数，类似 map()
}

Array.of

{
  let arr = Array.of(3,4,7,9,11);
  console.log('arr=',arr); // [3, 4, 7, 9, 11]

  let empty=Array.of();
  console.log('empty',empty); //  []
}

填充数组

fill

{
  console.log('fill-7',[1,'a',undefined].fill(7)); // [7, 7, 7]
  console.log('fill,pos',['a','b','c'].fill(7,1,3)); // ["a", 7, 7],参数1，替换数，参数2和参数3，起始和截止位置
}

遍历

keys，数组元素的位置

{
  for(let index of ['1','c','ks'].keys()){
    console.log('keys',index); // 0 1 2
  }
}

values，数组元素的值

注意，需要 babel-polifill 兼容

{
  for(let value of ['1','c','ks'].values()){
    console.log('values',value); // 1 c ks
  }
}

entries，数组元素的位置和值

{
  for(let [index,value] of ['1','c','ks'].entries()){
    console.log('values',index,value); // 0 1换行1 c换行2 ks
  }
}

用数组本身元素进行替换

{
  console.log([1,2,3,4,5].copyWithin(0,3,4)); // [4, 2, 3, 4, 5]，参数1，替换起始位置，参数2，读取数据起始位置，参数3，读取截止位置（不包括）
}

查找

find，第一个符合条件的元素

findeIndex，第一个符合条件的元素的位置

{
  console.log([1,2,3,4,5,6].find(function(item){return item>3})); // 4，第一个符合条件的元素
  console.log([1,2,3,4,5,6].findIndex(function(item){return item>3})); // 3，第一个符合条件的元素的位置
}

是否包含

{
  console.log('number',[1,2,NaN].includes(1)); // true
  console.log('number',[1,2,NaN].includes(NaN)); // true，能识别 NaN
}