总结常见的ES6新语法特性。

前言

ES6是即将到来的新版本JavaScript语言的标准，他给咱们带来了更“甜”的语法糖（一种语法，使得语言更容易理解和更具备可读性，也让咱们编写代码更加简单快捷），如箭头函数（=>）、class等等。用一句话来讲就是：

ES6给咱们提供了许多的新语法和代码特性来提升javascript的体验

不过遗憾的是，如今尚未浏览器可以很好的支持es6语法，点这里查看浏览器支持状况，因此咱们在开发中还须要用babel进行转换为CommonJS这种模块化标准的语法。

由于下面我会讲到一些es6新特性的例子，若是想要运行试试效果的话，能够点这里去测试es6的代码。

经常使用es6特性

而后我下面简单的介绍一些很经常使用的语法特性，若是想完整的了解ES6，我推荐你们点这里

定义函数

咱们先来看一个基本的新特性，在javascript中，定义函数须要关键字function，可是在es6中，还有更先进的写法，咱们来看：

es6写法：

var human = {
    breathe(name) {   //不须要function也能定义breathe函数。
        console.log(name + ' is breathing...');
    }
};
human.breathe('jarson');   //输出 ‘jarson is breathing...’

 

转成js代码：

var human = {
    breathe: function(name) {
        console.log(name + 'is breathing...');
    }
};
human.breathe('jarson');

 

很神奇对不对？这样一对比，就能够看出es6的写法让人简单易懂。别着急，下面还有更神奇的。

建立类

咱们知道，javascript不像java是面向对象编程的语言，而只能够说是基于对象编程的语言。因此在js中，咱们一般都是用function和prototype来模拟类这个概念。

可是如今有了es6，咱们能够像java那样‘明目张胆’的建立一个类了：

class Human {
    constructor(name) {
        this.name = name;
    }
    breathe() {
        console.log(this.name + " is breathing");
    }
} 
var man = new Human("jarson");
man.breathe();    //jarson is breathing

 

上面代码转为js格式：

function Human(name) {
    this.name = name;
    this.breathe = function() {
        console.log(this.name + ' is breathing');
    }
}
var man = new Human('jarson');
man.breathe();    //jarson is breathing

 

因此咱们看到，咱们能够像java那样语义化的去建立一个类。另外，js中的继承父类，须要用prototype来实现。那么在es6中，又有什么新的方法来实现类的继承呢？继续看：

假如咱们要建立一个Man类继承上面的Human类，es6代码：

class Man extends Human {
    constructor(name, sex) {
        super(name);
        this.sex = sex;
    }
    info(){
        console.log(this.name + 'is ' + this.sex);
    }
}
var xx = new Man('jarson', 'boy');
xx.breathe();   //jarson is breathing
xx.info();   //arsonis boy

 

代码很简单，不做赘述，可使用文章里提到的在线工具去试试效果就能明白了。须要注意的是：super()是父类的构造函数。

模块

在ES6标准中，javascript原生支持module了。将不一样功能的代码分别写在不一样文件中，各模块只需导出(export)公共接口部分，而后在须要使用的地方经过模块的导入(import)就能够了。下面继续看例子：

内联导出

ES6模块里的对象可在建立它们的声明中直接导出，一个模块中可无数次使用export。

先看模块文件app.js：

export class Human{
    constructor(name) {
        this.name = name;
    }
    breathe() {
        console.log(this.name + " is breathing");
    } 
}  
export function run(){  
    console.log('i am runing'); 
}
function eat() {
    console.log('i am eating');
}

 

例子中的模块导出了两个对象：Human类和run函数， eat函数没有导出，则仍为此模块私有，不能被其余文件使用。

导出一组对象

另外，其实若是须要导出的对象不少的时候，咱们能够在最后统一导出一组对象。

更改app.js文件：

class Human{
    constructor(name) {
        this.name = name;
    }
    breathe() {
        console.log(this.name + " is breathing");
    } 
}  
function run(){  
    console.log('i am runing'); 
}
function eat() {
    console.log('i am eating');
}
export {Human, run}; 

 

这样的写法功能和上面同样，并且也很明显，在最后能够清晰的看到导出了哪些对象。

Default导出

导出时使用关键字default，可将对象标注为default对象导出。default关键字在每个模块中只能使用一次。它既能够用于内联导出，也能够用于一组对象导出声明中。

查看导出default对象的语法：

...   //建立类、函数等等
export default {  //把Human类和run函数标注为default对象导出。
    Human,  
    run  
}; 

 

无对象导入

若是模块包含一些逻辑要执行，且不会导出任何对象，此类对象也能够被导入到另外一模块中，导入以后只执行逻辑。如：

import './module1.js'; 
导入默认对象

 

使用Default导出方式导出对象，该对象在import声明中将直接被分配给某个引用，以下例中的“app”。

import app from './module1.js'; 

 

上面例子中，默认./module1.js文件只导出了一个对象；若导出了一组对象，则应该在导入声明中一一列出这些对象，如：

import {Human, run} from './app.js'

 

let与const

在我看来，在es6新特性中，在定义变量的时候通通使用let来代替var就行了，const则很直观，用来定义常量，即没法被更改值的变量。

for (let i=0;i<2;i++) {
    console.log(i);  //输出: 0,1
}

箭头函数

ES6中新增的箭头操做符=>简化了函数的书写。操做符左边为输入的参数，而右边则是进行的操做以及返回的值，这样的写法能够为咱们减小大量的代码，看下面的实例：

let arr = [6, 8, 10, 20, 15, 9];
arr.forEach((item, i) => console.log(item, i));
let newArr = arr.filter((item) => (item<10));
console.log(newArr); //[6, 8, 9];

上面的(item, i)就是参数，后面的console.log(item, i)就是回到函数要执行的操做逻辑。

上面代码转为js格式：

var arr = [6, 8, 10, 20, 15, 9];
arr.forEach(function(item, i) {
    return console.log(item, i);
});
var newArr = arr.filter(function(item) {
    return (item < 10);
});
console.log(newArr);

字符串模版

ES6中容许使用反引号 ` 来建立字符串，此种方法建立的字符串里面能够包含由美圆符号加花括号包裹的变量${vraible}。看一下实例就会明白了：

//产生一个随机数
let num = Math.random();
//将这个数字输出到console
console.log(`your num is ${num}`);

解构

若一个函数要返回多个值，常规的作法是返回一个对象，将每一个值作为这个对象的属性返回。在ES6中，利用解构这一特性，能够直接返回一个数组，而后数组中的值会自动被解析到对应接收该值的变量中。咱们来看例子：

function getVal() {
    return [1, 2];
}
var [x,y] = getVal(); //函数返回值的解构
console.log('x:'+x+', y:'+y);   //输出：x:1, y:2 

默认参数

如今能够在定义函数的时候指定参数的默认值了，而不用像之前那样经过逻辑或操做符来达到目的了。

function sayHello(name){
    var name=name||'tom';   //传统的指定默认参数的方式
    console.log('Hello '+name);
}

 //运用ES6的默认参数

function sayHello2(name='tom'){  //若是没有传这个参数，才会有默认值，
    console.log(`Hello ${name}`);
}
sayHello();//输出：Hello tom
sayHello('jarson');//输出：Hello jarson
sayHello2();//输出：Hello tom
sayHello2('jarson');//输出：Hello jarson

注意： sayHello2(name='tom')这里的等号，意思是没有传这个参数，则设置默认值，而不是给参数赋值的意思。

Proxy

Proxy能够监听对象身上发生了什么事情，并在这些事情发生后执行一些相应的操做。一会儿让咱们对一个对象有了很强的追踪能力，同时在数据绑定方面也颇有用处。

//定义被监听的目标对象
let engineer = { name: 'Joe Sixpack', salary: 50 };
//定义处理程序
let interceptor = {
    set(receiver, property, value) {
        console.log(property, 'is changed to', value);
        receiver[property] = value;
    }
};
//建立代理以进行侦听
engineer = new Proxy(engineer, interceptor);
//作一些改动来触发代理
engineer.salary = 70;//控制台输出：salary is changed to 70

对于处理程序，是在被监听的对象身上发生了相应事件以后，处理程序里面的方法就会被调用。

结语

总的来讲，虽然支持es6的状况到目前还不是很乐观，但es6的新语法特性让前端和后端的差别愈来愈小了，这是一个新时代的开始，咱们必需要了解这些新的前沿知识，才能跟上时代的步伐。