How to copy in js

This article mainly introduces the method of copying in js, which has certain reference value. Now I share it with everyone. Friends in need can refer to it

There are two types of deep copy and shallow copy in js In the form of copying, the common methods are summarized below to facilitate daily work review

1. Shallow copy

1. Shallow copy of json object

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 spread operator syntax

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

4. Traversal

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对象上，不包括原型链上的属性。*/

2. Deep copy

1. Use the merge method of lodash

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. There are a large number of deep copies using the immutable library

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’s $.extend() If Without the first parameter, it is a shallow copy

$.extend(true, {}, obj)

5. JSON object method

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

People who are familiar with js are definitely familiar with these two methods. Using the two native JSON objects can realize deep copy of the object very conveniently.

This method also has disadvantages:

1. Only attributes that can be represented by json, such as String, Number, Array, etc., can be copied. For attributes that cannot be represented by json, for example Function, Regexp, etc. will be lost

2. The prototype chain of the object is lost

3. The copy efficiency is low

Although it has the above shortcomings, this method is enough to deal with most situations.

6. Recursive copy

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
}

Compared with the shallow copy traversal object method above, this method only has more recursive calls, that is, judgment Whether the object's attributes are also objects, if so, recursively call and traverse the object until it is not an object.
However, this method does not consider Function, Regexp, Error and other types, and requires more judgment. However, the core idea is to recursively traverse the object and copy it. In addition, this method is slightly more efficient than JSON deep copy.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Introduction to PureComponent of React

How to convert JS string to number

Introduction to js asynchronous for loop

The above is the detailed content of How to copy in js. For more information, please follow other related articles on the PHP Chinese website!