摘要：原文作者譯者前段時(shí)間，我收聽了一個(gè)很棒的播客，其中總結(jié)了一些實(shí)用的數(shù)組和對象方法。通過使用這些數(shù)組和對象的方法，你不再需要和循環(huán)來獲得數(shù)組和對象中的數(shù)據(jù)。比如，顯示傳入的實(shí)參數(shù)組防止修改現(xiàn)有的對象屬性或者向?qū)ο筇砑有碌膶傩院椭怠?/p>

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

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

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

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

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

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

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

創(chuàng)建一個(gè)新數(shù)組，其結(jié)果是該數(shù)組中的每個(gè)元素都調(diào)用一個(gè)提供的函數(shù)后返回的結(jié)果。該方法非常便于數(shù)據(jù)處理，而且在React代碼中?？吹?，因?yàn)樗粫?huì)改變原始數(shù)組中的數(shù)據(jù)。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

const icecreamColors = {
    chocolate: "brown",
    vanilla: "white",
    strawberry: "red",
}

const colors = Object.values(icecreamColors);
// ["brown", "white", "red"]

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

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

const icecreamColors = {
  chocolate: "brown",
  vanilla: "white",
  strawberry: "red",
}

const types = Object.keys(icecreamColors);
// ["chocolate", "vanilla", "strawberry"]

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

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

const weather = {
  rain: 0,
  temperature: 24,
  humidity: 33,
}

const entries = Object.entries(weather);
// [["rain", 0], ["temperature", 24], ["humidity", 33]]

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

比如，合并兩個(gè)數(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"]

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

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

const spreadableObject = {
  name: "Robert",
  phone: "iPhone"
};

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

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

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

function displayArgumentsArray(...theArguments) {
  console.log(theArguments);
}

displayArgumentsArray("hi", "there", "bud");
// ["hi", "there", "bud"]

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

const frozenObject = {
  name: "Robert"
}

Object.freeze(frozenObject);

frozenObject.name = "Henry";
// { name: "Robert" }

const sealedObject = {
  name: "Robert"
}

Object.seal(sealedObject);

sealedObject.name = "Bob";
sealedObject.wearsWatch = true;
// { name: "Bob" }

const firstObject = {
  firstName: "Robert"
}

const secondObject = {
  lastName: "Cooper"
}

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