资讯专栏INFORMATION COLUMN

ES6-前世今生(0)

LeviDing / 2520人阅读

摘要:更新了个版本,最新正式版是语言的下一代标准,早已在年月正式发布。基本不支持移动端浏览器对的支持情况版起便可以支持的新特性。比较通用的工具方案有,,,等。

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、历史进化过程

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

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中,我们不得不使用以下方法来表示多行字符串: 

var str ="
"+ "
  • 青年问禅师:
  • "+ "
  • “大师终日答疑解惑、普渡众生,如何不为俗物所扰,静心修行?”
  • "+ "
  • 禅师微微一笑:“我每天晚上睡觉前都关机!”
  • "+ "
    ";

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

        var str = `
  • 青年问禅师:
  • “大师终日答疑解惑、普渡众生,如何不为俗物所扰,静心修行?”
  • 禅师微微一笑:“我每天晚上睡觉前都关机!”
  • `;

    例二:

    在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之后,可以节约很多开发时间,用来。。。


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

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

    6、总结

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

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

    是不是对学习ES6充满了动力?OK,下节课开始,我们就讲讲如何搭建ES6的开发环境搭建,进行ES6开发。

    文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

    转载请注明本文地址:https://www.ucloud.cn/yun/109308.html

    相关文章

    • JavaScript异步流程控制的前世今生

      摘要:后面跟着的应该是一个对象其他返回值也可以,只是会立即执行捕获错误参考文章函数的含义与用法 JavaScript异步流程控制的前世今生 showImg(https://segmentfault.com/img/remote/1460000012892876?w=600&h=338); javascript在设计之初.为了避免资源管理复杂问题(多个线程同时操作dom,以哪个为准),因此被设...

      刘明 评论0 收藏0
    • React Mixin 的前世今生

      摘要:但非常不幸,并不原生支持。这个单词相信都很熟悉,高阶函数在函数式编程是一个基本概念,它描述的是这样一种函数,接受函数作为输入,或是输出一个函数。比如常用的工具方法都是高阶函数。恰与的定义完全一致。这种不同很可能会导致问题的产生。 在 React component 构建过程中,常常有这样的场景,有一类功能要被不同的 Component 公用,然后看得到文档经常提到 Mixin(混入) ...

      姘存按 评论0 收藏0
    • Web技术的前世今生(二)

      摘要:前言我是,如果你还不认识我,不妨先看看技术的前世今生一平静的生活已经有一段日子了。传送门技术的前世今生一技术的前世今生三 前言:我是JavaScript,如果你还不认识我,不妨先看看《Web技术的前世今生(一)》 平静的生活已经有一段日子了。 这一天,HTML大哥面露不悦地走过来问我: Js,你是打算和我们分家吗? 大哥,您这说的哪里话,我什么地方做的不对么?我一脸茫然地回答道。 哼,...

      Stardustsky 评论0 收藏0
    • Web技术的前世今生(二)

      摘要:前言我是,如果你还不认识我,不妨先看看技术的前世今生一平静的生活已经有一段日子了。传送门技术的前世今生一技术的前世今生三 前言:我是JavaScript,如果你还不认识我,不妨先看看《Web技术的前世今生(一)》 平静的生活已经有一段日子了。 这一天,HTML大哥面露不悦地走过来问我: Js,你是打算和我们分家吗? 大哥,您这说的哪里话,我什么地方做的不对么?我一脸茫然地回答道。 哼,...

      hyuan 评论0 收藏0
    • Web技术的前世今生(二)

      摘要:前言我是,如果你还不认识我,不妨先看看技术的前世今生一平静的生活已经有一段日子了。传送门技术的前世今生一技术的前世今生三 前言:我是JavaScript,如果你还不认识我,不妨先看看《Web技术的前世今生(一)》 平静的生活已经有一段日子了。 这一天,HTML大哥面露不悦地走过来问我: Js,你是打算和我们分家吗? 大哥,您这说的哪里话,我什么地方做的不对么?我一脸茫然地回答道。 哼,...

      justjavac 评论0 收藏0

    发表评论

    0条评论

    最新活动
    阅读需要支付1元查看
    <