Es6 notes 3 ^_^ object, es6 notes 3 object

Es6 notes 3 ^_^ object, es6 notes 3 object
I. destructuring

ES6 allows you to extract values from arrays and objects in certain modes and assign values to variables. This is called Destructuring.

// Es5if (1) {let cat = 'ken'; let dog = 'lili'; let zoo = {cat: cat, dog: dog}; console. log (zoo); // Object {cat: "ken", dog: "lili" }}// ES6 can be written as follows: if (1) {let cat = 'ken'; let dog = 'lili'; let zoo = {cat, dog}; console. log (zoo); // Object {cat: "ken", dog: "lili" }}// this can be written in turn: if (1) {let dog = {type: 'animal ', role: 2}; let {type, role} = dog; console. log (type, role); // animal 2}

Ii. attribute name expression

Methods and expressions are used as the property names of objects. expressions can also be used to define method names.
The JavaScript language defines the attributes of an object in two ways.

Let obj1 = {}; // method 1 obj1.foo = true; // method 2 obj1 ['A' + 'bc'] = 123; console. log (obj1 );

The method in the code above is to directly use an identifier as the attribute name, and the method 2 is to use an expression as the attribute name. In this case, the expression should be placed in square brackets.
If you define an object literally (using braces), you can only use method 1 (identifier) in es5.

    var obj2 = {        foo: true,        abc: 123    }

When ES6 allows objects to be defined literally, the method (expression) is used as the object attribute name, that is, the expression is placed in square brackets.

Let propKey = 'foo'; let obj3 = {[propKey]: true, ['A' + 'bc']: 123}; console. log (obj3); // The expression can also be used to define the method name. Let ello = 'I'; let obj4 = {['H' + ello] () {return 'Hi nick ';}}; console. log (obj4.hi (); // hi nick

3. Object. is ()

Object. is () is used to compare whether two values are strictly equal. It is basically the same as the strict comparison operator (=). The difference is that + 0 is not equal to-0, and NaN is equal to itself.

console.log(+0 === -0);//trueconsole.log(NaN === NaN); // falseconsole.log(Object.is(+0, -0)); // falseconsole.log(Object.is(NaN, NaN)); // true

Iv. Object. assign ()

The Object. assign method is used to copy all the enumerated attributes 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. If a parameter is not an object, a TypeError is thrown.

    let target = { a: 1 };    let source1 = { b: 2 };    let source2 = { c: 3 };    Object.assign(target, source1, source2);    console.log(target); // {a:1, b:2, c:3}

Note:If the target object has the same name as the source object, or multiple source objects have the same name, the subsequent attributes overwrite the previous attributes.

Let target1 = {a: 1, B: 1}; let source11 = {B: 2, c: 2}; let source21 = {c: 3}; Object. assign (target1, source11, source21); console. log (target1); // {a: 1, B: 2, c: 3} console. log (Object. assign ({'name': 'zhang san'}, {'name': 'Nick ', 'age': 26, 'sex': 'male', 'sex ': {'hander': 'handsome '}}));

Object. assign only copies its own attributes. attributes that cannot be enumerated (enumerable is false) and inherited attributes are not copied.

     let  obj1=Object.assign({b: 'c'},                Object.defineProperty({}, 'invisible', {                    enumerable: false,                    value: 'hello'                })        );        console.log(obj1);// { b: 'c' }    let obj2 =Object.assign({b: 'c'},            Object.defineProperty({}, 'invisible', {                enumerable: true,                value: 'hello'            })    );    console.log(obj2);// {b: "c", invisible: "hello"}

The attribute named Symbol value will also be copied by Object. assign.

    let obj3=Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' })    console.log(obj3);// { a: 'b', Symbol(c): 'd' }

Note:Object. assign can be used to process arrays, but the array is regarded as an Object.

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

4 overwrites 1 and 5 overwrites 2, because they are in the same position of the array, so the corresponding position overwrites.

Object. assign has a lot to do. Let's take a look at it below:　

Add attributes to an object

    class Point {        constructor(x, y) {            Object.assign(this, {x, y});        }    }

In this way, the x and y attributes are added to the object instance of the Point class.

Add Method for Object

    let SomeClass={test:'nick'};    SomeClass.prototype={};    Object.assign(SomeClass.prototype, {        someMethod:function(arg1, arg2) {        },        anotherMethod:function () {        }    });    console.log(SomeClass);

Equivalent to the following statement:

    let SomeClass2={test:'nick2'};    SomeClass2.prototype={};    SomeClass2.prototype.someMethod = function (arg1, arg2) {    };    SomeClass2.prototype.anotherMethod = function () {    };    console.log(SomeClass2);

The code above uses a concise representation of object properties, directly placing two functions in braces, and then adding them to SomeClass. prototype using the assign Method.

Clone object

    function clone1(origin) {        return Object.assign({}, origin);    }

The code above copies the original object to an empty object, and the original object is cloned.
However, this method can only clone the value of the original object, rather than the inherited value. If you want to maintain the inheritance chain, you can use the following code.

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

In JS, subclass uses Object. getPrototypeOf to call the parent class method to obtain the Object's prototype. It can be used to simulate Java's super.

Merge multiple objects into an object

    const merge1 =(target, ...sources) => Object.assign(target, ...sources);

Merge multiple objects into a new object

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

Specify the default value for the property

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

In the above Code, the DEFAULTS object is the default value, and the options object is a user-supplied parameter. The Object. assign method combines ults and options into a new Object. If both have attributes with the same name, the option attribute value overwrites the DEFAULTS attribute value.
Note:Due to the deep copy problem, the values of all attributes of the DEFAULTS object and the options object can only be simple types, but cannot point to another object. Otherwise, the property of the ults object does not work.
All code for this article:

<! DOCTYPE html> This article is to be continued ......