对象是我们再熟悉不过的了,ES6新增了一些对象的语法糖,使我们操作对象变得更加的简洁了
文章主要参考阮一峰老师的 ECMAScript 6入门,站在巨人的肩膀上看世界…
对象中的扩展运算符就不再说了,说一下其他的
对象赋值
简洁表示法
ES6使得对象的赋值更为的简洁了,举一个简单的例子
1
2
3
4
5
6
| let name="csing";
// ES5
var obj= {name: name}; //Object {name: "csing"}
// ES6
var obj= {name}; //Object {name: "csing"}
|
属性名表达式
当对象的key值不明确的时候,ES6也提供了相应的方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| 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"
|
注意，属性名表达式与简洁表示法，不能同时使用，会报错。
1
2
3
4
5
6
7
8
| // 报错
const foo = 'bar';
const bar = 'abc';
const baz = { [foo] };
// 正确
const foo = 'bar';
const baz = { [foo]: 'abc'};
|
super 关键字
我们知道，this关键字总是指向函数所在的当前对象，ES6 又新增了另一个类似的关键字super，指向当前对象的原型对象。
1
2
3
4
5
6
7
8
9
10
11
12
13
| 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 缺乏一种运算，在所有环境中，只要两个值是一样的，它们就应该相等。
1
2
3
4
5
| +0 === -0 //true
NaN === NaN // false
Object.is(+0, -0) // false
Object.is(NaN, NaN) // true
|
Object.assign()
Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。
1
2
3
4
5
6
7
| const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
|
注意，如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。
1
2
3
4
5
6
7
| 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}
|
一说到对象的合并,有几点需要注意一下
1
2
3
4
5
| 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()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| 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对象扩展的一些理解，如果文章由于我学识浅薄，导致您发现有严重谬误的地方，请一定在评论中指出，我会在第一时间修正我的博文，以避免误人子弟。
