ES6搭建环境,变量的解构赋值

ES6搭建环境

建立工程目录：

先建立一个项目的工程目录，并在目录下边建立两个文件夹：src和dist

src：书写ES6代码的文件夹，写的js程序都放在这里。

dist：利用Babel编译成的ES5代码的文件夹，在HTML页面需要引入的时这里的js文件。

编写index.html：

文件夹建立好后，我们新建一个index.html文件。

需要注意的是在引入js文件时，引入的是dist目录下的文件。

1在安装Babel之前，需要用npm init先初始化我们的项目。打开终端或者通过cmd打开命令行工具，进入项目目录，输入下边的命令：

1，npm init -y

2，全局安装Babel-cli（1npm install -g babel-cli）

3，npm install --save-dev babel-preset-es2015 babel-cli

4，新建.babelrc

在根目录下新建.babelrc文件，并打开录入下面的代码

{

    "presets":[

        "es2015"

    ],

    "plugins":[]

}

5，babel src/index.js -o dist/index.js

6，

变量的解构赋值

//const 常量，声明就不能变了

//let 局部

//var 全局，会污染外部

//let [a,b,c]=[1,2,3]

//let [a=true][]  //true

//let [a,[b,c],d]=[1,[2,3],4]

//undfined 没有值值默认值

//null 有值取的null

//let [a,b='技术胖']=['jspang',undefined]  -》jspang技术胖

//let [a,b='技术胖']=['jspang',null]  -》jspang null

//数组是按顺序，对象是按key值

let [a,b="JSPang"]=['技术胖']

console.log(a+b); //控制台显示“技术胖JSPang”

解构不仅可以用于数组，还可以用于对象。

let {foo,bar} = {foo:'JSPang',bar:'技术胖'};

console.log(foo+bar); //控制台打印出了“JSPang技术胖”

如果在解构之前就定义了变量，我们这时候只要在解构的语句外边加一个圆括号

let foo;

({foo} ={foo:'JSPang'});

console.log(foo); //控制台输出jspang

字符串也可以解构，这是因为，此时字符串被转换成了一个类似数组的对象。

const [a,b,c,d,e,f]="JSPang";

console.log(a);

console.log(b);

console.log(c);

console.log(d);

console.log(e);

console.log(f);