js 复制数组以及对象

前序

先简单的说一下，关于我们的 = 号复制只是简单的浅拷贝。只是这样我在处理数组的时候，往往会影响原数组的值，这样就违背了我们的初始本意。

复制数组

1. for循环

var arr = [1,2,3,4,5];
var arr2 = copyArr(arr);
function copyArr(arr) {
    let res = [];
    for (let i = 0; i < arr.length; i++) {
     res.push(arr[i])
    }
    return res
}

2. slice将原数组中抽离部分出来形成一个新数组。我们只要设置为抽离全部，即可完成数组的复制。

var arr = [1,2,3,4,5];
var arr2 = arr.slice(0);
arr[2] = 5;
console.log(arr);     // [1,2,5,4,5]
console.log(arr2);    // [1,2,3,4,5]

3. cancat是用于连接多个数组组成一个新的数组的方法。那么，我们只要连接它本身，即可完成数组的复制。

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

4. es6中扩展运算符

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

复制对象

1. for循环

var obj = {
  name: '张三',
  sex: 'man',
  old: '18'
};
var obj2 = copyObj(obj);
function copyObj(obj) {
  let res = {};
  for (var key in obj) {
    res[key] = obj[key];
  }
  return res;
}

2. 通过先转为json字符串再转回来

var obj = {
  name: '张三',
  sex: 'man',
  old: '18'
};
var obj2 = JSON.parse(JSON.stringify(obj));

3. es6中扩展运算符

var obj = {
  name: '张三',
  sex: 'man',
  old: '18'
};
var { ...obj2 } = obj;
obj.old = '22';
console.log(obj);       // {name:"张三",sex:"man",old:"22"}
console.log(obj2);      // {name:"张三",sex:"man",old:"18"}