ECMAScript5和ECMAScript6的新特性及浏览器支持情况

ECMAScript第六版已经于2015年发布,某些浏览器已经开始支持ES6了,这篇文章整理一下ES5以及ES6的新特性。

ECMAScript简介

它是一种由Ecma国际(前身为欧洲计算机制造商协会)制定和发布的脚本语言规范,JavaScript在它的基础上进行了自己的封装。但其实通常来说,术语ECMAScriptJavaScript指的是同一个东西。
JS包含三个部分:ECMAScript(核心)DOM(文档对象模型)BOM(浏览器对象模型)ECMAScriptJS语言的基础。
ECMAScript的最新版是第六版ECMAScript 6,于2015年6月17日发布,截止发布日期,JavaScript的官方名称是ECMAScript 2015,是当前最新的正式规范。

ECMAScript的各个版本:(从第三版开始说)
(1) 第三版ECMAScript3新增了对正则表达式、新控制语句、try-catch异常处理的支持,修改了字符处理、错误定义和数值输出等内容。标志着ECMAScript成为了一门真正的编程语言。
(2) 第四版于2008年7月发布前被废弃。
(3) 第五版ECMAScript5力求澄清第3版中的歧义,并添加了新的功能。新功能包括:原生JSON对象、继承的方法、高级属性的定义以及引入严格模式。
(4) 第六版ECMAScript6是继ES5之后的一次主要改进,增添了许多必要的特性,例如:模块和类以及一些实用特性,Maps、Sets、Promises、生成器(Generators)等。

ECMAScript5的新特性

参考链接:http://www.tuicool.com/articles/vMv6b2z
并不是所有浏览器都完全支持ES5的新特性,比如低版本的IE,但是其他的主流浏览器都支持了,其中IE9不支持ES的严格模式,从IE10开始支持。Safari 5.1不支持Function.prototype.bind。这也就是说,在移动端可以比较放心地使用ES5。
(1)严格模式
Strict Mode, 即所谓的严格模式。严格模式的意义是为了提供一种更佳良好错误检查机制,让你规避掉一些语言本身的bad point。
开启严格模式的方法很简单,只需要在文件的顶部写上字符串 use strict即可。当然这需要执行环境支持严格模式。另外由于use strict其实是一个字符串常量。那么即使遇到不支持严格模式的环境,这行字符串只会被安全的忽略,不会带来任何的问题。
比如在严格模式下,我们不可以使用一个未经声明的变量。以前没有用var声明的变量,会自动成为全局变量,而在严格模式下,会报错。
还有另一些会出现问题的地方,附链接:
http://www.jb51.net/article/78974.htm
(2)JSON对象
JSON.parse(jsonstr); //可以将json字符串转换成json对象
JSON.stringify(jsonobj); //可以将json对象转换成json对符串
(3)新增 Object接口

对象构造器说明
ObjectgetPrototypeOf返回对象的原型
ObjectgetOwnPropertyDescriptor返回对象自有属性的属性描述符
ObjectgetOwnPropertyNames返回一个数组,包括对象所有自有属性名称集合(包括不可枚举的属性)
Objectcreate创建一个拥有置顶原型和若干个指定属性的对象
ObjectdefineProperty给对象定义一个新属性,或者修改已有的属性,并返回
ObjectdefineProperties在一个对象上添加或修改一个或者多个自有属性,并返回该对象
Objectseal锁定对象。阻止修改现有属性的特性,并阻止添加新属性。但是可以修改已有属性的值。
Objectfreeze冻结对象,阻止对对象的一切操作。冻结对象将永远不可变。
ObjectpreventExtensions让一个对象变的不可扩展,也就是永远不能再添加新的属性。
ObjectisSealed判断对象是否被锁定
ObjectisFrozen判断对象是否被冻结
ObjectisExtensible判断对象是否可以被扩展
Objectkeys返回一个由给定对象的所有可枚举自身属性的属性名组成的数组

比较常用的有:

  • Object.create
  • Object.defineProperties
  • Object.keys

(4)新增Array接口

对象构造器说明
Array.prototypeindexOf返回根据给定元素找到的第一个索引值,否则返回-1
Array.prototypelastIndexOf方法返回指定元素在数组中的最后一个的索引,如果不存在则返回 -1
Array.prototypeevery测试数组的所有元素是否都通过了指定函数的测试
Array.prototypesome测试数组中的某些元素是否通过了指定函数的测试
Array.prototypeforEach让数组的每一项都执行一次给定的函数
Array.prototypemap返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组
Array.prototypefilter利用所有通过指定函数测试的元素创建一个新的数组,并返回
Array.prototypereduce接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终为一个值
Array.prototypereduceRight接受一个函数作为累加器,让每个值(从右到左,亦即从尾到头)缩减为一个值

这些都是比较常用的,另外,还有一个 Array.isArray(),用来判断某一对象是否为数组。(typeof判断的话,返回object,用instanceof判断的话,IE上的返回值不正确)
(5)Function.prototype.bind
bind()方法会创建一个新函数,称为绑定函数.当调用这个绑定函数时,绑定函数会以创建它时传入bind()方法的第一个参数作为 this,传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。
这个方法可以改变this的指向,为函数自定义 this指针。
Javascript中重新绑定 this变量的语法糖还有 call和 apply 。不过 bind显然与它们有着明显的不同。 bind将会返回一个新的函数,而 call或者 apply并不会返回一个新的函数,它们将会使用新的 this指针直接进行函数调用。

ES5的浏览器支持情况

http://kangax.github.io/compat-table/es5/
http://www.xuebuyuan.com/2122607.html
从这上面看来,IE8只支持definePropertygetOwnPropertyDescriptor的部分特性和JSon的新特性,IE9支持除了严格模式以外的新特性,IE10和其他主流浏览器都支持了。
因此在PC端开发的时候,要注意IE9以下的兼容,移动端开发时,可以比较放心了

ES6的新特性

(1)箭头操作符=>
(2)类的支持–class关键字
(3)增强的对象字面量
(4)字符串模板
(5)解构
(6)参数默认值,不定参数,拓展参数
(7)let与const 关键字
(8)for of 值遍历
(9)iterator, generator
(10)模块
(11)Proxies
(12)Symbols
(13)Math,Number,String,Object 的新API
(14)Promises
新特性太多,就不一一详细地写了,具体请看参考文章链接:
http://www.cnblogs.com/Wayou/p/es6_new_features.html

ES6的浏览器支持情况

链接:
http://www.xuebuyuan.com/2122607.html
http://kangax.github.io/compat-table/es6/
可以看出来,基本上是没有浏览器完全支持的,所以还是不要直接用的好。
但是有转换器 (更准确地说是源代码到源代码的编译器) 可以把ES6转换为被浏览器接受的ES5,比如Babel以及Traceur 之类的项目。其中Babel对 ES6 的支持程度比其它同类更高,而且 Babel 拥有完善的文档和一个很棒的在线交互式编程环境,因此用的比较多。

    原文作者:初夏_summer
    原文地址: https://www.jianshu.com/p/b6d76160889d
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞