ES 6 Series XI: Object extensions

“Code Tailor “provides technology related information and a series of basic articles for front-end developers. Follow the wechat public account” Rookie of Xiaohe Mountain “to get the latest articles.

preface

Before we start, we want to let you know that this article is a summary of the chapter “Extending Objects” in ECMAScript6 introduction by Yvong Nguyen. If you already know the following things, you can skip this section and go straight to the topic exercises

• How can objects be expressed concisely?
• What are the methods of property traversal?
• What is the super operator?
• What does the object extension operator do?

If you are a little bit forgotten about some parts, 👇🏻 is ready for you!

Learning links

Object extension learning

Summary to summarize

A concise representation of an object

ES6 allows variables and functions to be written directly inside curly braces as object properties and methods

let birth = '1999/01/01'

const Person = {
  name: 'bill'.// Is the same as birth
  birth,

  // equivalent to hello: function ()...
  hello() {
    console.log('My name is.'.this.name)
  },
}
Copy the code

Attribute traversal

• for… in:Loop over the enumerable properties of the object itself and its inheritance (excludingSymbolProperties).
• Object.keys(obj):Returns an array containing all the enumerable properties of the object itself (excluding inheritance)SymbolProperty).
• Object.getOwnPropertyNames(obj):Returns an array containing all properties of the object itself (excludingSymbolProperty, but includes non-enumerable properties).
• Object.getOwnPropertySymbols(obj):Returns an array containing all of the objects themselvesSymbolThe key name of the property.
• Reflect.ownKeys(obj):Returns an array containing all of the object’s own (not inherited) keys, regardless of their namesSymbolOr a string, whether enumerable or not.

All five methods follow the same sequence rules for traversal of attributes.

• First, all numeric keys are iterated, sorted in ascending order.
• Next, all the string keys are iterated in ascending order by the time they were added.
• Let’s go through everything one last timeSymbolKeys, in ascending order of accession time.

Super operator.

The prototype object that points to the current object

const proto = {
  foo: 'hello',}const obj = {
  foo: 'world'.find() {
    return super.foo
  },
}

Object.setPrototypeOf(obj, proto)
obj.find() // "hello"

// In the code above, the object obj.find() method references the foo property of proto via super.foo.
Copy the code

Note that when the super keyword represents a prototype object, it can only be used in the object’s methods, and will return an error if used elsewhere.

Object extension operator

1. Deconstruct assignment

Destructible assignment of an object is used to take values from an object, which is equivalent to assigning all of the target object’s Enumerable properties that have not yet been read to the specified object. All the 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 }

// The variable z is the object to which the deconstructed assignment is located. It retrieves all unread keys (A and B) to the right of the equals sign
// Copy them in with their values.
Copy the code

** Note: **

• Deconstruction assignment requires that the right-hand side of the equals sign be an object, so if the right-hand side of the equals sign isundefined 或 null, an error is reported because they cannot be converted to objects.
• The destruct assignment must be the last argument, or an error will be reported.
• A copy of a deconstructed assignment is a shallow copy, that is, if the value of a key is a value of a compound type (array, object, function), the deconstructed assignment copies 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
Copy the code

• Destructuring assignments of extended operators cannot copy properties inherited from the prototype object

1. Extend the operator

Retrieves all traversable properties of the parameter object and copies them to the current object.

let z = { a: 3.b: 4 }
letn = { ... z } n// { a: 3, b: 4 }
Copy the code

** Note: **

• Object extension operators can also be used for arrays.

letfoo = { ... ['a'.'b'.'c'] }
foo
// {0: "a", 1: "b", 2: "c"}
Copy the code

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

{... {},a: 1}
// { a: 1 }
Copy the code

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

// the same as {... Object(1)}
{..1.} / / {}
Copy the code

• Object extension operator is equivalent to usingObject.assign()Methods.

letaClone = { ... a }/ / is equivalent to
let aClone = Object.assign({}, a)
Copy the code

The title self-test

One: deep copy the contents of obj1 into obj2 using extension operators (regardless of object nesting).

let obj1 = { name: 'hzq'.age: 18 }
letobj2 = { ... obj1 }Copy the code

Which of the following is an incorrect way to define a literal object?

A.

var obj = {
  foo: true.abc: 123,}Copy the code

B.

let propKey = 'foo'

let obj = {
  [propKey]: true['a' + 'bc'] :123,}Copy the code

C.

const foo = 'bar'
const baz = { [foo]: 'abc' }
Copy the code

D.

const foo = 'bar';
const bar = 'abc';
const baz = { [foo] };
Copy the code

Three: what is the output of the following three objects concatenated using the extension operator?

let obj1 = { name: 'hzq'.age: 18 }
let obj2 = { name: 'yry'.age: 19 }
let obj3 = { name: 'ljj'.age: 20.role: 'boss' }
letobj4 = { ... obj1, ... obj2, ... obj3 }console.log(obj4) // {name: 'ljj', age: 20, role: 'boss'}
Copy the code

ES 6 series object extension, we end here, thank you for your support to the author! Your attention and praise will be the strongest motivation for us to move forward! Thank you!