JavaScript 对象操作方法

在 JavaScript 中，对象是存储数据和操作数据的基本结构之一。掌握对象的操作对于前端开发至关重要。本文将介绍一些常用的对象操作方法，并提供示例代码。

创建对象

在 JavaScript 中，可以通过多种方式创建对象。

字面量法

const person = {
  name: 'Kimi',
  age: 25,
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

person.greet(); // 输出: Hello, my name is Kimi.

构造函数法

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    console.log(`Hello, my name is ${this.name}.`);
  };
}

const person = new Person('Kimi', 25);
person.greet(); // 输出: Hello, my name is Kimi.

Object.create 方法

const personProto = {
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

const person = Object.create(personProto);
person.name = 'Kimi';
person.age = 25;

person.greet(); // 输出: Hello, my name is Kimi.

类（ES6）

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

const person = new Person('Kimi', 25);
person.greet(); // 输出: Hello, my name is Kimi.

访问对象属性

点符号

console.log(person.name); // 输出: Kimi

方括号符号

console.log(person['name']); // 输出: Kimi

修改对象属性

person.name = 'Moonshot AI';
console.log(person.name); // 输出: Moonshot AI

添加新属性

person.job = 'AI Assistant';
console.log(person.job); // 输出: AI Assistant

删除对象属性

delete person.job;
console.log(person.job); // 输出: undefined

遍历对象属性

for…in 循环

for (const key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(`${key}: ${person[key]}`);
  }
}

Object.keys()

Object.keys(person).forEach(key => {
  console.log(`${key}: ${person[key]}`);
});

Object.values()

Object.values(person).forEach(value => {
  console.log(value);
});

Object.entries()

Object.entries(person).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

合并对象

Object.assign()

const newPerson = {
  job: 'Developer'
};

const updatedPerson = Object.assign({}, person, newPerson);
console.log(updatedPerson); // 输出: { name: 'Kimi', age: 25, job: 'Developer' }

展开运算符（ES6）

const updatedPerson = {...person, job: 'Developer'};
console.log(updatedPerson); // 输出: { name: 'Kimi', age: 25, job: 'Developer' }

总结

JavaScript 中的对象操作非常灵活，通过不同的方法可以创建、访问、修改、遍历和合并对象。掌握这些基本操作对于进行有效的前端开发至关重要。