平时开发过程中经常会遇到数据莫名其妙被修改了的问题,然而并没有对数据做什么操作,这往往是由浅拷贝引起的问题。修改了一份引用类型数据,那么引用了该数据的变量都会改变
浅拷贝:浅拷贝是按位拷贝对象,它会创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型,拷贝的就是基本类型的值;如果属性是内存地址(引用类型),拷贝的就是内存地址 。
深拷贝:深拷贝是指源对象与拷贝对象互相独立,其中任何一个对象的改动都不会对另外一个对象造成影响。
在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)