ES6與ES5新增常用方法總結(面試必問)

.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) );
// Will log the following:
// 'happy'
// 'sad'
// 'angry'

.some()

檢查數組中是否有項目通過該條件。 一個好的用例就是檢查用戶權限。 它也可以類似地用於.forEach(),你可以在每個數組項上執行操作,並在返回真值後跳出循環。

舉例

檢查數組中是否有'admin'。

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

.every()

與.some()類似,但檢查數組中的所有項是否通過條件。

舉例

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()

這是一種基於數組或字符串創建數組的靜態方法。 還可以將map回調函數作為參數傳遞給新數組中的數據。 老實說,我不太確定為什麼有人會通過.map()方法使用它。

舉例

從一個字符串創建一個數組。

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

創建一個數組,該數組的值是其他數組中每個項的值的兩倍。

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

Object.values()

返回一個對象值的數組。

舉例

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

Object.keys()

返回對象的鍵陣列。

舉例

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

Object.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()方法,因為它可以與slice()方法結合使用,以防止數組的直接變異。

舉例

合併兩個數組。

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只允許修改一個對象。

舉例

凍結對象以防止更改name屬性。

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

Object.seal()

停止將任何新屬性添加到對象,但仍允許更改現有屬性。

舉例

密封對象以防止添加wearsWatch屬性。

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

Object.assign()

允許將對象組合在一起。 此方法也可不用,因為可以改為使用對象擴展語法。 與對象擴展運算符一樣,Object.assign()也不會執行深層克隆。

舉例

將兩個對象組合成一個。const firstObject = {
 firstName: 'Robert'
}
const secondObject = {
 lastName: 'Cooper'
}
const combinedObject = Object.assign(firstObject, secondObject);
// { firstName: 'Robert', lastName: 'Cooper' }


分享到:


相關文章: