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