JS 陣列筆記

Haoz發表於2018-07-25
JS陣列筆記

我就發發牢騷記錄下陣列的幾個方法

JS 陣列的遍歷方法有好幾個：

  • every
  • some
  • filter
  • foreach
  • map
  • reduce

接下來我們來一個個地交流下。

every()

arr.every(callback[, thisArg])
返回值：true | false
是否改變原陣列：不改變原陣列

解析：
every() 方法用來測試陣列中的每一項是否都通過了callback函式的測試；只有全部通過才返回 true；否則 false。
本文出現的 callback 沒有特別宣告都是表示包含 element, index, array 三個引數的函式。

例子：

// 檢測陣列中的所有元素是否都大於或等於100

[].every((ele) => ele >= 100);  // true

[1, 2, 3].every((ele) => ele >= 100);   // false
複製程式碼

some()

arr.some(callback[, thisArg])
返回值：true | false
是否改變原陣列：不改變

解析：
some() 跟 every() 類似，只是 every 要每一項都通過 callback 才返回 true，而 some 只要有通過 callback 的就返回 true；some 為邏輯或，every 為邏輯與。

例子：

function isBigEnough(element, index, array) {
  return (element >= 10);
}
var passed = [2, 5, 8, 1, 4].some(isBigEnough);
// passed is false
passed = [12, 5, 8, 1, 4].some(isBigEnough);
// passed is true
複製程式碼

filter()

var newArr = arr.filter(callback[, thisArg])
返回值：新陣列
是否改變原陣列：不改變原陣列

解析：
filter() 方法會對陣列中的每一項（首先這項是有值的）進行呼叫 callback 函式，並根據呼叫結果返回的 true 或 false 來組建一個新的陣列（該陣列是原陣列的子集）。
即過濾，只有符合的（呼叫 callback 返回 true 的）才加入到新陣列中。

例子：

const isBigEnough = value => value >= 10;

let [...spread] = [12, 4, 8, 120, 44];

let filtered = spread.filter(isBigEnough);
// filtered: [12, 120, 44]
// spread: [12, 4, 8, 120, 44]
複製程式碼

forEach()

array.forEach(callback[, thisArg])
返回值：undefined
是否改變原陣列：改不改變要看 callback

解析：
forEach() 方法按升序為陣列中含有效值的每一項執行一次 callback 函式，那些已刪除（使用delete方法等情況）或者未初始化的項將被跳過（但不包括那些值為 undefined 的項）（例如在稀疏陣列上）。反正它就是很死板。

例子：

// three 呢？它被跳過了，原因是到two時，使陣列發生了變化，導致所有剩下的項上移一個位置，所以three被跳過了
let words = ['one', 'two', 'three', 'four'];

words.forEach((word) => {
    console.log(word);
    if ( word === 'two' ) {
        words.shift();
    }
});
// one
// two
// four
複製程式碼

map()

let newArr = arr.map(callback[, thisArg])
返回值：新陣列
是否改變原陣列：不改變

解析：
map() 方法就是陣列中的每一項（有值）按順序都呼叫一次 callback 函式，然後每一項的返回結果組成一個新的陣列作為整個map方法的返回值。

例子：

let str = '12345';
Array.prototype.map.call(str, (x) => x).reverse().join('');
// '54321'
複製程式碼

reduce()

arr.reduce(callback[, initialValue])
返回值：callback函式累計處理的結果
是否改變原陣列：

解析：
reduce() 方法的 callback 有四個引數，比之前說的多了一個累計的返回值；四個引數：accumulator、currentValue、currentIndex、array；initialValue 是用作第一個呼叫 callback 的第一個引數的值，預設使用陣列中的第一個元素。

reduce() 方法跟 map 有點相似，都是陣列中的每一個元素（有效值）一次執行 callback 函式，多就多在它會存上上一次 callback 計算結果作為下一次的引數。

如果沒有提供 initialValue， reduce會從索引1的地方開始執行 callback方法，跳過第一個索引。如果提供 initialValue， 從索引0開始

例子：

// 求和
let sum = [0, 1, 2, 3, 4].reduce((prev, curr) => prev + curr, 0);

// 計算陣列中每個元素出現的次數
let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

let countedNames = names.reduce((allNames, name) => {
    if ( name in allNames ) {
        allNames[name]++;
    } else {
        allNames[name] = 1;
    }
    return allNames;
}, {});
// countedNames:
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

// 陣列去重
let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
let result = arr.sort().reduce((init, current) => {
    // 主要是排了序
    if ( init.length === 0 || init[init.length - 1] !== current ) {
        init.push(current);
    }
    return init;
}, []);
console.log(result);
複製程式碼

參考

MDN Array

相關文章