文章目录一、ES6是什么二、为什么要学习ES6三、ES6的特性关键字letconst变量解构赋值数组结构对象结构模板字符串箭头函数重点一、ES6是什么ES6 全称是 ECMAScript 6也叫 ECMAScript 2015是 JavaScript 语言的新一代标准。它不是一门新语言而是对传统 JavaScript 的升级和扩展新增了很多实用语法和特性让代码更简洁、易维护。二、为什么要学习ES61、ES6 的版本变动内容最多具有里程碑意义2、ES6 加入许多新的语法特性编程实现更简单、高效3、ES6 是前端发展趋势就业必备技能三、ES6的特性关键字在ES6中我们使用let关键字和const关键字替代了以前使用的var关键字主要是为了解决var的缺陷同时let和const两者由存在着区别主要为是否重新赋值let1、允许先声明后赋值2、允许重复赋值3、块级作用域if(true){leta1;constb2;}console.log(a);// 报错a is not definedconsole.log(b);// 报错b is not defined4、不存在变量提升const1、变量名一般大写2、不允许先声明后赋值3、不允许重复赋值4、块级作用域if(true){leta1;constb2;}console.log(a);// 报错a is not definedconsole.log(b);// 报错b is not defined5、不存在变量提升应用场景声明对象类型使用 const非对象类型声明、变量声明选择 let变量解构赋值把数组 / 对象里的值 “批量拆解” 出来赋值给单独的变量不用再一个个通过下标 / 属性名取值让代码更简洁数组结构// 传统写法麻烦constarr[10,20,30];constaarr[0];constbarr[1];constcarr[2];console.log(a,b,c);// 10 20 30// ES6 解构写法简洁const[a,b,c][10,20,30];console.log(a,b,c);// 10 20 30对象结构// 传统写法麻烦constuser{name:张三,age:20};constnameuser.name;constageuser.age;console.log(name,age);// 张三 20// ES6 解构写法简洁const{name,age}user;console.log(name,age);// 张三 20模板字符串模板字符串是 ES6 新增的字符串书写方式用 反引号 包裹用 ${变量/表达式} 把内容嵌入字符串// 传统写法拼接麻烦易出错constname张三;constage20;conststr姓名name年龄age明年(age1)岁;console.log(str);// 姓名张三年龄20明年21岁// 模板字符串写法简洁直观conststr姓名${name}年龄${age}明年${age1}岁;console.log(str);// 输出和上面完全一致// 传统写法换行要加 \n代码格式乱consttext第一行文字\n第二行文字\n第三行文字;// 模板字符串写法直接换行代码格式输出格式consttext第一行文字 第二行文字 第三行文字;console.log(text);// 输出// 第一行文字// 第二行文字// 第三行文字箭头函数重点箭头函数是 ES6 为简化函数表达式设计的语法用 箭头替代 function 关键字// 普通函数constsumfunction(a,b){returnab;};// 箭头函数最简版constsum(a,b)ab;console.log(sum(1,2));// 输出3只有一个参数时可以省略括号letfnnum{returnnum*20}console.log(fn(20))//输出400this 继承外层作用域的 this// 示例前端开发中常见的场景constobj{name:张三,// 普通函数this 指向 objfn1:function(){console.log(this.name);// 输出张三},// 箭头函数this 继承外层全局 windowwindow 没有 name 属性fn2:(){console.log(this.name);// 输出undefined}};obj.fn1();obj.fn2();