当前第2页 返回上一页
可以封装如下函数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var cloneObj = function (obj){
var str, newobj = obj.constructor === Array ? [] : {};
if ( typeof obj !== 'object' ){
return ;
} else if (window.JSON){
str = JSON.stringify(obj),
newobj = JSON.parse(str);
} else {
for ( var i in obj){
newobj[i] = typeof obj[i] === 'object' ?
cloneObj(obj[i]) : obj[i];
}
}
return newobj;};
|
4、递归拷贝
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | function deepClone(initalObj, finalObj) {
var obj = finalObj || {};
for ( var i in initalObj) {
var prop = initalObj[i];
if (prop === obj) {
continue ;
}
if ( typeof prop === 'object' ) {
obj[i] = (prop.constructor === Array) ? [] : {};
arguments.callee(prop, obj[i]);
} else {
obj[i] = prop;
}
}
return obj;} var str = {}; var obj = { a: {a: "hello" , b: 21} };deepClone(obj, str);console.log(str.a);
|
5、使用Object.create()方法
直接使用var newObj = Object.create(oldObj),可以达到深拷贝的效果。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | function deepClone(initalObj, finalObj) {
var obj = finalObj || {};
for ( var i in initalObj) {
var prop = initalObj[i];
if (prop === obj) {
continue ;
}
if ( typeof prop === 'object' ) {
obj[i] = (prop.constructor === Array) ? [] : Object.create(prop);
} else {
obj[i] = prop;
}
}
return obj;}
|
6、jquery
jquery 有提供一个$.extend可以用来做 Deep Copy。
1 2 3 4 | var $ = require( 'jquery' ); var obj1 = {
a: 1,
b: { f: { g: 1 } },
c: [1, 2, 3]}; var obj2 = $.extend( true , {}, obj1);console.log(obj1.b.f === obj2.b.f);
|
7、lodash
另外一个很热门的函数库lodash,也有提供_.cloneDeep用来做 Deep Copy。
1 2 3 4 | var _ = require( 'lodash' ); var obj1 = {
a: 1,
b: { f: { g: 1 } },
c: [1, 2, 3]}; var obj2 = _.cloneDeep(obj1);console.log(obj1.b.f === obj2.b.f);
|
这个性能还不错,使用起来也很简单。
相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
相关阅读:
HTML里的最后一行文字显示不全怎么处理
怎样用css3做出图标效果
CSS的编码怎么转换
以上就是什么是js深拷贝和浅拷贝及其实现方式的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
nodejs的npm常用命令集合
javascript怎么把字符串转换为数组
javascript作用域和作用域链的解析(附示例)
javascript的超集是什么
javascript怎么设置不可编辑
手把手教你理解js中的执行上下文
javascript主要由哪些部分组成
怎么将javascript对象转换为json字符串
javascript charat()方法是什么
javascript如何删除所有的cookie
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 什么是js深拷贝和浅拷贝及其实现方式