美文网首页
ES6搭建环境,变量的解构赋值

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

作者: 晓卢轩 | 来源:发表于2018-01-22 16:43 被阅读0次

    ES6搭建环境

    建立工程目录:

    先建立一个项目的工程目录,并在目录下边建立两个文件夹:srcdist

    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);

    相关文章

      网友评论

          本文标题:ES6搭建环境,变量的解构赋值

          本文链接:https://www.haomeiwen.com/subject/pstraxtx.html