ES6入门

作者: 相思雨gg | 来源:发表于2017-12-19 22:55 被阅读0次

    es6语法在新版本浏览器大部分都已经全部支持了,但是一些旧版本的浏览器还不能全部支持es6语法,所以想要放心的使用es6就必须使用插件把es6转换成es5使用。

    配置环境

    使用babel将es6转换成es5语法。
    首先全局安装babel-cli:
    npm install -g babel-cli

    项目依赖下安装babel-cli 和babel-preset-es2015:
    npm install --save-dev babel-cli babel-preset-es2015

    项目根目录下创建 .babelrc文件:
    {"presets":[ "es2015" ], "plugins":[] }
    src目录下创建index.js:

    let a=(b,c)=>b*c
    

    打开终端执行:
    babel src/index.js -o dist/index.js

    这时dist目录下就会生成index.js文件:
    var a = function a(b, c) { return b * c; };
    此时babel 已经将es6语法转换成了es5语法。

    定义变量

    let局部定义变量

    let a=12;
    {
      let a=3;
    }
    console.log(a);  // 12
    //控制台输出的是12,也就是说let定义的变量是局部的,它不会污染全局
    

    继续看下一个例子:

    for(let i=0; i<5; i++){
      
    }
    console.log(i);  //控制台会提示报错i未定义,这说明i是for循环局部变量
    

    const定义常量:常量定义后不允许更改,否则提示报错

    const URL='www.baidu.com';
    var URL='ccc' ;  //控制台会提示报错,说URL应经被定义
    

    变量的解构赋值

    数组的解构赋值: 等号两边结构必须一样

    let [a,b]=[1,2];
    console.log(a);  //1
    console.log(b); //2
    

    对象的解构赋值:

    let {a,b}={a:1,b:2};
    console.log(a); //1
    console.log(b);  //2
    

    扩展运算符

    对象扩展运算符(...):

    let arr=[1,2];
    let arr2=[...arr];
    arr2.push(3);
    console.log(arr);  //[1,2] 
    console.log(arr2);  //[1,2,3]  //arr2并没有引用arr,只是单纯的继承了arr的内容
    

    字符串模板

    es6使用``+${}拼接字符串,并且支持换行和识别html标签:

     let a='yuan';
     let b=`大家好我是${a}`;
    console.log(b);  //大家好我是yuan
    let c=`大家
    我是${a}
    `
    

    字符串操作:

    let str='abcd';
    console.log(str.includes('c'));  //true  字符串中是否包含'c' 返回true/false
    console.log(str.startsWith('a'));  //true  字符串是否以'a'开头 返回true/false
    console.log(str.endsWith('d'));  //true  字符串中是否以‘d’结尾 返回true /false
    

    相关文章

      网友评论

          本文标题:ES6入门

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