ECMAScript5 用法总结

浏览器支持   

       如今虽然已经出了ES6的规范，可是各大浏览器兼容性还有待提升。因此如今咱们平时写的js代码仍是多以ES5为规范。时至今日，除了一些较低版本的浏览器，各大主流浏览器基本都实现了对ES5的支持。

兼容性查看

• Chrome 13+
• Firefox 4+
• Safari 5.1* （Safari5.1 不支持 Function.prototype.bind）
• IE 9* （IE9不支持严格模式，IE10开始支持）

 

ES5新特性简介

       如下对ES5新增的特性或者API做一些简要介绍。

一、严格模式（Strict Mode）

       Strict Mode, 即所谓的严格模式。严格模式的意义是为了提供一种更佳良好错误检查机制，让你规避掉一些语言自己的bad point。将"use strict"放在函数体或脚本文件的第一行（严格地说，只要前面不是产生实际运行结果的语句，"use strict"能够不在第一行，好比直接跟在一个空的分号后面。），则整个函数体或脚本文件以"严格模式"运行。

• 使用未声明的变量赋值抛出一个错误, 而不是建立一个全局变量
• 不止一对对象字面量分配相同的属性会抛出错误
• 使用with抛出错误

详细介绍，见阮一峰老师的博客 《Javascript 严格模式详解》

二、JSON对象

      ES5提供一个内置的（全局）JSON对象，可用来序列化（JSON.stringify）和反序列化（JSON.parse）对象为JSON格式。其通常性用法以下，

var test = {
    "name": "bothyan",
    "age": 26
};
console.log(JSON.stringify(test)); // string  '{"name": "bothyan", "age": 26}' 
console.log(JSON.parse('{"name": "bothyan"}')); // Object {"name": "bothyan"}

JSON对象提供的 parse 方法还提供第二个参数，用于对具体的反序列化操做作处理。好比，

var result = JSON.parse('{"a": 1, "b": "a"}', function(key, value){
	  if (typeof value == 'string'){
	    return 0;
	  } else {
	    return value; 
	  }
	})
console.log(result.b)   //0

JSON对象提供的 stringify方法也会提供第二个参数，用于解析的预处理，同时也会提供第三个参数，用于格式化json字符串（缩进的空格数）。好比，

var obj = {
    name: 'bothyan',
    age: 26,
    job: 'IT'    
};
var ret = JSON.stringify(obj , function(key, value) {
    return typeof value === 'string' ? undefined : value;
}, 3);
console.log(ret);   
/*
{
   "age": 22
}
*/

三、新增 object 接口

对象	构造器	说明
object	getPrototypeOf	返回对象的原型
object	getOwnPropertyDescriptor	返回对象自有属性的属性描述符
object	getOwnPropertyNames	返回一个数组，包括对象全部自有属性名称集合（包括不可枚举的属性）
object	create	建立一个拥有置顶原型和若干个指定属性的对象
object	defineProperty	给对象定义一个新属性，或者修改已有的属性，并返回
object	defineProperties	在一个对象上添加或修改一个或者多个自有属性，并返回该对象
object	seal	锁定对象。阻止修改现有属性的特性，并阻止添加新属性。可是能够修改已有属性的值。
object	freeze	冻结对象，阻止对对象的一切操做。冻结对象将永远不可变。
object	preventExtensions	让一个对象变的不可扩展，也就是永远不能再添加新的属性。
object	isSealed	判断对象是否被锁定
object	isFrozen	判断对象是否被冻结
object	isExtensible	判断对象是否能够被扩展
object	keys	返回一个由给定对象的全部可枚举自身属性的属性名组成的数组

下面分享几个经常使用的object接口：

1、object.defineProperty

让对象的属性有了更多控制，例如哪些是容许被修改的，哪些是能够枚举的，哪些是能够删除的等。

var cat = {};

Object.defineProperty(cat, "name", {
  value: "Maru",
  writable: false,
  enumerable: true,
  configurable: false
});

Object.defineProperty(cat, "skill", {
  value: "exploring",
  writable: true,
  enumerable: true,
  configurable: true
});

对于cat 对象, 其名字 name 不能被改变，可是会出如今 for-in 循环中。在其余方面，其skill是能够改变的

2、object.create

Object.create(prototype, descriptors) ：建立一个具备指定原型且可选择性地包含指定属性的对象

参数:
prototype 必需。  要用做原型的对象。 能够为 null。
descriptors 可选。 包含一个或多个属性描述符的 JavaScript 对象。

四、新增 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。

五、Function.prototype.bind

        bind()方法会建立一个新函数,称为绑定函数.当调用这个绑定函数时,绑定函数会以建立它时传入 bind()方法的第一个参数做为 this,传入 bind() 方法的第二个以及之后的参数加上绑定函数运行时自己的参数按照顺序做为原函数的参数来调用原函数。

fun.bind(thisArg[, arg1[, arg2[, ...]]])

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 指针直接进行函数调用。

六、String.prototpye.trim 

去掉字符串两头的空白符和换行符。

七、Date

Date.now 获取当前时间距离1970.1.1 00:00:00的毫秒数。

Date.prototype.toISOString  生成时间字符串

(new Date).toISOString()   //"2016-11-03T08:44:39.469Z"

八、other

• 放开了关键字不容许做为属性名的限制
• getter和setter函数  

        getter负责查询值，它不带任何参数，setter则负责设置键值，我认为这两个纯粹的属性读写方法。用的不多，下面贴代码简单认识下

var me = {
    name : 'bothyan',
    get sex(){
        return 'man';
    }
};

me.sex = 'woman'; //不能改写，报错
console.log(me.sex); //结果依然是man

var me = {
    name : 'bothyan',
    get sex(){
        if(this.sexx){
            return this.sexx; 
        }else{
           // return 'man'; 
        }
    }, set sex(val){
        this.sexx = val; 
    }
};
console.log(me.sex); //结果man
me.sex = 'woman';
console.log(me.sex); //结果woman