JavaScript赋值操作中的深浅拷贝问题详解

平时开发过程中经常会遇到数据莫名其妙被修改了的问题，然而并没有对数据做什么操作，这往往是由浅拷贝引起的问题。修改了一份引用类型数据，那么引用了该数据的变量都会改变

浅拷贝：浅拷贝是按位拷贝对象，它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值；如果属性是内存地址（引用类型），拷贝的就是内存地址。

深拷贝：深拷贝是指源对象与拷贝对象互相独立，其中任何一个对象的改动都不会对另外一个对象造成影响。

在JavaScript中，对象和数组属于引用类型数据，进行复制拷贝的时候需要用到深拷贝，下面分别列出JS中的深拷贝和浅拷贝的方法。

二.浅拷贝

（1）最常见的 = 赋值

const li = {name: '李明', age: 18}
const zhang = li
li.name = '张三'
console.log(zhang); // { name: '张三', age: 18 }

(2)Object.assign(),

// 对象
const li = {name: '李明', age: 18}
const zhang = Object.assign(li, {sex: '男'})
li.name = '张三'
console.log(zhang); // { name: '张三', age: 18, sex: '男' }
console.log(li); // { name: '张三', age: 18, sex: '男' }

(3)...扩展运算符(数组or对象的元素属性为引用类型)

let arr = [{num: 1}, {num: 2}, {num: 3},]
let newArr1 = [...arr]
let newArr2  = arr.concat([{num: 3}])

console.log(newArr1[0] === arr[0]); // true
console.log(newArr2[0] === arr[0]); // true

一.深拷贝

(1) JSON(对象数组和对象都适用)

const li = {name: '李明', age: 18}
const zhang = JSON.parse(JSON.stringify(li))
li.name = '张三'
console.log(zhang); // { name: '李明', age: 18 }

(2)Lodash库

const _ = require('lodash');
let objects = [{ 'a': 1 }, { 'b': 2 }];
 
let deepShallow = _.cloneDeep(objects);
console.log(deepShallow[0] === objects[0]); // false

// 对应的也有浅拷贝clone()
let shallow = _.clone(objects);
console.log(shallow[0] === objects[0]); // true

三.forEach和map的区别

forEach()和map()都是用来遍历数组的方法，区别：
（1）返回值： forEach()没有返回值，是在原有数组上直接修改，map()方法会返回一个新数组，数组元素为 return 的数据，无return 则为 undefined
（2）运行速度： forEach < map
（3）map()后可以跟filter(), pop(), join()等数组特有的函数进行链式调用； forEach不可以
总之，forEach可以做的 map也可以，建议：对数据进行修改的用map

四.find和findIndex的区别及用法

（1）find()
参数：函数function(item, index){ return }必须有return。返回调用数组匹配的第一个元素(浅拷贝),如果没有匹配的返回 undefined
用法：


const personArr = [
  {name: '张三', age: 18},
  {name: '李四', age: 19},
  {name: '王五', age: 20},
]
const zhangsan =  personArr.find((item) => {
  return item.name ===  '张三'
})
const gaozong =  personArr.find((item) => {
  return item.name ===  '高总'
})
zhangsan.sex = 'man'
console.log(personArr[0]); // { name: '张三', age: 18, sex: 'man' }
console.log(zhangsan); // { name: '张三', age: 18, sex: 'man' }
console.log(gaozong); // undefined

（2）findIndex()
参数：函数function(item, index){ return }必须有return。返回调用数组匹配的元素的index,如果没有匹配的返回 -1
用法：

const personArr = [
  {name: '张三', age: 18},
  {name: '李四', age: 19},
  {name: '王五', age: 20},
]
const zhangsan =  personArr.findIndex((item) => {
  return item.name ===  '张三'
})
const gaozong =  personArr.findIndex((item) => {
  return item.name ===  '高总'
})

console.log(zhangsan); // 0
console.log(gaozong); // -1

（3）建议：需要获取元素的某个属性就用find(),如果去重就使用findIndex()搭配上splice(index, 1)