处理 JavaScript 对象的十个技巧-51CTO.COM

对象是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 add

2.使用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
// type

4.使用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 suv

10. 有条件地向对象添加属性

通常，开发人员使用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个技巧。