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