js 实现浅拷贝的几种方法

数组的浅拷贝

Array.slice()

let arr1 = [1, 2, {
  a: 3
}]
let arr2 = arr1.slice()
arr2[2].a = 4

console.log(arr1) // [ 1, 2, { a: 4 } ]
console.log(arr2) // [ 1, 2, { a: 4 } ]

Array.concat()

let arr1 = [1, 2, {
  a: 3
}]
let arr2 = arr1.concat()
arr2[2].a = 4

console.log(arr1) // [ 1, 2, { a: 4 } ]
console.log(arr2) // [ 1, 2, { a: 4 } ]

对象的浅拷贝

Object.assign()

let obj1 = {
  a: 1,
  b: 2,
  c: {
    d: 3
  }
}
let obj2 = Object.assign({}, obj1)

obj2.a = 'a'
obj2.c.d = 4
console.log(obj1) // { a: 1, b: 2, c: { d: 4 } }
console.log(obj2) // { a: 'a', b: 2, c: { d: 4 } }

展开语法...

let obj1 = {
  a: 1,
  b: 2,
  c: {
    d: 3
  }
}
let obj2 = { ...obj1 }

obj2.a = 'a'
obj2.c.d = 4
console.log(obj1) // { a: 1, b: 2, c: { d: 4 } }
console.log(obj2) // { a: 'a', b: 2, c: { d: 4 } }

手动实现一个浅拷贝方法

function shallowCopy(target) {
  // 非引用类型不需要手动拷贝(typeof null 值为 object 所以需要单独判断)
  if (typeof(target) !== 'object' || target === null) {
    return target
  }
  // 创建新对象, 遍历赋值
  const copy = Array.isArray(target) ? [] : {}
  for (const key in target) {
    if (Object.hasOwnProperty.call(target, key)) {
      copy[key] = target[key]
    }
  }
  return copy
}

let obj1 = {
  a: 1,
  b: 2,
  c: {
    d: 3
  }
}

let obj2 = shallowCopy(obj1)

obj2.a = 'a'
obj2.c.d = 4
console.log(obj1) // { a: 1, b: 2, c: { d: 4 } }
console.log(obj2) // { a: 'a', b: 2, c: { d: 4 } }