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

　　1. 啥是 ES6？
　　在学习 ES6 之前，我们先了解一下啥是 ES。
　　ES 全称 ECMAScript，它是由欧洲计算机协会(ECMA)制定的一种脚本语言的标准化规范。
　　这家伙说白了就是给 JavaScript 制定的一种语法规范，你写 js 的时候如果按照 ES6 中的规范去写，写的代码不仅简洁而且效率很高。
　　ES6 发行于 2015 年 6 月，由于这个版本的语法规范极大地提高了前端开发人员的效率，所以在前端圈子中流行开来，时至今日热度依旧不减。2. let 和 const2.1 let
　　let 是 ES6 中新增加的用于声明变量的关键字，它具有如下特点：不存在变量提升
　　不能先使用再声明num = 20; let num = 30; console.log(num); 复制代码
　　只在块级作用域有效
　　例一：{     let num = 30; } console.log(num); 复制代码
　　例二：var num = 20; {     let num = 30; } console.log(num); 复制代码
　　从上面的例子中我们可以看到，let 定义的变量只能在所在的 { } 中使用，不受外界干扰，也不会干扰外界。2.2 const
　　const 也是 ES6 中新增加的用于声明变量的关键字，它主要用来声明常量。它具有如下特点：声明常量时必须赋值const name; console.log(name); 复制代码
　　只在块级作用域有效var message = ＂今天基金跌惨了…呜呜呜＂; {     const  messge=＂把钱还给我，不玩了…呜呜呜＂; } console.log(message);    复制代码
　　从上面的例子中我们可以看到，const 定义的变量只能在所在的 { } 中使用，不受外界干扰，也不会干扰外界。赋值后，值不能修改
　　例一：const message = ＂今天基金跌惨了…呜呜呜＂; message=＂今天我赚翻了…哈哈哈＂; console.log(message);    复制代码
　　例二：const user = { id: 123, name: ＂张三＂ }; user ={id:234,name:＂李四＂} console.log(user);    复制代码
　　const user = { id: 123, name: ＂张三＂ }; user.name=＂李四＂; console.log(user);  复制代码
　　从上面的例子中我们可以看出 const 赋值的常量如果是基本数据类型，不能重新赋值；如果是对象等复杂数据类型，不能更改地址，但是可以更改对象中属性的值。2.3 var、let、const 的区别var 声明的变量作用域在所处的函数内，let 和 const 声明的变量作用域在所处的大括号内。var 声明的变量存在变量提升现象，let 和 const 声明的变量不存在变量提升现象。const 声明变量时必须要赋值，赋值之后不能再重新赋值。3. 箭头函数( ) 代表函数{ } 代表函数体const ft = ()=>{} 代表把一个函数赋值给 ftft() 调用该函数无参数，函数体只有一行代码// 常规写法 function print() {     console.log(＂呜呜呜，今天打王者荣耀连着输了6把！＂); } // 箭头函数 const ft = ()=> console.log(＂呜呜呜，今天打王者荣耀连着输了6把！＂); // 调用函数 ft(); 复制代码
　　有参数，函数体只有一行代码 // 常规写法   function print(name,content) {       return name + content;   }   // 箭头函数   const ft = (name,content) => name + content;   // 调用函数   console.log(ft(＂鲁迅＂,＂家门前有2棵树＂)); 复制代码
　　只有一个参数，可以去掉大括号// 常规写法 function print(name) {     return name + ＂我爱你＂; } // 箭头函数 const ft = name => name + ＂我爱你＂; // 调用函数 console.log(ft(＂祖国妈妈＂)); 复制代码
　　4.多个参数，函数体有多行// 箭头函数：获取年龄最大值 const ft = (userArray, sex) => {     let ageArray = userArray.filter(user => user.sex == sex).map(item => item.age);     return Math.max(...ageArray); }  let userArray = [{ name: ＂张三＂, sex: ＂男＂, age: 18 }, { name: ＂李四＂, sex: ＂女＂, age: 19 }, { name: ＂王五＂, sex: ＂男＂, age: 21 }] // 调用函数 console.log(ft(userArray, ＂男＂)); 复制代码
　　4. 解构
　　解构就是把数据结构进行分解，然后为定义的变量赋值。4.1 数组解构
　　获取数组中数值的传统方式：const num =[0,1,2,3]; const a= num[0]; const b= num[1] console.log(a+b); 复制代码
　　解构：let [a, b] = [0, 1, 2, 3]; console.log(a + b); 复制代码4.2 对象解构
　　获取对象中数据的传统方式：let user = {name:＂张三＂,age:19}; let name = user.name; let age = user.age; console.log(＂姓名:＂+name+＂,年龄:＂+age); 复制代码
　　解构：let { name, age } = { name: ＂张三＂, age: 19 }; console.log(＂姓名:＂ + name + ＂,年龄:＂ + age); 复制代码
　　5. 剩余参数
　　剩余参数允许我们将一个未知数量的参数表示为一个数组。5.1 使用
　　语法：...参数名
　　例如：const print = (num, ...args) => {     console.log(num);     console.log(args); } print(0, 1, 2) 复制代码
　　从上面的例子中我们发现参数 args 是一个数组。5.2 和解构连用let users = [＂张三＂, ＂李四＂, ＂王五＂]; let [u1, ...u2] = users; console.log(u1); console.log(u2);   复制代码
　　5.3 合并数组let u1 = [＂张三＂, ＂李四＂, ＂王五＂]; let u2 = [＂张无忌＂, ＂赵敏＂, ＂周芷若＂]; let u3 = [...u1,...u2]; console.log(u3); 复制代码
　　6. 可选链
　　可选链 ?. 是一种 访问嵌套对象属性的防错误方法 。即使中间的属性不存在，也不会出现错误。 如果可选链 ?. 前面部分是 undefined 或者 null，它会停止运算并返回 undefined。
　　我们要想获取一个嵌套对象的属性，一般会这样写：let res = {       data: {           data: {               success: true,               id: ＂20220425＂           }       }   }   if (res && res.data && res.data.data.success) {       let id = res.data.data.id;       console.log(id);   } 复制代码
　　使用可选链let res = {         data: {             data: {                 success: true,                 id: ＂20220425＂             }         }     }     if (res?.data?.data?.success) {         let id = res?.data?.data?.id;         console.log(id);     } 复制代码
　　7. Set
　　Set 是 ES6 提供的一种数据结构，它和数组很像，但是它里面的数据是不可重复的。初始化const set1 = new Set([1, 2, 3, 4, 5, 5]); const set2 = new Set([＂苹果＂,＂橘子＂,＂橘子＂]); console.log(set1); console.log(set2); 复制代码
　　添加数据const set1 = new Set([1, 2, 3, 4, 5,5]); set1.add(7); 复制代码删除数据const set1 = new Set([1, 2, 3, 4, 5,5]); set1.delete(3); 复制代码包含数据const set1 = new Set([1, 2, 3, 4, 5,5]); const res = set1.has(1); console.log(res); 复制代码
　　清除所有数据const set1 = new Set([1, 2, 3, 4, 5,5]); set1.clear(); 复制代码8. 数组操作8.1 合并数组let u1 = [＂张三＂, ＂李四＂, ＂王五＂]; let u2 = [＂张无忌＂, ＂赵敏＂, ＂周芷若＂]; let u3 = [...u1,...u2]; console.log(u3); 复制代码
　　8.2 includes()
　　includes 用来判断该数组是否包含某个值，返回值是布尔值let users = [＂张三＂,＂李四＂]; let res =users.includes(＂张三＂); console.log(res); 复制代码
　　8.3 find()
　　find 用来找到第一个符合条件的成员，没有找到返回 undefinedlet users = [{ name: ＂张三＂, age: 18 }, { name: ＂李四＂, age: 20 }]; let user = users.find((item, index) =>     item.age > 18 ) console.log(user); 复制代码
　　8.4 findIndex()
　　findIndex 用来找到第一个符合条件的成员的索引，没有的话返回 -1let users = [{ name: ＂张三＂, age: 18 }, { name: ＂李四＂, age: 20 }]; let index = users.findIndex((item, index) =>     item.age > 18 ) console.log(index) 复制代码
　　8.5 filter()
　　filter 用来返回一个满足条件的新数组，不满足条件返回空数组let users = [{ name: ＂张三＂, age: 18 }, { name: ＂李四＂, age: 20 }]; let array = users.filter((item, index) =>     item.age > 21 ) console.log(array); 复制代码
　　8.6 map()
　　map 用来返回一个对成员进行加工之后的新数组let users = [{ name: ＂张三＂, age: 18 }, { name: ＂李四＂, age: 20 }]; let array = users.map((item, index) => {     item.name += ＂666＂;     item.age += 10;     return item; }) console.log(array); 复制代码
　　9. 字符串扩展方法9.1 startsWith() 和 endsWith()
　　startsWith()
　　表示该字符串参数是否在某个字符串头部let message = ＂helloworld＂; let res = message.startsWith(＂hello＂); console.log(res); 复制代码
　　endsWith()
　　表示该字符串参数是否在某个字符串尾部let message = ＂helloworld＂; let res = message.endsWith(＂ww＂); console.log(res); 复制代码
　　9.2 模板字符串
　　模板字符串是 ES6 新增加的创建字符串的方式
　　定义方式：反引号定义 let country = `中国`; 复制代码解析变量let country = `中国`; let message = `我爱你${country}`; console.log(message); 复制代码
　　调用函数const print = message=>message+＂，2022-04-25＂; let message = `${print(＂我爱你中国＂)}`; console.log(message); 复制代码