JavaScript 数据拷贝

JavaScript 数据类型

• 基本数据类型：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
• 引用数据类型：对象( Object )、数组( Array ) 和 方法( Function )

注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。

基本数据类型 是指存放在栈内存中的简单数据段，是按值访问。

引用数据类型 是存放在堆内存中的对象，在栈内存中保存的实际上是对象在堆内存中的引用地址。

---

数据拷贝相关的方法

1. Lodash提供的 _.clone(value)方法（浅拷贝）

该方法的参数为需要拷贝的值，然后将其作为方法的返回值返回给变量。

// 示例
var objects = [{ 'a': 1 }, { 'b': 2 }];
 
var shallow = _.clone(objects);
console.log(shallow[0] === objects[0]);
// => true

2. Lodash提供的_.cloneDeep(value)方法（深拷贝）

该方法类似_.clone(value)方法，它还会递归拷贝value。

// 示例
var objects = [{ 'a': 1 }, { 'b': 2 }];
 
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false

3. Object.assign()方法(浅拷贝还是深拷贝需要具体看对象的属性值类型)

该方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。返回值是目标对象。
因为 Object.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用，那么它也只指向那个引用。
也就是说，如果对象的属性值为 简单类型，通过该方法拷贝属性值的方式即为深拷贝；如果属性值为 对象或其它引用类型，那对于这个对象而言这种拷贝方式其实是浅拷贝。

4. jQuery.extend()方法

该方法用于将一个或多个对象的内容合并到目标对象。返回值为目标对象。
语法：$.extend( target [, object1 ] [, objectN ] )
指示是否深度合并
$.extend( [deep ], target, object1 [, objectN ] )
警告: 不支持第一个参数传递 false 。

参数描述
deep 可选，Boolean类型，指示是否深度合并对象，默认为false。如果该值为true，且多个对象的某个同名属性也都是对象，则该"属性对象"的属性也将进行合并。

5. JSON.parse(JSON.stringify(obj))方法(深拷贝)

用 JSON.stringify 把对象转换成字符串，再用 JSON.parse 把字符串转换成新的对象。

// 通过js的内置对象JSON来进行数组对象的深拷贝
function deepClone(obj) {
  let _obj = JSON.stringify(obj);
  let objClone = JSON.parse(_obj);
  return objClone;
}

注：可以转成 JSON 格式的对象才能使用这种方法，如果对象中包含 function 或 RegExp 这些就不能用这种方法了。

6. 使用递归的方式实现深拷贝

function _deepClone(source) {
  let target;
  if (typeof source === 'object') {
    target = Array.isArray(source) ? [] : {}
    for (let key in source) {
      if (source.hasOwnProperty(key)) {
        if (typeof source[key] !== 'object') {
          target[key] = source[key]
        } else {
          target[key] = _deepClone(source[key])
        }
      }
    }
  } else {
    target = source
  }
  return target
}

---