js 对象赋值|极客教程

js 对象赋值

1. 引言

在 JavaScript 中，对象是一种复合数据类型，它可以存储多个键值对。对象的赋值是一种常见的操作，通过赋值我们可以创建一个对象的副本或者将一个对象的属性值复制给另一个对象。本文将详细讨论 JavaScript 对象赋值的相关知识点，包括浅赋值和深赋值，以及对象赋值的常见问题和解决方案。

2. 浅赋值

浅赋值是指将一个对象的引用直接赋值给另一个变量，使两个变量指向同一个对象。这意味着对其中一个变量所做的修改会影响另一个变量。

示例代码如下：

let obj1 = { name: 'Alice', age: 20 };
let obj2 = obj1;

obj1.name = 'Bob';

console.log(obj1);  // 输出: { name: 'Bob', age: 20 }
console.log(obj2);  // 输出: { name: 'Bob', age: 20 }

上述代码中，变量 obj1 和 obj2 都指向同一个对象。当我们修改 obj1 的 name 属性时，同时也修改了 obj2 指向的对象的 name 属性。

需要注意的是，浅赋值只复制了对象的引用，并没有复制对象的内容。因此，当我们修改其中一个对象的属性时，另一个对象也会受到影响。

3. 深赋值

深赋值是指将一个对象的属性值复制给另一个对象，而不是复制对象的引用。这样，当我们修改其中一个对象的属性时，不会对另一个对象产生影响。

JavaScript 中的浅赋值不能实现深赋值，我们需要使用一些方法来实现深赋值。常见的方法包括：

手动遍历对象属性，逐个复制属性值
使用 Object.assign() 方法
使用 JSON 序列化和反序列化

3.1 手动遍历对象属性

我们可以通过手动遍历对象的属性，将属性值逐个复制给另一个对象来实现深赋值。这种方式比较繁琐，但是比较灵活，可以根据需要选择复制哪些属性。

示例代码如下：

function deepCopy(obj) {
  let newObj = {};

  for (let key in obj) {
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      newObj[key] = deepCopy(obj[key]);  // 递归调用深拷贝函数
    } else {
      newObj[key] = obj[key];  // 复制属性值
    }
  }

  return newObj;
}

let obj1 = { name: 'Alice', age: 20, address: { city: 'Beijing', country: 'China' } };
let obj2 = deepCopy(obj1);

obj1.name = 'Bob';
obj1.address.city = 'Shanghai';

console.log(obj1);  // 输出: { name: 'Bob', age: 20, address: { city: 'Shanghai', country: 'China' } }
console.log(obj2);  // 输出: { name: 'Alice', age: 20, address: { city: 'Beijing', country: 'China' } }

上述代码中，我们定义了一个 deepCopy 函数，该函数通过递归调用实现了深拷贝。当属性值为对象时，我们再次调用 deepCopy 函数复制该对象的属性值。这样，无论是对象还是对象的嵌套属性，都能够正确地进行深拷贝。

3.2 使用 Object.assign() 方法

Object.assign() 方法可以用来将一个或多个源对象的属性复制给目标对象。如果目标对象的属性和源对象的属性重名，将会覆盖目标对象的属性。

示例代码如下：

let obj1 = { name: 'Alice', age: 20 };
let obj2 = Object.assign({}, obj1);

obj1.name = 'Bob';

console.log(obj1);  // 输出: { name: 'Bob', age: 20 }
console.log(obj2);  // 输出: { name: 'Alice', age: 20 }

上述代码中，我们使用 Object.assign() 方法将 obj1 的属性复制给了一个空对象，生成了一个新的对象 obj2。这样，修改 obj1 的属性不会影响 obj2。

需要注意的是，Object.assign() 方法只能进行浅拷贝，如果源对象的属性是一个对象，则只复制对象的引用。如果需要实现深拷贝，可以结合使用 JSON.stringify() 和 JSON.parse() 方法。

3.3 使用 JSON 序列化和反序列化

JSON.stringify() 方法可以将 JavaScript 对象转换为 JSON 字符串，而 JSON.parse() 方法可以将 JSON 字符串转换为 JavaScript 对象。通过将对象进行序列化和反序列化，我们可以实现深拷贝。

示例代码如下：

let obj1 = { name: 'Alice', age: 20, address: { city: 'Beijing', country: 'China' } };
let obj2 = JSON.parse(JSON.stringify(obj1));

obj1.name = 'Bob';
obj1.address.city = 'Shanghai';

console.log(obj1);  // 输出: { name: 'Bob', age: 20, address: { city: 'Shanghai', country: 'China' } }
console.log(obj2);  // 输出: { name: 'Alice', age: 20, address: { city: 'Beijing', country: 'China' } }

上述代码中，我们先使用 JSON.stringify() 方法将 obj1 转换为 JSON 字符串，再使用 JSON.parse() 方法将 JSON 字符串转换为对象，生成了一个新的对象 obj2。这样，修改 obj1 的属性不会对 obj2 产生影响。

需要注意的是，该方法也有一些限制，无法处理循环引用和特殊对象（如正则表达式、日期对象等）。

4. 对象赋值的常见问题和解决方案

在实际开发过程中，我们经常会遇到对象赋值的一些常见问题，本节将介绍这些问题并给出相应的解决方案。

4.1 循环引用

循环引用是指两个或多个对象之间形成了循环的引用关系，导致深拷贝时陷入死循环。

示例代码如下：

let obj1 = { name: 'Alice' };
let obj2 = { friend: obj1 };

obj1.friend = obj2;

// 以下代码将导致死循环
let obj3 = JSON.parse(JSON.stringify(obj1));

console.log(obj3);

上述代码中，obj1 和 obj2 形成了循环引用，当我们使用 JSON.stringify() 方法将 obj1 序列化时，会抛出错误 “TypeError: Converting circular structure to JSON”，因为 JSON.stringify() 方法不能处理循环引用的情况。

解决循环引用的方法之一是使用第三方库，如 Lodash 的 cloneDeep() 方法，该方法可以处理循环引用并实现深拷贝。

示例代码如下：

const _ = require('lodash');

let obj1 = { name: 'Alice' };
let obj2 = { friend: obj1 };

obj1.friend = obj2;

let obj3 = _.cloneDeep(obj1);

console.log(obj3);  // 输出: { name: 'Alice', friend: { friend: { name: 'Alice' } } }

通过使用 _.cloneDeep() 方法，我们成功地处理了循环引用的情况，并且实现了深拷贝。

4.2 嵌套对象处理

在进行对象赋值时，如果对象中存在嵌套对象，我们需要特别注意处理嵌套对象的深拷贝。

示例代码如下：

let obj1 = { name: 'Alice', address: { city: 'Beijing', country: 'China' } };
let obj2 = Object.assign({}, obj1);

obj1.name = 'Bob';
obj1.address.city = 'Shanghai';

console.log(obj1);  // 输出: { name: 'Bob', address: { city: 'Shanghai', country: 'China' } }
console.log(obj2);  // 输出: { name: 'Alice', address: { city: 'Shanghai', country: 'China' } }

上述代码中，我们使用 Object.assign() 方法进行对象赋值，但是发现修改 obj1.address.city 的值时，obj2.address.city 的值也发生了变化。这是因为 Object.assign() 方法只进行了浅拷贝，只复制了对象的引用。

解决这个问题的方法之一是使用深拷贝的方式，如前文所述的手动遍历对象属性、使用 JSON.parse() 和 JSON.stringify() 方法等。

4.3 对象的方法和原型链

在对象赋值时，需要注意赋值的对象是否包含方法和原型链。如果需要复制对象的方法和原型链，可以使用 Object.create() 方法创建一个新的对象，并将原对象的方法和原型链复制给新对象。

示例代码如下：

let obj1 = {
  name: 'Alice',
  getName: function() {
    return this.name;
  }
};

let obj2 = Object.create(Object.getPrototypeOf(obj1), Object.getOwnPropertyDescriptors(obj1));

console.log(obj1.getName());  // 输出: 'Alice'
console.log(obj2.getName());  // 输出: 'Alice'

上述代码中，我们使用 Object.create() 方法创建了一个新对象 obj2，并使用 Object.getPrototypeOf() 方法获取原对象的原型链，使用 Object.getOwnPropertyDescriptors() 方法获取原对象的属性描述符。通过将原对象的方法和原型链复制给新对象，我们成功地实现了对象的赋值，并保留了对象的方法和原型链。