Extension of the ES6 object

1. The concise notation of the property

ES6 allows variables and functions to be written directly in braces as properties and methods of objects. This kind of writing is more concise.

const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}
// 等同于
const baz = {foo: foo};

In the code above, the variable foo is written directly in braces. A t this point, the property name is the variable name, and the property value is the variable value. Here's another example.

function f(x, y) {
  return {x, y};
}
// 等同于
function f(x, y) {
  return {x: x, y: y};
}
f(1, 2) // Object {x: 1, y: 2}

In addition to property short writing, methods can also be short.

const o = {
  method() {
    return "Hello!";
  }
};
// 等同于
const o = {
  method: function() {
    return "Hello!";
  }
};

Here is a practical example.

let birth = '2000/01/01';
const Person = {
  name: '张三',
  //等同于birth: birth
  birth,
  // 等同于hello: function ()...
  hello() { console.log('我的名字是', this.name); }
};

This type of writing is very convenient for the return value of the function.

function getPoint() {
  const x = 1;
  const y = 10;
  return {x, y};
}
getPoint()
// {x:1, y:10}

The CommonJS module outputs a set of variables, which is a good fit for simple writing.

let ms = {};
function getItem (key) {
  return key in ms ? ms[key] : null;
}
function setItem (key, value) {
  ms[key] = value;
}
function clear () {
  ms = {};
}
module.exports = { getItem, setItem, clear };
// 等同于
module.exports = {
  getItem: getItem,
  setItem: setItem,
  clear: clear
};

The 赋值器 evaluator (setter) 取值器 (getter) are in fact written in this way.

const cart = {
  _wheels: 4,
  get wheels () {
    return this._wheels;
  },
  set wheels (value) {
    if (value < this._wheels) {
      throw new Error('数值太小了！');
    }
    this._wheels = value;
  }
}

Simple writing is also useful when printing objects.

let user = {
  name: 'test'
};
let foo = {
  bar: 'baz'
};
console.log(user, foo)
// {name: "test"} {bar: "baz"}
console.log({user, foo})
// {user: {name: "test"}, foo: {bar: "baz"}}

In the code above, console .log two sets of key value pairs when you output both user and foo objects directly, which can be confusing. Put them in braces to output, it becomes a simple notation of the object, each set of key values to the front will print the object name, so that it is more clear.

Note that short-write object methods cannot be used as constructors and report errors.

const obj = {
  f() {
    this.foo = 'bar';
  }
};
new obj.f() // 报错

In the above code, f is a short-case object method, so obj.f cannot be used as a constructor.

2. Property name expression

JavaScript defines the properties of an object in two ways.

// 方法一
obj.foo = true;
// 方法二
obj['a' + 'bc'] = 123;

The method of the above code is to use the identifier directly as the property name, and method two is to use the expression as the property name, at which point the expression is placed in square brackets.

However, if you define an object literally (using braces), you can only define properties using method one (identifier) in ES5.

var obj = {
  foo: true,
  abc: 123
};

ES6 allows method two (expressions) to be used as the property name of an object when defining objects literally, i.e. to place expressions in square brackets.

let propKey = 'foo';
let obj = {
  [propKey]: true,
  ['a' + 'bc']: 123
};

Here's another example.

let lastWord = 'last word';
const a = {
  'first word': 'hello',
  [lastWord]: 'world'
};
a['first word'] // "hello"
a[lastWord] // "world"
a['last word'] // "world"

Expressions can also be used to define method names.

let obj = {
  ['h' + 'ello']() {
    return 'hi';
  }
};
obj.hello() // hi

Note that property name expressions, which cannot be used in the same time as concise notation, report errors.

// 报错
const foo = 'bar';
const bar = 'abc';
const baz = { [foo] };
// 正确
const foo = 'bar';
const baz = { [foo]: 'abc'};

Note that property name expressions, if they are an object, automatically convert the object to a string by default, which is especially careful.

const keyA = {a: 1};
const keyB = {b: 2};
const myObject = {
  [keyA]: 'valueA',
  [keyB]: 'valueB'
};
myObject // Object {[object Object]: "valueB"}

In the code above, both the keyA and the keyB get the object Object, so the keyB will overwrite the keyA, and myObject ends up with only one object Object property.

3. The name property of the method

The name name the function, which returns 函数名 The object method is also a function, so there is also a name property.

const person = {
  sayName() {
    console.log('hello!');
  },
};
person.sayName.name   // "sayName"

In the above code, the name property of the method returns the function name (that is, the method name).

If the object's method uses a value-taking function (getter) and a memory function (setter), the name property is not above the method, but above the get and set properties of the method's property, with the return value before the method name plus get and set.

const obj = {
  get foo() {},
  set foo(x) {}
};
obj.foo.name
// TypeError: Cannot read property 'name' of undefined
const descriptor = Object.getOwnPropertyDescriptor(obj, 'foo');
descriptor.get.name // "get foo"
descriptor.set.name // "set foo"

There are two special cases: the function created by the bind method, the name property returns bound plus the name of the original function, and the function created by the Function constructor, and the name property returns anonymous.

(new Function()).name // "anonymous"
var doSomething = function() {
  // ...
};
doSomething.bind().name // "bound doSomething"

If the method of the object is a Symbol value, the name property returns a description of the Symbol value.

const key1 = Symbol('description');
const key2 = Symbol();
let obj = {
  [key1]() {},
  [key2]() {},
};
obj[key1].name // "[description]"
obj[key2].name // ""

In the code above, the Symbol value for key1 is described, key2 is not.

4. The enumerability and traversal of the property

Enumerable

Each property of an object has 描述对象 (Descriptor) that controls the behavior of the property. Object.getOwnPropertyDescriptor gets the description object for the property.

let obj = { foo: 123 };
Object.getOwnPropertyDescriptor(obj, 'foo')
//  {
//    value: 123,
//    writable: true,
//    enumerable: true,
//    configurable: true
//  }

The enumerable property that describes an object, called enumerability, means that some operations ignore the current property if the property is false.

Currently, there are four operations that ignore properties that enumerable are false.

• for... in loop: Enumerable properties that traverse only the object itself and inherit.
• Object.keys(): Returns the key name of all enumerated properties of the object itself.
• JSON.stringify(): Only enumerated properties of the object itself are serialized.
• Object.assign(): Ignores the properties of enumerable false and copies only the enumerated properties of the object itself.

Of these four operations, the first three are ES5 and the last Object.assign() is new to ES6. O f these, only for... i n returns inherited properties, and the other three methods ignore inherited properties and deal only with the properties of the object itself. I n fact, “可枚举” the concept of "enumerable" was to allow certain properties to circumvent for... i n operation, otherwise all internal properties and methods will be traversed. F or example, the toString method of the object prototype, as well as the length property of “可枚举性” to avoid being for... in traversal to.

Object.getOwnPropertyDescriptor(Object.prototype, 'toString').enumerable
// false
Object.getOwnPropertyDescriptor([], 'length').enumerable
// false

In the code above, the enumerable of the toString and length properties are false, so for... in does not traverse these two properties inherited from the prototype.

In addition, ES6 states that all Class prototype methods are non-enumeralable.

Object.getOwnPropertyDescriptor(class {foo() {}}.prototype, 'foo').enumerable
// false

In general, the introduction of inherited properties into an operation complicates the problem, and most of the time we only care about the properties of the object itself. S o try not to use for... in loop, instead of Object.keys().

The traversal of the property

ES6 has five 5 种 the properties of an object.

（1）for... in

for... The in loop traverses the object itself and inherits enumerable properties (without symbol properties).

（2）Object.keys(obj)

Object.keys returns an array that includes the key names of all enumerated properties (without symbol properties) of the object itself (without inheritance).

（3）Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames returns an array that contains the key names of all properties of the object itself, excluding the Symbol property but including non-enumerated properties.

（4）Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols returns an array that contains the key names of all Symbol properties of the object itself.

（5）Reflect.ownKeys(obj)

Reflect.ownKeys returns an array that contains all key names of the object itself (without inheritance), whether the key name is Symbol or string, or whether or not it can be enumeration.

The key names of the objects are traversed 键名 5 methods, all of which follow the order rules for traversal of the same properties.

• First traverse all the numeric keys, in ascending order of values.
• Next, traverse all string keys, in ascending order of join time.
• Finally, traverse all symbol keys, in ascending order of join time.

Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })
// ['2', '10', 'b', 'a', Symbol()]

In the above code, the Reflect.ownKeys method returns an array that contains all the properties of the parameter object. The order of properties for this array is like this, starting with numeric properties 2 and 10, followed by string properties b and a, and finally symbol properties.

5. Super keyword

We know that this keyword always points to the current object 当前对象 function is located, and ES6 has added another super to the prototype object of 原型对象

const proto = {
  foo: 'hello'
};
const obj = {
  foo: 'world',
  find() {
    return super.foo;
  }
};
Object.setPrototypeOf(obj, proto);
obj.find() // "hello"

In the above code, the foo property of the prototype object proto is referenced by super.foo in the object obj.find() method. proto foo

Note that when the super keyword represents a prototype object, it can only be used in the object's method, and errors are reported elsewhere.

// 报错
const obj = {
  foo: super.foo
}
// 报错
const obj = {
  foo: () => super.foo
}
// 报错
const obj = {
  foo: function () {
    return super.foo
  }
}

All three of the above supers are used in error because for the JavaScript engine, supers are not used in the object's methods. T he first type of writing is that super is used in properties, and the second and third is that super is used in a function and then assigned to the foo property. Currently, only the short case of the object method allows the JavaScript engine to confirm that the object's method is defined.

Inside the JavaScript engine, super.foo equivalent to Object.getPrototypeOf (this).foo (attribute) or Object.getPrototypeOf (this).foo.call (method).

const proto = {
  x: 'hello',
  foo() {
    console.log(this.x);
  },
};
const obj = {
  x: 'world',
  foo() {
    super.foo();
  }
}
Object.setPrototypeOf(obj, proto);
obj.foo() // "world"

In the code above, super.foo points to the foo method of the prototype object proto, but the bound this is still the current object obj, so the output is world.

6. The extended operator of the object

Extension operators (... ） 。 ES2018 introduces this operator into the object.

Deconstruct the assignment

The 解构赋值 of an object is used to extract 取值 value from an object, which is equivalent to （enumerable） target object itself, but which have not yet been read, to the specified object. All keys and their values are copied to the new object.

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }

In the above code, the variable z is the object where the deconstructed assignment is located. It gets all the unread keys (a and b) to the right of the equal sign and copies them along with the values.

Because deconstruction assignments require an object to the right of the equal sign, if the right side of the equal sign is undefined or null, errors are reported because they cannot be converted to objects.

let { ...z } = null; // 运行时错误
let { ...z } = undefined; // 运行时错误

Deconstructing the assignment must be the last argument, otherwise an error will be reported.

let { ...x, y, z } = someObject; // 句法错误
let { x, ...y, ...z } = someObject; // 句法错误

In the above code, deconstructing the assignment is not the last argument, so it will be misaltered.

Note that 解构赋值 assignment is 复合类型 浅拷贝 shallow copy, i.e. if the value of a 引用 key is the value of the compound type (array, object, function), then the deconstructed assignment copy is a reference to that value, not a copy of that value.

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

In the code above, x is the object where the assignment is deconstructed, copying the a property of the object obj. The a property refers to an object, and modifying the value of that object affects deconstructing the assignment's reference to it.

In addition, the deconstruction assignment of the extension operator cannot replicate properties inherited from the prototype object.

let o1 = { a: 1 };
let o2 = { b: 2 };
o2.__proto__ = o1;
let { ...o3 } = o2;
o3 // { b: 2 }
o3.a // undefined

In the code above, object o3 copies o2, but only o2's own properties, not its prototype object o1.

Here's another example.

const o = Object.create({ x: 1, y: 2 });
o.z = 3;
let { x, ...newObj } = o;
let { y, z } = newObj;
x // 1
y // undefined
z // 3

In the above code, variable x is a simple deconstruction assignment, so you can read the properties inherited by the object o, variables y and z are deconstruction assignments of the extended operator, only the properties of the object o itself can be read, so the variable z can be assigned successfully, the variable y can not get a value. ES6 states that in a variable declaration statement, if a deconstructed assignment is used, the extension operator must be followed by a variable name, not a deconstructed assignment expression, so the above code introduces the intermediate variable newObj, which would be wrong if written below.

let { x, ...{ y, z } } = o;
// SyntaxError: ... must be followed by an identifier in declaration contexts

One use of deconstructing assignments is to extend the parameters of a function and introduce other operations.

function baseFunction({ a, b }) {
  // ...
}
function wrapperFunction({ x, y, ...restConfig }) {
  // 使用 x 和 y 参数进行操作
  // 其余参数传给原始函数
  return baseFunction(restConfig);
}

In the above code, the original function baseFunction accepts a and b as arguments, and the function wrapperFunction is extended from baseFunction to accept extra arguments and preserves the behavior of the original function.

The extension operator

The 扩展运算符 ( ... All traversable properties 可遍历 objects are copied into the current object.

let z = { a: 3, b: 4 };
let n = { ...z };
n // { a: 3, b: 4 }

Because arrays are special objects, the extended operators of objects can also be used for arrays.

let foo = { ...['a', 'b', 'c'] };
foo
// {0: "a", 1: "b", 2: "c"}

If the extension operator is followed by an empty object, it has no effect.

{...{}, a: 1}
// { a: 1 }

If the extension operator is not followed by an object, it is automatically converted to an object.

// 等同于 {...Object(1)}
{...1} // {}

In the above code, the extension operator is followed by the integer 1, which automatically changes to the value of the wrapper object Number{1}. Because the object does not have its own properties, an empty object is returned.

The following examples are all similar.

// 等同于 {...Object(true)}
{...true} // {}
// 等同于 {...Object(undefined)}
{...undefined} // {}
// 等同于 {...Object(null)}
{...null} // {}

However, if the extension operator is followed by a string, it automatically turns into an array-like object, so it does not return an empty object.

{...'hello'}
// {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}

The extension operator of an object is equivalent to Object.assign() method.

let aClone = { ...a };
// 等同于
let aClone = Object.assign({}, a);

The above example simply copies the properties of the object instance, and if you want to clone an object completely and copy the properties of the object prototype, you can do so in the following way.

// 写法一
const clone1 = {
  __proto__: Object.getPrototypeOf(obj),
  ...obj
};
// 写法二
const clone2 = Object.assign(
  Object.create(Object.getPrototypeOf(obj)),
  obj
);
// 写法三
const clone3 = Object.create(
  Object.getPrototypeOf(obj),
  Object.getOwnPropertyDescriptors(obj)
)

In the above code, the proto property of Write One is not necessarily deployed in a non-browser environment, so it is recommended to use Write Two and Write Three.

Extension operators can be used to merge two objects.

let ab = { ...a, ...b };
// 等同于
let ab = Object.assign({}, a, b);

If a user-defined property is placed behind an extension operator, the property with the same name inside the extension operator is overwritten.

let aWithOverrides = { ...a, x: 1, y: 2 };
// 等同于
let aWithOverrides = { ...a, ...{ x: 1, y: 2 } };
// 等同于
let x = 1, y = 2, aWithOverrides = { ...a, x, y };
// 等同于
let aWithOverrides = Object.assign({}, a, { x: 1, y: 2 });

In the code above, the x and y properties of the a object are overwritten when copied to the new object.

This is convenient for modifying the properties of an existing part of an object.

let newVersion = {
  ...previousVersion,
  name: 'New Name' // Override the name property
};

In the code above, the newVersion object customizes the name property, and all other properties are copied from the previousVersion object.

If you put a custom property in front of the extension operator, it becomes the default property value for setting the new object.

let aWithDefaults = { x: 1, y: 2, ...a };
// 等同于
let aWithDefaults = Object.assign({}, { x: 1, y: 2 }, a);
// 等同于
let aWithDefaults = Object.assign({ x: 1, y: 2 }, a);

Like an array's extension operator, an object's extended operator can be followed by an expression.

const obj = {
  ...(x > 1 ? {a: 1} : {}),
  b: 2,
};

Among the argument objects of the extended operator, if there is a value-taking function get, the function is executed.

let a = {
  get x() {
    throw new Error('not throw yet');
  }
}
let aWithXGetter = { ...a }; // 报错

In the example above, the value-taking function get is executed automatically when the a object is extended, resulting in an error.

7. Chain judgment operator

In programming practice, if you read a property inside an object, you often need to determine whether the object exists. For example, to read message.body.user.firstName, the safe way to write it is like this.

const firstName = (message
  && message.body
  && message.body.user
  && message.body.user.firstName) || 'default';

Or use the thyme operator ?: to determine the existence of an object.

const fooInput = myForm.querySelector('input[name=foo]')
const fooValue = fooInput ? fooInput.value : undefined

Such layering is cumbersome, so ES2020 introduces the "chain judgment operator"? to simplify the above writing.

const firstName = message?.body?.user?.firstName || 'default';
const fooValue = myForm.querySelector('input[name=foo]')?.value

The above code uses ?. O perator, which determines whether the object on the left is null or undefined when called directly in a chain. If so, instead of going down, return undefined.

Chain judgment operators are used in three ways.

• Obj?. prop // object properties
• Obj?. (expr) // Io above
• func?. ( ... args) // Calls to functions or object methods

The following is an example of determining whether an object method exists and, if so, executes immediately.

iterator.return?.()

In the code above, iterator.return calls the method, otherwise it returns directly to the undefined.

This operator is especially useful for methods that may not be implemented.

if (myForm.checkValidity?.() === false) {
  // 表单校验失败
  return;
}

In the code above, the old browser form may not checkValidity method, at this point ? The operator returns the undefined, and the judgment statement becomes undefined, so the following code is skipped.

Here's how this operator is commonly used, and the equivalent form when it's not used.

a?.b
// 等同于
a == null ? undefined : a.b
a?.[x]
// 等同于
a == null ? undefined : a[x]
a?.b()
// 等同于
a == null ? undefined : a.b()
a?.()
// 等同于
a == null ? undefined : a()

In the above code, pay special attention to the 3d forms, if a? b () The a-.b is not a function and cannot be called, so a?. b () Errors are reported. A ?. ( ) The same is true, if a is not null or undefined, but it is not a function, then a? () Errors will be reported.

With this operator, there are a few notations.

(1) Short-circuit mechanism

a?.[++x]
// 等同于
a == null ? undefined : a[++x]

In the above code, if a is undefined or null, x does not increment. That is, once the chain judgment operator is true, the expression on the right is no longer evaluated.

(2) Delete operator

delete a?.b
// 等同于
a == null ? undefined : delete a.b

In the above code, if a is undefined or null, the undefined is returned directly without the delete operation.

(3) The effect of parentheses

If the property chain has parentheses, the chain judgment operator has no effect on the outside of the parenthesis, only on the inside of the parenthesis.

(a?.b).c
// 等价于
(a == null ? undefined : a.b).c

In the code above, ? There is no effect on the outside of the parenthesis, regardless of whether the a object exists, and the .c after the parenthesis is always executed.

Generally speaking, the use of ?. In the event of an operator, parentheses should not be used.

(4) The occasion of error reporting

The following writing is prohibited and will report errors.

// 构造函数
new a?.()
new a?.b()
// 链判断运算符的右侧有模板字符串
a?.`{b}`
a?.b`{c}`
// 链判断运算符的左侧是 super
super?.()
super?.foo
// 链运算符用于赋值运算符左侧
a?.b = c

(5) The right side must not be a hedding value

In order to ensure compatibility with previous code, allow foo?. 3 :0 is resolved to foo ? .3 : 0 , so it is stipulated that if . F ollowed by a hedding number, then ? It is no longer considered a complete operator, but is processed as a thynon operator, that is, the decimal point belongs to the decimal number that follows, forming a decimal number.

8. Null judgment operator

When you read object properties, if the value of a property is null or undefined, you sometimes need to specify a default value for them. A common practice is to || The operator specifies the default value.

const headerText = response.settings.headerText || 'Hello, world!';
const animationDuration = response.settings.animationDuration || 300;
const showSplashScreen = response.settings.showSplashScreen || true;

All three lines of code above are || T he operator specifies the default value, but this is wrong. The developer's original idea was that the default value would take effect as long as the value of the property was null or undefined, but the default value would also take effect if the value of the property was an empty string or false or 0.

To avoid this, ES2020 introduces a new Null judgment operator. 。 I t behaves like || , but only if the value on the left side of the operator is null or undefined.

const headerText = response.settings.headerText ?? 'Hello, world!';
const animationDuration = response.settings.animationDuration ?? 300;
const showSplashScreen = response.settings.showSplashScreen ?? true;

In the code above, the default value takes effect only if the property value is null or undefined.

One of the purposes of this operator is to judge the operator with the chain. Use together to set default values for null or undefined values.

const animationDuration = response.settings?.animationDuration ?? 300;

In the code above, if the response.settings are null or undefined, the default value of 300 is returned.

This operator is ideal for determining whether function parameters are assigned.

function Component(props) {
  const enable = props.enabled ?? true;
  // …
}

The above code determines whether the enabled property of the props parameter is assigned, which is equivalent to the following writing.

function Component(props) {
  const {
    enabled: enable = true,
  } = props;
  // …
}

?? T here is an computational priority issue, which is related to the || t he priority of the high and low. The rule now is that if multiple logical operators are used together, the priority must be indicated in parentheses or an error will be reported.

// 报错
lhs && middle ?? rhs
lhs ?? middle && rhs
lhs || middle ?? rhs
lhs ?? middle || rhs

All four expressions above are error-positive and must be preceded by parentheses indicating priority.

(lhs && middle) ?? rhs;
lhs && (middle ?? rhs);
(lhs ?? middle) && rhs;
lhs ?? (middle && rhs);
(lhs || middle) ?? rhs;
lhs || (middle ?? rhs);
(lhs ?? middle) || rhs;
lhs ?? (middle || rhs);