【ES6】ES6学习九：对象的扩展、对象的新增方法

一、属性的简洁表示法：

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

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

上面代码表明，ES6 允许在对象之中，直接写变量。这时，属性名为变量名, 属性值为变量的值。

除了属性简写，方法也可以简写。

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

 

二、属性名表达式：用表达式定义属性名

JavaScript 定义对象的属性，有两种方法：

// 方法一：直接用标识符作为属性名
obj.foo = true;

// 方法二：用表达式作为属性名，这时要将表达式放在方括号之内
obj['a' + 'bc'] = 123;

 如果定义对象时：ES5只能使用方法一定义属性，而ES6可以用方法二，即把表达式放在方括号内：

//ES5定义对象
var obj = {
  foo: true,
  abc: 123
};

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

 注意：属性名表达式与简洁表示法，不能同时使用，会报错。

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

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

 

三、方法的name属性（即函数的name属性） ：返回函数名

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

person.sayName.name   // "sayName"

有两种特殊情况：

1、bind方法创造的函数，name属性返回bound加上原函数的名字；

2、Function构造函数创造的函数，name属性返回anonymous。

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

(new Function()).name // "anonymous"

 

四、对象的扩展运算符

1、解构赋值

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

由于解构赋值要求等号右边是一个对象，所以如果等号右边是undefined或null，就会报错，因为它们无法转为对象。

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

2、扩展运算符

对象的扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。

由于数组是特殊的对象，所以对象的扩展运算符也可以用于数组。

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

对象的扩展运算符等同于使用Object.assign()方法。

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

 

五、对象的新增方法：

1、Object.is()：用来比较两个值是否严格相等

ES5 比较两个值是否相等，只有两个运算符：

A、相等运算符（==）：缺点：自动转换数据类型。

B、严格相等运算符（===）：缺点：NaN不等于自身，以及+0等于-0。

ES6 提出同值相等算法，用来解决这个问题。

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

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

2、Object.assign()：用于对象的合并

Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。

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}

 注意，如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

如果只有一个参数，Object.assign会直接返回该参数。如果该参数不是对象，则会先转成对象，然后返回。

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

由于undefined和null无法转成对象，所以如果它们作为参数，就会报错。

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

3、Object.getOwnPropertyDescriptors()

ES5的Object.getOwnPropertyDescriptor()方法会返回某个对象属性的描述对象。ES2017引入了Object.getOwnPropertyDescriptors()方法，返回指定对象所有自身属性（非继承属性）的描述对象。

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

4、Object.keys()：返回对象的键名组成一个数组。

Object.values()：返回对象的键值组成一个数组。

Object.entries()：返回对象的键值对组成一个数组。

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

Object.values(obj)// ["bar", 42]

Object.entries(obj)// [ ["foo", "bar"], ["baz", 42] ]

ES2017 引入了跟Object.keys配套的Object.values和Object.entries，作为遍历一个对象的补充手段，供for...of循环使用。

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

5、Object.fromEntries()：是Object.entries()的逆操作，用于将一个键值对数组转为对象。

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

该方法的一个用处是配合URLSearchParams对象，将查询字符串转为对象。

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