The new method for ES6 objects

1. Object.is()

ES5 compares whether two values are 相等运算符 with only two operators: the equal operator , and the 严格相等运算符 equal operator , . T hey all have drawbacks: the former automatically converts the data type, the naN of the latter is not equal to itself, and the 0 is equal to -0. JavaScript lacks an operation that should be equal in all environments as long as the two values are the same.

ES6 “Same-value equality” algorithm to solve this problem. Object.is a new way to deploy this algorithm. It is used to compare whether the two values are strictly equal and behave in much the same way as the strict comparison operator.

Object.is('foo', 'foo')
// true
Object.is({}, {})
// false

There are only two differences: one is that 0 is not equal to -0, and the other is that NaN is equal to itself.

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

ES5 can deploy the code below to Object.is.

Object.defineProperty(Object, 'is', {
  value: function(x, y) {
    if (x === y) {
      // 针对+0 不等于 -0的情况
      return x !== 0 || 1 / x === 1 / y;
    }
    // 针对NaN的情况
    return x !== x && y !== y;
  },
  configurable: true,
  enumerable: false,
  writable: true
});

2. Object.assign()

Basic usage

Object.assign is used for the merge of 源对象 copying all enumerated 可枚举 of the source object to the target object.

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

The first argument to the Object.assign method is the target object, followed by the source object.

Note that if the target object has properties with the same name as the source object, or if multiple source objects have properties with the same name, subsequent properties override the previous properties.

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}

If there is only one argument, Object.assign returns it directly.

const obj = {a: 1};
Object.assign(obj) === obj // true

If the argument is not an object, it is turned into an object and then returned.

typeof Object.assign(2) // "object"

Because undefined and null cannot be converted to objects, if they are parameters, they are reported as errors.

Object.assign(undefined) // 报错
Object.assign(null) // 报错

If a non-object argument appears at the location of the source object (that is, a non-first argument), the processing rules are different. F irst, these parameters are converted to objects, and if they cannot be converted to objects, they are skipped. This means that if undefined and null are not in the first argument, no errors are reported.

let obj = {a: 1};
Object.assign(obj, undefined) === obj // true
Object.assign(obj, null) === obj // true

Other types of values (i.e. values, strings, and boolean values) are not in the first argument and are not reported as errors. However, no other value has an effect except that the string is copied into the target object as an array.

const v1 = 'abc';
const v2 = true;
const v3 = 10;
const obj = Object.assign({}, v1, v2, v3);
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

In the above code, v1, v2, v3 are strings, Boolean values, and values, and as a result only strings are joined into the target object (in the form of an array of characters), both values and Boolean values are ignored. This is because only the wrapper object of the string produces enumerable properties.

Object(true) // {[[PrimitiveValue]]: true}
Object(10)  //  {[[PrimitiveValue]]: 10}
Object('abc') // {0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"}

In the above code, Boolean values, values, strings are 内部属性 converted into corresponding wrapper objects, you can see that their original values are wrapped on the object's internal property, "PrimitiveValue", this property will not be copied by Object.assign. Only wrapper objects of strings produce enumerable solid properties, which are copied.

Object.assign copies properties are limited, copying only the source 不可枚举 object's own properties (not copying inherited properties) and not enumerable properties (enumerable: false).

Object.assign({b: 'c'},
  Object.defineProperty({}, 'invisible', {
    enumerable: false,
    value: 'hello'
  })
)
// { b: 'c' }

In the above code, Object.assign only one object to copy, the 不可枚举属性 property invisible, which is not copied in.

A property named Symbol value is also copied by Object.assign.

Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' })
// { a: 'b', Symbol(c): 'd' }

Note the point

(1) Shallow copy

Object.assign method implements 浅拷贝 not a deep copy. That is, if the value of a property of the source object is an object, the target object copy gets a reference to the object.

const obj1 = {a: {b: 1}};
const obj2 = Object.assign({}, obj1);
obj1.a.b = 2;
obj2.a.b // 2

In the above code, the value of the a property of the source object obj1 is an object, and the Object.assign copy gets a reference to that object. Any changes to this object are reflected above the target object.

(2) Replacement of properties with the same name

For such nested objects, Object.assign is handled by replacing, not adding, properties with the same name.

const target = { a: { b: 'c', d: 'e' } }
const source = { a: { b: 'hello' } }
Object.assign(target, source)
// { a: { b: 'hello' } }

In the above code, the target object's a property is replaced entirely by the source object's a property without the result of the . This is usually not what developers want and requires special care.

Some libraries provide customized versions of Object.assign, such as Lodash's .defaultsDeep method, and you can get deep-copy merges.

(3) The processing of the array

Object.assign be 处理数组 but they are treated as objects.

Object.assign([1, 2, 3], [4, 5])
// [4, 5, 3]

In the above code, Object.assign treats the array as an object with properties named 0, 1, 2, so property 4 of the source array overrides property 0 of the target array.

(4) The processing of the value-taking function

Object.assign only be copied 复制 and if the value you want to copy is a value-taking function, it will be valued and then copied.

const source = {
  get foo() { return 1 }
};
const target = {};
Object.assign(target, source)
// { foo: 1 }

In the above code, the foo property of the source object is a value-taking function, and Object.assign does not copy the value-taking function, but only copies the value after it has been obtained.

Common uses

The Object.assign method is of many use.

(1) Add properties to the object

class Point {
  constructor(x, y) {
    Object.assign(this, {x, y});
  }
}

The above method adds the x and y properties to the object instance of the Point class through the Object.assign method.

(2) Add a method to the object

Object.assign(SomeClass.prototype, {
  someMethod(arg1, arg2) {
    ···
  },
  anotherMethod() {
    ···
  }
});
// 等同于下面的写法
SomeClass.prototype.someMethod = function (arg1, arg2) {
  ···
};
SomeClass.prototype.anotherMethod = function () {
  ···
};

The above code uses a concise notation of object properties, places two functions directly in braces, and adds them to SomeClass.prototype using the assign method.

(3) Clone the object

function clone(origin) {
  return Object.assign({}, origin);
}

The above code copies the original object to an empty object and obtains a clone of the original object.

However, by cloning in this way, you can only clone the value of the original object itself, not the value it inherited. If you want to keep the inheritance chain, you can use the following code.

function clone(origin) {
  let originProto = Object.getPrototypeOf(origin);
  return Object.assign(Object.create(originProto), origin);
}

(4) Merge multiple objects

Merge multiple objects into an object.

const merge =
  (target, ...sources) => Object.assign(target, ...sources);

If you want to merge and return a new object, you can override the above function and merge an empty object.

const merge =
  (...sources) => Object.assign({}, ...sources);

(5) Specify the default value for the property

const DEFAULTS = {
  logLevel: 0,
  outputFormat: 'html'
};
function processContent(options) {
  options = Object.assign({}, DEFAULTS, options);
  console.log(options);
  // ...
}

In the above code, the DEFAULTS object is the default value, and the options object is the user-provided parameter. The Object.assign method merges DEFAULTS and options into a new object, and if they both have properties of the same name, the property values of options override the property values of DEFAULTS.

Note that due to a shallow copy problem, the values of all properties of the DEFAULTS object and the options object are preferably simple types and do not point to another object. Otherwise, the property of the DEFAULTS object is likely to have no effect.

const DEFAULTS = {
  url: {
    host: 'example.com',
    port: 7070
  },
};
processContent({ url: {port: 8000} })
// {
//   url: {port: 8000}
// }

The original intention of the above code is to change url.port to 8000, url.host unchanged. The actual result is options.url overwriting DEFAULTS.url, so url.host doesn't exist.

3. Object.getOwnPropertyDescriptors()

ES5's Object.getOwnPropertyDescriptor() method returns a description object (descriptor) for an object property. 描述对象 ES2017 introduces the Object.getOwnPropertyDescriptors() returns a description of all of the 自身属性 object's own properties (non-inherited properties).

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 } }

In the above code, Object.getOwnPropertyDescriptors() an object, and the property name of all the original objects is the property name of the object, and the corresponding property value is the description object of the property. 对象

The implementation of this method is very easy.

function getOwnPropertyDescriptors(obj) {
  const result = {};
  for (let key of Reflect.ownKeys(obj)) {
    result[key] = Object.getOwnPropertyDescriptor(obj, key);
  }
  return result;
}

This method was introduced primarily to address the problem that Object.assign() does not correctly copy the get and set properties.

const source = {
  set foo(value) {
    console.log(value);
  }
};
const target1 = {};
Object.assign(target1, source);
Object.getOwnPropertyDescriptor(target1, 'foo')
// { value: undefined,
//   writable: true,
//   enumerable: true,
//   configurable: true }

In the above code, the value foo property of the source object is an assignment 赋值函数 and the Object.assign method copies the property to the target1 object, resulting in the value of the property becoming undefined. This is because the Object.assign method always copies the value of a property, not the assignment method or value method behind it.

At this point, the Object.getOwnPropertyDescriptors() method, in conjunction with the Object.defineProperties() method, can be copied correctly.

const source = {
  set foo(value) {
    console.log(value);
  }
};
const target2 = {};
Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
Object.getOwnPropertyDescriptor(target2, 'foo')
// { get: undefined,
//   set: [Function: set foo],
//   enumerable: true,
//   configurable: true }

In the above code, the logic of the merge of two objects can be written as a function.

const shallowMerge = (target, source) => Object.defineProperties(
  target,
  Object.getOwnPropertyDescriptors(source)
);

Another use of the Object.getOwnPropertyDescriptors() method is to clone object properties to a new object in conjunction with the Object.create() method. This is a shallow copy.

const clone = Object.create(Object.getPrototypeOf(obj),
  Object.getOwnPropertyDescriptors(obj));
// 或者
const shallowClone = (obj) => Object.create(
  Object.getPrototypeOf(obj),
  Object.getOwnPropertyDescriptors(obj)
);

The above code clones the object obj.

In addition, the Object.getOwnPropertyDescriptors() method enables one object to inherit another. Previously, inheriting another object was often written like this.

const obj = {
  __proto__: prot,
  foo: 123,
};

ES6 states that proto is only deployed by browsers and not by other environments. If you remove proto, the above code will change to the following.

const obj = Object.create(prot);
obj.foo = 123;
// 或者
const obj = Object.assign(
  Object.create(prot),
  {
    foo: 123,
  }
);

With Object.getOwnPropertyDescriptors(), we have another way of writing.

const obj = Object.create(
  prot,
  Object.getOwnPropertyDescriptors({
    foo: 123,
  })
);

Object.getOwnPropertyDescriptors() can also be used to implement Mixin mode.

let mix = (object) => ({
  with: (...mixins) => mixins.reduce(
    (c, mixin) => Object.create(
      c, Object.getOwnPropertyDescriptors(mixin)
    ), object)
});
// multiple mixins example
let a = {a: 'a'};
let b = {b: 'b'};
let c = {c: 'c'};
let d = mix(c).with(a, b);
d.c // "c"
d.b // "b"
d.a // "a"

The above code returns a new object, d, which represents the operation of objects a and b being mixed into object c.

For integrity reasons, The Object.getOwnPropertyDescriptors() will be added to the Standard, and the Reflect.getOwnPropertyDescriptors() method will be added in the future.

4. Proto Properties, Object.setPrototypeOf(), Object.getPrototypeOf()

JavaScript the JavaScript language is 原型链 prototype chain. ES6 provides more ways to operate prototype objects.

Proto property

__proto__ (two underlined before and after) to read or set the prototype 原型对象 current object. Currently, this property is deployed by all browsers, including IE11.

// es5 的写法
const obj = {
  method: function() { ... }
};
obj.__proto__ = someOtherObj;
// es6 的写法
var obj = Object.create(someOtherObj);
obj.method = function() { ... };

Instead of writing to the body of ES6, the property is written to the 内部属性 appendix because the double underscore before and after proto indicates that it is essentially an internal property, not a formal external API, and was added to ES6 only because of widespread browser support. T he standard clearly states that only browsers must deploy this property, that other operating environments do not necessarily need to be deployed, and that the new code would do well to consider this property non-existent. Therefore, do not use this property from a semantic or compatibility perspective, but instead use Object.setPrototypeOf() Object.getPrototypeOf() Object.create() (build operation).

On the implementation, __proto__ called by Object.prototype.__proto__ which is implemented as follows.

Object.defineProperty(Object.prototype, '__proto__', {
  get() {
    let _thisObj = Object(this);
    return Object.getPrototypeOf(_thisObj);
  },
  set(proto) {
    if (this === undefined || this === null) {
      throw new TypeError();
    }
    if (!isObject(this)) {
      return undefined;
    }
    if (!isObject(proto)) {
      return undefined;
    }
    let status = Reflect.setPrototypeOf(this, proto);
    if (!status) {
      throw new TypeError();
    }
  },
});
function isObject(value) {
  return Object(value) === value;
}

If an object itself deploys the proto property, the value of the property is the prototype of the object.

Object.getPrototypeOf({ __proto__: null })
// null

Object.setPrototypeOf()

Object.setPrototypeOf __proto__ setting a prototype object 原型对象 an object and returning the parameter object itself. It is the officially recommended method for setting up prototype objects by ES6.

// 格式
Object.setPrototypeOf(object, prototype)
// 用法
const o = Object.setPrototypeOf({}, null);

This method is equivalent to the following function.

function setPrototypeOf(obj, proto) {
  obj.__proto__ = proto;
  return obj;
}

Here's an example.

let proto = {};
let obj = { x: 10 };
Object.setPrototypeOf(obj, proto);
proto.y = 20;
proto.z = 40;
obj.x // 10
obj.y // 20
obj.z // 40

The above code set proto object as a obj object, so the properties of the proto object can be read from the obj object.

If the first argument is not an object, it is automatically converted to an object. However, because the first argument is returned, this operation has no effect.

Object.setPrototypeOf(1, {}) === 1 // true
Object.setPrototypeOf('foo', {}) === 'foo' // true
Object.setPrototypeOf(true, {}) === true // true

Because undefined and null cannot be converted to objects, if the first argument is undefined or null, an error is reported.

Object.setPrototypeOf(undefined, {})
// TypeError: Object.setPrototypeOf called on null or undefined
Object.setPrototypeOf(null, {})
// TypeError: Object.setPrototypeOf called on null or undefined

Object.getPrototypeOf()

This method is Object.setPrototypeOf method and is used to read a prototype object 原型对象

Object.getPrototypeOf(obj);

Here's an example.

function Rectangle() {
  // ...
}
const rec = new Rectangle();
Object.getPrototypeOf(rec) === Rectangle.prototype
// true
Object.setPrototypeOf(rec, Object.prototype);
Object.getPrototypeOf(rec) === Rectangle.prototype
// false

If the argument is not an object, it is automatically converted to an object.

// 等同于 Object.getPrototypeOf(Number(1))
Object.getPrototypeOf(1)
// Number {[[PrimitiveValue]]: 0}
// 等同于 Object.getPrototypeOf(String('foo'))
Object.getPrototypeOf('foo')
// String {length: 0, [[PrimitiveValue]]: ""}
// 等同于 Object.getPrototypeOf(Boolean(true))
Object.getPrototypeOf(true)
// Boolean {[[PrimitiveValue]]: false}
Object.getPrototypeOf(1) === Number.prototype // true
Object.getPrototypeOf('foo') === String.prototype // true
Object.getPrototypeOf(true) === Boolean.prototype // true

If the parameters are undefined or null, they cannot be converted to objects, so errors are reported.

Object.getPrototypeOf(null)
// TypeError: Cannot convert undefined or null to object
Object.getPrototypeOf(undefined)
// TypeError: Cannot convert undefined or null to object

5. Object.keys()，Object.values()，Object.entries()

Object.keys()

ES5 introduces the Object.keys array of key names for all traversable (enumerable) properties of the parameter object itself (without inheritance). 数组

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

ES2017 introduces Object.keys and Object.entries as a complement to traversing an object for... Object.values of recycling.

let {keys, values, entries} = Object;
let obj = { a: 1, b: 2, c: 3 };
for (let key of keys(obj)) {
  console.log(key); // 'a', 'b', 'c'
}
for (let value of values(obj)) {
  console.log(value); // 1, 2, 3
}
for (let [key, value] of entries(obj)) {
  console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]
}

Object.values()

Object.values returns an array 数组 values for all traversable (enumerable) properties of the parameter object itself (without inheritance).

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

Returns the order of the members of the array, consistent with the arrangement rules described in the Traversal of Properties section of this chapter.

const obj = { 100: 'a', 2: 'b', 7: 'c' };
Object.values(obj)
// ["b", "c", "a"]

In the code above, 属性名 数值 of numeric values, which is traversed from small to large by numeric size, so the order returned is b, c, a.

Object.values return only the traversable properties of the object itself.

const obj = Object.create({}, {p: {value: 42}});
Object.values(obj) // []

In the above code, the object property (property p) added by the second parameter of the Object.create method, if not explicitly declared, is not traversal by default because the property of p describes the object's enumerable as false by default, and Object.values does not return this property. As soon as you change enumerable to true, Object.values return the value of the property p.

const obj = Object.create({}, {p:
  {
    value: 42,
    enumerable: true
  }
});
Object.values(obj) // [42]

Object.values filters properties named Symbol values.

Object.values({ [Symbol()]: 123, foo: 'abc' });
// ['abc']

If the parameters of the Object.values method are a string, an array of characters is returned.

Object.values('foo')
// ['f', 'o', 'o']

In the above code, the string is first turned into an array-like object. E ach character of the string is a property of the object. Therefore, Object.values return the key value of each property, which is an array of characters.

If the argument is not an object, Object.values first converts it to an object. B ecause of the wrapper objects of the values and Boolean values, between the values and the Boolean values, no non-inherited properties are added to the instance. Therefore, Object.values returns an empty array.

Object.values(42) // []
Object.values(true) // []

Object.entries()

Object.entries() returns an array of key-to-array key values for all traversable (enumerable) properties of the parameter object itself (without inheritance).

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

The method behaves in much the same way as Object.values, except that the return value is different.

If the property name of the original object is a Symbol value, the property is ignored.

Object.entries({ [Symbol()]: 123, foo: 'abc' });
// [ [ 'foo', 'abc' ] ]

In the above code, the original object has two properties, Object.entries with a property name other than the Symbol value. In the future, there Reflect.ownEntries() that returns all the properties of the object itself.

Object.entries is to traverse the properties of an object.

let obj = { one: 1, two: 2 };
for (let [k, v] of Object.entries(obj)) {
  console.log(
    `${JSON.stringify(k)}: ${JSON.stringify(v)}`
  );
}
// "one": 1
// "two": 2

Object.entries method is to turn the 对象 a true Map 结构

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

Implementing the Object.entries method yourself is very simple.

// Generator函数的版本
function* entries(obj) {
  for (let key of Object.keys(obj)) {
    yield [key, obj[key]];
  }
}
// 非Generator函数的版本
function entries(obj) {
  let arr = [];
  for (let key of Object.keys(obj)) {
    arr.push([key, obj[key]]);
  }
  return arr;
}

6. Object.fromEntries()

Object.fromEntries() method is an inverse operation of Object.entries() that converts a key value to an array into an object.

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

The primary purpose of this method is to restore 键值对 value pair to the 对象 it is particularly appropriate to convert the Map structure to an object.

// 例一
const entries = new Map([
  ['foo', 'bar'],
  ['baz', 42]
]);
Object.fromEntries(entries)
// { foo: "bar", baz: 42 }
// 例二
const map = new Map().set('foo', true).set('bar', false);
Object.fromEntries(map)
// { foo: true, bar: false }

One use of this method is to match URLSearchParams turn the query string 字符串 an 对象

Object.fromEntries(new URLSearchParams('foo=bar&baz=qux'))
// { foo: "bar", baz: "qux" }