10 个处理 JavaScript 对象的实用技巧

1. 10 个处理 JavaScript 对象的实用技巧!

本文来分享 10 个开发技巧, 可以使用这些技巧来高效地操作和使用 JavaScript 对象。

1.1. 创建一个绝对空的对象

我们可以通过 {} 来创建空对象。 然而, 通过方法中创建的对象, proto、hasOwnProperty 等对象方法仍然是存在的, 这是因为使用 {} 将创建一个继承自 Object 类的对象。

如果需要创建一个绝对空的对象, 最好使用 Object.create(null), 它将创建一个不从任何对象继承且没有属性的对象。

let vehical = Object.create(null);

// vehicle.__proto__ === "undefined"

1.2. 使用扩展运算符组合两个对象

在许多情况下, 需要组合来自不同来源的两个或多个数据集。

最常用的方法是使用 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' }

使用扩展运算符进行组合更方便, 只需展开任意数量的对象, 并将它们组合成一个对象即可。

const PersonalDetails = { ...name, ...university };

console.log(PersonalDetails); 
// { id: '1234', name: 'Charuka', university: 'Harvard' }

需要注意, 如果存在重复的键, 那后面的会将覆盖前面对象的键。

1.3. 从对象获取键和值的列表

在开发过程中, 有时需要从对象中仅获取键或仅获取值。可以通过以下两个内置函数来实现:

• 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' ]

1.4. 检查属性

使用 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

1.5. 克隆对象

假设有一个对象并且需要复制它以更改其值, 但原始对象应该保持不变。可以通过以下方法来实现。

第一种方法是使用 Object.assign(), 它将所有可枚举属性的值从一个对象复制到另一个对象。

const initialVehicle = { brand: 'BWM', year: 2022, type: 'suv'};
const 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'};

1.6. 从对象中选择特定数据

针对对象中的特定键 (key), 可以使用不同的方法进行选择。选择方法的选择取决于希望对这些值进行的操作。下面的示例展示了一种有条理的方式从对象中选择数据, 并可以选择所需的键, 并将它们提取到一个新的对象中。

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' }

1.7. 从对象中删除键

有时我们需要从对象中删除特定的键及其值。最合适的方法是编写一个可重用的删除方法, 该方法将一个对象和要删除的键列表作为输入。 然后循环遍历要删除的每个键并将其从对象中删除。

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' }

1.8. 将对象数据拉入数组

在某些情况下, 我们需要将对象数据拉入数组中, 例如下拉菜单。可以使用 Object.entries() 函数, 该函数将一个对象作为其第一个参数并返回一个数组。

返回的结果是一个二维数组。内部数组将有两个值: 第一个是键, 第二个是值。

const vehicle = { brand: 'BWM', year: 2022, type: 'suv'}
console.log(Object.entries(vehicle)); 
// [ [ 'brand', 'BWM' ], [ 'year', 2022 ], [ 'type', 'suv' ] ]

1.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

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

通常, 开发人员使用 if-else 来有条件地向对象添加新元素。 然而, 最简单的方法是使用对象解构和扩展运算符。

const type = { type: 'suv' };
const vehicle = {
  brand: 'BMW',
  year: 2022,
  ...(!type ? {} : type)
}
console.log(vehicle); //{ brand: 'BMW', year: 2022, type: 'suv' }

同样, 使用不同的条件, 可以向对象添加任意数量的元素。