前端开发常用的ES6语法，建议收藏！

　　1。啥是ES6？
　　在学习ES6之前，我们先了解一下啥是ES。
　　ES全称ECMAScript，它是由欧洲计算机协会（ECMA）制定的一种脚本语言的标准化规范。
　　这家伙说白了就是给JavaScript制定的一种语法规范，你写js的时候如果按照ES6中的规范去写，写的代码不仅简洁而且效率很高。
　　ES6发行于2015年6月，由于这个版本的语法规范极大地提高了前端开发人员的效率，所以在前端圈子中流行开来，时至今日热度依旧不减。2。let和const2。1let
　　let是ES6中新增加的用于声明变量的关键字，它具有如下特点：不存在变量提升
　　不能先使用再声明num20；letnum30；console。log（num）；复制代码
　　只在块级作用域有效
　　例一：｛letnum30；｝console。log（num）；复制代码
　　例二：varnum20；｛letnum30；｝console。log（num）；复制代码
　　从上面的例子中我们可以看到，let定义的变量只能在所在的｛｝中使用，不受外界干扰，也不会干扰外界。2。2const
　　const也是ES6中新增加的用于声明变量的关键字，它主要用来声明常量。它具有如下特点：声明常量时必须赋值constname；console。log（name）；复制代码
　　只在块级作用域有效varmessage今天基金跌惨了呜呜呜；｛constmessge把钱还给我，不玩了呜呜呜；｝console。log（message）；复制代码
　　从上面的例子中我们可以看到，const定义的变量只能在所在的｛｝中使用，不受外界干扰，也不会干扰外界。赋值后，值不能修改
　　例一：constmessage今天基金跌惨了呜呜呜；message今天我赚翻了哈哈哈；console。log（message）；复制代码
　　例二：constuser｛id：123，name：张三｝；user｛id：234，name：李四｝console。log（user）；复制代码
　　constuser｛id：123，name：张三｝；user。name李四；console。log（user）；复制代码
　　从上面的例子中我们可以看出const赋值的常量如果是基本数据类型，不能重新赋值；如果是对象等复杂数据类型，不能更改地址，但是可以更改对象中属性的值。2。3var、let、const的区别var声明的变量作用域在所处的函数内，let和const声明的变量作用域在所处的大括号内。var声明的变量存在变量提升现象，let和const声明的变量不存在变量提升现象。const声明变量时必须要赋值，赋值之后不能再重新赋值。3。箭头函数（）代表函数｛｝代表函数体constft（）｛｝代表把一个函数赋值给ftft（）调用该函数无参数，函数体只有一行代码常规写法functionprint（）｛console。log（呜呜呜，今天打王者荣耀连着输了6把！）；｝箭头函数constft（）console。log（呜呜呜，今天打王者荣耀连着输了6把！）；调用函数ft（）；复制代码
　　有参数，函数体只有一行代码常规写法functionprint（name，content）｛returnnamecontent；｝箭头函数constft（name，content）namecontent；调用函数console。log（ft（鲁迅，家门前有2棵树））；复制代码
　　只有一个参数，可以去掉大括号常规写法functionprint（name）｛returnname我爱你；｝箭头函数constftnamename我爱你；调用函数console。log（ft（祖国妈妈））；复制代码
　　4。多个参数，函数体有多行箭头函数：获取年龄最大值constft（userArray，sex）｛letageArrayuserArray。filter（useruser。sexsex）。map（itemitem。age）；returnMath。max（。。。ageArray）；｝letuserArray〔｛name：张三，sex：男，age：18｝，｛name：李四，sex：女，age：19｝，｛name：王五，sex：男，age：21｝〕调用函数console。log（ft（userArray，男））；复制代码
　　4。解构
　　解构就是把数据结构进行分解，然后为定义的变量赋值。4。1数组解构
　　获取数组中数值的传统方式：constnum〔0，1，2，3〕；constanum〔0〕；constbnum〔1〕console。log（ab）；复制代码
　　解构：let〔a，b〕〔0，1，2，3〕；console。log（ab）；复制代码4。2对象解构
　　获取对象中数据的传统方式：letuser｛name：张三，age：19｝；letnameuser。name；letageuser。age；console。log（姓名：name，年龄：age）；复制代码
　　解构：let｛name，age｝｛name：张三，age：19｝；console。log（姓名：name，年龄：age）；复制代码
　　5。剩余参数
　　剩余参数允许我们将一个未知数量的参数表示为一个数组。5。1使用
　　语法：。。。参数名
　　例如：constprint（num，。。。args）｛console。log（num）；console。log（args）；｝print（0，1，2）复制代码
　　从上面的例子中我们发现参数args是一个数组。5。2和解构连用letusers〔张三，李四，王五〕；let〔u1，。。。u2〕users；console。log（u1）；console。log（u2）；复制代码
　　5。3合并数组letu1〔张三，李四，王五〕；letu2〔张无忌，赵敏，周芷若〕；letu3〔。。。u1，。。。u2〕；console。log（u3）；复制代码
　　6。可选链
　　可选链？。是一种访问嵌套对象属性的防错误方法。即使中间的属性不存在，也不会出现错误。如果可选链？。前面部分是undefined或者null，它会停止运算并返回undefined。
　　我们要想获取一个嵌套对象的属性，一般会这样写：letres｛data：｛data：｛success：true，id：20220425｝｝｝if（resres。datares。data。data。success）｛letidres。data。data。id；console。log（id）；｝复制代码
　　使用可选链letres｛data：｛data：｛success：true，id：20220425｝｝｝if（res？。data？。data？。success）｛letidres？。data？。data？。id；console。log（id）；｝复制代码
　　7。Set
　　Set是ES6提供的一种数据结构，它和数组很像，但是它里面的数据是不可重复的。初始化constset1newSet（〔1，2，3，4，5，5〕）；constset2newSet（〔苹果，橘子，橘子〕）；console。log（set1）；console。log（set2）；复制代码
　　添加数据constset1newSet（〔1，2，3，4，5，5〕）；set1。add（7）；复制代码删除数据constset1newSet（〔1，2，3，4，5，5〕）；set1。delete（3）；复制代码包含数据constset1newSet（〔1，2，3，4，5，5〕）；constresset1。has（1）；console。log（res）；复制代码
　　清除所有数据constset1newSet（〔1，2，3，4，5，5〕）；set1。clear（）；复制代码8。数组操作8。1合并数组letu1〔张三，李四，王五〕；letu2〔张无忌，赵敏，周芷若〕；letu3〔。。。u1，。。。u2〕；console。log（u3）；复制代码
　　8。2includes（）
　　includes用来判断该数组是否包含某个值，返回值是布尔值letusers〔张三，李四〕；letresusers。includes（张三）；console。log（res）；复制代码
　　8。3find（）
　　find用来找到第一个符合条件的成员，没有找到返回undefinedletusers〔｛name：张三，age：18｝，｛name：李四，age：20｝〕；letuserusers。find（（item，index）item。age18）console。log（user）；复制代码
　　8。4findIndex（）
　　findIndex用来找到第一个符合条件的成员的索引，没有的话返回1letusers〔｛name：张三，age：18｝，｛name：李四，age：20｝〕；letindexusers。findIndex（（item，index）item。age18）console。log（index）复制代码
　　8。5filter（）
　　filter用来返回一个满足条件的新数组，不满足条件返回空数组letusers〔｛name：张三，age：18｝，｛name：李四，age：20｝〕；letarrayusers。filter（（item，index）item。age21）console。log（array）；复制代码
　　8。6map（）
　　map用来返回一个对成员进行加工之后的新数组letusers〔｛name：张三，age：18｝，｛name：李四，age：20｝〕；letarrayusers。map（（item，index）｛item。name666；item。age10；returnitem；｝）console。log（array）；复制代码
　　9。字符串扩展方法9。1startsWith（）和endsWith（）
　　startsWith（）
　　表示该字符串参数是否在某个字符串头部letmessagehelloworld；letresmessage。startsWith（hello）；console。log（res）；复制代码
　　endsWith（）
　　表示该字符串参数是否在某个字符串尾部letmessagehelloworld；letresmessage。endsWith（ww）；console。log（res）；复制代码
　　9。2模板字符串
　　模板字符串是ES6新增加的创建字符串的方式
　　定义方式：反引号定义letcountry中国；复制代码解析变量letcountry中国；letmessage我爱你｛country｝；console。log（message）；复制代码
　　调用函数constprintmessagemessage，20220425；letmessage｛print（我爱你中国）｝；console。log（message）；复制代码