溫故知新——JS_ ES5新特性簡介

ES5瀏覽器支持情況

一般來說除了針對個別特性的特殊說明各大主流瀏覽器都支持es5包括

  • Chrome 13+

  • Firefox 4+

  • Safari 5.1*

  • IE 9*

其中IE9不支持es的嚴格模式從IE10開始支持。Safari 5.1不支持Function.prototype.bind


1、Strict Mode, 即所謂的嚴格模式。

    在一個文件、項目或函數的開頭加上"use strict";即開啓嚴格模式。

   詳細內容參考參考鏈接1

                       參考連接2

                       參考鏈接3——阮一峯


2、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
}"



3、新增Object接口

對象構造器說明
ObjectgetPrototypeOf返回對象的原型
ObjectgetOwnPropertyDescriptor返回對象自有屬性的屬性描述符
ObjectgetOwnPropertyNames返回一個數組包括對象所有自有屬性名稱集合包括不可枚舉的屬性
Objectcreate創建一個擁有置頂原型和若干個指定屬性的對象
ObjectdefineProperty給對象定義一個新屬性或者修改已有的屬性並返回
ObjectdefineProperties在一個對象上添加或修改一個或者多個自有屬性並返回該對象
Objectseal鎖定對象。阻止修改現有屬性的特性並阻止添加新屬性。但是可以修改已有屬性的值。
Objectfreeze凍結對象阻止對對象的一切操作。凍結對象將永遠不可變。
ObjectpreventExtensions讓一個對象變的不可擴展也就是永遠不能再添加新的屬性。
ObjectisSealed判斷對象是否被鎖定
ObjectisFrozen判斷對象是否被凍結
ObjectisExtensible判斷對象是否可以被擴展
Objectkeys返回一個由給定對象的所有可枚舉自身屬性的屬性名組成的數組

這裏不打算對每個新增接口作詳細描述不過比較常用的有如下幾個

  • Object.create

  • Object.defineProperties

  • Object.keys


4、新增Array接口

對象構造器說明
Array.prototypeindexOf返回根據給定元素找到的第一個索引值否則返回-1
Array.prototypelastIndexOf方法返回指定元素在數組中的最後一個的索引如果不存在則返回 -1
Array.prototypeevery測試數組的所有元素是否都通過了指定函數的測試
Array.prototypesome測試數組中的某些元素是否通過了指定函數的測試
Array.prototypeforEach讓數組的每一項都執行一次給定的函數
Array.prototypemap返回一個由原數組中的每個元素調用一個指定方法後的返回值組成的新數組
Array.prototypefilter利用所有通過指定函數測試的元素創建一個新的數組並返回
Array.prototypereduce

接收一個函數作爲累加器數組中的每個值從左到右開始縮減最終爲一個值


array1.reduce(callbackfn[, initialValue])

參數:

參數            定義

array1          必需。一個數組對象。

callbackfn    必需。一個接受最多四個參數的函數。對於數組中的每個元素,reduce 方法都會調用 callbackfn 函數一次。

initialValue   可選。如果指定 initialValue,則它將用作初始值來啓動累積。第一次調用 callbackfn 函數會將此值作爲參數而非數組值提供。


返回值

通過最後一次調用回調函數獲得的累積結果。


eg:

var a = [1,2,3,4,5];
var sum = a.reduce((x, y) => (x+y));
var sum2 = a.reduce((x, y) => (x+y),1);
var prod = a.reduce((x, y) => (x*y));
var prod2 = a.reduce((x, y) => (x*y),2);
var max = a.reduce((x,y) => (x>y)?x:y);
console.log(sum, sum2, prod,prod2,max)

執行結果:15 16 120 240 5


注:

在空數組上,不帶初始值參數調用reduce()將導致類型錯誤異常。若調用它的時候只有一個值——數組只有一個元素並且沒有指定初始值,或者有一個空數組並且指定一個初始值——reduce只是簡單地返回那個值而不會調用化簡函數。


Array.prototypereduceRight接受一個函數作爲累加器讓每個值從右到左亦即從尾到頭縮減爲一個值

新增的數組接口中基本都是比較有用的接口。需要注意的一點是有的數組方法是不返回新數組的有的接口是返回一個新數組就是說使用這些新接口時需要注意一下方法的返回值。

另外Array還有一個新增的接口Array.isArray。顯然此新增接口並不是實例方案而是類似“靜態方法”一樣的存在。其作用很簡單就是判斷某一對象是否爲數組。

  • every()和some()

every()和some()方法是數組的邏輯判定它們對數組元素應用指定的函數進行判定返回true或false.

every()方法相當於“&&”:當且僅當數組中的所有元素都符合判定條件時才返回true,不然就返回false;

some()方法相當於“||”:只要有其中一個元素符合條件就返回true,全部不符合返回false。

every()和some()一旦確認應返回什麼值就停止遍歷直接返回。

當every方法找到第一個不符合的元素就返回false,停止遍歷

當some()方法找到第一個符合的元素就返回true,停止遍歷。

空數組上調用時every()返回true——因爲沒有找到不符合的元素some返回false——因爲沒有找到符合的元素。

var arr = [1, 2, 3];
console.log(arr.some(v => v>2));//true
console.log(arr.every(v => v>2));//false

console.log([].some(v => v>2));//false
console.log([].every(v => v>2));//true



參考鏈接


5、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變量的語法糖還有callapply。不過bind顯然與它們有着明顯的不同。bind將會返回一個新的函數而call或者apply並不會返回一個新的函數它們將會使用新的this指針直接進行函數調用。



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章