es6-陣列擴充套件

littlebirdflying發表於2018-09-16
陣列套件

陣列新增特性

  • 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
}
複製程式碼

相關文章