ECMAScript 6 对象的扩展

---

对象是我们再熟悉不过的了,ES6新增了一些对象的语法糖,使我们操作对象变得更加的简洁了

文章主要参考阮一峰老师的 ECMAScript 6入门,站在巨人的肩膀上看世界…

对象中的扩展运算符就不再说了,说一下其他的

对象赋值

简洁表示法

ES6使得对象的赋值更为的简洁了,举一个简单的例子

let name="csing";

// ES5
var obj= {name: name}; //Object {name: "csing"}
// ES6
var obj= {name}; //Object {name: "csing"}

属性名表达式

当对象的key值不明确的时候,ES6也提供了相应的方法

let key='skill';
var obj={
  [key]:'web'
}
console.log(obj.skill);

// ES6 允许字面量定义对象时，把表达式放在方括号内。
// 看一个稍微绕一点的

let lastWord = 'last word';

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

a['first word'] // "hello"
a[lastWord] // "world"
a['last word'] // "world"

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

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

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

super 关键字

我们知道，this关键字总是指向函数所在的当前对象，ES6 又新增了另一个类似的关键字super，指向当前对象的原型对象。

const proto = {
  foo: 'hello'
};

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

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

Object.is()

ES5 比较两个值是否相等，只有两个运算符：相等运算符（==）和严格相等运算符（===）。它们都有缺点，前者会自动转换数据类型，后者的NaN不等于自身，以及+0等于-0。JavaScript 缺乏一种运算，在所有环境中，只要两个值是一样的，它们就应该相等。

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

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

Object.assign()

Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。

const target = { a: 1 };

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

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

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

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方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。

• 上面讲的,同名属性的替换

• Object.assign只能进行值的复制

• Object.assign可以用来处理数组，但是会把数组视为对象。举个例子吧

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

// why?
// Object.assign把数组视为属性名为 0、1、2 的对象，因此源数组的 0 号属性4覆盖了目标数组的 0 号属性1。

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

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

这里只是分享一些常用的对象操作,其他的希望大家可以再去深入研究

以上就是我对ECMAScript 6对象扩展的一些理解，如果文章由于我学识浅薄，导致您发现有严重谬误的地方，请一定在评论中指出，我会在第一时间修正我的博文，以避免误人子弟。