ECMAScript 5

2016年11月08日Web前端

虽然ES6已经出现并开始使用,可是对于还得兼容IE8+的开发者,更深入的了解下ES5也是不错的。当然,部分ES5的部分用法也是挺不错的。

简介

ECMAScript 5.1 (或 ES5) 是ECMAScript(基于JavaScript的规范)标准的修正。ES5通过对现有JavaScript方法添加语句和原生ECMAScript对象做合并实现标准化。完整版可查看http://www.ecmascript.org/

浏览器兼容性

  • Internet Explorer 9+
  • Firefox 4+
  • Chrome 13+
  • Safari 5.1+

注:IE9不支持严格模式,IE10开始支持

JSON

ES5提供一个全局的JSON对象,用来序列化(JSON.stringify)和反序列化(JSON.parse)对象为JSON格式。

JSON.parse(text [, reviver])

var str = '{"a": 1, "b": 2}';
var obj = JSON.parse(str);
console.log(obj); // Object {a: 1, b: 2}

可选的参数是一个带key和value的回调函数,可用与过滤与转化值。

var str = '{"a": 1, "b": 2}';
var obj = JSON.parse(str, function(key, value){
    if (value == 2){
        return value + 10;
    } else {
        return value; 
    }
});
console.log(obj); // Object {a: 1, b: 12}

JSON.stringify(value [, replacer [, space]])

var obj = {a: 1, b: 2};
var str = JSON.stringify(obj);
console.log(typeof str);  // string
console.log(str);         // {"a":1,"b":2}

第二个参数是一个回调函数,用于过滤或转化我们需要的值。

var obj = {a: 1, b: 2};
var str = JSON.stringify(obj, function(key, value) {
    if (value == 2) {
        return undefined;
    } else {
        return value;
    }
});
console.log(str); // {"a":1}

对于我们不需要的字段,我们可以设置undefined,这样在最后的字符串中,就不会含有该字段。space参数可以是个数字,表明了作缩进的JSON字符串或字符串每个水平上缩进的空格数。如果参数是个超过10的数值,或是超过10个字符的字符串,将导致取数值10或是截取前10个字符。

var obj = {a: 1, b: 2};
var str = JSON.stringify(obj, function(key, value) {
    if (value == 2) {
        return value + 10;
    } else {
        return value;
    }
}, 2);
console.log(str);/**
                  *{
                  *  "a": 1,
                  *  "b": 12
                  *}
                  */

Date

Date.now() // 获取当前时间距1970.1.1 00:00:00的毫秒数。相当与new Date().getTime()。

Date.now(); // 1478606984930

Date.prototype.toJSON() // 根据ISO8601生成时间字符串。

(new Date()).toJSON(); // "2016-11-08T12:10:21.432Z"

String

String.prototpye.trim()

该方法用于去掉字符串两头的空白符和换行符。

' df  fd '.trim(); // "df  fd"

字符订阅

'abcdef'[2];  //  "c"

Function.prototype.bind(thisArg [, arg1 [, arg2, …]])

为了指定当前函数的上下文对象和运行参数,该函数创建一个新的函数,保留给定的this对象和运行参数。

var obj = {
    name: 'aa'
};
function consoleName(arg1) {
    console.log(this.name + arg1);
}
var showName = consoleName.bind(obj, 'haha');
showName(); // aahaha

bind使得consoleName函数的this永远指向obj,所以以后每次调用showName函数时,都会输出这个结果。

严格模式

在JS文件或是函数的顶部添加"use strict",可启用严格模式(从开始写的地方算起)。因为"use strict"就是个字符串,因此其会被旧版浏览器安全地忽视。

"use strict"; // 严格模式

在严格模式下,以往不会出错的代码也会抛出错误。例如:

  • 未声明的变量赋值抛出一个ReferenceError, 而不是创建一个全局变量。
  • 不止一次对对象字面量分配相同的属性会抛出SyntaxError。
  • 使用with语句抛出SyntaxError。

Object

详细查看ECMAScript5 Object新增的方法

  • Object.create
  • Object.defineProperty
  • Object.defineProperties
  • Object.getOwnPropertyDescriptor
  • Object.getOwnPropertyNames
  • Object.preventExtensions
  • Object.isExtensible
  • Object.seal
  • Object.isSealed
  • Object.freeze
  • Object.isFrozen
  • Object.getPrototypeOf

Array

详细查看ECMAScript5 Array新增的方法

  • Array.isArray
  • Array.prototype.indexOf
  • Array.prototype.lastIndexOf
  • Array.prototype.every
  • Array.prototype.some
  • Array.prototype.forEach
  • Array.prototype.map
  • Array.prototype.filter
  • Array.prototype.reduce
  • Array.prototype.reduceRight