ES10（ES2019）新特性完整指南

ES10ES2019新特性发布时间2019年6月ES10 新增了数组扁平化、对象转换、字符串修剪等实用方法。1. Array.prototype.flat()将嵌套数组拉平返回一个新数组基本用法[1,2,[3,4]].flat();// [1, 2, 3, 4][1,2,[3,[4,5]]].flat();// [1, 2, 3, [4, 5]]默认只拉平一层[1,2,[3,[4,5]]].flat(2);// [1, 2, 3, 4, 5]拉平两层使用 Infinity 拉平任意深度[1,[2,[3,[4,[5]]]]].flat(Infinity);// [1, 2, 3, 4, 5]实际应用// 从多层嵌套中提取值letdata[[1,2],[3,4],[5,6]];data.flat();// [1, 2, 3, 4, 5, 6]// 清除数组空位[1,,3,,5].flat();// [1, 3, 5]// 树形数据提取 IDlettree[{id:1,children:[{id:2},{id:3}]},{id:4,children:[]}];letidstree.flatMap(node[node.id,...node.children.map(cc.id)]);// [1, 2, 3, 4]注意空位会被自动跳过超过4层嵌套时建议用Infinity2. Array.prototype.flatMap()先执行map()再执行flat()效率更高[1,2,3].flatMap(x[x,x*2]);// [1, 2, 2, 4, 3, 6]// 等同于[1,2,3].map(x[x,x*2]).flat();与 map flat 的区别// map flat可以指定 flat 深度[1,[2,[3]]].map(xx).flat(2);// [1, 2, 3]// flatMap只能拉平一层[1,[2,[3]]].flatMap(xx);// [1, 2, [3]]实际应用// 将句子拆分为单词数组letsentences[Hello World,Good Morning];letwordssentences.flatMap(ss.split( ));// [Hello, World, Good, Morning]// 一对多映射letusers[{name:张三,hobbies:[篮球,游泳]},{name:李四,hobbies:[足球]}];lethobbiesusers.flatMap(uu.hobbies);// [篮球, 游泳, 足球]// 过滤 映射一步完成[1,2,3,4].flatMap(xx2?[x]:[]);// [3, 4]3. Object.fromEntries()将键值对列表转为对象是Object.entries()的逆操作// entries对象 → 键值对数组letentriesObject.entries({a:1,b:2});// [[a, 1], [b, 2]]// fromEntries键值对数组 → 对象letobjObject.fromEntries(entries);// { a: 1, b: 2 }实际应用过滤对象属性letobj{a:1,b:2,c:3,d:4};letfilteredObject.fromEntries(Object.entries(obj).filter(([k,v])v2));// { c: 3, d: 4 }映射对象值letprices{apple:5,banana:3,orange:4};letdoubledObject.fromEntries(Object.entries(prices).map(([k,v])[k,v*2]));// { apple: 10, banana: 6, orange: 8 }转换 Map 为对象letmapnewMap([[a,1],[b,2]]);letobjObject.fromEntries(map);// { a: 1, b: 2 }URL 参数处理letparamsnewURLSearchParams(name张三age18);letobjObject.fromEntries(params);// { name: 张三, age: 18 }4. String.prototype.trimStart()去除字符串开头的空白字符 hello world .trimStart();// hello world hello world .trimLeft();// hello world 别名去除的字符空格、制表符\t、换行符\n、回车符\r等5. String.prototype.trimEnd()去除字符串末尾的空白字符 hello world .trimEnd();// hello world hello world .trimRight();// hello world别名对比 trim() hello .trim();// hello两端都去 hello .trimStart();// hello 只去开头 hello .trimEnd();// hello只去末尾6. 可选的 catch 绑定Optional catch bindingcatch参数可以省略// 旧写法必须写参数try{JSON.parse(invalid);}catch(err){console.log(出错了);}// ES10 新写法可以省略参数try{JSON.parse(invalid);}catch{console.log(出错了);}使用场景当不需要使用错误对象时functionparseJSON(str){try{returnJSON.parse(str);}catch{returnnull;// 不需要错误信息返回默认值}}7. Symbol.prototype.description获取 Symbol 的描述字符串lets1Symbol(hello);s1.description;// hellolets2Symbol();s2.description;// lets3Symbol();s3.description;// undefinedlets4Symbol(你好);s4.description;// 你好对比 toString()letsSymbol(test);s.toString();// Symbol(test)s.description;// test只返回描述不带 Symbol()8. JSON supersetJSON 超集ES10 允许在 JSON 字符串中使用 U2028行分隔符和 U2029段分隔符// ES9 及之前这两个字符在字符串中会导致语法错误// ES10 修复了这个问题constjson\u2028;JSON.parse(json);// ES10 中正常工作这个改动是内部修复对日常开发感知不强。9. Function.prototype.toString() 修订toString()返回函数的源代码包括注释和空格functionhello(){/* 注释 */returnworld;}console.log(hello.toString());// 输出完整的函数源码包括注释// function hello() {\n /* 注释 */\n return world;\n}10. Array.prototype.sort() 稳定性ES10 规范要求Array.sort()必须是稳定排序letitems[{name:A,order:1},{name:B,order:1},{name:C,order:2}];// 稳定排序相同 order 的元素保持原始顺序items.sort((a,b)a.order-b.order);// A 仍在 B 前面保持原始相对顺序总结特性说明重要性Array.flat()数组扁平化⭐⭐⭐⭐Array.flatMap()map flat 组合⭐⭐⭐⭐Object.fromEntries()键值对数组转对象⭐⭐⭐⭐String.trimStart()去除开头空白⭐⭐⭐String.trimEnd()去除末尾空白⭐⭐⭐可选 catch 绑定catch 可省略参数⭐⭐⭐Symbol.description获取 Symbol 描述⭐⭐JSON 超集支持行分隔符⭐Function.toString()返回完整源码⭐稳定排序sort 保证稳定性⭐⭐ject.fromEntries()键值对数组转对象⭐⭐⭐⭐String.trimStart()去除开头空白⭐⭐⭐String.trimEnd()去除末尾空白⭐⭐⭐可选 catch 绑定catch 可省略参数⭐⭐⭐Symbol.description获取 Symbol 描述⭐⭐JSON 超集支持行分隔符⭐Function.toString()返回完整源码⭐稳定排序sort 保证稳定性⭐⭐