ES10常用新语法

Posted 2021-11-02 还是不会呀

ES10常用新语法

• • flat
  • flatMap
  • Object.fromEntries
  • trimStart trimEnd
  • Symbol description
  • Optional catch binding

flat

flat()方法可以深度遍历一个数组，并返回新的数组

// 数组内又存在数组，数组嵌套的情况
const nums = [10, 22, [4, 6], 81, [[32, 45], []], 10];

const newNums1 = nums.flat(1); // 默认就是1
const newNums2 = nums.flat(2);

console.log(newNums1);
// [ 10, 22, 4, 6, 81, [ 32, 45 ], [], 10 ]
console.log(newNums2);
// [ 10, 22,  4,  6, 81, 32, 45, 10 ]

flatMap

flatMap()方法相当于先进行一次map()在进行一次flat()[flat方法默认降维是1]

// 将数组内的每一项，分解成一个个单词
const messages = ["HELLO javascript", "FU ZHIBIN", "前 端"];

// 1、 原始方法
const wordList = [];
for (let i = 0; i < messages.length; i++) {
  const message = messages[i];
  const words = message.split(" ");
  wordList.push(...words);
}
console.log(wordList);
//[ 'HELLO', 'JAVASCRIPT', 'FU', 'ZHIBIN', '前', '端' ]

// 2、 flatMap方法
const newMessages = messages.flatMap((item) => {
  return item.split(" ");
});
console.log(newMessages);
// [ 'HELLO', 'JAVASCRIPT', 'FU', 'ZHIBIN', '前', '端' ]

Object.fromEntries

Object.entries()将一个对象转化成entries，那么Object.fromEntries()将entries还原成对象

const info = {
  name: "fzb",
  age: 21,
};

const entries = Object.entries(info);
console.log(entries); // [ [ 'name', 'fzb' ], [ 'age', 21 ] ]

const obj = Object.fromEntries(entries);
console.log(obj); // { name: 'fzb', age: 21 }

应用场景

// 应用场景：解析url上的query字符串
const queryString = "username=fzb&age=21&height=1.88";
const urlSearchParams = new URLSearchParams(queryString);
console.log(Object.fromEntries(urlSearchParams));
// { username: 'fzb', age: '21', height: '1.88' }

trimStart trimEnd

之前存在去除字符串左右两端的空格的方法trim()，但是ES10提供了更加精细的方法

const message = "     HELLO     ";

// 去除左右两边的空格
console.log(message.trim()); // HELLO
// 去除左边的空格
console.log(message.trimStart()); // HELLO
// 去除右边的空格
console.log(message.trimEnd()); //      HELLO

Symbol description

在前面文章已经讲过：ES6：模板字符串&函数&进制&Symbol数据结构

Optional catch binding

后续讲解try…catch…进行讲解