What extensions have been added to ES6 objects?

1. Abbreviation of attribute

In ES6, when the object key name is equal to the corresponding value name, it can be abbreviated

const baz = {foo:foo}

// Equivalent to
const baz = {foo}

Methods can also be abbreviated

const o = {
  method() {
    return "Hello!";
  }
};

// Equivalent to

const o = {
  method: function() {
    return "Hello!";
  }
}

As a return value in a function, it will also become much more convenient

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

getPoint()
// {x:1, y:10}

Note: Shorthand object methods cannot be used as constructors, otherwise an error will be reported

const obj = {
  f() {
    this.foo = 'bar';
  }
};

new obj.f() // report error

Second, attribute name expression

ES6 allows expressions to be enclosed in parentheses when defining objects with literals

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 the attribute name expression and concise notation cannot be used at the same time, and an error will be reported

// Error reporting
const foo = 'bar';
const bar = 'abc';
const baz = { [foo] };

// correct
const foo = 'bar';
const baz = { [foo]: 'abc'};

Note that if the property name expression is an object, the object will be automatically converted to a string by default [object Object]

const keyA = {a: 1};
const keyB = {b: 2};

const myObject = {
  [keyA]: 'valueA',
  [keyB]: 'valueB'
};

myObject // Object {[object Object]: "valueB"}

three, super keyword

The this keyword always points to the current object where the function is located, and ES6 adds another similar keyword super, which points to the prototype object of the current object

const proto = {
  foo: 'hello'
};

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

Object.setPrototypeOf(obj, proto); // Set the prototype object for obj
obj. find() // "hello"

Fourth, the application of the spread operator

In the destructuring assignment, the traversable properties that have not been read are assigned to the specified object

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

Note: The destructuring assignment must be the last parameter, otherwise an error will be reported

Destructuring assignment is a shallow copy

let obj = { a: { b: 1 } };
let { ... x } = obj;
obj.a.b = 2; // Modify the key value in the a attribute in obj
x.a.b // 2, affects the value of x from the structure

The object spread operator is equivalent to using the Object.assign() method

5. Traversal of attributes

ES6 has a total of 5 methods to traverse the properties of an object.

  • for…in: Loop through the object’s own and inherited enumerable properties (excluding Symbol properties)

  • Object.keys(obj): returns an array, including the key names of all enumerable properties (excluding Symbol properties) of the object itself (excluding inherited ones)

  • Object.getOwnPropertyNames(obj): returns an array containing the key names of all properties of the object itself (excluding Symbol properties, but including non-enumerable properties)

  • Object.getOwnPropertySymbols(obj): returns an array containing the key names of all Symbol properties of the object itself

  • Reflect.ownKeys(obj): returns an array containing all the key names of the object itself (excluding inherited ones), regardless of whether the key name is a Symbol or a string, or whether it is enumerable

The above traversals all follow the same order rules for attribute traversal:

  • First traverse all the numeric keys and sort them in ascending order
  • Secondly, traverse all string keys and arrange them in ascending order of joining time
  • Finally, traverse all Symbol keys and sort them in ascending order of joining time
Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })
// ['2', '10', 'b', 'a', Symbol()]

6. Methods for adding objects

The methods for adding new objects are as follows:

  • Object. is()
  • Object. assign()
  • Object. getOwnPropertyDescriptors()
  • Object.setPrototypeOf(), Object.getPrototypeOf()
  • Object.keys(), Object.values(), Object.entries()
  • Object. fromEntries()

Object.is()

Strictly judge whether two values are equal, which is basically the same as the strict comparison operator (===), with only two differences: one is that + 0 is not equal to -0, the second is that NaN is equal to itself

 + 0 === -0 //true
NaN === NaN // false

Object. is( + 0, -0) // false
Object.is(NaN, NaN) // true

Object. assign()

The Object.assign() method is used for object merging, copying all enumerable properties of the source object source to the target object target

The first parameter of the Object.assign() method is the target object, and the following parameters are all source objects

const target = { a: 1, b: 1 };

const source1 = { b: 2, c: 2 };
const source2 = { c: 3 };

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

Note: The Object.assign() method is a shallow copy, and will be replaced when encountering an attribute with the same name

Object.getOwnPropertyDescriptors()

Returns the description object of all its own properties (non-inherited properties) of the specified object

const obj = {
  foo: 123,
  get bar() { return 'abc' }
};

Object. getOwnPropertyDescriptors(obj)
// { foo:
// { value: 123,
// writable: true,
// enumerable: true,
// configurable: true },
// bar:
// { get: [Function: get bar],
// set: undefined,
// enumerable: true,
// configurable: true } }

Object.setPrototypeOf()

The Object.setPrototypeOf method is used to set the prototype object of an object

Object.setPrototypeOf(object, prototype)

// usage
const o = Object.setPrototypeOf({}, null);

Object.getPrototypeOf()

The prototype object used to read an object

Object.getPrototypeOf(obj);

Object.keys()

Returns an array of key names of all enumerable properties of itself (not inherited)

var obj = { foo: 'bar', baz: 42 };
Object. keys(obj)
// ["foo", "baz"]

Object.values()

Returns an array of values corresponding to the keys of all enumerable properties of its own (not inherited)

const obj = { foo: 'bar', baz: 42 };
Object. values(obj)
// ["bar", 42]

Object.entries()

Returns an array of key-value pairs of all enumerable properties of the object itself (not inherited)

const obj = { foo: 'bar', baz: 42 };
Object. entries(obj)
// [ ["foo", "bar"], ["baz", 42] ]

Object. fromEntries()

Used to convert an array of key-value pairs into an object

Object.fromEntries([
  ['foo', 'bar'],
  ['baz', 42]
])
// { foo: "bar", baz: 42 }