3.2.3 ES6 Objects

❮ Cpp Reference Type Android Tutorial Http Response Header ❯

3.2.3 ES6 Objects

Category ES6 Tutorial

Object Literals

Shorthand Property Names

ES6 allows object properties to be written directly as variables, where the property name is the variable name and the property value is the variable value.

const age = 12;
const name = "Amy";
const person = {age, name};
person   //{age: 12, name: "Amy"}
//Equivalent to
const person = {age: age, name: name}

Method Names Can Also Be Shorthand

const person = {
  sayHi(){
    console.log("Hi");
  }
}
person.sayHi();  //"Hi"
//Equivalent to
const person = {
  sayHi:function(){
    console.log("Hi");
  }
}
person.sayHi();//"Hi"

If it is a Generator function, a star must be added in front:

const obj = {
  * myGenerator() {
    yield 'hello world';
  }
};
//Equivalent to
const obj = {
  myGenerator: function* () {
    yield 'hello world';
  }
};

Property Name Expressions

ES6 allows expressions to be used as property names, but expressions must be enclosed in square brackets.

const obj = {
 ["he"+"llo"](){
   return "Hi";
  }
}
obj.hello();  //"Hi"

Note: Shorthand property notation and property name expressions cannot be used at the same time, otherwise an error will occur.

const hello = "Hello";
const obj = {
 [hello]
};
obj  //SyntaxError: Unexpected token }

const hello = "Hello";
const obj = {
 [hello+"2"]:"world"
};
obj  //{Hello2: "world"}

Object Spread Operator

The spread operator (...) is used to extract all iterable properties from the argument object and then copy them to the current object.

Basic Usage

let person = {name: "Amy", age: 15};
let someone = { ...person };
someone;  //{name: "Amy", age: 15}

Can be Used to Merge Two Objects

let age = {age: 15};
let name = {name: "Amy"};
let person = {...age, ...name};
person;  //{age: 15, name: "Amy"}

Notes

When custom properties and properties inside the spread operator object are the same: If the custom properties are behind the spread operator, the properties with the same name inside the spread operator object will be overwritten. 9>

let person = {name: "Amy", age: 15};
let someone = { ...person, name: "Mike", age: 17};
someone;  //{name: "Mike", age: 17}

If the custom property is in front of the spread operator, it becomes setting the default property value of the new object.

let person = {name: "Amy", age: 15};
let someone = {name: "Mike", age: 17, ...person};
someone;  //{name: "Amy", age: 15}

If the spread operator is followed by an empty object, it has no effect and no error is reported.

let a = {...{}, a: 1, b: 2};
a;  //{a: 1, b: 2}

If the spread operator is followed by null or undefined, it has no effect and no error is reported.

let b = {...null, ...undefined, a: 1, b: 2};
b;  //{a: 1, b: 2}

New Object Methods

Object.assign(target, source_1, ···)

Used to copy all enumerable properties of the source object to the target object.

Basic Usage

let target = {a: 1};
let object2 = {b: 2};
let object3 = {c: 3};
Object.assign(target,object2,object3);  
// The first parameter is the target object, and the following parameters are source objects
target;  // {a: 1, b: 2, c: 3}

If the target object and the source object have the same property name, or multiple source objects have the same property name, the latter property will overwrite the former property.
If the function has only one parameter, when the parameter is an object, it will return the object directly; when the parameter is not an object, it will first convert the parameter

❮ Cpp Reference Type Android Tutorial Http Response Header ❯