JavaScript中有用的Array和Object方法

我收聽了一個很棒的語法FM播客，它總結了有用的JavaScript 陣列和物件方法。這些方法可以幫助開發人員編寫乾淨而且可讀性高的程式碼。許多這樣的方法可以減少像Lodash這樣的實用程式庫的依賴。

本文中的所有方法都是可鏈式呼叫的，這意味著它們可以相互結合使用，而且它們也不會發生資料突變，這在使用React時尤其重要。 使用所有這些陣列和物件的方法，你將發現再也不需要再進行 for 或 while 迴圈來達到目的了。

.filter()

檢視MDN文件

根據陣列元素是否通過特定條件測試來建立新陣列。

示例

建立一個符合法定飲酒年齡的學生年齡陣列。

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

.map()

檢視MDN文件

通過操作一個陣列中的值來建立一個新陣列。 這個方法非常適合資料操作，它經常用於React，因為它是一種不可變的方法。

示例

建立一個陣列，在每個數字的開頭新增一個$。

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

.reduce()

檢視MDN文件

這是一個經常被忽視的方法，使用一個累加器將陣列中的所有元素項減少為單個值。非常適合計算總數。返回的值可以是任何型別（即物件，陣列，字串，整數）。

示例

把陣列中的整數加起來。

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

在MDN文件中，列出的 .reduce() 一些非常酷的用例，比如如何執行平鋪陣列，通過屬性對物件分組，以及刪除陣列中的重複項等操作示例。

.forEach()

檢視MDN文件

在陣列中的每個元素項上應用一個函式。

示例

將每個陣列元素項記錄到控制檯

const emotions = [`happy`, `sad`, `angry`];
emotions.forEach( emotion => console.log(emotion) );
// 控制檯將列印:
// `happy`
// `sad`
// `angry`

.some()

檢視MDN文件

檢查陣列中的任何元素是否通過該條件。一個好的用例是檢查使用者許可權。它也可以類似於.forEach()，您可以在每個陣列項上執行操作，並在返回真值(truthy)後跳出迴圈。

示例

檢查陣列中是否至少有一個’admin’。

const userPrivileges = [`user`, `user`, `user`, `admin`];
const containsAdmin = userPrivileges.some( element => element === `admin`);
// containsAdmin 將等於 true

.every()

檢視MDN文件

與 .some() 類似，但檢查陣列中的所有項是否通過條件。

示例

檢查所有評級是否等於或大於3星。

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

.includes()

檢視MDN文件

檢查陣列是否包含某個值。它類似於 .some() ，但是它不是尋找要傳遞的條件，而是檢視陣列是否包含一個特定的值。

示例

檢查陣列是否包含字串 ‘waldo’ 元素項。

const names = [`sophie`, `george`, `waldo`, `stephen`, `henry`];
const includesWaldo = names.includes(`waldo`);
// includesWaldo 將等於 true

Array.from()

檢視MDN文件

這是一種基於另一個陣列或字串建立陣列的靜態方法。 您還可以將 map回撥函式作為引數，新陣列中的每個元素會執行該回撥函式。 老實說，我不太確定為什麼有人會通過 .map() 方法使用它。

示例

從一個字串建立一個陣列。

const newArray = Array.from(`hello`);
// newArray 將等於 [`h`, `e`, `l`, `l`, `o`]

建立一個陣列，該陣列的值是另一個陣列中每個值的兩倍。

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

Object.values()

檢視MDN文件

返回一個物件屬性值的陣列。

示例

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

Object.keys()

檢視MDN文件

返回一個物件屬性名的陣列。

示例

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

Object.entries()

檢視MDN文件

建立一個陣列，其中包含一個物件的鍵/值對陣列。

示例

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

Array spread (陣列展開)

檢視MDN文件

使用展開運算子（ ... ）展開陣列，允許你展開陣列中的元素。 將一堆陣列連線在一起時非常有用。 當從陣列中刪除某些元素時，避免使用 splice() 方法也是一種好方法，因為它可以與 slice() 方法結合使用，以防止陣列的直接突變。

示例

組合兩個陣列。

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

刪除一個陣列元素而不改變原始陣列。

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

Object spread (物件展開)

檢視MDN文件

展開一個物件，允許向一個物件新增新的屬性和值，而不突變(比如建立一個新物件)，也可以將多個物件組合在一起。應該注意的是，展開物件不會進行巢狀複製。

示例

新增一個新的物件屬性和值，而不會改變原始物件。

const spreadableObject = {
  name: `Robert`,
  phone: `iPhone`
};
 
const newObject = {
  ...spreadableObject,
  carModel: `Volkswagen`
}
// newObject 將等於
// { carModel: `Volkswagen`, name: `Robert`, phone: `iPhone` }

Function Rest （剩餘引數）

檢視MDN文件

函式可以使用 rest（剩餘）引數語法接受任意數量的引數作為陣列。

示例

顯示傳遞引數的陣列。

function displayArgumentsArray(...theArguments) {
  console.log(theArguments);
}
 
displayArgumentsArray(`hi`, `there`, `bud`);
// 將列印 [`hi`, `there`, `bud`]

Object.freeze()

檢視MDN文件

防止你修改現有的物件屬性或向物件新增新的屬性和值。通常人們認為 const 會這樣做，但是 const 允許你修改物件。

示例

凍結物件以防止更改 name 屬性。

const frozenObject = {
  name: `Robert`
}
 
Object.freeze(frozenObject);
 
frozenObject.name = `Henry`;
// frozenObject 將等於 { name: `Robert` }

Object.seal()

檢視MDN文件

拒絕將任何新屬性新增到物件，但允許更改現有屬性。

示例

封閉一個物件，以防止新增 wearsWatch 屬性。

const sealedObject = {
  name: `Robert`
}
 
Object.seal(sealedObject);
 
sealedObject.name = `Bob`;
sealedObject.wearsWatch = true;
// sealedObject 將等於 { name: `Bob` }

Object.assign()

檢視MDN文件

允許物件組合在一起。不再需要這個方法，因為您可以使用上面說的物件展開語法。與物件展開操作符一樣，Object.assign() 也不會執行深層克隆。當談到深度克隆物件時，Lodash 是你最好的朋友。

示例

將兩個物件組合成一個。

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

本文來源： 掘金 如需轉載請聯絡原作者