写该博客的原因主要是为了让自己再巩固所学知识与记录,方便以后查阅。更勉励未来的自己每周坚持更新至少写两篇博客(去转载也好啊,嘿嘿嘿)!
最近很多框架或者说git上的一些项目介绍都会介绍说使用了ES5、ES6的语法,甚至今年开始有的还介绍说用了ES7了,那我们就来看下这些ES5、6、7系列都需要掌握哪些知识点。今天我们就先来掌握下ES5与我们写的常规的js的特性。
ES5通过对现有JavaScript方法添加语句和原生ECMAScript对象做合并实现标准化。ES5还引入了一个语法的严格变种,被称为”严格模式(strict mode)”。
关于完整列表:请参考官方ECMAScript语言规范;
关于兼容性问题:目前五大浏览器都对ES5兼容,具体可以查看Juriy Zaytsev很赞的 ECMAScript 5 兼容性表。
ES5总结来说,新的特性就是如下5点:
1、严格模式——use strict
严格模式(“use strict”)是一种限制性更强语言变种的方式,简单点讲就是严格检查语法、拼写等规则,比如你少了结束符分号(;)就会报错或者直接使用未声明的变量(在非严格模式中,js使用为使用未声明变量,系统会将其创建成一个全局变量)也会报错。使用的方法很简单,在JS文件或是函数的顶部添加"use strict"
即可启用严格模式。因为"use strict"
就是个字符串,因此其会被旧版浏览器安全地忽视。我们来举个栗子:
"use strict";
function strict(){ "use strict"; //... }
2、提供全局JSON对象——JSON.stringify/JSON.parse;
大家经常使用的序列化(JSON.stringify
)和反序列化(JSON.parse)对象为JSON格式。其实也是ES5提供一个全局的JSON
对象。(对于老的浏览器可以考虑使用json2.js插件来实现相同的功能)。
JSON.parse(text [, reviver])
JSON.parse反序列化的方法接受文本(JSON格式)转化为JSON对象,其中第二个参数是一个回调函数,主要是用来过滤返回值。
如果我们要确保解析的值是个整数,我们可以使用reviver方法。来举个栗子:
var result = JSON.parse('{"a": 1, "b": "2"}', function(key, value){ if (typeof value == 'string'){ return parseInt(value); } else { return value; } }) >> result.b 2
JSON.stringify(value [, replacer [, space]])
如果我们需要改变值字符串化的方式,或是对我们选择的提供过滤(说白了也是过滤返回值),我们可以将其传给replacer函数。栗子,我们想过滤出即将被字符串化的对象中值大于18的值的属性:
var nums = { "first": 17, "second": 20, "third": 13 } var luckyNums = JSON.stringify(nums, function(key, value){ if (value > 18) { return undefined; } else { return value; } }); >> luckyNums '{"first": 17, "third": 13}'
上面的代码中你会发现满足条件时给的是“undefined”的值,那为何结果里面没有undefined呢??其实是这样子的,如果replacer方法返回undefined, 则键值对就不会包含在最终的JSON中。最后的那个space参数个人感觉比较鸡肋,只是用来作返回结果的可读性帮助(缩进方式)。space参数可以是个数字,表明了作缩进的JSON字符串或字符串每个水平上缩进的空格数。如果参数是个超过10的数值,或是超过10个字符的字符串,将导致取数值10或是截取前10个字符。
var luckyNums = JSON.stringify(nums, function(key, value) { if (value> 20) { return undefined; } else { return value; } }, 2); >> luckyNums '{ "first":7, "third":14 }'
3、附加对象——添加到Object上的构造器
Object.getPrototypeOf Object.getOwnPropertyDescriptor Object.getOwnPropertyNames //几乎相同Object.keys但返回对象的所有属性名称(不只是可枚举的) Object.create //创建一个新对象,其原型等于proto的值 Object.defineProperty Object.defineProperties Object.seal //密封对象可防止其他代码删除或更改任何对象属性的描述符,以及添加新属性 Object.isSealed //密封对象可防止其他代码删除或更改任何对象属性的描述符,以及添加新属性 Object.freeze Object.preventExtensions //关闭可扩展性可能会阻止新属性添加到对象,锁定一个对象,防止属性增加。返回对象 Object.isFrozen //冻结物体几乎与密封物体相同,但是添加了不可修改的属性 Object.isExtensible //关闭可扩展性可能会阻止新属性添加到对象,确定对象当前可扩展性的一种方法,返回bool Object.keys //返回表示对象的所有可枚举属性名称的字符串数组 Object.hasOwnProperty //判断是否拥有某个属性
这些新增的好处之一是对象的属性有了更多控制,例如哪些是允许被修改的,哪些是可以枚举的,哪些是可以删除的等。要用的时候直接拿起来用就行了。
4、额外的数组——添加到Arrayprototype对象上
Array.prototype.indexOf //测试一个元素是否存在于一个集合中 Array.prototype.lastIndexOf //类似indexOf,除了它从数组的末尾开始搜索元素 Array.prototype.every //集合中的所有项目是否满足指定的条件 Array.prototype.some //集合中的某些或所有项目是否满足指定的条件 Array.prototype.forEach(function(item,index,Array)) Array.prototype.map //原始数组的转换或映射 Array.prototype.filter //过滤 Array.prototype.reduce //将一个数组减少为一个值 reduce(function (previous, current, index, array),回调函数接受四个参数:上一个值,当前值,索引,以及数组本身 Array.prototype.reduceRight //将一个数组减少为一个值,工作方式与以下相同reduce,除了它从最后处理数组之外 Array.isArray //直接将方法写在了构造器上,判断数组
同上,要用的时候直接拿来用就行
5、Function.prototype.bind(thisArg [, arg1 [, arg2, …]])
Function.prototype.bind
返回一个新的函数对象,该函数对象的this绑定到了thisArg
参数上。其实就是改变this对象的绑定,这个bind与apply功能比较近,也是很多公司喜欢拿来笔试或面试的题目。下次我们专门写一篇比较介绍下吧!
参考学习张大佬的博客:http://www.zhangxinxu.com/wordpress/2012/01/introducing-ecmascript-5-1/