走进ECMAScript6

ECMAScript6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言 。那么，它到底跟JavaScript是什么关系呢？

1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。

该标准从一开始就是针对 JavaScript 语言制定的，但是之所以不叫 JavaScript，有两个原因。一是商标，Java 是 Sun 公司的商标，根据授权协议，只有 Netscape 公司可以合法地使用 JavaScript 这个名字，且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA，不是 Netscape，这样有利于保证这门语言的开放性和中立性。、

摘自：ECMAScript 入门

所以，ECMAScript 就相当于一个抽象类，定义了一系列的规范，而JavaScript就是继承了EMCAScript抽象类的具体实现。

ES6又是JavaScript的最新规范，定义了一些之前没有的操作（可以类比从Java7过渡到Java8），这些操作被广泛应用于主流前端框架：Vue、Angular、React等等，学会它们也是理解框架的重要一环，赶快来试试吧！

解构

在ES6中，如果需要拿取已知数组的值可以直接通过声明的方式，而不需要先拿到数组，再进行循环遍历：

对数组操作很模糊的同学请左转：JavaScript中的常用数组操作

function breakfast() {
    return ['1','2','3'];
}
//之前的数组遍历：
let arr = breakfast();
arr.forEach(function (v,i,r) {
    console.log(v);
})
//ES6写法：
let [one,two,three] = breakfast();
console.log(one,two,three); //1 2 3

解构还可以用于对象中：

function lunch() {
    return {
            one: '1',
            two: '2',
            three: '3'
           };
}
//解析对象
let obj = lunch();
console.log(obj.one,obj.two,obj.three)

// ES6写法，注意此处的映射顺序
let {one: One,two: Two,three: Three} = lunch();
console.log(One,Two,Three);// 1 2 3

模板字符串

对于需要拼接的变量可以直接通过${变量名}插入进去而无需字符串拼接，减少错误：

有Spring框架内味儿了。。。

let dessert = '蛋糕',drink = '牛奶';
//注意此处的符号 可不是单引号哦
let breakfast = `今天吃了${dessert},喝了${drink}`;
console.log(breakfast);// 今天吃了蛋糕,喝了牛奶

函数

1.默认函数参数值

可以直接在方法的形参中指定默认值，不传值的时候使用：

function breakfast(dessert = 'cake',drink = 'tea') {
    //模板字符串再次出现，还记得吗？
    return `${dessert} ${drink}`
}
console.log(breakfast()) //cake tea

有没有想过这个问题，如果我没有默认值，也不传值会输出什么？

undefined，因为在JavaScript中未定义的变量都被称为undefined。啊？那为什么不是Null呢？二者的区别是什么呢？

出门拐弯，不送了：JavaScript中的数据类型

2.可变参数列表

被...定义过的就表示参数可变，所谓可变就是你传几个我接收几个，都给你存在数组中：

function breakfast(dessert = 'cake',drink = 'tea',...foods) {
    console.log(dessert,drink,foods);
}
console.log(breakfast('cookie','coke','apple','peach')) // cookie coke (2) ["apple", "peach"]

哦~ 会了！跟Java可变参数一样，举一反三一下，Java中这种重载的情况会优先调用m1，js是不是同样呢？

public static void main(String[] args) {
     m1(1,2,"aaa","bbb");
}
static void m1(int i1,int i2,String s1,String s2){
     System.out.println("我是i1");
}
static void m1(int i1,int i2,String... args){
     System.out.println("我是i2");
}

想啥呢兄弟，**JavaScript是不原生支持重载的！**它一直都是有啥传过来就接收啥：

JavaScript可以动态的实现重载，此处就不展开讲啦。

3.箭头函数

可以通过箭头函数来简化方法的定义（号称：小Lambda表达式 - - 滑稽）：

let breakfast = function(dessert,drink){
    return dessert + drink;
}

let breakfast = (dessert,drink) => {
    return dessert + drink;
};

对象

1.对象表达式

之前在JavaScript中定义对象：

let dessert = 'cake',drink = 'coke';
let food = {
    dessert: dessert,
    drink: drink,
    breakfast: function () {
        return 0;
    }
}
console.log(food);// {dessert: "cake", drink: "coke", breakfast: ƒ}

ES6简化了JavaScript中对象成员的定义，看到别人这么写别再懵了：

let dessert = 'cake',drink = 'coke';let food = {    dessert,    drink,    breakfast(){        return 0;    }}console.log(food);// {dessert: "cake", drink: "coke", breakfast: ƒ}

2.对象属性赋值

此处列出了给food对象新增一个属性的三种方式：

let food = {};let dessert = 'dessert';// 属性存在，就修改；不存在就新增food.dessert = 'cake';food['dessert'] = 'cake';food[dessert] = 'cake';

modules

在ES6中，可以把当前页面想要复用的东西抽出一个模块并导出（export），在另外一个页面导入（import）即可使用。

此处的输出效果需要借助打包工具（webpack）才能将其解析出来，不懂也没关系，随后的Vue中组件的复用还会提到，我们只需要了解这个功能是来自于ES6就好啦。

导出模块：

// 需要借助其他工具 webpacklet fruit = 'apple';let dessert = 'cake';function dinner(fruit,dessert) {    console.log(`${fruit} ${dessert}`)}export {    fruit,    dessert,    dinner as supper}// 默认模块导入时不需要使用{}export default {    dinner}

导入模块：

// 两种导入方式import {fruit,dessert} from "./04module";import * as chef from "./04module";console.log(fruit,dessert);