數組方法 · 前端筆記

[TOC] # Array.prototype.indexOf(searchElement[, fromIndex = 0]) 返回在數組中可以找到一個給定元素的第一個索引，如果不存在，則返回-1。 * searchElement：要查找的元素 * fromIndex：開始查找的位置。 ``` var array = [2, 5, 9]; array.indexOf(2); // 0 array.indexOf(7); // -1 array.indexOf(9, 2); // 2 array.indexOf(2, -1); // -1 array.indexOf(2, -3); // 0 ``` # Array.prototype.isArray(obj) 確定傳遞的值是否是一個 Array。 ``` // 下面的函數調用都返回 true Array.isArray([]); Array.isArray([1]); Array.isArray(new Array()); // 鮮為人知的事實：其實 Array.prototype 也是一個數組。 Array.isArray(Array.prototype); ``` 當檢測Array實例時, Array.isArray 優于 instanceof,因為Array.isArray能檢測iframes ``` var iframe = document.createElement('iframe'); document.body.appendChild(iframe); xArray = window.frames[window.frames.length-1].Array; var arr = new xArray(1,2,3); // [1,2,3] // Correctly checking for Array Array.isArray(arr); // true // Considered harmful, because doesn't work though iframes arr instanceof Array; // false ``` # Array.prototype.lastIndexOf(searchElement[, fromIndex = arr.length - 1]) 返回指定元素（也即有效的 JavaScript 值或變量）在數組中的最后一個的索引，如果不存在則返回 -1。從數組的后面向前查找，從 fromIndex 處開始。 # Array.prototype.every(callback[, thisArg]) 測試數組的所有元素是否都通過了指定函數的測試 every 方法為數組中的每個元素執行一次 callback 函數，直到它找到一個使 callback 返回 false（表示可轉換為布爾值 false 的值）的元素。如果發現了一個這樣的元素，every 方法將會立即返回 false。否則，callback 為每一個元素返回 true，every 就會返回 true。參數 * callback：用來測試每個元素的函數。 * thisArg：執行 callback 時使用的 this 值。 ``` function isBigEnough(element, index, array) { return (element >= 10); } var passed = [12, 5, 8, 130, 44].every(isBigEnough); // passed is false passed = [12, 54, 18, 130, 44].every(isBigEnough); // passed is true ``` # Array.prototype.some(callback[, thisArg]) 測試是否至少有一個元素通過由提供的函數實現的測試。 `some()` 為數組中的每一個元素執行一次 `callback` 函數，直到找到一個使得 `callback` 返回一個“真值”（即可轉換為布爾值 true 的值）。如果找到了這樣一個值，`some()` 將會立即返回 `true`。否則，`some()` 返回 `false`。callback 只會在那些”有值“的索引上被調用，不會在那些被刪除或從來未被賦值的索引上調用。 參數 * callback：用來測試每個元素的函數。 * thisArg：執行 callback 時使用的 this 值。 ``` function isBiggerThan10(element, index, array) { return element > 10; } [2, 5, 8, 1, 4].some(isBiggerThan10); // false [12, 5, 8, 1, 4].some(isBiggerThan10); // true ``` # Array.prototype.forEach(callback[, thisArg]) 對數組的每個元素執行一次提供的函數。 `forEach` 遍歷的范圍在第一次調用 `callback` 前就會確定。調用 `forEach` 后添加到數組中的項不會被 `callback` 訪問到。如果已經存在的值被改變，則傳遞給 `callback` 的值是 `forEach` 遍歷到他們那一刻的值。已刪除的項不會被遍歷到。 沒有辦法中止或者跳出 forEach() 循環，除了拋出一個異常。如果你需要這樣，使用 forEach() 方法是錯誤的。 若你需要提前終止循環，你可以使用： * 簡單循環 * for...of 循環 * Array.prototype.every() * Array.prototype.some() * Array.prototype.find() * Array.prototype.findIndex() ``` var array1 = ['a', 'b', 'c']; array1.forEach(function(element) { console.log(element); }); // expected output: "a" // expected output: "b" // expected output: "c" ``` # Array.prototype.map(callback[, thisArg]) 創建一個新數組，其結果是該數組中的每個元素都調用一個提供的函數后返回的結果。 ``` var array1 = [1, 4, 9, 16]; // pass a function to map const map1 = array1.map(x => x * 2); console.log(map1); // expected output: Array [2, 8, 18, 32] ``` ``` // 下面的語句返回什么呢: ["1", "2", "3"].map(parseInt); // 你可能覺的會是[1, 2, 3] // 但實際的結果是 [1, NaN, NaN] // 通常使用parseInt時,只需要傳遞一個參數. // 但實際上,parseInt可以有兩個參數.第二個參數是進制數. // 可以通過語句"alert(parseInt.length)===2"來驗證. // map方法在調用callback函數時,會給它傳遞三個參數:當前正在遍歷的元素, 元素索引, 原數組本身. // 第三個參數parseInt會忽視, 但第二個參數不會,也就是說, // parseInt把傳過來的索引值當成進制數來使用.從而返回了NaN. ``` ``` function returnInt(element) { return parseInt(element, 10); } ['1', '2', '3'].map(returnInt); // [1, 2, 3] // 意料之中的結果 // 也可以使用簡單的箭頭函數，結果同上 ['1', '2', '3'].map( str => parseInt(str) ); // 一個更簡單的方式: ['1', '2', '3'].map(Number); // [1, 2, 3] // 與`parseInt` 不同，下面的結果會返回浮點數或指數: ['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300] ``` # Array.prototype.filter(callback[, thisArg]) 創建一個新數組, 其包含通過所提供函數實現的測試的所有元素。 `filter` 為數組中的每個元素調用一次 `callback` 函數，并利用所有使得 `callback` 返回 true 或等價于 true 的值的元素創建一個新數組。`callback` 只會在已經賦值的索引上被調用，對于那些已經被刪除或者從未被賦值的索引不會被調用。那些沒有通過 `callback` 測試的元素會被跳過，不會被包含在新數組中。 ``` function isBigEnough(element) { return element >= 10; } var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); // filtered is [12, 130, 44] ``` # Array.prototype.reduce(callback[, initialValue]) 對數組中的每個元素執行一個由您提供的`reducer`函數(升序執行)，將其結果匯總為單個返回值。 回調函數第一次執行時，`accumulator` 和`currentValue`的取值有兩種情況：如果調用 `reduce()` 時提供了`initialValue`，`accumulator`取值為`initialValue`，`currentValue`取數組中的第一個值；如果沒有提供 `initialValue`，那么`accumulator`取數組中的第一個值，`currentValue`取數組中的第二個值。 * callback：執行數組中每個值的函數，包含四個參數： * accumulator：累計器累計回調的返回值; 它是上一次調用回調時返回的累積值，或initialValue。 * currentValue：數組中正在處理的元素。 * currentIndex：可選。數組中正在處理的當前元素的索引。如果提供了initialValue，則起始索引號為0，否則為1。 * array：可選。調用reduce()的數組 * initialValue：可選。作為第一次調用 callback函數時的第一個參數的值。如果沒有提供初始值，則將使用數組中的第一個元素。在沒有初始值的空數組上調用 reduce 將報錯。 ``` // 計算數組中每個元素出現的次數 var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']; var countedNames = names.reduce(function (allNames, name) { if (name in allNames) { allNames[name]++; } else { allNames[name] = 1; } return allNames; }, {}); // countedNames is: // { '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); //[1,2,3,4,5] ``` ``` // 按順序運行Promise function runPromiseInSequence(arr, input) { return arr.reduce( (promiseChain, currentFunction) => promiseChain.then(currentFunction), Promise.resolve(input) ); } // promise function 1 function p1(a) { return new Promise((resolve, reject) => { resolve(a * 5); }); } // promise function 2 function p2(a) { return new Promise((resolve, reject) => { resolve(a * 2); }); } // function 3 - will be wrapped in a resolved promise by .then() function f3(a) { return a * 3; } // promise function 4 function p4(a) { return new Promise((resolve, reject) => { resolve(a * 4); }); } const promiseArr = [p1, p2, f3, p4]; runPromiseInSequence(promiseArr, 10) .then(console.log); // 1200 ``` ``` // 按屬性對object分類 var people = [ { name: 'Alice', age: 21 }, { name: 'Max', age: 20 }, { name: 'Jane', age: 20 } ]; function groupBy(objectArray, property) { return objectArray.reduce(function (acc, obj) { var key = obj[property]; if (!acc[key]) { acc[key] = []; } acc[key].push(obj); return acc; }, {}); } var groupedPeople = groupBy(people, 'age'); // groupedPeople is: // { // 20: [ // { name: 'Max', age: 20 }, // { name: 'Jane', age: 20 } // ], // 21: [{ name: 'Alice', age: 21 }] // } ``` # Array.prototype.reduceRight(callback[, initialValue]) 接受一個函數作為累加器（accumulator）和數組的每個值（從右到左）將其減少為單個值。 ``` const array1 = [[0, 1], [2, 3], [4, 5]].reduceRight( (accumulator, currentValue) => accumulator.concat(currentValue) ); console.log(array1); // expected output: Array [4, 5, 2, 3, 0, 1] ```