Object expansion

Object development review: Object literal, object deconstruction, three dot operators

Object name attribute

Object's method name attribute, but there are two special attribute methods. 1. If it is a property method, it is obtained through the property object.

// / / object
// let obj = {
//     demo() {},
//     //Characteristic method
//     get num() {},
//     set num(val) {
//         return 10
//     },
// }
// console.log(obj.demo.name)
// //Property method name
// //console.log(obj.num.name) / / error
// //Get by property object
// let descriptor = Object.getOwnPropertyDescriptor(obj, 'num');
// console.log(descriptor)
// console.log(descriptor.get.name)
// console.log(descriptor.set.name)

2. If it is the symbol attribute method, return the symbol description.

// //Symbol data
// let s1 = Symbol('ickt')
// let s2 = Symbol()
// / / object
// let obj = {
//     demo() {},
//     //Characteristic method
//     get num() {},
//     set num(val) {
//         return 10
//     },
//     [s1]() {},
//     [s2]() {}
// }
// console.log(obj.demo.name)
// //Symbol property method
// console.log(obj[s1].name)
// console.log(obj[s2].name)

Null conduction operator

There are four ways to determine whether a property or method exists, exists for return or execution.

// null conduction
// let obj = {};
// let s1 = Symbol();
// let obj = {
//     a: {
//         b: {
//             c() {
//                 return {
//                     d: 100,
//                     [s1]: 20
//                 }
//             }
//         }
//     }
// };
// ? avoid confusion with?:
// console.log(obj.a && obj.a.b && obj.a.b.c && obj.a.b.c() && obj.a.b.c().d)
// console.log(obj?.a?.b?.c()?.d)
// console.log(obj?.a?.b?.c()?.[s1])
// delete obj?.a?.b.c;
// console.log(obj)
// Assignment is not supported temporarily
// obj?.x?.y.z = 10

Static methods of objects

Object.is

This method has two functions: 1. Judge + 0 and - 0 2. Judge NaN

// Instead of = = =
// console.log(Object.is())
// 000000000    100000000
// console.log(+0/1 === -0/1)
// console.log(Object.is(+0/1, -0/1))
// console.log(Object.is(0/0, +'abc'))

Object.assign

It is to expand a static method for the object, realize the copy (multiple inheritance) of parameter object, and realize the shallow copy Shallow copy: data of value type is directly copied, and data of reference type is directly changed to point (reference the same) Deep copy: direct copy of value type data and direct copy of reference type data (excluding functions) The extend method of jquery can realize deep replication, passing the first parameter to the Boolean value true

// copy 
let obj1 = {
    color: 'red',
    num: 10
}
let obj2 = {
    color: 'green',
    size: {
        width: 10,
        height: 20
    }
}
let obj3 = {
    num: 20,
    arr: [1, 2, 3]
}
// Defining characteristics
Object.defineProperty(obj3, 'msg', {
    value: 'hello',
    enumerable: false
})
// copy 
Object.assign(obj1, obj2, obj3);
// Shallow copy
// $.extend(obj1, obj2, obj3);
// / / deep copy
// $.extend(true, obj1, obj2, obj3);
// //Modify obj 2
// obj2.color = 'blue';
// obj2.size.width = 100;
// console.log(obj1)
// console.log(obj3)

The first parameter cannot be null or undefined, and other non object type parameters will be wrapped as objects (although number and Boolean values are meaningless)

// console.log(Object.assign(null))
// console.log(Object.assign(undefined))
// console.log(Object.assign('hello'))
// console.log(Object('hello'))
// console.log(Object.assign(100))
// console.log(Object(100))
// console.log(Object.assign(true))
// console.log(Object(true))
// //Convert array
// console.log(Object.assign([5, 6, 7], [1, 2]))

Only enumerated properties can be merged

// copy 
let obj1 = {
    color: 'red',
    num: 10
}
let obj2 = {
    color: 'green',
    size: {
        width: 10,
        height: 20
    }
}
let obj3 = {
    num: 20,
    arr: [1, 2, 3]
}
// Defining characteristics
Object.defineProperty(obj3, 'msg', {
    value: 'hello',
    enumerable: false
})
// copy 
Object.assign(obj1, obj2, obj3);
console.log(obj1)
console.log(obj3)

Purpose: copy objects, merge objects, define default configuration, expand instance properties for objects, expand prototype methods, etc

// function Player(name, x, y) {
function Player(options) {
    // this.name = name;
    // this.x = x;
    // this.y = y;
    Object.assign(this, options)
}
// Development prototype
Object.assign(Player.prototype, {
    demo() {}
})
console.log(new Player({
    name: 'ickt',
    x: 10,
    y: 20
}))