十個處理 JavaScript 對象的實用技巧！
本文來分享 10 個開發(fā)技巧，可以使用這些技巧來高效地操作和使用 JavaScript 對象。
一、創(chuàng)建一個絕對空的對象Summer IS HERE
我們可以通過 {} 來創(chuàng)建空對象。 然而，通過方法中創(chuàng)建的對象，proto、hasOwnProperty等對象方法仍然是存在的，這是因為使用 {} 將創(chuàng)建一個繼承自 Object 類的對象。
如果需要創(chuàng)建一個絕對空的對象，最好使用 Object.create(null)，它將創(chuàng)建一個不從任何對象繼承且沒有屬性的對象。
let vehical = Object.create(null);
// vehicle.__proto__ === "undefined" ?二、使用擴展運算符組合兩個對象Summer IS HERE
在許多情況下，需要組合來自不同來源的兩個或多個數(shù)據(jù)集。
最常用的方法是使用 Object.assign()。該方法需要多個參數(shù)。 第一個是分配的對象，其余參數(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' }使用擴展運算符進行組合更方便，只需展開任意數(shù)量的對象，并將它們組合成一個對象即可。
const PersonalDetails = { ...name, ...university };
console.log(PersonalDetails);
// { id: '1234', name: 'Charuka', university: 'Harvard' }需要注意，如果存在重復(fù)的鍵，那后面的會將覆蓋前面對象的鍵。
三、從對象獲取鍵和值的列表Summer IS HERE
在開發(fā)過程中，有時需要從對象中僅獲取鍵或僅獲取值。可以通過以下兩個內(nèi)置函數(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)時，檢查對象的屬性有助于避免迭代對象原型中的屬性?？梢允褂?nbsp;Object.hasOwnProperty()進行檢查，而不是使用 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è)有一個對象并且需要復(fù)制它以更改其值，但原始對象應(yīng)該保持不變?？梢酝ㄟ^以下方法來實現(xiàn)。
第一種方法是使用 Object.assign()，它將所有可枚舉屬性的值從一個對象復(fù)制到另一個對象。
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），可以使用不同的方法進行選擇。選擇方法的選擇取決于希望對這些值進行的操作。下面的示例展示了一種有條理的方式從對象中選擇數(shù)據(jù)，并可以選擇所需的鍵，并將它們提取到一個新的對象中。
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
有時我們需要從對象中刪除特定的鍵及其值。最合適的方法是編寫一個可重用的刪除方法，該方法將一個對象和要刪除的鍵列表作為輸入。 然后循環(huán)遍歷要刪除的每個鍵并將其從對象中刪除。
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ù)組中，例如下拉菜單。可以使用 Object.entries() 函數(shù)，該函數(shù)將一個對象作為其第一個參數(shù)并返回一個數(shù)組。
返回的結(jié)果是一個二維數(shù)組。內(nèi)部數(shù)組將有兩個值：第一個是鍵，第二個是值。
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ù)可以避免查找原始對象中的每個值。
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() 進行對象解構(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)和擴展運算符。
const type = { type: 'suv' };
const vehicle = {
brand: 'BMW',
year: 2022,
...(!type ? {} : type)
}
console.log(vehicle); //{ brand: 'BMW', year: 2022, type: 'suv' }同樣，使用不同的條件，可以向?qū)ο筇砑尤我鈹?shù)量的元素。
