ES6：初学1

一、ES6是什么？

ES6 全称是 ECMAScript 6（也叫 ECMAScript 2015），是 JavaScript 语言的新一代标准。它不是一门新语言，而是对传统 JavaScript 的升级和扩展，新增了很多实用语法和特性，让代码更简洁、易维护。

二、为什么要学习ES6

1、ES6 的版本变动内容最多，具有里程碑意义
2、ES6 加入许多新的语法特性，编程实现更简单、高效
3、ES6 是前端发展趋势，就业必备技能

三、ES6的特性

关键字

在ES6中我们使用let关键字和const关键字替代了以前使用的var关键字，主要是为了解决var的缺陷
同时let和const两者由存在着区别，主要为是否重新赋值

let

1、允许先声明后赋值
2、允许重复赋值
3、块级作用域

if(true){leta=1;constb=2;}console.log(a);// 报错：a is not definedconsole.log(b);// 报错：b is not defined

4、不存在变量提升

const

1、变量名一般大写
2、不允许先声明后赋值
3、不允许重复赋值
4、块级作用域

if(true){leta=1;constb=2;}console.log(a);// 报错：a is not definedconsole.log(b);// 报错：b is not defined

5、不存在变量提升

应用场景：声明对象类型使用 const，非对象类型声明、变量声明选择 let

变量解构赋值

把数组 / 对象里的值 “批量拆解” 出来，赋值给单独的变量，不用再一个个通过下标 / 属性名取值，让代码更简洁

数组结构

// 传统写法（麻烦）constarr=[10,20,30];consta=arr[0];constb=arr[1];constc=arr[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};constname=user.name;constage=user.age;console.log(name,age);// 张三 20// ES6 解构写法（简洁）const{name,age}=user;console.log(name,age);// 张三 20

模板字符串

模板字符串是 ES6 新增的字符串书写方式，用 反引号（`） 包裹，用 ${变量/表达式} 把内容嵌入字符串

// 传统写法（拼接麻烦，易出错）constname="张三";constage=20;conststr="姓名："+name+"，年龄："+age+"，明年："+(age+1)+"岁";console.log(str);// 姓名：张三，年龄：20，明年：21岁// 模板字符串写法（简洁直观）conststr=`姓名：${name}，年龄：${age}，明年：${age+1}岁`;console.log(str);// 输出和上面完全一致

// 传统写法（换行要加 \n，代码格式乱）consttext="第一行文字\n第二行文字\n第三行文字";// 模板字符串写法（直接换行，代码格式=输出格式）consttext=`第一行文字 第二行文字 第三行文字`;console.log(text);// 输出：// 第一行文字// 第二行文字// 第三行文字

箭头函数（重点）

箭头函数是 ES6 为简化函数表达式设计的语法，用 =>（箭头）替代 function 关键字

// 普通函数constsum=function(a,b){returna+b;};// 箭头函数（最简版）constsum=(a,b)=>a+b;console.log(sum(1,2));// 输出：3

只有一个参数时可以省略括号

letfn=num=>{returnnum*20}console.log(fn(20))//输出400

this 继承外层作用域的 this

// 示例：前端开发中常见的场景constobj={name:"张三",// 普通函数：this 指向 objfn1:function(){console.log(this.name);// 输出：张三},// 箭头函数：this 继承外层（全局 window），window 没有 name 属性fn2:()=>{console.log(this.name);// 输出：undefined}};obj.fn1();obj.fn2();