ES6-前世此生（0）

一、ECMAScript是什么？ 和 JavaScript 有着怎样的关系？

1996 年 11 月，Netscape 创造了javascript并将其提交给了标准化组织 ECMA，次年，ECMA 发布 262 号标准文件（ECMA-262）的初版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。

ECMAScript更新了6个版本，最新正式版 ES6（ECMAScript 6）是 JavaScript 语言的下一代标准，早已在 2015 年 6 月正式发布。要问二者之间的关系，能够用 ECMAScript 是 JavaScript 语言的国际标准，JavaScript 是 ECMAScript 的实现这句话来形容。

说的通俗易懂点：若是说设计图是标准，盖好的房子是实现，那么 ECMAScript就是设计图，JavaScript是盖好的房子。

二、历史进化过程

感悟：长路漫漫，吾将上下而求索！

三、ES6兼容性分析

3.1 横向对比

（1）桌面端浏览器对ES2015的支持状况

• Chrome：51 版起即可以支持 97% 的 ES6 新特性。
• Firefox：53 版起即可以支持 97% 的 ES6 新特性。
• Safari：10 版起即可以支持 99% 的 ES6 新特性。
• IE：Edge 15能够支持 96% 的 ES6 新特性。Edge 14 能够支持 93% 的 ES6 新特性。（IE7~11 基本不支持 ES6）

（2）移动端浏览器对ES2015的支持状况

• iOS：10.0 版起即可以支持 99% 的 ES6 新特性。
• Android：基本不支持 ES6 新特性（5.1 仅支持 25%）

（3）服务器对ES2015的支持状况

• Node.js：6.5 版起即可以支持 97% 的 ES6 新特性。（6.0 支持 92%）

3.2 纵向对比

引用地址 https://caniuse.com/#search=es6

引用地址 https://caniuse.com/#search=es5

结论：如今的Chrome浏览器对ES6的支持已经作的至关棒了，可是有些低版本的浏览器仍是不支持ES6的语法，例如IE8及其如下，说的就是你，不用再怀疑。

四、为何学习ES6？

若是把前端开发比做成伐木头，那么ES3是斧头，ES5是钢锯，而ES6则是电锯，随着前端项目日趋复杂和移动端愈来愈主流，Vue、React、Angular等技术栈的大行其道，ES6 成为前端开发人员必须掌握的基本技能。掌握了ES6 不只仅可以更加便捷的开发、大幅度的提升工做效率，更可以为学习Vue、React、Angular等技术栈甚至是NodeJS打下坚实的基础。

说的这么666，那么……

4.1 使用ES6编程，到底好在哪里？

例一：

在ES5中，咱们不得不使用如下方法来表示多行字符串：　

var str ='<div id="ul1">'+
            '<li>青年问禅师：</li>'+
            '<li>“大师终日答疑解惑、普渡众生，如何不为俗物所扰，静心修行？”</li>'+
            '<li>禅师微微一笑：“我天天晚上睡觉前都关机！”</li>'+
        '</div>';

然而在ES6中，仅仅用反引号就能够解决了：　　

var str = `<div id="ul1">
        <li>青年问禅师：</li>
        <li>“大师终日答疑解惑、普渡众生，如何不为俗物所扰，静心修行？”</li>
        <li>禅师微微一笑：“我天天晚上睡觉前都关机！”</li>
  </div>`;

例二：

在ES5中实现对象拷贝效果：

var createAssigner = function(keysFunc, undefinedOnly) {
    return function(obj) {
      var length = arguments.length;
      if (length < 2 || obj == null) return obj;
      for (var index = 1; index < length; index++) {
        var source = arguments[index],
            keys = keysFunc(source),
            l = keys.length;     
        for (var i = 0; i < l; i++) {
          var key = keys[i];
          if (!undefinedOnly || obj[key] === void 0) obj[key] = source[key];
        }
      }
      return obj;
    };
  };
var allKeys = function(obj){
    var keys = [];
    for(var key in obj) keys.push(key);
    return keys;
}
var extend = createAssigner(allKeys);
extend({a:111},{b:222});

在ES6中实现对象拷贝效果：

Object.assign({a:111},{b:222});

一样实现一个对象拷贝效果，用ES5写须要20多行代码，可是用ES6写，只须要 1 行代码！！！

固然，ES6还有不少强大的新特性等着咱们去学习，ES6引入的新特性是ES5没法比拟的！

4.2 ES6的新功能简介

ES6过渡版本，ES4激进被废掉，ES5遗留不少问题，而ES6 兼容性还好，代码简洁，易用。

（1）块级做用域绑定

1 let声明

2 const声明Constant Declarations

3 循环中的块级绑定

4 循环中的函数

（2）函数的新增特性

1 带默认参数的函数

2 默认参数对 arguments 对象的影响

3 默认参数表达式 Default Parameter Expressions

4 未命名参数问题

5 函数中的扩展运算符

（3）全新的函数箭头函数

1 箭头函数语法

2 使用箭头函数实现函数自执行

3 箭头函数中无this绑定No this Binding

4 无arguments绑定

（4）对象功能的扩展

1 对象类别

2 对象字面量的语法扩展

2.1 简写的属性初始化

2.2 简写的方法声明

2.3 在字面量中动态计算属性名

3 新增的方法

3.1 Objectis

3.2 Object assign

（5）字符串功能的加强

1 查找子字符串

2 repeat方法

3 字符串模板字面量

3.1 基本语法

3.2 多行字符串

3.3 字符串置换

3.4 模板标签

3.4.1 什么是模板标签

3.4.2 定义模板标签

（6）解构

1 解构的实用性

2 对象解构

2.1 对象解构的基本形式

2.2 解构赋值表达式

2.3 对象解构时的默认值

2.4 赋值给不一样的变量名

3 数组解构

3.1 数组解构基本语法

3.2 解构表达式

（7）新的基本类型Symbol

1 建立Symbol

2 识别Symbol

3 Symbol做为属性名

4 Symbol属性名的遍历

5 Symbolfor字符串和SymbolkeyForsymbol类型的值

（8）Set数据结构

1 建立Set和并添加元素

2 Set中不能添加剧复元素

3 使用数组初始化Set

4 判断一个值是否在Set中

5 移除Set中的元素

6 遍历Set

7 将Set转换为数组

（9）Map数据结构

1 建立Map对象和Map的基本的存取操做

2 Map与Set相似的3个方法

3 初始化Map

4 Map的forEach方法

（10）迭代器和forof循环

1 循环问题

2 什么是迭代器

3 生成器函数

4 生成器函数表达式

5 可迭代类型和for-of迭代循环

6 访问可迭代类型的默认迭代器

7 自定义可迭代类型

（11）类

1 ES5以前的模拟的类

2 ES6中基本的类声明

2 匿名类表达式

3 具名类表达式

4 做为一等公民的类型

5 动态计算类成员的命名

6 静态成员

7 ES6中的继承

7.1 继承的基本写法

7.2 在子类中屏蔽父类的方法

7.3 静态方法也能够继承

使用ES6以后，能够节约不少开发时间，用来。。。

五、 如何使用ES6的新特性，又能保证浏览器的兼容？

针对 ES6 的兼容性问题，不少团队为此开发出了多种语法解析转换工具，把咱们写的 ES6 语法转换成 ES5，至关于在 ES6 和浏览器之间作了一个翻译官。比较通用的工具方案有 babel，jsx，traceur，es6-shim 等。下一节，咱们将具体讲解该部分的知识。

六、总结

经过本节，咱们了解了ECMAScript的发展进化史，以及ES6的一些新特性。

随着JavaScript应用领域愈来愈广， 以及ES6 优雅的编程风格和模式、强大的功能，愈来愈多的程序正在使用ES6更好地实现。

是否是对学习ES6充满了动力？OK，下节课开始，咱们就讲讲如何搭建ES6的开发环境搭建，进行ES6开发。