在js中,数组和对象的复制 如果是用 = 号来进行复制,那只是浅拷贝。
如下图:对arr
的修改,会影响arr2
的值,这显然在绝大多数情况下,并不是我们所需要的结果。
var arr = [1,2,3,4]
var arr2 = arr
arr[0] = 5;
console.log(arr)
console.log(arr2)
数组的几种方法深拷贝总结
var arr = [3,4,1,6,4]//准备好一个数组
var arr2 = arr.concat()//concat合并方法
var arr4 = JSON.parse(JSON.stringify(arr))//用JSON方法转换
var arr5 = arr.slice(0)//slice拷贝方法
var [...arr6] =arr;//扩展运算符方法
var arr7 = copyArr(arr)//万能的for循环
function copyArr(arr){
let res = []
for(let i=0;i<arr.length;i++){
res.push(arr[i])
}
return res
}
//冒泡排序
for(var j = 0;j<arr.length-1;j++){ 遍历数组,arr.length - 1表示要遍历的次数
for(var i = 0;i<arr.length-1-j;i++){
// i<arr.length-1-j 是因为当第一次,找到最大数,放到最后,那么下一次,遍历的时候就不用吧最后一位算上,因为他已经是最大的
var done = true;//设置一个标志位,减少不必要的循环
if(arr[i]>arr[i+1]){//当前数字大于后一位数组 位置调换
var temp = arr[i]
arr[i] =arr[i+1]
arr[i+1] = temp
done = false
}
}
if(done){//调换位置后跳出本次循环
break;//减少不必要的排序,提高性能。
}
}
//冒泡排序思想:每一次对比相邻两个数据的大小,小的排在前面,如果前面的数据比后面的大就交换这两个数的位置
console.log('经过排序的原数组:'+arr)
console.log('concat方法:'+arr2)
console.log('转换为json再转为对象:'+arr4)
console.log('slice方法:'+arr5)
console.log('ES6扩展运算符方法:'+arr6)
console.log('万能的for方法:'+arr7)
上面实现的几种方式写在了一起 搞不明白方法的可以看下我前几天发的数组方法帖子。
对象的深拷贝
对象的深拷贝相比数组也没有困难许多,列举三种个方法。
1,万能的for循环
var obj = {
name: 'wayne',
sex: 'man',
old: '23'
}
var obj2 = copyObj(obj)
function copyObj(obj) {
let res = {}
for (var key in obj) {
res[key] = obj[key]
}
return res
}
2,JSON方法
var obj = {
name: 'wayne',
sex: 'man',
old: '23'
}
var obj2 = JSON.parse(JSON.stringify(obj))
//原理没什么好解释的,实在是够简单粗暴
JSON.stringify()方法将对象转化为字符串,但只会处理简单属性和简单属性数组,constructor属性丢失了
3,ES6扩展运算符
var obj = {
name: 'wayne',
sex: 'man',
old: '23'
}
var { ...obj2 } = obj
对象的深拷贝推荐使用es6提供的扩展运算符的方法
补:重点
上面几种对象的深拷贝方式都有缺陷 copyObj和es6运算符 并不能解决多层嵌套情况, json强制转换方式不能解决function和undefined,还有一些Object.assgin(), 数组的slice()这些,这些只深复制了基本类型数据类型,不是真正意义的深复制,当然,如果要复制的对象或者数组都是简单数据类型,那就大胆用吧。
所谓方法,没有最优,只有最合适的,所以选择最合适的就ok啦。
封装了一个方法 实现deepCopy 兼容性比较高 下面贴代码 写的不好的 欢迎大家再次指出
{
function isArray(val) {//检测数组
//通过Object.prototype.toString.call来精准检测类型
return Object.prototype.toString.call(val) === '[object Array]';
}
function isObject(val) {//检测对象
return typeof val === 'object' && val !== null;
}
function deepCopy(obj2) {//递归深层copy
/**
* 把一个对象递归拷贝给另外一个对象
* 源对象与拷贝后的对象没有引用关系
*/
var obj = isArray(obj2) ? [] : {};
for (var property in obj2) {
// 如果当前拷贝的数据还是一个对象的话,那么继续调用
// deepCopy 进行二次拷贝
// 递归
if (isObject(obj2[property])) {
obj[property] = deepCopy(obj2[property]);
} else {
obj[property] = obj2[property];
}
}
return obj;
}
}