ES6 学习笔记（一）

一、开发环境的搭建

Chrome浏览器已经支持ES6了，但是有些低版本的浏览器还是不支持ES6的语法，这就需要我们把ES6的语法自动的转变成ES5的语法
使用 Babel 来实现 ES6 到 ES5 的编译。

• 1.首先,对项目进行初始化npm init -y（-y表示全部默认同意），此时会生成 package.json文件
  安装 babel npm install babel-cli -g
  还需本地安装babel-preset-env npm 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 文件。
• 4. 开始
     在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'] 

上面语句是下面语句的简写。