Web/12-ES6.md at ed4b45f8206461ca6bc4286b9cbd1db1115044ee

webcourse/Web

Fork 0

forked from theluyuan/Web

qianguyihao ed4b45f820 add files:vue

2018-03-04 18:18:19 +08:00

2.4 KiB

Raw Blame History

什么是 ES6

发展历史

ECMAScript 是 JS 的语言标准。而 ES6 是新的 JS 语法标准。

20180303_1633.png

2015年6月，ES6正式发布。

ES6 的其他优势

使用 babel 语法转换器，支持低端浏览器
流行的库基本都是基于 ES6 构建。 React 默认使用 ES6 新源发开发。

ES6 的常用语法

ES6语法概览

块级作用域、字符串
对象扩展、解构
类、模块化等。

作用域：let 和 const

用 let定义变量，替代 var
用const 定义常量（定义后，不可修改）
作用域和 {}

举例：

    let a1 = 'haha';

    const name = `smyhvae`;

模板字符串

我们以前让字符串进行拼接的时候，是这样做的：（传统写法的字符串拼接）

    var name = 'smyhvae';
    var age = '26';
    console.log('name:'+name+',age:'+age);   //传统写法

这种写法，比较繁琐，而且容易出错。

现在有了 ES6 语法，字符串拼接可以这样写：

    var name = 'smyhvae';
    var age = '26';

    console.log('name:'+name+',age:'+age);   //传统写法

    console.log(`name:${name},age:${age}`);  //ES6 写法

注意，上方代码中，倒数第二行用的是单引号，最后一行用的是反引号（在tab键的上方）。

函数扩展

ES6 中函数的用法：

参数默认值
箭头函数
展开运算符

定义和调用函数：（传统写法）

    function fn1(name) {
        console.log(name);
    }

    fn1('smyhvae');

定义和调用函数：（ES6写法）

    var fn2 = (name)=>{
        console.log(name);
    }

    fn2('smyhvae');

上面两端代码，执行的结果是一样的。

当然，也可以给上面这个函数的参数加一个缺省值：

    var fn2 = (name='enen')=>{
        console.log(name);
    }

    fn2();        //参数用默认值 enen
    fn2('smyhvae');

比如说，1秒后执行一段代码，可以用箭头函数：

    setTimeout(()=>{
        console.log('something');
    },1000);

如果函数体只有一条 return 语句，那么大括号可以省略：

    const myDouble = x=>x*2;
    console.log(myDouble(5));  //打印结果为10

箭头函数的好处：

简写代码
保持 this 的作用域

2.4 KiB Raw Blame History Unescape Escape