视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
js中复制的方法
2020-11-27 19:33:59 责编:小采
文档


这篇文章主要介绍了关于js中复制的方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

js中有深拷贝和浅拷贝两种复制形式,下面总结一下常用方法,方便平时工作复习使用

一、浅拷贝

1、json对象浅拷贝

var newObj = JSON.parse(JSON.stringify( someObj ) )

2、es6 Object.assign()

const objA = { name: 'cc', age: 18 }
 const objB = { address: 'beijing' }
 const objC = {} // 这个为目标对象
 const obj = Object.assign(objC, objA, objB) // 我们将 objA objB objC obj 分别
输出看看 console.log(objA) // { name: 'cc', age: 18 } console.log(objB) // { address: 'beijing' } console.log(objC) // { name: 'cc', age: 18, address: 'beijing' } console.log(obj) // { name: 'cc', age: 18, address: 'beijing' } // 是的,目标对象ObjC的值被改变了。 // so,如果objC也是你的一个源对象的话。请在objC前面填在一个目标对象{} Object.assign({}, objC, objA, objB)

3、es6 Spread Operator 展开运算符语法

 var obj = { 'data': [11, 2, 3], 'name': 'mfg',
 fn: function() {}
 }; var objNew = { ...obj
 };

4、遍历

function sallowCopy(source) { // source 不是对象,而是【原始类型】的情况
 // 原始类型说明详见http://www.jianshu.com/p/b161aeecb6d6
 if (null == source || "object" != typeof source) return source; 
 // 其他情况都将 source 当作简单对象来处理
 var target = {}; for (var key in source) { if (source.hasOwnProperty(key)) { // 仅拷贝自身的属性
 target[key] = source[key];
 }
 } return target;
}/*这个浅拷贝会将source对象上的所有[可枚举属性]都拷贝到target对象上,不包括原型链上的属性。*/

二、深拷贝

1、借助lodash的merge方法

import merge from "lodash/object/merge";function commentsById(state = {}, action) { switch(action.type) { default : { if(action.entities && action.entities.comments) { return merge({}, state, action.entities.comments.byId);
 } return state;
 }
 }
}

3、存在大量深拷贝借助immutable库

const { Map } = require('immutable')
const map1 = Map({ a: 1, b: 2, c: 3 })
const map2 = map1.set('b', 50)
map1.get('b') // 2map2.get('b') // 50尽量保持数据

4、jquery的$.extend() 如果没有第一个参数则为浅拷贝

$.extend(true, {}, obj)

5、JSON对象的方法

var obj2 = JSON.parse(JSON.stringify(obj1))

熟悉js的人对这两个方法肯定不陌生,利用原生JSON对象的两个可以非常方便地实现对象的深复制。

这种方法也有弊端:

  1. 只能复制能用json表示的属性,比如String、Number、Array等,对于不能用json表示的属性例如Function、Regexp等则会丢失

  2. 对象的原型链丢失

  3. 复制效率较低

虽说有以上缺点,但是这种方式也足以应对大部分情况了。

6、递归复制

function cloneDeep(obj) { if (obj == null || typeof obj !== 'object') return obj var newObj = Array.isArray(obj) ? [] : {} for (let i in obj) { if (obj.hasOwnProperty(i)) { var value = obj[i]
 newObj[i] = typeof value === 'object' ? clone(value) : value
 }
 } return newObj
}

这种方式与上面浅复制的遍历对象方式相比只是多了递归调用,即判断对象的属性是否也为对象,是则递归调用遍历这个对象,直到不为对象为止。
但是这种方式也没有考虑Function、Regexp、Error等类型,需要更多的判断,但是核心思想也还是递归遍历对象复制,另外这种方式比JSON的深复制效率稍高。

下载本文
显示全文
专题