十個(gè)處理 JavaScript 對象的實(shí)用技巧！
本文來分享 10 個(gè)開發(fā)技巧，可以使用這些技巧來高效地操作和使用 JavaScript 對象。
一、創(chuàng)建一個(gè)絕對空的對象Summer IS HERE
我們可以通過 {} 來創(chuàng)建空對象。 然而，通過方法中創(chuàng)建的對象，proto、hasOwnProperty等對象方法仍然是存在的，這是因?yàn)槭褂?nbsp;{} 將創(chuàng)建一個(gè)繼承自 Object 類的對象。
如果需要?jiǎng)?chuàng)建一個(gè)絕對空的對象，最好使用 Object.create(null)，它將創(chuàng)建一個(gè)不從任何對象繼承且沒有屬性的對象。
let vehical = Object.create(null);
// vehicle.__proto__ === "undefined" ?二、使用擴(kuò)展運(yùn)算符組合兩個(gè)對象Summer IS HERE
在許多情況下，需要組合來自不同來源的兩個(gè)或多個(gè)數(shù)據(jù)集。
最常用的方法是使用 Object.assign()。該方法需要多個(gè)參數(shù)。 第一個(gè)是分配的對象，其余參數(shù)是需要組合的對象。
const name = { id: '1234', name: 'Charuka'};
const university = { id: '1234', university: 'Harvard'};
const PersonalDetails = Object.assign({}, name, university);
console.log(PersonalDetails);
// { id: '1234', name: 'Charuka', university: 'Harvard' }使用擴(kuò)展運(yùn)算符進(jìn)行組合更方便，只需展開任意數(shù)量的對象，并將它們組合成一個(gè)對象即可。
const PersonalDetails = { ...name, ...university };
console.log(PersonalDetails);
// { id: '1234', name: 'Charuka', university: 'Harvard' }需要注意，如果存在重復(fù)的鍵，那后面的會將覆蓋前面對象的鍵。
三、從對象獲取鍵和值的列表Summer IS HERE
在開發(fā)過程中，有時(shí)需要從對象中僅獲取鍵或僅獲取值?？梢酝ㄟ^以下兩個(gè)內(nèi)置函數(shù)來實(shí)現(xiàn)：
- Object.keys()：用于獲取鍵列表。
- Object.values()：用于獲取值列表。
const vehicle = { brand: 'BWM', year: 2022, type: 'suv'};
//獲取鍵
console.log(Object.keys(vehicle)); // [ 'brand', 'year', 'type' ]
//獲取值
console.log(Object.values(vehicle)); // [ 'BWM', 2022, 'suv' ]四、檢查屬性Summer IS HERE
使用 for-in 循環(huán)時(shí)，檢查對象的屬性有助于避免迭代對象原型中的屬性?？梢允褂?nbsp;Object.hasOwnProperty()進(jìn)行檢查，而不是使用 if-else。
const vehicle = { brand: 'BWM', year: 2022, type: 'suv'};
for (var item in vehicle) {
if (vehicle.hasOwnProperty(item)) {
console.log(item);
};
};
// brand
// year
// type五、克隆對象Summer IS HERE
假設(shè)有一個(gè)對象并且需要復(fù)制它以更改其值，但原始對象應(yīng)該保持不變?？梢酝ㄟ^以下方法來實(shí)現(xiàn)。
第一種方法是使用 Object.assign()，它將所有可枚舉屬性的值從一個(gè)對象復(fù)制到另一個(gè)對象。
const initialVehicle = { brand: 'BWM', year: 2022, type: 'suv'};
const secondaryVehicle = Object.assign({}, initialVehicle);
console.log(secondaryVehicle); // { brand: 'BWM', year: 2022, type: 'suv'};第二種方法是使用 JSON.parse() 復(fù)制對象。
var initialVehicle = { brand: 'BWM', year: 2022, type: 'suv'};
var secondaryVehicle = JSON.parse(JSON.stringify(initialVehicle));
console.log(secondaryVehicle); // { brand: 'BWM', year: 2022, type: 'suv'};六、從對象中選擇特定數(shù)據(jù)Summer IS HERE
針對對象中的特定鍵（key），可以使用不同的方法進(jìn)行選擇。選擇方法的選擇取決于希望對這些值進(jìn)行的操作。下面的示例展示了一種有條理的方式從對象中選擇數(shù)據(jù)，并可以選擇所需的鍵，并將它們提取到一個(gè)新的對象中。
const selectObj = (obj, items) => {
return items.reduce((result, item) => {
result[item] = obj[item];
return result;
}, {});
};
const vehicle = { brand: 'BWM', year: 2022, type: 'suv'};
const selected = selectObj(vehicle, ['brand', 'type']);
console.log(selected); // { brand: 'BWM', type: 'suv' }七、從對象中刪除鍵Summer IS HERE
有時(shí)我們需要從對象中刪除特定的鍵及其值。最合適的方法是編寫一個(gè)可重用的刪除方法，該方法將一個(gè)對象和要?jiǎng)h除的鍵列表作為輸入。 然后循環(huán)遍歷要?jiǎng)h除的每個(gè)鍵并將其從對象中刪除。
const remove = (object, removeList = []) => {
const result = { ...object };
removeList.forEach((item) => {
delete result[item];
});
return result;
}
const vehicle = { brand: 'BWM', year: 2022, type: 'suv'}
const itemRemoved = remove(vehicle, ['year']);
console.log(itemRemoved); // Result { brand: 'BWM', type: 'suv' }八、將對象數(shù)據(jù)拉入數(shù)組Summer IS HERE
在某些情況下，我們需要將對象數(shù)據(jù)拉入數(shù)組中，例如下拉菜單?？梢允褂?span> Object.entries() 函數(shù)，該函數(shù)將一個(gè)對象作為其第一個(gè)參數(shù)并返回一個(gè)數(shù)組。
返回的結(jié)果是一個(gè)二維數(shù)組。內(nèi)部數(shù)組將有兩個(gè)值：第一個(gè)是鍵，第二個(gè)是值。
const vehicle = { brand: 'BWM', year: 2022, type: 'suv'}
console.log(Object.entries(vehicle));
// [ [ 'brand', 'BWM' ], [ 'year', 2022 ], [ 'type', 'suv' ] ]九、循環(huán)訪問 JavaScript 對象Summer IS HERE
JavaScript 中有多種方法可用于循環(huán)訪問對象。
第一種方法是使用 Object.entries()，該函數(shù)可以避免查找原始對象中的每個(gè)值。
const vehicle = { brand: 'BWM', year: 2022, type: 'suv'}
Object.entries(vehicle).forEach(
([key, value]) => console.log(key, value)
);
// brand BWM
// year 2022
// type suv作為一種更好、更清晰的方法，可以使用 Object.entries() 進(jìn)行對象解構(gòu)。
const vehicle = { brand: 'BWM', year: 2022, type: 'suv'}
for (const [key, value] of Object.entries(vehicle)) {
console.log(key, value);
}
// brand BWM
// year 2022
// type suv十、有條件地向?qū)ο筇砑訉傩許ummer IS HERE
通常，開發(fā)人員使用 if-else 來有條件地向?qū)ο筇砑有略亍?然而，最簡單的方法是使用對象解構(gòu)和擴(kuò)展運(yùn)算符。
const type = { type: 'suv' };
const vehicle = {
brand: 'BMW',
year: 2022,
...(!type ? {} : type)
}
console.log(vehicle); //{ brand: 'BMW', year: 2022, type: 'suv' }同樣，使用不同的條件，可以向?qū)ο筇砑尤我鈹?shù)量的元素。
