对象是 JavaScript 程序的基本构建块，用于构建类和复杂数据，也是面向对象编程的重要组成部分。

作为一名全栈开发人员，我每天都在使用 JavaScript，JavaScript的对象起到了至关重要的作用。

在本文中，我将分享 10 个 JavaScript 开发人员较常使用的技巧和方法，以便有效地操作和处理 JavaScript 对象。

1.创建一个空对象

通常我们创建空对象可能最先想到的是使用对象字面量 const obj = {} 即可。然而，你是否注意到用这种方法创建对象时，对象的方法（例如 proto 和 hasOwnProperty ）仍然存在？这是因为使用 {} 将创建一个继承自 Object 类的对象。

如果你需要创建一个完全空的对象，最好使用 Object.create(null)，它创建一个没有继承任何东西并且没有属性的对象。

const animal = Object.create(null);

// 在我们手动添加之前，没有对象属性、键或方法
// Output: true
console.log(typeof animal.__proto__ === "undefined")

2.使用展开运算符组合对象

有很多情况下，您需要将来自不同来源的两个或多个数据集合并。JavaScript 有多种方法可以实现该需求。

最常用的方法是使用 Object.assign()。该方法接受多个参数,第一个参数是被赋值的对象，其余的参数是我们需要合并的对象。

const dog = { sex: 'male', name: 'Kitty'};
const cat = { sex: 'female', aliasName: 'Wintty'};
const animal = Object.assign({}, dog, cat);

// Output: { sex: 'female', name: 'Kitty', aliasName: 'Wintty' }
console.log(animal); 

不过，为了避免事情复杂化，您可以使用展开运算符进行组合。你可以展开任意数量的对象，将它们合并成一个对象。

const dog = { sex: 'male', name: 'Kitty'};
const cat = { sex: 'female', aliasName: 'Wintty'};
const animal = { ...dog, ...cat}

// Output: { sex: 'female', name: 'Kitty', aliasName: 'Wintty' }
console.log(animal); 

需要注意的一个重要事实是，在这两个方法中，重复的键将覆盖前面对象的键。

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

在开发过程中，有时我们只需要获取对象的键或值。下面的两个内置函数都非常简单：

Object.keys()：用于获取键的列表。Object.values()：用于获取值的列表。

const dog = { sex: 'male', name: 'Kitty'};
const cat = { sex: 'female', aliasName: 'Wintty'};
const animal = { ...dog, ...cat}

// Output: [ 'sex', 'name', 'aliasName' ]
console.log(Object.keys(animal)); 

// Output: [ 'female', 'Kitty', 'Wint5y' ]
console.log(Object.values(animal)); 

使用 hasOwnProperty() 检查项

在使用 for-in 循环时，检查对象的属性是否存在可以避免遍历对象的原型属性，这非常有用。我们可以使用 Object.hasOwnProperty() 来代替使用 if-else 块。

const dog = { sex: 'male', name: 'Kitty'};
const cat = { sex: 'female', aliasName: 'Wintty'};
const animal = { ...dog, ...cat}

for(let key in animal) {
  if(animal.hasOwnProperty(key)) {
    console.log(key);
  }
}

4.使用 splice 而不是 delete

使用 delete 方法时，应用程序会将一个项替换为 undefined，而不是从数组中删除它。因此，最好使用 splice() 从数组中删除一个项。

让我们看看使用 delete 时会发生什么：

const chars = ['a', 'b', 'c', 'd'];

// Output: 4
console.log(chars.length);

delete chars[2];

// Output: 4
console.log(chars.length);

// Output: [ 'a', 'b', <1 empty item>, 'd' ]
console.log(chars);

使用 splice() 时，会发生以下情况：

const chars = ['a', 'b', 'c', 'd'];

// Output: 4
console.log(chars.length);

chars.splice(2, 1)

// Output: 3
console.log(chars.length);

// Output: [ 'a', 'b', 'd' ]
console.log(chars);

5.正确地克隆一个对象

假设您有一个对象，并且需要将其复制并更改其值，但原始对象应保持不变。有两种方法可以做到这一点。

方法一：使用扩展运算符(推荐)

const dog = { sex: 'male', name: 'Kitty'};
const newDog = {...dog};

newDog.aliasName = 'wintty';

// Output: { sex: 'male', name: 'Kitty', aliasName: 'wintty' }
console.log(newDog); 

// Output: { sex: 'male', name: 'Kitty' }
console.log(dog);

方法二：使用 Object.assign()

const dog = { sex: 'male', name: 'Kitty'};
const newDog = Object.assign({}, dog);

// Output: { sex: 'male', name: 'Kitty' }
console.log(newDog); 

方法三：使用 JSON.parse()复制对象

const dog = { sex: 'male', name: 'Kitty'};
const newDog = JSON.parse(JSON.stringify(dog));

newDog.aliasName = 'Wintty';

// Output: { sex: 'male', name: 'Kitty', aliasName: 'Wintty' }
console.log(newDog); 

// Output: { sex: 'male', name: 'Kitty' }
console.log(dog);

6.从对象中选择特定的数据

有几种方法可以从对象中选择键。您选择的方法取决于您想要做什么以及对值的处理方式。下面的例子展示了从对象中选择数据的有组织的方式。

在这里，您可以选择您需要的键，并将它们提取到一个新对象中。

const selectItem = (obj, items) => { 
  return items.reduce((result, item) => {
    result[item] = obj[item]; 
    return result;
  }, {});
};
const animal = { sex: 'female', name: 'Kitty', aliasName: 'Wintty' }
const selectedKeys = selectItem(animal, ['sex', 'name']);

// Output: { sex: 'female', name: 'Kitty' }
console.log(selectedKeys); 

7.从对象中删除键

有时需要从对象中删除特定的键及其值。这可能是必要的场景之一，例如构建 API 并希望删除敏感数据。

最合适的方法是编写一个可重用的 remove 方法，它接受一个对象和要删除的键列表作为输入。然后，您可以循环遍历要删除的每个键，并从对象中删除它。

const remove = (object, removeList = []) => {
  const result = { ...object };
  removeList.forEach((item) => {
    delete result[item];
  });
  return result;
}

const animal = { sex: 'female', name: 'Kitty', aliasName: 'Wintty' }

const result = remove(animal, ['name']);

// Output: { sex: 'female', aliasName: 'Wintty' }
console.log(result);

8.将对象数据提取到数组中

有时需要将对象数据提取到数组中，例如下拉菜单。您可以使用Object.entries() 函数，它以对象为第一个参数，并返回一个数组。

返回的对象是一个二维数组，内部数组将有两个值：第一个是键，第二个是值。

const animal = { sex: 'female', name: 'Kitty', aliasName: 'Wintty' }

// Output: [ [ 'sex', 'female' ], [ 'name', 'Kitty' ], [ 'aliasName', 'Wintty' ] ]
console.log(Object.entries(animal));

9.遍历 JavaScript 对象

JavaScript 有几种方法可以用来循环遍历对象。我将比较使用的两种最佳方法。

方法一：Object.entries()：

第一种方法是使用 Object.entries()，这个方法避免了在原始对象中查找每个值。

const animal = { sex: 'female', name: 'Kitty', aliasName: 'Wintty' }

// Output: sex=female&name=Kitty&aliasName=Wintty
console.log(Object.entries(animal).map(([key, value]) => `${key}=${value}`).join('&'));

作为一种更好且更清晰的方法，您可以在 Object.entries() 中使用对象解构。

const animal = { sex: 'female', name: 'Kitty', aliasName: 'Wintty' }

for (const [key, value] of Object.entries(animal)) {
  console.log(`${key}=${value}`);
}

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

通常，开发人员使用 if-else 条件作为一个更长的方法，将新元素有条件地添加到对象中。然而，最简单的方法是使用对象解构和展开运算符。

const dog = { sex: 'male' };
const animal = {
  age: 40,
  sex: 'female',
  ...dog
}

// Output: { age: 40, sex: 'male' }
console.log(animal);

同样，使用不同的条件，您可以向对象添加任意多个元素。

总结

像任何其他编程语言一样，JavaScript 有许多处理对象的技巧，使我们能够更简单和更优雅地编写我们的程序。本文介绍了在日常开发这回能够处理对象最常用的 10 个技巧和发放，希望对您有帮助！