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