17個實用的JavaScript數組和對象的方法

原文： 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' }