本文共 2890 字，大约阅读时间需要 9 分钟。
ECMAScript是JavaScript的标准，JavaScript是ECMAScript的实现。
ES6是2015年发布的，也叫作ES2015。ES6的目标是使JS可以编写复杂的⼤型应⽤程序，成为企业级开发语⾔。
因为某些浏览器不支持ES6，我们需要使用babel将ES6代码转换为低版本的ES代码（低版本js代码），以兼容某些不支持ES6的浏览器，比如IE。
1、在VSCode中打开项目，Ctrl+~打开终端#初始化项目配置npm init#安装babel-cli、设置转换规则npm install --save-dev babel-cli babel-preset-es2015
这种安装方式是局部安装，只对当前项目有效。推荐局部安装，因为每个项目的环境可能不同。
2、项目根目录下新建文件夹src、dist，src放ES6代码（js代码），dist放转换得到的低版本ES代码。
3、项目根目录下新建babel配置文件.babelrc
// 配置转换使用的规则集{ "presets": ["es2015"]} 4、在package.json中配置babel转译
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", //逗号分隔 "build": "babel src -w -d dist" //babel脚本命令,key可以自己取}, scripts对象中，每个键值对都是一个脚本命令，key是脚本名称，value是脚本命令。
自己可以配置多个脚本命令。babel 源文件|目录 [-w] [-o|-d] 目标文件|目录
-w 可选，表示一直监听源文件|目录，保存文件时自动转译。如果不使用此参数，每次转译都需要在VSCode终端执行 “npm run 脚本名称“
-o指定输出的目标文件，-d指定输出的目标目录。如果只转译某个js文件，也可以这样写
babel src/xxx.js [-w] -o dist/xxx.js
5、VSCode终端转译
项目写好之后，将ES6代码转换为低版本ES代码
npm run build #run后面是scripts中的babel脚本名称，使用npm运行babel脚本完成转译
babel脚本使用了-w会一直监听，Ctrl+C可退出监听。
可以在src下写个js文件，里面写句ES6代码 let a=1; 转译下看能否成功、配置是否生效。写代码时，在项目根目录下新建css、img、plugin等文件夹放对应的文件，html文件可以直接放在项目根目录下，也可以新建文件夹html来存放.html文件。
转译时默认使用严格模式。
ES5用var声明变量、常量，ES6用let声明变量、const声明常量（只读变量）。
1、内存泄漏、块级作用域
if(true){ var a=1;}console.log(a); //1for(var i=0;i<10;i++){ var j=2;}console.log(i); //0console.log(j); //2 var的局部作用域只适用于函数，函数外部不能访问函数内部的局部变量（闭包除外），但在if、for等语句中声明的局部变量，可以在语句块外访问，会造成内存泄漏。
在if、for等语句块中使用let、const声明局部变量，则该局部变量的作用域只是语句块，在语句块外无法访问。
2、重复声明
var i=1;var i=2;
在同一作用域var可以重复声明变量，let、const则不允许这样做。
3、作用域提升、暂时性死区
//如果使用之前或之后没有声明这个变量，此句代码会报错：i没有定义console.log(i); //如果之后用var声明了这个变量，不会报错console.log(i); //不会报错，i的值是undefinedvar i=1;//上面2句代码执行过程如下var i; //var在需要时会自动提升变量作用域，但只是将声明提前，到实际赋值处才会赋值//这期间该变量的值是undefined（没有值），声明了但没有赋值，这个代码区间叫做该变量的暂时性死区，赋值之后才恢复活力，可以正常使用console.log(i); //不会报错，i的值是undefinedi=1;
let、const不会自动提升作用域，要求变量、常量必须先声明、再使用。
4、常量的使用
var NAME;NAME="xxx";NAME="yyy";
var声明的常量，其实只是标识符全大写罢了，和变量完全相同，可以先声明后赋值，可以修改值。
使用const声明常量，在声明时就必须赋值，且后续不能修改该常量的值。如果常量值是引用，const只能保证常量值（引用的指针）不被修改，引用指向的数组、对象本身是可以修改的。
const不仅仅只用于声明常量，如果想保护变量不被修改，也可以使用const来声明变量。
Symbol可以创建独一无二的变量
let str1="chy";let str2="chy";console.log(str1==str2); //truelet obj1=Symbol("chy");let obj2=Symbol("chy"); console.log(obj1==obj2); //false// 也可以这样写let obj3=Symbol.for("chy");console.log(obj2==obj3); //false
解构赋值可以把可迭代的数据（数组、对象）批量赋给变量
let a,b,c,d;// 解构数组[a,b,c,d]=[12,45,32,21]; //解构赋值,右边的第n个元素赋给左边的第n个变量,a=12,b=45,c=32,d=21[a,b,c=0,d=0]=[1,2]; //元素不够时可以设置默认值[a,,b]=[12,5,3]; //可以跳过数组的元素，a=12,b=3,5被跳过了[a,...b]=[32,45,5,13]; //...b表示把后面的元素作为数组赋给b，带...的变量要放在最后console.log(a,b); //32 [45, 5, 13]let name,age;// 解构对象，整个式子要放在()中({ "name":name,"age":age}={ "name":"chy","age":20}) //解构对象的意义在于把value批量赋给变量console.log(name,age); //chy 20 解构赋值主要用于前后端联调（tiao），后台返回json对象、json数组，前端使用解构赋值把json对象、json数组中的数据批量赋给变量，后续使用这些变量。
转载地址：http://vgqlb.baihongyu.com/