ES2017（ES8）新特性

ES2017（ES8）新特性

ES2017（ES8）新增了以下特性👇：

• Async functions
• Object.entries
• Object.values
• Object.getOwnPropertyDescriptors
• Trailing commas
• String.prototype.padStart
• String.prototype.padEnd

1、 Async functions 异步函数

Async functions 是 async 声明的函数，async 函数是 AsyncFunction 构造函数的实例，其中允许使用 await 关键字，返回的是一个Promise。

1.1 语法

async function name([param[, param1[, ...param2]]]) {
  // statements
  return new Promise((resolve, reject) => {});
}

1.2 案例演示

const promise = () => {
  console.log("1");
  return new Promise((resolve, reject) => {
    resolve("2");
  });
};

const asyncFun = async () => {
  console.log("3");
  const test = await promise();
  console.log("4", test);
};

asyncFun();

// console.log 注意观察执行顺序
// 3
// 1
// 4 2

2、Object.entries 获取对象可枚举属性

Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组。
⚠️注意：返回的是属性对应值的键值对数组！

2.1 语法

Object.entries(obj)

2.2 案例演示

let obj = {a:'王',b:'东',c:'李'};
console.log(Object.entries(obj)); 
// [ [ 'a', '王' ], [ 'b', '东' ], [ 'c', '李' ] ]

for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}
// a 王
// b 东
// c 李

3、Object.values 获取对象可枚举属性值

Object.values()返回一个给定对象自身可枚举属性值的数组。

3.1 语法

Object.values(obj)

3.1 案例演示

let obj = {a:'王',b:'东',c:'李'};
console.log(Object.values(obj)); 
// [ '王', '东', '李' ]

4、Object.getOwnPropertyDescriptors 对象的所有自身属性的描述符

Object.getOwnPropertyDescriptors() 方法用来获取一个对象的所有自身属性的描述符。

4.1 语法

Object.getOwnPropertyDescriptors()

4.2 案例演示

let obj = { a: "王", b: "东", c: "李" };
console.log(Object.getOwnPropertyDescriptors(obj));
// {
//   a: { value: '王', writable: true, enumerable: true, configurable: true },
//   b: { value: '东', writable: true, enumerable: true, configurable: true },
//   c: { value: '李', writable: true, enumerable: true, configurable: true }
// }

// 使用案例：属性复制（getter 到 setter 的复制）
let p1={
  name:"John",
  get FullName(){
    return this.name;
  }
}
let p2 = Object.assign({},p1);
p2.name="Maria";
console.log(p1.FullName); // John
console.log(p2.FullName); // John ❌❌❌ 复制失败...... 

// 使用 Object.getOwnPropertyDescriptors
const descriptors = Object.getOwnPropertyDescriptors(p1);
let p3 = Object.defineProperties({}, descriptors);
p3.name = "Tom";
console.log(p3.FullName); // Tom ✅✅✅

5、Trailing commas 尾后逗号

如果你想要添加新的属性，并且在上一行已经使用了尾后逗号，你可以仅仅添加新的一行，而不需要修改上一行。

let arr = [1,2,3,];

⚠️注意： JSON 不允许尾后逗号！

6、String.prototype.padStart 向前补充字符串

String.prototype.padStart()方法用另一个字符串填充当前字符串，在原字符串开头填充指定的填充字符串直到目标长度所形成的新字符串。

6.1 语法

// targetLength：当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。
String.padStart(targetLength);
// padString（可选）：填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断。此参数的默认值为 " "。
String.padStart(targetLength, padString);

6.2 案例演示

let str = "12345";
console.log(str.padStart(10));      //      12345
console.log(str.padStart(10, "a")); // aaaaa12345

7、String.prototype.padEnd 向后补充字符串

String.prototype.padEnd()方法用一个字符串填充当后字符串（如果需要的话则重复填充），返回在原字符串末尾填充指定的填充字符串直到目标长度所形成的新字符串。

7.1 语法

// targetLength：当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。
str.padEnd(targetLength); 
// padString（可选）：填充字符串。如果字符串太长，使填充后的字符串长度超过
str.padEnd(targetLength, padString);

7.2 案例演示

let str = "12345";
console.log(str.padEnd(10));      // 12345     
console.log(str.padEnd(10, "a")); // 12345aaaaa