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操作符！

转载于:https://my.oschina.net/u/3724328/blog/1587473