一、开发环境的搭建
Chrome浏览器已经支持ES6了，但是有些低版本的浏览器还是不支持ES6的语法，这就需要我们把ES6的语法自动的转变成ES5的语法
使用 Babel 来实现 ES6 到 ES5 的编译。
- 1.首先,对项目进行初始化
npm init -y（-y表示全部默认同意），此时会生成package.json文件
安装 babelnpm install babel-cli -g
还需本地安装babel-preset-envnpm install --save-dev babel-preset-env@next
安装完成后，可以看到 package.json 文件中多了 devDependencies 选项，内容是上面两个依赖包。 - 2.新建.babelrc
在根目录下新建.babelrc文件，并打开录入下面的代码
{
"presets":[
"env"
],
"plugins":[]
}
- 3.. 项目结构
在总项目目录下创建两个文件夹，分别是src和dist。其中src用来书写 ES6 代码，而dist用来存放经过编译生成的 ES5 代码。在页面引入时应引入编译后的 ES5 代码，即dist目录下的 js 文件。 - 开始
在index.html中搭起页面的基本架构，并引入dist/index.js。这个 js 文件是一会用 babel 编译生成的。
在src/index.js中书写 ES6 代码，并保存。
- 开始
- 5.编译
自此，我们可以开始讲 ES6 代码进行编译了。
babel src/index.js -o dist/index.js
完成后，查看dist/index.js可以看到编译完成的 ES5 语句。 - 6.简化转化命令
在学习vue 的时候，可以使用npm run build 直接利用webpack进行打包，在这里也希望利用这种方式完成转换。打开package.json文件，把文件修改成下面的样子。
{
"name": "es6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "babel src/index.js -o dist/index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-preset-es2015": "^6.24.1"
}
}
以后就可以通过 npm run build 来进行编译了。
二、声明方式
let
const
var
比较简单，不再赘述。
三、变量的解构赋值
ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。
- 1.数组的解构赋值
let [a,b,c]=[1,2,3]
let [a,[b,c],d]=[1,[2,3],4];
若解构不成功，比如下面这种情况
let [x,y] = [1] // 右边少 x = 1，y = undefined
若是右边多，解构仍是成功的
- 2.解构的默认值
解构赋值是允许你使用默认值的，当右边对应位置值严格等于undefined时，默认值将生效。注意null并不严格等于undefined。 - 3.对象的解构赋值
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
let [foo,bar] = [foo:'aaa',bar:'bbb']
// foo = 'aaa',bar = 'bbb'
let [baz] = [foo:'aaa',bar:'bbb']
// baz = undefined
let [foo:bar] =[foo:'aaa',bar:'bbb']
// bar = 'aaa',foo:error: foo is not defined
其中，第三个语句中，foo称为匹配的模式，bar才是变量。并不存在foo这个变量。
let [foo,bar] = [foo:'aaa',bar:'bbb']
let [foo:foo, bar:bar] = [foo:'aaa',bar:'bbb']
上面语句是下面语句的简写。
