ES6的前世今生

2019-09-03 18:04:56 浏览数 (1)

1、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是盖好的房子。

2、历史进化过程

时间

版本

解释

2009.12

S 5.0

ES5正式发布,同时公布了JavaScript.next也就是后来的ES 6.0

2011.06

ES 5.1

ES5.1 版发布,并且成为 ISO 国际标准(ISO/IEC 16262:2011)

2013.03

ES 6.0

ES6草案定稿,不再添加新功能。新的功能设想将被放到 ECMAScript 7。

2013.12

ES 6.0

ES6草案发布,然后是 12 个月的讨论期,听取各方反馈。

2015.06

ES 6.0

ES6 正式通过,成为国际标准。从 2000 年算起,这时已经过去了 15 年。JavaScript.next开始指向ES7.0

感悟:长路漫漫,吾将上下而求索!

3、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及其以下,说的就是你,不用再怀疑。

4、为什么学习ES6?

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

说的这么666,那么……

4.1 使用ES6编程,到底好在哪里?

例一:

在ES5中,我们不得不使用以下方法来表示多行字符串: 

代码语言:javascript复制
var str ='<div id="ul1">' 
            '<li>青年问禅师:</li>' 
            '<li>“大师终日答疑解惑、普渡众生,如何不为俗物所扰,静心修行?”</li>' 
            '<li>禅师微微一笑:“我每天晚上睡觉前都关机!”</li>' 
        '</div>';

然而在ES6中,仅仅用反引号就可以解决了:  

代码语言:javascript复制
  var str = `<div id="ul1">
        <li>青年问禅师:</li>
        <li>“大师终日答疑解惑、普渡众生,如何不为俗物所扰,静心修行?”</li>
        <li>禅师微微一笑:“我每天晚上睡觉前都关机!”</li>
  </div>`;

例二:

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

代码语言:javascript复制
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中实现对象拷贝效果:

代码语言:javascript复制
Object.assign({a:111},{b:222});

同样实现一个对象拷贝效果,用ES5写需要20多行代码,但是用ES6写,只需要 1 行代码!!!当然,ES6还有很多强大的新特性等着我们去学习,ES6引入的新特性是ES5无法比拟的!

4.2 ES6的新功能简介

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

(1)块级作用域绑定
代码语言:javascript复制
1 let声明 
2 const声明Constant Declarations 
3 循环中的块级绑定 
4 循环中的函数
(2)函数的新增特性
代码语言:javascript复制
1、带默认参数的函数 
2、默认参数对 arguments 对象的影响 
3、默认参数表达式 Default Parameter Expressions 
4、未命名参数问题 
5、函数中的扩展运算符
(3)全新的函数箭头函数
代码语言:javascript复制
1、箭头函数语法
2、使用箭头函数实现函数自执行 
3、箭头函数中无this绑定No this Binding
4、无arguments绑定
(4)对象功能的扩展
代码语言:javascript复制
1、对象类别 
2、对象字面量的语法扩展
    2.1 简写的属性初始化 
    2.2 简写的方法声明
    2.3 在字面量中动态计算属性名 
3、新增的方法 
    3.1 Objectis 
    3.2 Object assign
(5)字符串功能的增强
代码语言:javascript复制
1、查找子字符串 
2、repeat方法 
3、字符串模板字面量 
   3.1 基本语法 
   3.2 多行字符串 
   3.3 字符串置换 
   3.4 模板标签 
      3.4.1 什么是模板标签 
      3.4.2 定义模板标签
(6)解构
代码语言:javascript复制
1、解构的实用性
2、对象解构 
    2.1 对象解构的基本形式 
    2.2 解构赋值表达式
    2.3 对象解构时的默认值
    2.4 赋值给不同的变量名 
3、数组解构
    3.1 数组解构基本语法
    3.2 解构表达式
(7)新的基本类型Symbol
代码语言:javascript复制
1、创建Symbol 
2、识别Symbol 
3、Symbol作为属性名 
4、Symbol属性名的遍历
 5、Symbolfor字符串和SymbolkeyForsymbol类型的值
(8)Set数据结构
代码语言:javascript复制
1、创建Set和并添加元素 
2、Set中不能添加重复元素 
3、使用数组初始化Set
4、判断一个值是否在Set中
5、移除Set中的元素
6、遍历Set
7、将Set转换为数组
(9)Map数据结构
代码语言:javascript复制
1、创建Map对象和Map的基本的存取操作 
2、Map与Set类似的3个方法 
3、初始化Map
4、Map的forEach方法
(10)迭代器和forof循环
代码语言:javascript复制
1、循环问题 
2、什么是迭代器 
3、生成器函数
4、生成器函数表达式
5、可迭代类型和for-of迭代循环
6、访问可迭代类型的默认迭代器
7、自定义可迭代类型
(11)类
代码语言:javascript复制
1、ES5之前的模拟的类 
2、ES6中基本的类声明 2 匿名类表达式 
3、具名类表达式
4、作为一等公民的类型
5、动态计算类成员的命名 
6、静态成员
7、ES6中的继承 
     7.1 继承的基本写法
     7.2 在子类中屏蔽父类的方法 
     7.3 静态方法也可以继承

使用ES6之后,可以节约很多开发时间,用来。。。

5、 如何使用ES6的新特性,又能保证浏览器的兼容?

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

6、总结

通过本节,我们了解了ECMAScript的发展进化史,以及ES6的一些新特性。

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

0 人点赞