今天写这篇文章的灵感来源于日常项目开发，《我以为vue项目已经加入了optionalchains的支持，但是使用起来会报错，于是更新了cli，找到了最新的Thecli版本更新了babel，即支持了ES的一些新特性。简单总结几点：Array新方法find、findIndex、includes、flat等Object新方法entries、fromEntries、Object.getOwnPropertyDescriptors等String新方法padStart、padStart、trimStart、trimEnd、forawaitofFunction.prototype.toString下来讨论。数组在项目中，我们经常会遇到对数组的操作就是判断数组中是否有某个字段。在数组中查找一个对象。多维数组的平铺、过滤、排序、切割、填充等。在ES6中，我们判断一个字符串是否包含某个字符，我们可以使用includes:letstr='shockingcodethief';str.includes('shocking');//true和ES7也增加了对数组的支持constarr=[1,3,5,2,'8',NaN,-0,undefined]arr.includes(1)//truearr.includes(1,2)//false该方法第二个参数表示搜索的起始位置，默认为0arr.includes('1')//falsearr.includes(NaN)//truearr.includes(+0)//truearr.includes(undefined)//true业务代码中遇到最多的就是找某个对象constlist=[{id:1,name:'Jok'},{id:2,name:'Tom'}]//判断是否列表存在TomconstisHasTome=list.some(e=>e.name=="Tom");//trueconstjokItem=list.find(e=>e.name=="Tom");//{id:2,name:'Tom'}constjokIndex=list.findIndex(e=>e.name=="Tom");//1//检查数组的所有元素是否满足指定条件consthasPropToName=list.every(e=>e.name)//true检查是否每一个它em有一个name属性ES10中新加入的一个flat方法，用来展平多维数组：constarr=[1,2,[3,[4,5],6],7]arr.flat();//[1,2,3,[4,5]],6,7]arr.flat(2);//[1,2,3,4,5,6,7]//arr.flat(depth)//深度为指定提取嵌套数组深度的结构，默认值为1。ES6中还有一个有趣的API，就是entries//arrayiteratorconstiterator=list.entries()iterator.next();//{done:false,value:[0,{id:1,name:'Jok'}]}iterator.next();//{done:false,value:[1,{id:2,name:'Tom'}]}iterator.next();//{done:true,value:undefined}有点类似于生成器函数//processingpromiseconstpromiseCase=(p)=>{returnnewPromise(function(resolve,reject){setTimeout(function(){resolve(`${p}success`);//代码正常执行！},250);});}constasyncList=[promiseCase('p1'),promiseCase('p2'),promiseCase('p3')];constiterator=asyncList.entries();//undefinedfor(leteofiterator){console.log(e);e[1].then(res=>console.log(res))}//[0,Promise]//[1,Promise]//[2,Promise]//p1成功//p2成功//p3成功ObjectES5引入Object.keys返回key姓名。紧接着ES8，引入了Object.values和Object.entries作为遍历一个对象的手段，供forof使用。constobj={foo:'bar',baz:42};Object.keys(obj)//["foo","baz"]Object.values(obj)//["bar",42]constobjEntries=Object.entries(obj)//[["foo","bar"],["baz",42]]Object.fromEntries(objEntries)//{foo:"bar",baz:42}也可以通过entry来判断对象中一些值的比较：constobj={a:21,b:22,c:23}letres=Object.fromEntries(Object.entries(obj).filter(([a,b])=>b>21))console.log(res)//{b:22,c:23}ES5的Object.getOwnPropertyDescriptor()方法会返回一个对象属性的描述对象（descriptor）。ES8引入了Object.getOwnPropertyDescriptors()方法，返回指定对象所有自身属性（非继承属性）的描述对象。Object.assign无法正确复制get和set属性。Object.getOwnPropertyDescriptors()方法可以与Object.defineProperties()方法结合使用以实现正确的复制。constsource={setfoo(value){console.log(value)},getbar(){返回'浪中之舟'}}consttarget1={}Object.assign(target1,source)console.log(Object.getOwnPropertyDescriptor(target1inStringinES8增加了两个新的实例函数String.prototype.padStart和String.prototype.padEnd，允许在原始字符串的开头或结尾添加空字符串或其他字符串。String.padStart(targetLength,[padString])//targetLength(required):当前字符串需要填充到的目标长度，如果这个数字小于当前字符串的长度，则返回当前字符串本身。//padString(optional):填充字符串。如果字符串太长，以至于填充的字符串长度超过目标长度，则只保留最左边的部分，其他部分将被截断。该参数默认值为"".'x'.padStart(4,'ab')//'abax''x'.padEnd(5,'ab')//'xabab'在ES10中增加了两个空格去掉首尾letstr='shocking码小偷'str.trimStart();//str.trimLeft();//'惊码小偷'str.trimEnd();//str.trimRight();//'惊码小偷'str.trim();//'惊天代码小偷'str.replace(/\s+/g,'');//'惊天代码小偷'对于awaitof方法可以用Symbol.iterator接口遍历同步迭代器数据，不能异步遍历迭代器。ES9新增的forawaitof可以使用Symbol.asyncIterator方法遍历数据结构，即异步迭代器，会等待前一个成员的状态发生变化，然后再遍历到下一个成员，相当于异步函数内部等待。我想大家基本都写过这样的代码：constpromiseCase=(p)=>{returnnewPromise(function(resolve,reject){setTimeout(function(){resolve({code:0,name:`${p}`});//代码正常执行！},250);});}constasyncList=[promiseCase('p1'),promiseCase('p2'),promiseCase('p3')];asyncList.forEach(async(e)=>{constdata=awaite;console.log(data)})//{code:0,name:"p1"}//{code:0,name:"p2"}//{code:0,name:"p3"}现在可以这样写：asyncfunctiontest(){forawait(letitemofasyncList){console.log(Date.now(),item)}}test()//1614935341100{code:0,name:"p1"}//1614935341100{code:0,name:"p2"}//1614935341100{code:0,name:"p3"}Function.prototype.toStringES2019，Function.toString()变了。之前执行此方法时，结果字符串中的空白符号被去除。现在，获得的字符串看起来像原始源代码：functionsum(a,b){returna+b;}console.log(sum.toString());//functionsum(a,b){//returna+b;//}本文转载自微信公众号“惊爆代码小偷”，可通过以下二维码关注。转载本文请联系惊码盗公众号。
