⑧ 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