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

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

本文中所有提到的函數(shù)方法都是可以鏈?zhǔn)秸{(diào)用的，意味著它們可以相互結(jié)合地使用。更重要的是，它們并不會變更原始數(shù)據(jù)，當(dāng)使用React時，這點尤其重要。通過使用這些數(shù)組和對象的方法，你不再需要for和while循環(huán)來獲得數(shù)組和對象中的數(shù)據(jù)。

下面每個函數(shù)都包含一個鏈接，可以跳轉(zhuǎn)到相對應(yīng)的中文mozilla developer network（MDN）的解釋頁面。

.filter()

創(chuàng)建一個新數(shù)組, 其包含通過所提供函數(shù)實現(xiàn)的測試的所有元素。

比如，創(chuàng)建一個學(xué)生年齡數(shù)組，該數(shù)組的值必須大于法定飲酒年齡：

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

.map()

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

比如，創(chuàng)建一個數(shù)組，在每個數(shù)字的開頭添加一個$符號：

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

.reduce()

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

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

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

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

.forEach()

對數(shù)組的每個元素執(zhí)行一次提供的函數(shù)。

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

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

.some()

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

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

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

.every()

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

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

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

.includes()

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

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

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

Array.from()

這是一個可以從其他數(shù)組或者字符串中創(chuàng)造新array的方法。你也可以傳入一個回調(diào)函數(shù)作為參數(shù)來操作新數(shù)組的數(shù)據(jù)。

比如，通過一個字符串來創(chuàng)建數(shù)組：

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

比如，創(chuàng)建一個數(shù)組，該數(shù)組的值是其他數(shù)組中每個項的值的兩倍：

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

Objects.values()

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

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

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

Objects.keys()

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

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

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

Object.entries()

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

比如，返回一個對象所有的鍵值對構(gòu)成的數(shù)組：

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

Array spread

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

比如，合并兩個數(shù)組：

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

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

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

Object spread

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

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

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

Function rest

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

比如，顯示傳入的實參數(shù)組：

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

Object.freeze()

防止修改現(xiàn)有的對象屬性或者向?qū)ο筇砑有碌膶傩院椭怠?/strong>通常認(rèn)為該功能跟const很像，但是，const可以允許修改對象中的屬性。

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

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

Object.seal()

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

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

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

Object.assign()

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。