前言

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

发展历史

20180303_1633.png

  • 2015年6月，ES6正式发布。

ES6 的其他优势

  • 使用 babel 语法转换器，支持低端浏览器

  • 流行的库基本都是基于 ES6 构建。 React 默认使用 ES6 新源发开发。

ES6 的常用语法

ES6语法概览

  • 块级作用域、字符串

  • 对象扩展、解构

  • 类、模块化等。

作用域：let 和 const

  • 用 let定义变量 ，替代 var

  • 用const 定义常量（定义后，不可修改）

  • 作用域和 {}

举例：

1
2
3
let a1 = 'haha';

const name = `smyhvae`;

模板字符串

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

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

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

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

1
2
3
4
5
6
7
var name = 'smyhvae';
var age = '26';

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

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

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

函数扩展

ES6 中函数的用法：

  • 参数默认值

  • 箭头函数

  • 展开运算符

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

1
2
3
4
5
function fn1(name) {
    console.log(name);
}

fn1('smyhvae');

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

1
2
3
4
5
var fn2 = (name)=>{
    console.log(name);
}

fn2('smyhvae');

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

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

1
2
3
4
5
6
var fn2 = (name='enen')=>{
    console.log(name);
}

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

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

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

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

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

箭头函数的好处：

  • 简写代码

  • 保持 this 的作用域