⑧ ES10 效率再提升

1 对象扩展

• Object.fromEntries() 把键值对列表转换为一个对象

1.1 Object 转换

const obj = {
  name: 'imooc',
  course: 'es'
}
const entries = Object.entries(obj)
console.log(entries); // [['name', 'imooc'], ['course', 'es']]
const fromEntries = Object.fromEntries(entries)
console.log(fromEntries); // {name: 'imooc', course: 'es'}

1.2 应用

1. Map 转 Object

const map = new Map()
map.set('name', 'imooc')
map.set('course', 'es')
console.log(map); // {'name' => 'imooc', 'course' => 'es'}
const fromEntries = Object.fromEntries(map)
console.log(fromEntries); // {name: 'imooc', course: 'es'}

2. 过滤

const course = {
  math: 80,
  english: 85,
  chinese: 90
}
const res = Object.entries(course).filter(([key, val]) => val > 80)
console.log(Object.fromEntries(res)); // {english: 85, chinese: 90}

2 字符串扩展 -- 去掉空格

• 去掉前面的空格 String.prototype.trimStart()

• 去掉后面的空格 String.prototype.trimEnd()

const str = '  imooc '
// 正则
console.log(str.replace(/^\s+/g, '')); // 去掉前面的空格
console.log(str.replace(/\s+$/g, '')); // 去掉后面的空格

console.log(str.trimStart());
console.log(str.trimLeft());
console.log(str.trimEnd());
console.log(str.trimRight());
console.log(str.trim());

3 数组扩展 -- 多维数组扁平化操作

• Array.prototype.flat()

• Array.prototype.flatMap()

3.1 Array.prototype.flat()

• 语法：const newArray = arr.flat(depth)

  • depth：指定要提取嵌套数组的结构深度，默认值为 1

const arr = [1, 2, 3, [4, 5, 6, [7, 8, 9, [10, 11, 12]]]]
console.log(arr.flat()); // [1, 2, 3, 4, 5, 6, Array(4)]
console.log(arr.flat().flat()); // [1, 2, 3, 4, 5, 6, 7, 8, 9, Array(3)]
console.log(arr.flat().flat().flat()); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
console.log(arr.flat(3)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
console.log(arr.flat(Infinity)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

3.2 Array.prototype.flatMap()

• 语法：const new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {// 返回新数组的元素 }[, thisArg])

• Array.prototype.flatMap() 相当于 map + flat()

const arr = [1, 2, 3, 4, 5]
const res = arr.map(x => x + 1)
const res1 = arr.map(x => [x + 1]).flat()
const res2 = arr.flatMap(x => [x + 1])
console.log(res); // [2, 3, 4, 5, 6]
console.log(res1); // [2, 3, 4, 5, 6]
console.log(res2); // [2, 3, 4, 5, 6]

4 修订 Function.prototype.toString()

• 返回一个表示当前函数源代码的字符串

还返回注释、空格和语法详细信息

function foo() {
  // 这是 es10
  console.log('imooc');
}
console.log(foo.toString());

5 可选的 Catch Binding

• 省略 catch 绑定的参数和括号

// 验证参数是否为json格式：只需要返回true或false，并不关心catch的参数
const validJSON = json => {
  try {
    JSON.parse(json)
    return true
  } catch {
    return false
  }
}
var json = '{ name": "imooc", "course": "es" }'
console.log(validJSON(json));

6 JSON 扩展：JSON superset，JSON.stringify() 增强能力

6.1 JSON superset

• JSON 超集：让 ECMAScript 兼容所有 JSON 支持的文本

• \u2029

• \u2028

// JSON 超集 \u2029 \u2028
eval('var str = "imooc";\u2029 function foo() { return str; }')
console.log(foo());

6.2 JSON.stringify() 增强能力

• 修复了对于一些超出范围的 Unicode 展示错误的问题

• 0xD800 ~ 0xDfff

console.log(JSON.stringify('\uD83D\uDE0E')); // emoji
console.log(JSON.stringify('\uD83D')); // \uD83D -- 不会报错

7 Symbol 扩展：Symbol.prototype.description

• description：当前 Symbol 的描述，只读不可写

const s = Symbol('imooc')
console.log(s); // Symbol(imooc)
s.description = 'es'
console.log(s); // Symbol(imooc)
console.log(s.description); // imooc 当前Symbol的描述

const s2 = Symbol()
console.log(s2.description); // undefined