ECMAScript 5和ECMAScript6的新特性以及浏览器支持情况
ECMAScript简介:
它是一种由Ecma国际(前身为欧洲计算机制造商协会)制定和发布的脚本语言规范,javascript在它基础上经行了自己的封装。但通常来说,术语ECMAScript和javascript指的是同一个。业界所说的ECMAScript其实是指一种规范,或者说是一个标准。具体点来说,它其实就是一份文档
JS包含三个部分:ECMAScript(核心)、DOM(文档对象模型)、BOM(浏览器对象模型),ECMAScript是js语言的基础。
(1) ECMAScript3
新增了对正则表达式、新控制语句、try-catch异常处理的支持,修改了字符处理、错误定义和数值输出等内容。标志着ECMAScript成为了一门真正的编程语言。
(2) 第四版于2008年7月发布前被废弃。
(3)ECMAScript5
力求澄清第3版中的歧义,并添加了新的功能。新功能包括:原生JSON对象、继承的方法、高级属性的定义以及引入严格模式。
(4) ECMAScript6
是继ES5之后的一次主要改进,增添了许多必要的特性,例如:模块和类以及一些实用特性,Maps、Sets、Promises、生成器(Generators)等。
历史
浏览器支持
一般来说,除了针对个别特性的特殊说明,各大主流浏览器都支持es5,包括
- Chrome 13+
- Firefox 4+
- Safari 5.1*
- IE 9*
其中IE9不支持es的严格模式,从IE10开始支持。Safari 5.1不支持 Function.prototype.bind
IE8只支持defineProperty
、getOwnPropertyDescriptor
的部分特性和JSon的新特性,IE9支持除了严格模式以外的新特性,IE10和其他主流浏览器都支持了。
因此在PC端开发的时候,要注意IE9以下的兼容,移动端开发时,可以比较放心了。
Strict Mode,即所谓的严格模式。在严格模式下,我们不可以使用一个未经声明的变量。以前没有用var
声明的变量,会自动成为全局变量,而在严格模式下,会报错。例:
"use strict"
function foo() {
var testVar = 4;
return testVar;
}
// This causes a syntax error.
testVar = 5; //全局变量
开启严格模式的方法很简单,只需要在文件的顶部写上字符串use strict
即可。当然这需要执行环境支持严格模式。另外由于use strict
其实是一个字符串常量。那么即使遇到不支持严格模式的环境,
这行字符串只会被安全的忽略,不会带来任何的问题。
JSON对象
JSON.parse(jsonstr);
//可以将json字符串转换成json对象 JSON.stringify(jsonobj);
//可以将json对象转换成json对符串
ES5提供一个内置的(全局)JSON对象,可用来序列化( JSON.stringfy
)和反序列化( parse
)对象为JSON格式。其一般性用法如下,
var test = {
"name": "gejiawen",
"age": 22
};
console.log(JSON.strinfy(test)); // '{"name": "gejiawen", "age": 22}'
console.log(JSON.parse('{"name": "larry"}')); // Object {name: "larry"}
JSON对象提供的 parse
方法还提供第二个参数,用于对具体的反序列化操作做处理。比如,
JSON.parse('{"name": "gejiawen", "age": 22, "lucky": "13"}', function(key, value) {
return typeof value === 'string' ? parseInt(value) : value;
});
这里我们在回调函数中对解析的每一对键值对作处理,如果其是一个数字字符串,我们则对其进行 parseInt
操作,确保返回的 value
必定是数值型的。
JSON对象提供的 stringify
方法也会提供第二个参数,用于解析的预处理,同时也会提供第三个参数,用于格式化json字符串。比如,
var o = {
name: 'gejiawen',
age: 22,
lucky: '13'
};
var ret = JSON.stringify(o, function(key, value) {
return typeof value === 'string' ? undefined : value;
}, 4);
console.log(ret);
上面代码在输出时,得到的字符串将不会再呈现一行输出,而是正常的格式化输出,并采用4个space进行格式化。
另外,如果预处理函数的返回值为 undefined
,则此键值对将不会包含在最终的JSON字符串中。所以上面代码最终的结果是,
"{
"age": 22
}"
新增 Object
接口比较常用的有如下几个,
Object.create
Object.defineProperties
Object.keys
新增 Array
接口
对象 | 构造器 | 说明 |
---|---|---|
Array.prototype |
indexOf |
返回根据给定元素找到的第一个索引值,否则返回-1 |
Array.prototype |
lastIndexOf |
方法返回指定元素在数组中的最后一个的索引,如果不存在则返回 -1 |
Array.prototype |
every |
测试数组的所有元素是否都通过了指定函数的测试 |
Array.prototype |
some |
测试数组中的某些元素是否通过了指定函数的测试 |
Array.prototype |
forEach |
让数组的每一项都执行一次给定的函数 |
Array.prototype |
map |
返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组 |
Array.prototype |
filter |
利用所有通过指定函数测试的元素创建一个新的数组,并返回 |
Array.prototype |
reduce |
接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终为一个值 |
Array.prototype |
reduceRight |
接受一个函数作为累加器,让每个值(从右到左,亦即从尾到头)缩减为一个值 |
新增的数组接口中,基本都是比较有用的接口。需要注意的一点是,有的数组方法是不返回新数组的,有的接口是返回一个新数组,就是说使用这些新接口时,需要注意一下方法的返回值。还有一个
Array.isArray()
,用来判断某一对象是否为数组。(typeof
判断的话,返回object
,用instanceof
判断的话,IE
上的返回值不正确)
Function.prototype.bind
bind()方法会创建一个新函数,称为绑定函数.当调用这个绑定函数时,绑定函数会以创建它时传入 bind()方法的第一个参数作为 this,传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。
此方法的用法如下,
fun.bind(thisArg[, arg1[, arg2[, ...]]])
使用 bind
可以为函数自定义 this
指针。它的常见使用场景如下,
this.x = 9;
var module = {
x: 81,
getX: function() {
return this.x;
}
};
module.getX(); // 81
var getX = module.getX;
getX(); // 9, 因为在这个例子中,"this"指向全局对象
// 创建一个'this'绑定到module的函数
var boundGetX = getX.bind(module);
boundGetX(); // 81
Javascript中重新绑定 this
变量的语法还有 call
和 apply
。不过 bind
显然与它们有着明显的不同。 bind
将会返回一个新的函数,而 call
或者 apply
并不会返回一个新的函数,它们将会使用新的 this
指针直接进行函数调用。
ES6的新特性(http://www.cnblogs.com/Wayou/p/es6_new_features.html)
(1)箭头操作符=>:操作符左边为输入的参数,而右边则是进行的操作以及返回的值Inputs=>outputs。
在JS中回调是经常的事,而一般回调又以匿名函数的形式出现,每次都需要写一个function,甚是繁琐。当引入箭头操作符后可以方便地写回调了。请看下面的例子。
var array = [1, 2, 3];
//传统写法
array.forEach(function(v, i, a) {
console.log(v);
});
//ES6
array.forEach(v = > console.log(v));
(2)类的支持--class关键字:JS本身就是面向对象的,ES6中提供的类实际上只是JS原型模式的包装。现在提供原生的class支持后,对象的创建,继承更加直观了,并且父类方法的调用,实例化,静态方法和构造函数等概念都更加形象化。
//类的定义
class Animal {
//ES6中新型构造器
constructor(name) {
this.name = name;
}
//实例方法
sayName() {
console.log('My name is '+this.name);
}
}
//类的继承
class Programmer extends Animal {
constructor(name) {
//直接调用父类构造器进行初始化
super(name);
}
program() {
console.log("I'm coding...");
}
}
//测试我们的类
var animal=new Animal('dummy'),
wayou=new Programmer('wayou');
animal.sayName();//输出 ‘My name is dummy’
wayou.sayName();//输出 ‘My name is wayou’
wayou.program();//输出 ‘I'm coding...’
(3)增强的对象字面量:
具体表现在:
- 可以在对象字面量里面定义原型
- 定义方法可以不用function关键字
- 直接调用父类方法
(4)字符串模板:ES6中允许使用反引号 ` 来创建字符串,此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}。
//产生一个随机数
var num=Math.random();
//将这个数字输出到console
console.log(`your num is ${num}`);
(5)解构
(6)参数默认值,不定参数,拓展参数
(7)let与const 关键字:可以把let看成var,它定义的变量被限定在了特定范围内才能使用,而离开这个范围则无效。const则很直观,用来定义常量,即无法被更改值的变量。
for (let i=0;i<2;i++)console.log(i);//输出: 0,1 console.log(i);//输出:undefined,严格模式下会报错
(8)for of 值遍历:for in 循环用于遍历数组,类数组或对象,ES6中新引入的for of循环功能相似,不同的是每次循环它提供的不是序号而是值。
var someArray = [ "a", "b", "c" ]; for (v of someArray) {
console.log(v);//输出 a,b,c
}
(9)iterator, generator
(10)模块
(11)Proxies
(12)Symbols
(13)Math,Number,String,Object 的新API
(14)Promises
ES6的浏览器支持情况
链接:http://www.xuebuyuan.com/2122607.html
基本上是没有浏览器完全支持的,所以还是不要直接用的好。
但是有转换器 (更准确地说是源代码到源代码的编译器) 可以把ES6转换为被浏览器接受的ES5,比如Babel以及Traceur 之类的项目。其中Babel对 ES6 的支持程度比其它同类更高,而且 Babel 拥有完善的文档和一个很棒的在线交互式编程环境,因此用的比较多。
REFERENCE
- Google traceur online compiler http://google.github.io/traceur-compiler/demo/repl.html
- array destruction http://ariya.ofilabs.com/2013/02/es6-and-destructuring-assignment.html
- class http://www.joezimjs.com/javascript/javascript-prototypal-inheritance-and-what-es6-classes-have-to-say-about-it/
- enhanced object literal http://maximilianhoffmann.com/posts/object-based-javascript-in-es6
- parameters http://globaldev.co.uk/2013/10/es6-part-4/
- let keyword http://globaldev.co.uk/2013/09/es6-part-2/
- for of iterator https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of#Browser_compatibility
- the Iterator protocol https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol
- generators https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*
- ES6 Iterators, Generators, and Iterables http://domenic.me/2013/09/06/es6-iterators-generators-and-iterables/
- proxies http://ariya.ofilabs.com/2013/07/es6-and-proxy.html
- symbols http://tc39wiki.calculist.org/es6/symbols/
- promise http://www.html5rocks.com/en/tutorials/es6/promises/
- 8 cool features in ES6 http://code.tutsplus.com/tutorials/eight-cool-features-coming-in-es6--net-33175 (此文章错误较多)
ECMAScript 5和ECMAScript6的新特性以及浏览器支持情况的更多相关文章
- ECMAScript和JavaScript的区别,ECMAScript发展更新历史,ECMAScript5和ECMAScript6的新特性及浏览器支持情况,ECMAScript 5/ECMAScript 2015正式发布
ECMAScript和JavaScript的区别 ECMA是European Computer Manufacturers Association的缩写,即欧洲计算机制造商协会.欧洲计算机制造商协会是 ...
- atitit.js 各版本 and 新特性跟浏览器支持报告
atitit.js 各版本 and 新特性跟浏览器支持报告 一个完整的JavaScript实现是由以下3个不同部分组成的 •核心(ECMAScript)--JavaScript的核心ECMAScrip ...
- css4激动人心的新特性及浏览器支持度
CSS3的选择器提供了很多像:nth-child这样有用的选择器,并且得到浏览器支持.CSS的第四代 选择器CSS4选择器),经我们带来了更多有用的选择器. 1.否定伪类:not 否定伪类选择器其实在 ...
- 如何给不支持新特性的浏览器打补丁(让老版本IE兼容新特性)
一个非常棒的 JavaScript 框架叫做 Modernizr(http://www.modernizr. com),用于向缺少 HTML5/CSS3特性支持的浏览器打补丁.由 Alexander ...
- ECMASCRIPT 6中字符串的新特性
本文将覆盖在ECMAScript 6 (ES6)中,字符串的新特性. Unicode 码位(code point)转义 Unicode字符码位的长度是21位[2].而JavaScript的字符串,是1 ...
- ECMAscript6(ES6)新特性语法总结(一)
ES6/ES2015,,在ES5的基础上扩展了很多新的功能,在使用的时候要慎重,因为有一部分js代码在部分浏览器是不兼容的,但是所有写在服务器端的代码基本上都支持ES6的写法. 新特性: 一.开启严格 ...
- 利用HTML5新特性改变浏览器地址后不刷新页面
原文:http://www.cnblogs.com/xuchengzone/archive/2013/04/18/html5-history-pushstate.html 作为一个程序员,上Git ...
- ECMAScript 6 中的一些新特性
1.箭头函数,直接写出来v =>看不出来什么,但是跟传统写法一比较,很直观地就能看出v =>是代替了匿名函数 function(v)的写法,{}与逻辑照旧,但是要注意,=与>之间不能 ...
- ECMAScript6常用新特性总结
一.let声明变量 1.基本用法: ES6 新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. 如下代码: { let a = 10; var ...
随机推荐
- ELASTICSEARCH健康red的解决
今天惯例看统计报表, 才发现es集群悲剧了......昨天下午到今天早上, 持续报错, 写了1G的错误日志>_<#(暂无监控....) 当前状态: 单台机器, 单节点(空集群), 200W ...
- JAVA并发编程学习笔记------多线程调优
1. 多线程场景下尽量使用并发容器代替同步容器 (如ConcurrentHashMap代替同步且基于散列的Map, 遍历操作为主要操作的情况下用CopyOnWriteArrayList代替同步的Lis ...
- 设置User Agent
公司的前端要给项目的webview加一个区分,用来区别是iOS端访问.android访问还是在浏览器访问的,说是要加一个User Agent ,前端根据不同信息做适配,和我说来一头雾水,后来经过开发同 ...
- TapTap推广统计逻辑
当我们在Taptap上访问某款游戏时,比如https://www.taptap.com/app/34762,taptap会记录下这次访问,它是怎么做的呢. 首先,用记事本打开这个网址,在head部分看 ...
- Spring Security构建Rest服务-1100-单机Session管理
Session失效时间: springboot配置session失效时间,只需要在application.properties里配置 #session超时时间,低于60秒按60秒server.sess ...
- SpringMVC+AJAX+JSON
在做一个ajax发送json到springmvc的控制层,控制层的对象中有一个List集合,ajax调用总是报415错误.发现了一个一直没有注意到的问题,借机记录一下. (细节部分都忽略了,在最后的d ...
- 容器挂载volume出现“Permission denied”的问题定位解决
使用如下系统(centos)运行容器后,在容器内的挂载目录内执行ls命令出现了“Permission denied”的错误 Linux localhost.localdomain 3.10.0-862 ...
- Go 程序执行顺序
在一个 go 程序中通常包含:包.常量.变量.init().main()等元素,如果同时存在多个包,包之间存在依赖关系,每个包中存在多个 init 函数,每个文件中存在多个 init 函数,那么问题来 ...
- SpringBoot入门 (三) 日志配置
上一篇博文记录了再springboot项目中读取属性文件中配置的属性,本文学习在springboot项目中记录日志. 日志记录在项目中是很常见的一个功能了,对排查问题有很大帮助,也可以做分类分析及统计 ...
- 【LeetCode题解】231_2的幂(Power-of-Two)
目录 描述 解法 1:判断整数 \(x\) 的二进制表示中是否只有一位为1 实现方式 1:除以 2 Java 实现(非递归) Python 实现(非递归) Java 实现(递归) Python 实现( ...