ES8常用新语法

Posted 2021-11-02 还是不会呀

ES8常用语法

• • Object values
  • Object entries
  • String padding
  • Trailing Commas
  • Object.getOwnPropertyDescriptors
  • async和await

Object values

之前可以通过Object.keys获取对象的key值，在ES8中，可以通过Object.values获取对象的值

const info = {
  name: "fzb",
  age: 21,
};
console.log(Object.keys(info)); // [ 'name', 'age' ]
// 传入对象
console.log(Object.values(info)); // [ 'fzb', 21 ]

// 传入字符串
const message = "Hello";
console.log(Object.values(message)); // [ 'H', 'e', 'l', 'l', 'o' ]

// 传入数组
const names = ["aaa", "bbb", "ccc"];
console.log(Object.values(names)); // [ 'aaa', 'bbb', 'ccc' ]

Object entries

Object.entries返回一个数组，数组元素是由传入对象的key和其对应的值构成的数组

// 传入对象
const info = {
  name: "fzb",
  age: 21,
};
console.log(Object.entries(info)); // [ [ 'name', 'fzb' ], [ 'age', 21 ] ]

// 传入字符串
const message = "fzb";
console.log(Object.entries(message)); 
// [ [ '0', 'f' ], [ '1', 'z' ], [ '2', 'b' ] ]

// 传入数组
const names = ["aaa", "bbb", "ccc"];
console.log(Object.entries(names)); 
// [ [ '0', 'aaa' ], [ '1', 'bbb' ], [ '2', 'ccc' ] ]

String padding

String padding(字符串的填充)，当字符串的长度不够时，进行对应的填充。

const name = "fzb";

// padStart() 对头部进行填充
const newName1 = name.padStart(10, "^");
console.log(newName1); // ^^^^^^^fzb

// padEnd() 对尾部进行填充
const newName2 = name.padEnd(10, "*");
console.log(newName2); // fzb*******

// 链式调用
const newName3 = name.padStart(6, "^").padEnd(9, "*");
console.log(newName3); // ^^^fzb***

应用场景

// 应用场景一：
// 后台传过来列表的id可能是这样的 1,2 .... 55...,如果对不足位数的前面补0
// 如01,02,03....
const idList = [1, 2, 3, 10, 12];
const newList = idList.map((item) => {
  return String(item).padStart(2, "0");
});
console.log(newList);
// [ '01', '02', '03', '10', '12' ]

// 应用场景二：对电话号码中间位数隐藏处理
const phoneNumber = "12345678912";
const headNums = phoneNumber.slice(0, 3);
const footNums = phoneNumber.slice(-4);
const newNums =
  headNums.padEnd(phoneNumber.length - footNums.length, "*") + footNums;
console.log(newNums); // 123****8912

Trailing Commas

Trailing Commas(尾随逗号)在以前多加的,会使程序报错。在ES8之后，允许这样书写代码

function foo(n, m,) {
  console.log(n, m,);
}
foo(1, 2,); //1 2

Object.getOwnPropertyDescriptors

之前有讲过：JavaScript的面向对象(一)

async和await

后边单独讲解，尽请期待…