对象是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个技巧。
