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)

你可能感兴趣的:(JavaScript赋值操作中的深浅拷贝问题详解)