开发中常用的JS知识点集锦
2018-11-20 本文已影响0人
880d91446f17
索引
1、对象的深拷贝（一级属性拷贝和多级属性嵌套拷贝）
//深拷贝函数（满足属性多级嵌套）
function deepCloneObj(sourceObj){ var obj = (sourceObj instanceof Array) ? [] : {}; for (var key in sourceObj){ var tmp = sourceObj[key]; //处理重复引用，防止死循环
if (tmp === sourceObj){ continue;
} if (typeof tmp === 'object'){
obj[key] = arguments.callee(tmp); //属性为对象，递归深度复制
} else{
obj[key] = tmp;
}
} return obj;
} //
1、测试对象的深拷贝
var obj = {info:{name:'大锤'}, sign: 'xxx'}; var obj2 = Object.assign({}, obj); //一级属性深拷贝 （es6的Object.assign函数特性）
var obj3 = {...obj}; //一级属性深拷贝 (es6扩展运算符)
var obj4 = deepCloneObj(obj); //递归深拷贝所有层级属性
var obj5 = JSON.parse(JSON.stringify(obj)); //深拷贝所有层级属性
console.log('obj: ', JSON.stringify(obj));
console.log('obj2: ', JSON.stringify(obj2));
console.log('obj3: ', JSON.stringify(obj3));
console.log('obj4: ', JSON.stringify(obj4));
console.log('obj5: ', JSON.stringify(obj5));
console.log(".........end..........");
setTimeout(function(){
obj.sign = 'a**b';
obj.info.name = '一二三';
console.log('\n****update info ****');
console.log('obj: ', JSON.stringify(obj));
console.log('obj2: ', JSON.stringify(obj2));
console.log('obj3: ', JSON.stringify(obj3));
console.log('obj4: ', JSON.stringify(obj4));
console.log('obj5: ', JSON.stringify(obj5));
console.log(".........end..........");
},100); /* 打印日志结果：
obj: {"info":{"name":"大锤"},"sign":"xxx"}
obj2: {"info":{"name":"大锤"},"sign":"xxx"}
obj3: {"info":{"name":"大锤"},"sign":"xxx"}
obj4: {"info":{"name":"大锤"},"sign":"xxx"}
obj5: {"info":{"name":"大锤"},"sign":"xxx"}
.........end..........
****update info ****
obj: {"info":{"name":"一二三"},"sign":"a**b"} //只拷贝了第一级属性
obj2: {"info":{"name":"一二三"},"sign":"xxx"} //只拷贝了第一级属性
obj3: {"info":{"name":"一二三"},"sign":"xxx"} //只拷贝了第一级属性
obj4: {"info":{"name":"大锤"},"sign":"xxx"} //所有层级深拷贝
obj5: {"info":{"name":"大锤"},"sign":"xxx"} //所有层级深拷贝 */
//2、测试数组的深拷贝
setTimeout(function(){
console.log('\n\n.....数组的深拷贝测试....'); var arr = [{name: '小明'}, true, 18]; var arr2 = Object.assign([], arr); var arr3 = [...arr2]; var arr4 = deepCloneObj(arr); var arr5 = JSON.parse(JSON.stringify(arr));
console.log('arr: ', JSON.stringify(arr));
console.log('arr2: ', JSON.stringify(arr2));
console.log('arr3: ', JSON.stringify(arr3));
console.log('arr4: ', JSON.stringify(arr4));
console.log('arr5: ', JSON.stringify(arr5));
console.log("......end......\n");
setTimeout(function(){
arr[0].name = '五六七', arr[1] = false, arr[2] = 99;
console.log('arr: ', JSON.stringify(arr));
console.log('arr2: ', JSON.stringify(arr2));
console.log('arr3: ', JSON.stringify(arr3));
console.log('arr4: ', JSON.stringify(arr4));
console.log('arr5: ', JSON.stringify(arr5));
}, 100); /* 数组测试打印日志结果：
.....数组的深拷贝测试....
arr: [{"name":"小明"},true,18]
arr2: [{"name":"小明"},true,18]
arr3: [{"name":"小明"},true,18]
arr4: [{"name":"小明"},true,18]
arr5: [{"name":"小明"},true,18]
......end......
arr: [{"name":"五六七"},false,99]
arr2: [{"name":"五六七"},true,18] //只拷贝了第一级属性
arr3: [{"name":"五六七"},true,18] //只拷贝了第一级属性
arr4: [{"name":"小明"},true,18] //所有层级深拷贝
arr5: [{"name":"小明"},true,18] //所有层级深拷贝 */ },1000);</pre>
