如何重新赋值对象以同步修改其引用的原对象？

这是个JavaScript里典型的引用类型误区，先给你掰明白背后的逻辑，再给几种可行的解决办法：

为什么会出现这种差异？ #

当你执行var jack = people[0]时，jack变量存的不是整个Jack对象，而是这个对象在内存里的引用地址。所以你修改jack.height时，本质是通过这个地址找到内存里的原对象，修改它的属性——而数组里的people[0]同样指向这个地址，数组里的对象自然会同步变化。

但如果直接执行jack = {name: "Jack the developer", ...}，这时候你给jack变量赋了一个新对象的引用地址，它和原来people[0]指向的地址彻底没关系了，所以数组里的原对象当然不会被修改。

实现重新赋值时同步修改原对象的方法 #

方法1：用Object.assign更新原对象属性 #

如果你想保留原对象的引用，同时把新对象的属性覆盖上去，可以用Object.assign：

var people = [ {name: "Jack", height: 180}, {name: "Marry", height: 170}, {name: "Susan", height: 162} ];
var jack = people[0];

// 用新对象的属性覆盖原对象
Object.assign(jack, {name: "Jack the developer", height: 175});

console.log(people[0]); // 输出：{name: "Jack the developer", height: 175}

这样jack还是指向原来的内存地址，数组里的对象也会跟着更新。

方法2：直接替换数组中的元素 #

如果不需要保留原对象的引用，直接修改数组对应位置的元素即可，之后可以再把新对象的引用赋值给jack：

var people = [ {name: "Jack", height: 180}, {name: "Marry", height: 170}, {name: "Susan", height: 162} ];
var jack = people[0];

// 直接替换数组里的元素
people[0] = {name: "Jack the developer", height: 175};
// 让jack指向新对象
jack = people[0];

console.log(people[0]); // 输出：{name: "Jack the developer", height: 175}

方法3：封装工具函数（适合频繁操作） #

如果经常需要做这种“更新数组元素并同步变量引用”的操作，可以封装一个小函数：

function updateAndSync(arr, index, newObj) {
  arr[index] = newObj;
  return arr[index];
}

// 使用示例
var people = [ {name: "Jack", height: 180}, {name: "Marry", height: 170}, {name: "Susan", height: 162} ];
var jack = people[0];

// 同步更新数组和jack变量
jack = updateAndSync(people, 0, {name: "Jack the developer", height: 175});

console.log(people[0]); // 输出：{name: "Jack the developer", height: 175}
console.log(jack); // 和people[0]完全一致

内容的提问来源于stack exchange，提问作者shampoo