前言

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`;
copy

模板字符串

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

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

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

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

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

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

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

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

函数扩展

ES6 中函数的用法：

• 参数默认值

• 箭头函数

• 展开运算符

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

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

    fn1('smyhvae');
copy

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

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

    fn2('smyhvae');
copy

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

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

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

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

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

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

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

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

箭头函数的好处：

• 简写代码

• 保持 this 的作用域