x-note
Search…
ECMAScript 8 Others
ES8 除了 async 函数、内存共享和原子性这两个比较大的功能外,并无太大改动。
ES8 剩余功能变更:
  • Object.entries()
  • Object.values()
  • String.prototype.padStart()
  • String.prototype.padEnd()
  • Object.getOwnPropertyDescriptors()
  • 允许在参数定义和函数调用中使用尾随逗号

Object.entries(obj)

Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组,其排列与使用for...in 循环遍历该对象时返回的顺序一致,不过Object.entries()不会枚举原型链中的属性。
这个方法已经推行很久,终于在 ES8 中宣布正式进入 Stage-4 阶段
1
const obj = { foo: 'bar', baz: 42 };
2
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]
3
4
// array like object
5
const obj = { 0: 'a', 1: 'b', 2: 'c' };
6
console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]
7
8
// array like object with random key ordering
9
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
10
console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]
11
12
// getFoo is property which isn't enumerable
13
const myObj = Object.create({}, { getFoo: { value() { return this.foo; } } });
14
myObj.foo = 'bar';
15
console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ]
16
17
// non-object argument will be coerced to an object
18
console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]
19
20
// iterate through key-value gracefully
21
const obj = { a: 5, b: 7, c: 9 };
22
for (const [key, value] of Object.entries(obj)) {
23
console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
24
}
25
26
// Or, using array extras
27
Object.entries(obj).forEach(([key, value]) => {
28
console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
29
});
Copied!

Object.values(obj)

Object.values() 方法返回一个给定对象自身可枚举属性值的数组,其排列与使用for...in 循环遍历该对象时返回的顺序一致,不过Object.values()同样不会枚举原型链中的属性。
1
var obj = { foo: 'bar', baz: 42 };
2
console.log(Object.values(obj)); // ['bar', 42]
3
4
// array like object
5
var obj = { 0: 'a', 1: 'b', 2: 'c' };
6
console.log(Object.values(obj)); // ['a', 'b', 'c']
7
8
// array like object with random key ordering
9
// when we use numeric keys, the value returned in a numerical order according to the keys
10
var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
11
console.log(Object.values(an_obj)); // ['b', 'c', 'a']
12
13
// getFoo is property which isn't enumerable
14
var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } });
15
my_obj.foo = 'bar';
16
console.log(Object.values(my_obj)); // ['bar']
17
18
// non-object argument will be coerced to an object
19
console.log(Object.values('foo')); // ['f', 'o', 'o']
Copied!

String.prototype.padStart(targetLen[, padStr])

padStart()方法用另一个字符串填充当前字符串(重复,如果需要的话),以便产生的字符串达到给定的长度。填充从当前字符串的开始(左侧)应用的。
1
'abc'.padStart(10); // " abc"
2
'abc'.padStart(10, "foo"); // "foofoofabc"
3
'abc'.padStart(6,"123465"); // "123abc"
4
'abc'.padStart(8, "0"); // "00000abc"
5
'abc'.padStart(1); // "abc"
Copied!

String.prototype.padEnd(targetLen[, padStr])

padEnd() 方法会用一个字符串填充当前字符串(如果需要的话则重复填充),返回填充后达到指定长度的字符串。从当前字符串的末尾(右侧)开始填充。
1
'abc'.padEnd(10); // "abc "
2
'abc'.padEnd(10, "foo"); // "abcfoofoof"
3
'abc'.padEnd(6, "123456"); // "abc123"
4
'abc'.padEnd(1); // "abc"
Copied!
一个有趣的思考:为什么String.prototype.padStart()String.prototype.padEnd()不叫做String.prototype.padLeft()String.prototype.padRight()
主要是为了能够支持双向或是从右向左的语言

Object.getOwnPropertyDescriptors(obj)

很明显,该方法与ES6 中的Object.getOwnPropertyDescriptor()类似,都是用来获取属性的描述器。只不过,Object.getOwnPropertyDescriptors() 方法用来获取的是所有自身属性的描述符。
1
const obj = {
2
[Symbol('foo')]: 123,
3
get bar() { return 'abc' },
4
};
5
console.log(Object.getOwnPropertyDescriptors(obj));
6
7
// Output:
8
// { [Symbol('foo')]:
9
// { value: 123,
10
// writable: true,
11
// enumerable: true,
12
// configurable: true },
13
// bar:
14
// { get: [Function: bar],
15
// set: undefined,
16
// enumerable: true,
17
// configurable: true } }
Copied!
Object.assign()方法只能拷贝源对象的可枚举的自身属性,并且无法拷贝属性的特性,而且访问器属性会被转换成数据属性,也无法拷贝源对象的原型。配合Object.create()Reflect.getPrototypeOf()实现一个浅拷贝函数:
1
function clone (obj) {
2
return Object.create(
3
Reflect.getPrototypeOf(obj),
4
Object.getOwnPropertyDescriptors(obj)
5
);
6
}
Copied!

允许在参数定义和函数调用中使用尾随逗号

如果看过 Airbnb 的 JavaScript 的规范中的逗号部分,瞬间就能理解这个功能需求是多么的有意义
1
function foo(
2
param1,
3
param2,
4
) {}
5
6
foo(
7
'abc',
8
'def',
9
);
Copied!