處理 JavaScript 對象的十個技巧
對象是JavaScript程序的基本結(jié)構(gòu)，用于構(gòu)建類和復(fù)雜數(shù)據(jù)，是面向?qū)ο缶幊痰慕M成部分。
我作為一名全棧軟件開發(fā)人員，在過去的五年多時間里，每天都在使用JavaScript。對象在JavaScript中可以說發(fā)揮的作用至關(guān)重要。
本文將分享10個技巧，可幫助JavaScript開發(fā)人員更有效地操作和處理JavaScript對象。
1.創(chuàng)建絕對空的對象
創(chuàng)建空對象似乎只能通過{}。但是，你注意到了嗎，當(dāng)我們通過這種方法創(chuàng)建對象時，proto和hasOwnProperty等對象方法也會存在？這是因為{}將創(chuàng)建一個繼承自O(shè)bject類的對象。
如果需要創(chuàng)建一個絕對空的對象，最好使用Object.create(null)，它將創(chuàng)建一個不繼承且沒有屬性的對象。
let vehical = Object.create(null);
// vehicle.__proto__ === "undefined"
// There are no object properties, keys, or methods until we add2.使用spread運算符組合兩個對象
許多時候，我們需要組合來自不同源的兩個或多個數(shù)據(jù)集。在JavaScript中有多種方法可以做到這一點。
最常用的方法是Object.assign()。此方法接受多個參數(shù)。第一個參數(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' }但是，在不使事情復(fù)雜化的情況下，也可以使用spread運算符進行組合。不管多少數(shù)量的對象都可以組合成單個對象。
const PersonalDetails = { ...name, ...university };
console.log(PersonalDetails);
// { id: '1234', name: 'Charuka', university: 'Harvard' }需要注意的是，這兩種組合方法都會導(dǎo)致重復(fù)的鍵覆蓋前面對象的鍵。
3a.從對象獲取鍵和值的列表
在開發(fā)過程中，有時我們只需要從對象中獲取鍵或值。有兩個非常簡單的內(nèi)置函數(shù)：
- Object.keys()：用于獲取鍵列表。
- Object.values()：用于獲取值列表。
const vehicle = { brand: 'BWM', year: 2022, type: 'suv'};
//get keys
console.log(Object.keys(vehicle)); // [ 'brand', 'year', 'type' ]
//get values
console.log(Object.values(vehicle)); // [ 'BWM', 2022, 'suv' ]3b.使用hasOwnProperty()檢查項
使用for-in循環(huán)時，檢查對象的屬性對于避免遍歷對象原型中的屬性非常有用。此時我們可以使用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
// type4.使用splice而不是delete
使用delete方法時，應(yīng)用程序?qū)⒂胾ndefined替換項，而不是將其從數(shù)組中刪除。因此，最好使用splice()來刪除數(shù)組中的項。
讓我們看看使用delete時會發(fā)生什么。
var arrayItems = ['a' , 2 , 'b', '3', 'c', '4'];
arrayItems.length; // returns 6
delete arrayItems[2]; // returns true
arrayItems.length; // returns 6
console.log(arrayItems); // [ 'a', 2, undefined, '3', 'c', '4' ]而使用splice()時，又會發(fā)生什么。
var arrayItems = ['a' , 2 , 'b', '3', 'c', '4'];
arrayItems.length; // returns 6
arrayItems.splice(2,1); // returns true
arrayItems.length; // returns 5
console.log(arrayItems); // [ 'a', 2, '3', 'c', '4' ]delete方法應(yīng)該用于刪除對象屬性。
5.正確克隆對象
假設(shè)有一個對象，你需要復(fù)制并更改復(fù)制對象的值，但原始對象保持不變。有兩種方法可以做到這一點。
第一種方法是使用Object.assign()，將所有可枚舉屬性的值從一個對象復(fù)制到另一個對象。
var initialVehicle = { brand: 'BWM', year: 2022, type: 'suv'};
var 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'};6.從對象中選擇特定數(shù)據(jù)
有若干方法可用于從對象中選擇鍵。選擇哪種方法取決于我們要對值執(zhí)行的操作。下面的示例演示的是從對象中選擇數(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' }7.從對象中刪除鍵
有時我們需要從對象中刪除特定的鍵和值。
比如說在構(gòu)建API并希望刪除敏感數(shù)據(jù)的場景中，這可能是必需的。
最合適的方法是編寫可重用的remove方法，將對象和要刪除的鍵列表作為入?yú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' }8.將對象數(shù)據(jù)拉取到數(shù)組
在某些情況下，你需要將對象數(shù)據(jù)拉取到數(shù)組中，例如下拉菜單。那么可以使用Object.entries()函數(shù)，該函數(shù)將對象作為其第一個參數(shù)并返回數(shù)組。
返回的對象是數(shù)組的數(shù)組。內(nèi)部數(shù)組有兩個值：第一個是鍵，第二個是值。
const vehicle = { brand: 'BWM', year: 2022, type: 'suv'}
console.log(Object.entries(vehicle));
// [ [ 'brand', 'BWM' ], [ 'year', 2022 ], [ 'type', 'suv' ] ]9. 循環(huán)遍歷JavaScript對象
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還有一種更好、更清晰的方法，那就是將對象解構(gòu)與Object.entries()一起使用。
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 suv10. 有條件地向?qū)ο筇砑訉傩?/h2>
通常，開發(fā)人員使用if-else條件向?qū)ο筇砑有略?。最簡單的方法是使用對象解?gòu)和spread運算符。
const type = { type: 'suv' };
const vehicle = {
brand: 'BMW',
year: 2022,
...(!type ? {} : type)
}
console.log(vehicle); //{ brand: 'BMW', year: 2022, type: 'suv' }同理，你可以向?qū)ο筇砑尤我鈹?shù)量的元素。
總結(jié)
與任何其他編程語言一樣，JavaScript有很多處理對象的技巧，可以使編寫程序變得更簡單、更漂亮。本文討論了我在處理對象時最常用的10個技巧。
