The usage and usage of ES6 object. Assign()


1. Basic usage of object. Assign():

The object.assign method is used to copy all enumerable properties of the source object to the target object. It requires at least two objects as parameters. The first parameter is the target object, and the subsequent parameters are the source object.

let targetObj1 = { a: 1 };
    let sourceObj1 = { b: 1 };
    let sourceObj11 = { c: 3 };
    Object.assign(targetObj1, sourceObj1, sourceObj11);

Note: if the target object has an attribute with the same name as the source object, or if more than one source object has an attribute with the same name, the following attributes will overwrite the previous ones.

let targetObj1 = { a: 1, b: 2 };
    let sourceObj1 = { b: 1 };
    let sourceObj11 = { c: 3 };
    Object.assign(targetObj1, sourceObj1, sourceObj11);

If there is only one parameter, object.assign will return it directly.

let targetObj1 = { a: 4 }

If the parameter is not an object, it is converted to an object first and then returned.

console.log(typeof (Object.assign(2)));

Because undefined and null cannot be converted to objects, if they are parameters, an error will be reported.


Note: if a non object parameter appears at the location of the source object (that is, the non first parameter), the processing rules are different. First of all, these parameters will be converted to objects. If they cannot be converted to objects, they will be skipped. This means that if undefined and null are not in the first parameter, no error will be reported. Other types of values (that is, values, strings, and Booleans) are not in the first parameter and do not report errors. However, except that the string will be copied into the target object in the form of an array, other values will have no effect.

Object.assign only copies its own attributes, and non enumerable attributes (enumerable is false) and inherited attributes will not be copied.

let obj1 = Object.assign({ dwb: 'zjl' },
Object.defineProperty({}, 'zmf', {
enumerable: false,
value: 'zmf'
let obj2 = Object.assign({ dwb: 'zjl' },
Object.defineProperty({}, 'zmf', {
enumerable: true,
value: 'zmf'

For nested objects, object. Assign is handled by replacing, not adding.

var target = { a: { b: 'c', d: 'e' } }
var source = { a: { b: 'hello' } }
Object.assign(target, source);

In the above code, the a attribute of the target object is replaced by the a attribute of the source object, instead of getting the result of {A: {B: ‘hello’, D: ‘e’}}. This is usually not what developers want, and special care is needed. Some function libraries provide customized versions of object.assign (such as lodash’s _.defaultsdeep method), which can solve the problem of deep copy.

Note that object. Assign can be used to handle arrays, but it treats arrays as objects.

console.log(Object.assign([1, 2, 3], [4, 5]));

Among them, 4 covers 1 and 5 covers 2. Because they are in the same position of the array, they are covered in corresponding positions.

The object. Assign method implements shallow copy instead of deep copy. That is to say, if the value of a property of the source object is an object, the copy of the target object will get the reference of the object.

var object1 = { a: { b: 1 } };
var object2 = Object.assign({}, object1);
object1.a.b = 2;

2. uses

2.1 adding attributes to objects

2.2 adding methods to objects

2.3 cloning objects

function copyFnc(origin) {
return Object.assign({}, origin)
var sur = { a: 1, b: 2 };

The above code copies the original object to an empty object and obtains the clone of the original object.

However, in this way, only the value of the original object can be cloned, not the inherited value. If you want to keep the inheritance chain, you can use the following code.

function clone(origin) {
let originProto = Object.getPrototypeOf(origin);
return Object.assign(Object.create(originProto), origin);

In JS, the subclass uses object.getprototypeof to call the parent method to get the prototype of the object.

2.4 merging multiple objects

//Merge multiple objects into an object

const merge = (target, ...sources) => Object.assign(target, ...sources);
//Merge multiple objects into new objects

const merge = (...sources) => Object.assign({}, ...sources);

2.5 specifying default values for attributes

const DEFAULTS = {
logLevel: 0,
outputFormat: 'html'
function processContent(options) {
let options = Object.assign({}, DEFAULTS, options);

The above is the whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.