ES6特性总结（1）——语法一

前言

ES6(也就是ES2015)是目前javascript语言采用的最新标准，于2015年6月发布。ES6相比于以前的标准，加入了一系列的新语法和新特性，javascript也所以变得更加丰富和全面，尤为是“类”的引入，让更多习惯了面向对象开发的开发者能够更好地上手javascript开发。咱们将从ES6的一些基本的语法新特性入手，看看咱们在新的标准下，能够去进行哪些新的尝试！

1. let与const关键字

在之前的javascript中，咱们只采用var关键字来声明变量。咱们能够看一下下面这段代码：

function havingFood() {
    if (isHungry) {
        var food = 'A pancake';
    } else {
        var drink = 'sprite';
        console.log(food);// undefined
    }
}

事实上，之因此这里会输出undefined而不是error: food is not defined，是由于经过var声明的变量，尤为是在函数中，都会在函数运行前被“提高”，也就是在函数的最开始阶段被声明，以后再被赋具体的值。也就是说上述代码实际上至关于：

function havingFood() {
    var food,drink;
    if (isHungry) {
        food = 'A pancake';
    } else {
        drink = 'sprite';
        console.log(food);
    }
}

也就是说，在ES6以前，**变量的做用域要么是全局，要么是整个函数域。**而在ES6中，因为新的关键字let和const的出现，很好地突破了这个限制，这是由于他们的做用域是块，而不是整个函数域。 一样的代码，咱们先试试用let或const进行声明的变量：

function havingFood() {
    if (isHungry) {
       const food = 'A pancake';
    } else {
       const drink = 'sprite';
        console.log(food); // ReferenceError: food is not defined
    }
}

这就是区别！const和let的做用域必定是声明所在的块，而非“提高”到整个函数域的头部。 至于const和let的使用规则，就很是简单了，能够归纳为：**let能够从新赋值，const不能从新赋值且必须有初值。**根据实际状况的需求，选择const或let进行变量声明就OK了！

2.模板字面量

这听上去真的是个很怪异的名字，你可能会觉得我笔误。不过说真的它叫什么并不重要，你只须要知道你有了一个更加方便地表示大段字符串内容的方式。 以往咱们须要将变量和字符串内容进行拼接，须要进行这样的操做：

const Hero1 = {
    name: 'Iron Man',
    power: 'fly'
};
const Hero2 = {
    name: 'Captain American',
    power: 'shield'
};
const sentence = Hero1.name + 'is able to '
    + Hero1.power + ', but ' + Hero2.name + 'is able to use his ' + Hero2.power;
console.log(sentence); // Iron Manis able to fly, but Captain Americanis able to use his shield

而模板字面量的使用方法，是在变量外加上{}后，再在前面加上$，例如${Hero.name}，并使用反引号 `` 将整段内容包在一块儿。一样的内容，使用模板字面量：

const Hero1 = {
    name: 'Iron Man',
    power: 'fly'
};
const Hero2 = {
    name: 'Captain American',
    power: 'shield'
};
const sentence =`${Hero1.name} is able to ${Hero1.power}, but ${Hero2.name} is able to use his ${Hero2.power}`;
console.log(sentence);

这样咱们就不须要一系列的“+”来进行拼接了，最重要的是，在模板字面量里，换行符和空格符也同样起做用。

3.数组解构

是的你没有看错，在javascript里同样可使用解构了。当咱们须要从现有对象或数组中取值，赋值给新的变量时，采用解构能够变得很是方便。

例如数组的解构：

const Hero = ['Iron Man', 'Captain American', 'Thor', 'Eagle'];
const [Avenger1, , , Avenger2] = Hero;
console.log(Avenger2); // Eagle

对象一样可使用解构：

const Hero = {
    name: 'Thor',
    age: 'Unknown',
    power: 'hammer',
    haircolor: 'blond'
};
const {name, age} = Hero;
console.log(name, age); // Thor Unknown

看到区别了？数组解构须要经过位置索引，而对象解构须要对应的键！

4.字面量简写

在以往咱们声明一个对象时，若是属性值和以前声明的任何一个变量相同，那也没有什么办法，咱们必须手动给对象进行赋值：

const name = 'Thor';
const age = '35';

const Hero = {
    name: name,
    age: age,
    power: 'hammer',
    haircolor: 'blond'
};
console.log(Hero.name);  // Thor

可是，在ES6中，咱们能够再也不须要这多余的赋值操做，若是属性名相同，能够直接使用！

const name = 'Thor';
const age = '35';

const Hero = {
    name,
    age,
    power: 'hammer',
    haircolor: 'blond'
};
console.log(Hero.name); // Thor

同时，在对象中声明方法时，也能够省略掉匿名函数的function关键字了。方便了很多对吧？ 以上是这篇讨论的一些ES6中的小语法点。固然，ES6的特性远远不止这些，咱们将在下一篇中讨论它更多的特性！包括for of循环，rest参数，spread操做符！