js中对象和数组的浅拷贝和深拷贝，改变新数据，不影响原数据。

1.浅拷贝

定义： 个人理解为只是针对一层数据的拷贝有效，多层嵌套结构的数据则无效。

1.1 示例：Object.assign()

---数组的拷贝

let a1 = ['hello', '2018']
let b1 = Object.assign([], a1)
// 改变b1中的值
b1[0] = 'hi'
/**
 * 输出结果发现
 * 改变b1数据
 * a1数组没有改变，b1数组改变
 */
console.log(a1) // ['hello', '2018']
console.log(b1) // ['hi', '2018']
let a2 = [
  {
    name: 'java',
    count: 12
  },
  {
    name: 'js',
    count: 13
  }
]
let b2 = Object.assign([], a2)
// 改变b2数组中其中对象的count值
b2[0].count = 111
/**
 * 输出结果发现
 * 改变了b2数据
 * a1，b1数组都发生了改变
 */
console.log(a2)
console.log(b2)
---输出结果

---对象的拷贝 

let a1 = {
  name: 'Tom',
  age: 12
}
let b1 = Object.assign({}, a1)
b1.age = 100
/**
 * 结果显示，
 * a1中age没有被修改，b1的age被修改了
 */
console.log(a1)
console.log(b1) 
---输出结果

 

1.2  ES6的语法（...）

let arr1 = ['ES6', 'let', 'const']
let arr2 = [...arr1]
arr2[0] = 'JavaScript'
console.log(arr1)
console.log(arr2)

输出结果

1.3 Array.from() 

浅拷贝中，当数组有对象时，改变新数组中对象的属性值，则会影响到原数据

let arr = ['apple', 'banana', 'pear']
let newArr = Array.from(arr)
newArr.pop()
console.log(arr) // ['apple', 'banana', 'pear']
console.log(newArr) // ['apple', 'banana']

 

------------------------------------------------------------------------------------------------------------------------------------------------------------------------ 

2.深拷贝 

方法：JSON.parse(JSON.stringify())

let a1 = [
  {
    title: '标题1',
    color: 'red'
  },
  {
    title: '标题2',
    color: 'blue'
  }
]
let b1 = JSON.parse(JSON.stringify(a1))
b1[0].color = 'pink'
console.log(a1)
console.log(b1)

---输出结果