原文：Useful Javascript Array and Object Methods
作者：Robert Cooper
譯者：Jim Xiao

前段時間，我收聽了一個很棒的Syntax FM播客，其中總結了一些實用的JavaScript數組和對象方法。這些方法可以幫助開發人員編寫簡潔可讀的代碼，并且這些原生的JavaScript方法減少了對類似Lodash這樣第三方庫的依賴。

本文中所有提到的函數方法都是可以鏈式調用的，意味著它們可以相互結合地使用。更重要的是，它們并不會變更原始數據，當使用React時，這點尤其重要。通過使用這些數組和對象的方法，你不再需要for和while循環來獲得數組和對象中的數據。

下面每個函數都包含一個鏈接，可以跳轉到相對應的中文mozilla developer network（MDN）的解釋頁面。

.filter()

創建一個新數組, 其包含通過所提供函數實現的測試的所有元素。

比如，創建一個學生年齡數組，該數組的值必須大于法定飲酒年齡：

const studentsAge = [17, 16, 18, 19, 21, 17]; const ableToDrink = studentsAge.filter( age => age > 18 ); // [19, 21]

.map()

創建一個新數組，其結果是該數組中的每個元素都調用一個提供的函數后返回的結果。該方法非常便于數據處理，而且在React代碼中常看到，因為它不會改變原始數組中的數據。

比如，創建一個數組，在每個數字的開頭添加一個$符號：

const numbers = [2, 3, 4, 5]; const dollars = numbers.map( number => '$' + number); // ['$2', '$3', '$4', '$5']

.reduce()

這是一個經常被忽略的方法。對累加器和數組中的每個元素（從左到右）應用一個函數，將其減少為單個值。該方法對于計算總數非常管用。返回值可以是任何類型(例如對象，數組，字符串，整數)。

比如，對數組中的元素進行加和運算：

const numbers = [5, 10, 15]; const total = numbers.reduce( (accumulator, currentValue) => accumulator + currentValue); // 30

在MDN的文檔中還有許多用到.reduce()方法的例子，比如展開數組，按屬性分組對象以及刪除數組中的重復項等。

.forEach()

對數組的每個元素執行一次提供的函數。

比如，把數組中的每個元素打印到控制臺：

const emotions = ['happy', 'sad', 'angry']; emotions.forEach( emotion => console.log(emotion)); // 'happy' // 'sad' // 'angry'

.some()

判斷數組中的某些元素是否通過由提供的函數實現的測試。一個很有用的實例就是檢查用戶的權限。它在有些時候與.forEach()類似，不同的是，當測試數組中的每個元素的過程中，如果一個truthy值返回，就會立即終止該循環。

比如，檢查數組中是否至少有一個'admin'存在：

const userPrivileges = ['user', 'user', 'user', 'admin']; const containsAdmin = userPrivileges.some( element => element === 'admin'); // true

.every()

檢查是否數組中的每個值都滿足條件。

比如，檢查數組中的評價是否都大于等于3顆星：

const ratings = [3, 5, 4, 3, 5]; const goodOverallRating = ratings.every( rating => rating >= 3 ); // true

.includes()

檢查是否一個數組包含一個確定的值。與.some()相似，但它不是滿足某個條件，而是判斷是否該數列包含某個具體值。

比如，檢查是否數列包含一項名為'waldo'的字符串：

const names = ['sophie', 'george', 'waldo', 'stephen', 'henry']; const includesWaldo = names.includes('waldo'); // true

Array.from()

這是一個可以從其他數組或者字符串中創造新array的方法。你也可以傳入一個回調函數作為參數來操作新數組的數據。

比如，通過一個字符串來創建數組：

const newArray = Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']

比如，創建一個數組，該數組的值是其他數組中每個項的值的兩倍：

const doubledValues = Array.from([2, 4, 6], number => number * 2); // [4, 8, 12]

Objects.values()

返回一個由給定對象自己的所有可枚舉屬性值的數組。

比如，返回一個對象所有的屬性值：

const icecreamColors = {chocolate: 'brown',vanilla: 'white',strawberry: 'red', }const colors = Object.values(icecreamColors); // ["brown", "white", "red"]

Objects.keys()

返回一個由給定對象的自身可枚舉屬性組成的數組。

比如，返回一個對象所有的屬性名：

const icecreamColors = {chocolate: 'brown',vanilla: 'white',strawberry: 'red', }const types = Object.keys(icecreamColors); // ["chocolate", "vanilla", "strawberry"]

Object.entries()

返回一個由一個給定對象的鍵值對組成的數組。

比如，返回一個對象所有的鍵值對構成的數組：

const weather = {rain: 0,temperature: 24,humidity: 33, }const entries = Object.entries(weather); // [['rain', 0], ['temperature', 24], ['humidity', 33]]

Array spread

在數組中使用擴展運算符（…）可以展開數組中的元素。將多個數組合并成一個數組時非常有用。而且當移除數組中的某個元素時，我們也可以使用擴展運算符，而不需要常規的splice()方法，因為splice()方法會修改原始數組中的數據。

比如，合并兩個數組：

const spreadableOne = [1, 2, 3, 4]; const spreadableTwo = [5, 6, 7, 8];const combined = [...spreadableOne, ...spreadableTwo]; // [1, 2, 3, 4, 5, 6, 7, 8]

比如，移除數組中的元素而不改變原數組：

const animals = ['squirrel', 'bear', 'deer', 'salmon', 'rat']; const mammals = [...animals.slice(0,3), ...animals.slice(4)]; // ['squirrel', 'bear', 'deer', 'rat']

Object spread

擴展對象允許為一個沒有更改的對象添加新的屬性和方法（換句話說，創建了一個新對象）。對象擴展符也可以把多個對象合并在一起。注意，該方法不適合嵌套對象的復制。

比如，為新對象添加屬性和值而并不影響原始的對象：

const spreadableObject = {name: 'Robert',phone: 'iPhone' };const newObject = {...spreadableObject,carModel: 'Volkswagen' } // { carModel: 'Volkswagen', name: 'Robert', phone: 'iPhone' }

Function rest

函數可以使用剩余參數的語法來接受任意數量的實參。

比如，顯示傳入的實參數組：

function displayArgumentsArray(...theArguments) {console.log(theArguments); }displayArgumentsArray('hi', 'there', 'bud'); // ['hi', 'there', 'bud']

Object.freeze()

防止修改現有的對象屬性或者向對象添加新的屬性和值。通常認為該功能跟const很像，但是，const可以允許修改對象中的屬性。

比如，凍結一個對象以防止更改其屬性：

const frozenObject = {name: 'Robert' }Object.freeze(frozenObject);frozenObject.name = 'Henry'; // { name: 'Robert' }

Object.seal()

停止將任何新屬性添加到對象，但仍允許更改現有屬性。

比如：密封對象以防止添加wearWatch屬性：

const sealedObject = {name: 'Robert' }Object.seal(sealedObject);sealedObject.name = 'Bob'; sealedObject.wearsWatch = true; // { name: 'Bob' }

Object.assign()

允許將對象組合在一起。因為有了對象擴展的語法，Object.assign()的方法變得不那么重要。與對象擴展符一樣，它也不能實現深拷貝。如果想實現對象的深拷貝，一個很好的方法是使用像Lodash這樣的第三方庫。

比如， 把兩個對象合并成一個：

const firstObject = {firstName: 'Robert' }const secondObject = {lastName: 'Cooper' }const combinedObject = Object.assign(firstObject, secondObject); // { firstName: 'Robert', lastName: 'Cooper' }

總結

以上是生活随笔為你收集整理的17个实用的JavaScript数组和对象的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。