Vue.js 从零开始：物件参考 深拷贝 浅拷贝

资料处理是JavaScript非常重要的一环，如果观念不正确，常常会卡在那边，就算可以运行了，也不知道原理是什麽，本篇就来复习一下观念。

资料处理中有一项叫做物件参考特性，是很多新手常会碰到的问题点，特性为物件是以传参考的形式赋值，请看下面范例：

const obj = {
  name: '老王',
  data: {}
}
const obj2 = obj;
obj2.name = '小黄';

console.log(obj.name,obj2.name)

结果为 obj.name 为小黄，obj2.name 也是小黄，原本的name也被改变了，来画张图说明会什麽会这样。

01指的是obj的物件，里面有name和data属性，注意data是一个物件，所以另外只指向到02，obj2也是指向第一个框框，所以obj2.name会一直改变obj.name，就算另外再新增新变数，结果也是一样。

再来把 a 物件丢到函式当参数看结果会不会一样呢：

console.log 结果是 true，就算丢到函式里面还是有传参考的特性在。

再来一个陷阱题范例：

var a = {
  name: 'a',
}

function Data(param) {
  return {
    name: param.name
  }
}

var b = Data(a);

console.log(a === b);

请问console.log的结果会是一样true吗？
。
。
。
。
。
正确答案是false，画张图来说明：

Data(a)将参数a传到函式Data(param)里，这时return回传了一个新物件，新物件里面的值是复制原本a物件里面的值，所以结果就会是false，关键在於这个新物件，增加一个新物件就代表不会延续旧物件的值了，为了解决这种传参考的问题，有以下两种方法：

1. 浅层拷贝

const person = {
  name: '小王',
  obj:{},
}

const person2 = Object.assign({}, person);
const person3 = { ...person };
console.log(person === person2,person ===person3);
person2.obj.age = 16;

console.log(person,person2)

person2.obj.age = 16，person里面的obj被改变，当更深层的物件被改变时，浅拷贝就会失效，这时就要使用到深拷贝

2.深层拷贝

var a = {
  name: 'a',
}
function data(param){
  const newData = JSON.parse(JSON.stringify(param));
  return newData;
}
var b = data(a);

console.log(a === b);

JSON.stringfy 把Param物件转字串，JSON.parse再转回物件JSON格式，来消除参考位置。