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