条条大路通罗马，不可不知的对象方法

2023-11-22 16:43:24

对象方法是 JavaScript 中的核心概念之一，熟练掌握对象方法可以快速处理数据、解决开发工作中遇到的问题，进而提高开发效率。本文将详细介绍 JavaScript 中的对象方法，包括浅复制、深复制、循环遍历、数组和字符串操作等。

1. 浅复制和深复制

浅复制和深复制都是 JavaScript 中常用的对象复制方法，浅复制只复制对象本身的属性，而深复制则复制对象本身的属性及其所有子属性。

浅复制可以使用 Object.assign() 方法实现，该方法将一个或多个对象的属性复制到目标对象中。例如：

const obj1 = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main Street',
    city: 'New York',
    state: 'NY'
  }
};

const obj2 = Object.assign({}, obj1);

obj2.name = 'Mary';
obj2.address.city = 'Boston';

console.log(obj1);
// { name: 'John', age: 30, address: { street: '123 Main Street', city: 'Boston', state: 'NY' } }

console.log(obj2);
// { name: 'Mary', age: 30, address: { street: '123 Main Street', city: 'Boston', state: 'NY' } }

从上面的例子可以看出，浅复制只复制了对象本身的属性，而对象本身的子属性并未被复制。因此，当修改浅复制的对象时，原对象也会受到影响。

深复制可以使用 JSON.parse(JSON.stringify()) 方法实现，该方法将对象转换为 JSON 字符串，然后再将 JSON 字符串解析回对象。例如：

const obj1 = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main Street',
    city: 'New York',
    state: 'NY'
  }
};

const obj2 = JSON.parse(JSON.stringify(obj1));

obj2.name = 'Mary';
obj2.address.city = 'Boston';

console.log(obj1);
// { name: 'John', age: 30, address: { street: '123 Main Street', city: 'New York', state: 'NY' } }

console.log(obj2);
// { name: 'Mary', age: 30, address: { street: '123 Main Street', city: 'Boston', state: 'NY' } }

从上面的例子可以看出，深复制复制了对象本身的属性及其所有子属性。因此，当修改深复制的对象时，原对象不会受到影响。

2. 循环遍历

循环遍历是 JavaScript 中常用的操作对象的方法，可以使用 for...in、for...of 和 Array.forEach() 方法实现。

for...in 循环遍历对象的可枚举属性，包括继承的属性。例如：

const obj = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main Street',
    city: 'New York',
    state: 'NY'
  }
};

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

输出：

name: John
age: 30
address: [object Object]

for...of 循环遍历对象的可迭代属性，包括继承的属性。例如：

const obj = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main Street',
    city: 'New York',
    state: 'NY'
  }
};

for (const value of Object.values(obj)) {
  console.log(value);
}

输出：

John
30
[object Object]

Array.forEach() 方法遍历数组中的每个元素，并对每个元素执行指定的回调函数。例如：

const arr = [1, 2, 3, 4, 5];

arr.forEach((element) => {
  console.log(element);
});

输出：

3. 数组和字符串操作

JavaScript 中的数组和字符串也是对象，因此可以使用对象方法对其进行操作。例如，可以使用 Array.push() 方法向数组中添加元素，可以使用 Array.pop() 方法从数组中删除元素，可以使用 String.slice() 方法从字符串中截取子字符串，可以使用 String.replace() 方法替换字符串中的子字符串等等。

例如：

const arr = [1, 2, 3, 4, 5];

arr.push(6);

console.log(arr);
// [1, 2, 3, 4, 5, 6]

arr.pop();

console.log(arr);
// [1, 2, 3, 4, 5]

const str = 'Hello world';

const subStr = str.slice(0, 5);

console.log(subStr);
// Hello

const newStr = str.replace('world', 'everyone');

console.log(newStr);
// Hello everyone