This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

OriginObj: originObj: originObj: originObj: originObj: originObj: originObj: originObj: originObj: originObj: originObj: originObj: originObj

Method 1 (Basic loop)

The basic method is loops, for example:

for(let key in targetObj) {
    targetObj[key] = originObj[key]
}
Copy the code

This is the most basic usage, applicable to users of any language, anyone who knows loop syntax can use it, what you think is what you get, easy to understand.

Method 2 (Deconstructing assignment)

OriginObj has a, B, C, and D attributes, and originObj has a, B, and C attributes

let{d, ... targetObj} = originObjCopy the code

Es6 deconstruction assignment (need to consider whether or not the environment support es6 grammar, but now the basic support of the framework of engineering support to es5 by default, so don’t need to worry), this method is suitable for the less difference properties, whereas differences attributes more words, just list the properties need to assign a value to use the same method to deconstruct assignment, more concise and clear.

Method 4 (self-executing function)

const targetObj = (({a, d, e}) = > ({a, d, e}))(originObj)
Copy the code

This method looks very clean and elegant, one line of code, not messy. In fact, this method with method three deconstruction assignment is the same principle, but through the function to carry, the entry parameter is an object, the return value is also an object, the two object properties are consistent.

Method 5 (custom extend function)

function extend(originObj) {
    var obj = {},
    keyAttr = Array.prototype.slice.call(arguments).slice(1);
    keyAttr.forEach(function(val, index) {
        if (val in obj) { 
            obj[val] = originObj[val] 
        }
    })
    return obj
}
targetObj = extend(originObj, 'key1'.'key2')
Copy the code

This method mainly uses the Arguments object to get function arguments. Argumentargument.js (); return arguments ();

var length = 10;
function fn() {
  console.log(this.length);
}

var obj = { 
  method: function(fn) {
    fn();
    arguments[0]();
  }
};

obj.method(fn, 1); Output:10.2
Copy the code

There are two things to note here. This in the fn function refers to:

1. The first value is 10 and the first line of method “fn() “is executed, where this refers to the window. So the output value is the outermost length defined.

(arguments[0] () => fn())); (Arguments [0] () => fn()))

Also note that in strict mode:

Arguments.1 In strict mode arguments is a reserved word, so you will get a syntax error if you define arguments related variables and functions.

Arguments belong to the argument object passed in strict mode and are immutable, that is, arguments cannot be changed inside a function.

[arguments.callee] [arguments.callee] [arguments.callee] [arguments.callee] [arguments.callee

Method 5 (Reduce Function)

const pickFn = (originObj, keyArr) = >
    keyArr.reduce((total, val) = > (val in obj && (total[val] = obj[val]), total), {});
    
targetObj = pickFn(originObj, ['a'.'d'.'e'])
Copy the code

This method mainly uses the superposition of Reduce, and mainly uses circularly.

Part of copy the object properties in the business development to another object in the scene or a lot of, more common a scene is a list of editors, usually to edit the data back to the list of rows of data show, data is directly obtained directly from the bank, and the data field is redundant and edit popup window data fields, Then we need to use one of these methods for partial attribute assignment.