天天看點

ES6操作數組的7中方法

ES6操作數組目前共有7中方法,分别是:forEach、map、filter、find、every、some、reduce

ES6操作數組的7中方法

   forEach方法:對數組的每個元素執行一次提供的函數 

   1. forEach方法

forEach方法中的function回調有三個參數:

第一個參數是周遊的數組内容,

第二個參數是對應的數組索引,

第三個參數是數組本身

foreach 文法:

 

arr.forEach(function(value,index,array){
    //code something
  });      

執行個體:

var arr = [1,2,3,4];
var sum =0;
arr.forEach(function(value,index,array){

 array[index] == value; //結果為true

 sum+=value; 

 });

console.log(sum); //結果為 10      

①數組名.forEach(function(數組中一個元素的值){對這個值進行處理....})

②數組名.forEach(test)test為方法名,不用加(),把函數引用傳進去

ES6操作數組的7中方法
ES6操作數組的7中方法
ES6操作數組的7中方法

 ③利用函數引用這種方式的話,會自己把每個值傳進去,不需要用()傳進去

ES6操作數組的7中方法

 2.map()方法

傳回一個新的數組,數組中的元素為原始數組調用函數處理後的值。

注意:

  • ​map()​

    ​不會對空數組進行檢測
  • ​map()​

    ​不會改變原始數組

 文法

array.map(function(currentValue, index, arr), thisIndex)      

參數說明:

  • ​function(currentValue, index, arr)​

    ​:必須。為一個函數,數組中的每個元素都會執行這個函數。其中函數參數:
  1. currentValue:必須。目前元素的的值。
  2. index:可選。目前元素的索引。
  3. arr:可選。目前元素屬于的數組對象。

應用場景:要傳回一個要利用原數組經過運算後的數組,或者是在一個對象數組中要拿到某一個屬性,并且傳回一個新數組的情況

ES6操作數組的7中方法
ES6操作數組的7中方法

3.filter()函數

 建立一個新的數組,新數組中的元素是通過檢查指定數組中符合條件的所有元素。

 filter() 不會對空數組進行檢測。

 filter() 不會改變原始數組。

文法

array.filter(function(currentValue,index,arr), thisValue)      
參數說明:      

應用場景:

1.已知對象數組,要把對象數組中一些符合要求的對象重新組成一個數組

ES6操作數組的7中方法

2.篩選出符合多個條件的對象數組中的一些元素,組成新數組或者是直接覆寫原數組

ES6操作數組的7中方法
ES6操作數組的7中方法

3.有兩個數組(A,B),根據A中的ID值,過濾掉B數組中不符合的資料

ES6操作數組的7中方法

4.find()函數

傳回通過測試(函數内判斷)的數組的第一個元素的值。

  • 當數組中的元素在測試條件時傳回 true 時, find() 傳回符合條件的元素,之後的值不會再調用執行函數。
  • 如果沒有符合條件的元素傳回 undefined

 IE 11 及更早版本不支援 find() 方法。

find() 對于空數組,函數是不會執行的。

find() 并沒有改變數組的原始值。

文法:

array.find(function(currentValue, index, arr),thisValue)      
參數說明:      

1.在對象數組中,找到符合要求的對象,隻能找到第一個符合要求的

ES6操作數組的7中方法
ES6操作數組的7中方法

 2. 兩個對象數組,找A數組中有B數組的ID的元素

ES6操作數組的7中方法
ES6操作數組的7中方法

 5.some()方法和every()方法

 some()方法

  • 如果有一個元素滿足條件,則表達式傳回true , 剩餘的元素不會再執行檢測。
  • 如果沒有滿足條件的元素,則傳回false。

every()方法

  • 如果數組中檢測到有一個元素不滿足,則整個表達式傳回 false ,且剩餘的元素不會再進行檢測。
  • 如果所有元素都滿足條件,則傳回 true。

some()方法隻要有一個滿足就行,every()方法要所有的滿足才可以,即some():一真即真,every():一假即假,跟邏輯運算符差不多

ES6操作數組的7中方法
ES6操作數組的7中方法

應用場景

1.如果所有的作業系統都大于16位,則該程式可用,否則即為不可用

//some隻要有一個大于,它就不會再往下找,直接傳回true,因為相當于 || (邏輯或運算符)

ES6操作數組的7中方法

//every()相當于&&,找到第一個錯的就直接傳回false,不再往下找

ES6操作數組的7中方法

6. reduce()方法

reduce() 方法接收一個函數作為累加器,數組中的每個值(從左到右)開始縮減,最終計算為一個值。

reduce() 可以作為一個高階函數,用于函數的 compose。

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)      

total 必需。初始值, 或者計算結束後的傳回值。

currentValue 必需。目前元素

currentIndex 可選。目前元素的索引

arr 可選。目前元素所屬的數組對象。

initialValue 可選。傳遞給函數的初始值

1.代替map做一些簡單的運算

ES6操作數組的7中方法

 2.将一個對象數組中的某些屬性的值抽出來,組成一個新的數組

文法取自菜鳥教程,與應用場景中有些不一緻,應用場景為ES6文法。      
本文僅作學習工作記錄,如有錯誤請大佬留言指出