數組中經常使用的方法【補充reduce、filter、flat...】｜內附思惟導圖

在ES6中新增了不少有利於快速開發的內容，好比咱們的箭頭函數、解構賦值、拓展剩餘運算符、class建立類、模版字符串......等等；

同時數組和對象也新增了一些較爲經常使用的方法，因爲以前寫的數組中的16種經常使用方法說過還有一些方法後續補充，但一直到如今尚未兌現承諾，今天小芝麻就先把欠下的還上😄

思惟導圖

1、reduce

一、定義：

• 接收一個函數做爲累加器，數組中的每一個值（從左到右）開始縮減（是個數遞減，不是值），最終計算爲一個值。

  （通常用於求和；計數,本次返回的結果會做爲下一次的上一次進行計算。）

二、@params：callback，初始值

• callback(必須)：給數組中的每個元素依次執行傳入的回調函數，不包括數組中被刪除或從未被賦值的元素；
  • 回調函數的形參：接受四個參數：
    • 初始值（或者上一次回調函數的返回值），（必須）
    • 當前元素值，（必須）
    • 當前索引，（可選）
    • 調用 reduce 的數組。（可選）
• 初始值(可選)：做爲第一次調用 callback函數時的第一個參數的值。
  • 若是沒有提供初始值，則將使用數組中的第一個元素。
  • 在沒有初始值的空數組上調用 reduce 將報錯。

注意：

• 一、回調函數第一次執行時，accumulator 和currentValue的取值有兩種狀況：若是調用reduce()時提供了initialValue，accumulator取值爲initialValue，currentValue取數組中的第一個值；
• 二、若是沒有提供 initialValue，那麼accumulator取數組中的第一個值，currentValue取數組中的第二個值。
• 三、若是沒有提供initialValue，reduce 會從索引1的地方開始執行 callback 方法，跳過第一個索引。若是提供initialValue，從索引0開始。

三、@return：

函數累計處理的結果

四、是否改變原數組：

不改變

五、使用方法:

數組.reduce(callback(accumulator, currentValue, 【index, array】), 【initialValue】)

• 用【】表示能夠省略

六、應用

應用1：求和

• (不設置初始值時)

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
  return accumulator + currentValue;
});
複製代碼

callback 被調用四次，每次調用的參數和返回值以下表：

由 reduce返回的值就是最後一次回調返回值 10。

• (設置初始值時)

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){ 
    return accumulator + currentValue; 
}, 10 );
複製代碼

callback 被調用五次，每次調用的參數和返回值以下表：

應用2：累加對象數組裏的值

要累加對象數組中包含的值，必須提供初始值，以便各項正確經過你的函數。

var initialValue = 0;
var sum = [{x: 1}, {x:2}, {x:3}].reduce(
    (accumulator, currentValue) => accumulator + currentValue.x
    ,initialValue
);

console.log(sum) // logs 6
複製代碼

應用3: 將二維數組轉化爲一維

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
  function(a, b) {
    return a.concat(b);
  },
  []
);
// flattened is [0, 1, 2, 3, 4, 5]
複製代碼

關於reduce暫且說這些，更多內容可參考MDN，Array.prototype.reduce()，裏面寫的很詳細，小芝麻也是參考的MDN整理的😄

2、filter

一、定義：過濾

返回數組中條件成立項，把不成立的過濾掉，若是回調函數返回true，就把這一項放到新數組中返回

二、@params：callback，thisArg

• callback(必須)：用來測試數組的每一個元素的函數。返回 true 表示該元素經過測試，保留該元素，false 則不保留。
  • 回調函數的形參：它接受三個參數：
    • 元素的值，（必須）
    • 元素的索引，（可選）
    • 被遍歷的數組自己，（可選）
• thisArg(可選)：改變this指向
  • 執行 callback 時，用於 this 的值。

三、@return：

一個新的、由經過測試的元素組成的數組，若是沒有任何數組元素經過測試，則返回空數組。

四、是否改變原數組：

不改變原數組;

五、使用方法：

var newArray = 數組.filter(callback(element, 【index, array】), 【thisArg】)

• 用【】表示能夠省略

注意：

• 一、filter 遍歷的元素範圍在第一次調用 callback 以前就已經肯定了。
• 二、在調用 filter 以後被添加到數組中的元素不會被 filter 遍歷到。
• 三、若是已經存在的元素被改變了，則他們傳入 callback 的值是 filter 遍歷到它們那一刻的值。
• 四、被刪除或歷來未被賦值的元素不會被遍歷到。

六、應用：

應用1: 篩選排除全部較小的值

下例使用 filter 建立了一個新數組，該數組的元素由原數組中值大於 10 的元素組成。

function isBigEnough(element) {
  return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44] 
複製代碼

應用2: 在數組中搜索

下例使用 filter() 根據搜索條件來過濾數組內容。

var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/** * 基於搜索條件（查詢）的數組篩選項 */
function filterItems(query) {
  return fruits.filter(function(el) {
      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
  })
}

console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']
複製代碼

參考自：MDN，Array.prototype.filter()

3、find

對應的findIndex方法，與find用法都相同，只不過返回的第一次知足條件哪一項的索引，就不單獨介紹啦😄

一、定義：

從左到右循環，直到找到知足條件的那一項，把這項返回；若是沒有找到,那麼返回undefined；

二、@params：callback，thisArg

• callback(必須)：在數組每一項上執行的函數，
  • 回調函數的形參：它接受三個參數：
    • 元素的值，（必須）
    • 元素的索引，（可選）
    • 被遍歷的數組自己，（可選）
• thisArg(可選)：改變this指向
  • 執行 callback 時，用於 this 的值。

三、@return：

數組中第一個知足所提供測試函數的元素的值，不然返回 undefined。

四、是否改變原數組：

不改變原數組

五、使用方法：

數組.find(callback(element, 【index, array】), 【thisArg】)

• 用【】表示能夠省略

注意：

• 一、在第一次調用callback函數時會肯定元素的索引範圍，所以在 find方法開始執行以後添加到數組的新元素將不會被 callback函數訪問到。
• 二、若是數組中一個還沒有被callback函數訪問到的元素的值被callback函數所改變，那麼當callback函數訪問到它時，它的值是所訪問到的當前值。
• 三、被刪除的元素仍舊會被訪問到，可是其值已是undefined了。

六、應用：

尋找數組中的質數

下面的例子是從一個數組中尋找質數（若是找不到質數則返回undefined）

function isPrime(element, index, array) {
  var start = 2;
  while (start <= Math.sqrt(element)) {
    if (element % start++ < 1) { return false; } } return element > 1; } console.log([4, 6, 8, 12].find(isPrime)); // undefined, 沒有找到 console.log([4, 5, 8, 12].find(isPrime)); // 5 複製代碼

參考自：MDN，Array.prototype.find()

4、some

一、定義：

在數組中只要有一項條件成立就返回true，若是都不成立就返回false

二、@params：

• callback(必須)：在數組每一項上執行的函數，
  • 回調函數的形參：它接受三個參數：
    • 元素的值，（必須）
    • 元素的索引，（可選）
    • 被遍歷的數組自己，（可選）
• thisArg(可選)：改變this指向
  • 執行 callback 時，用於 this 的值。

三、@return：

• true
• false

四、是否改變原數組：

不改變原數組

五、使用方法：

數組.some(callback(element, 【index, array】), 【thisArg】)

• 用【】表示能夠省略

注意：

• 一、some() 遍歷的元素的範圍在第一次調用 callback. 前就已經肯定了。
• 二、在調用 some() 後被添加到數組中的值不會被 callback 訪問到。
• 三、若是數組中存在且還未被訪問到的元素被 callback 改變了，則其傳遞給 callback 的值是 some() 訪問到它那一刻的值。
• 四、已經被刪除的元素不會被訪問到。

5、every

用法基本與some 相同，與some 的區別就是:some是找到一個符合的就返回true，every是找到一個不符合的就返回false

一、定義：

數組的每項都必須知足回調函數的條件(返回true)，只要有一個不知足，就返回false

二、@return：

找到第一個返回false的值;就再也不向後繼續查找；返回一個布爾值；若是全部的成員的回調都返回true，這個結果就是true

6、flat

一、定義：

按照一個可指定的深度遞歸遍歷數組，並將全部元素與遍歷到的子數組中的元素合併爲一個新數組返回。

二、@params：

• depth(可選) ： 深度
  • 指定要提取嵌套數組的結構深度，默認值爲 1。

三、@return:

一個包含數組與子數組中全部元素的新數組。

四、是否改變原數組：

不改變原數組

五、使用方法：

var newArray = 數組.flat([depth])

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// =>[1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// =>[1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// =>[1, 2, 3, 4, 5, 6]
複製代碼

注意：

• 一、使用 Infinity，可展開任意深度的嵌套數組

//使用 Infinity，可展開任意深度的嵌套數組
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
複製代碼

• 二、flat() 方法會移除數組中的空項:

var arr4 = [1, 2, , 4, 5];
arr4.flat();
// => [1, 2, 4, 5]
複製代碼

參考自：MDN

數組的方法補充就到這裏了，還有一些不是很經常使用的方法，沒有在這裏一一例舉啦～～