ES5拓展

1、JSON拓展

一、JSON.parse(str,fun)：將JSON字符串轉爲js對象

　兩個參數：str表示要處理的字符串；fun處理函數，函數有兩個參數，屬性名、屬性值

 1 // 定義json字符串
 2 var str = '{"a": 1, "b": "2", "c": {"d": 3}}'
 3 // 轉爲對象
 4 var obj = JSON.parse(str, function(key, value) {
 5     // console.log(this, arguments)
 6     // 咱們要把全部的字符串轉爲數字
 7     if (typeof value === "string") {
 8         // 轉爲數字
 9         return +value;
10     }
11     return value;
12 });

二、JSON.stringify(obj,fun)將js對象轉爲JSON字符串

兩個參數：obj表示要處理的對象，fun表示處理函數，函數有兩個參數，屬性名、屬性值

// 定義js對象
        var obj = {
            a: 1,
            b: "2",
            c: {
                d: 3
            }
        }

        // 將對象轉爲字符串
        var str = JSON.stringify(obj, function(key, value) {
            // console.log(this, arguments)
            // 將字符串轉爲數字
            if (typeof value === "string") {
                return +value
            }
            return value
        }) 

2、數組拓展

一、forEach()循環數組

用法：arr.forEach(function(key,index,arr){})

接收一個參數，是一個函數

　　函數有三個參數：第一個key表示成員值，第二個index表示索引值，第三個arr表示原數組

forEach()返回值無效，始終是undefined

var arr = [1,2,3,4,5,6,7,8,9];
arr.forEach(function(key,idx,arr) {
    console.log(key,idx)
})

二、map()循環數組，使用方法和forEach相似，區別是返回值有效

用法：arr.map(function(key,index,arr){})

接收一個參數，是一個函數

　　函數有三個參數：第一個key表示成員值，第二個index表示索引值，第三個arr表示原數組

返回值：根據函數內部的返回條件，返回新數組

var arr = [1,2,3,4,5,6,7,8,9];
var result = arr.map(function(key,idx,arr) {
    return key * 3
})
console.log(result)//返回[3,6,9,12,15,18,21,24,27]
console.log(arr)

三、some()判斷數組中是否有成員知足條件

用法：arr.some(function(key,index,arr){})

接收一個參數，是一個函數

　　函數有三個參數：第一個key表示成員值，第二個index表示索引值，第三個arr表示原數組

返回值：布爾值

1 var arr = [1,2,3,4,5,6,7,8,9];
2 var result = arr.some(function(key,idx,arr) {
3     //return key === 2;//檢測數組裏面是否有數字2
4     return typeof key === "string";//檢測數組裏面是否有字符串
5 })
6 console.log(result)

四、every()判斷數組中全部成員是否知足條件

用法：arr.every(function(key,index,arr){})

接收一個參數，是一個函數

　　函數有三個參數：第一個key表示成員值，第二個index表示索引值，第三個arr表示原數組

返回值：布爾值

var arr = [1,2,3,4,5,6,7,8,9];
var result = arr.every(function(key,idx,arr) {
    return typeof key === "number";//檢測數組中全部的值是否都是數字類型
})
console.log(result)

五、fill()填充數組的方法

用法：arr.fill()

返回值：原數組，原數組會發生改變

var arr = new Array(5)//建立一個長度爲5的數組
arr.fill(2)//用2填充數組

六、reduce()累加方法

該方法是從前日後累加，對全部成員逐一處理，將結果返回

reduce()從第二個成員開始遍歷，第一個成員做爲第一次遍歷的第一個參數傳遞

接收一個參數，是一個函數

　　函數有四個參數：第一個是上次累加的結果，第二個是當前成員值，第三個是當前索引值，第四個是原數組

返回值：累加的結果

累加的結果將會在下一次執行的時候做爲第一個參數傳遞

// 定義數組
var arr  = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// 求相加的結果
var result = arr.reduce(function(pre, key, index, arr) {
    // console.log(arguments)
    
　　　　console.log(pre,key,index)
　　　　return pre + key
})
// 輸出結果
console.log(result)

七、reduceRight()累加方法

該方法是從後往前累加，對全部成員逐一處理，將結果返回

reduceRight()從倒數第二個成員開始遍歷，倒數第一個成員做爲第一次遍歷的第一個參數傳遞

接收一個參數，是一個函數

　　函數有四個參數：第一個是上一次的累加結果，第二個是當前成員值，第三個是當前索引值，第四個是原數組

返回值：累加的結果

累加的結果將會在下一次執行的時候做爲第一個參數傳遞

// 定義數組
var arr  = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// 求乘積
var result = arr.reduceRight(function(pre, key, index, arr) {
    //console.log(arguments)
    console.log(pre,key,index)
    return pre * key
})
// 輸出結果
console.log(result)

八、indexOf()檢索，獲取成員索引值

從前日後查找

參數：要檢索的成員

返回值：被查找的成員下標，若是不存在返回-1

var arr1 = [1,2,3,4,5,3,2,4]
console.log(arr1.indexOf(2))//從前日後查找，輸出1

九、lastIndexOf()檢索，獲取成員索引值

從後往前查找，下標永遠是從左面開始計數，可是查找時是從後面開始找，返回第一個匹配的下標

參數：要檢索的成員

返回值：被查找的成員下標，若是不存在返回-1

var arr1 = [1,2,3,4,5,3,2,4]
console.log(arr1.lastIndexOf(2))//從後往前查找，輸出6

十、filter()過濾

用法：arr.filter(function(key,index,arr){})

接收一個參數，是一個函數

　　函數有三個參數：第一個key表示成員值，第二個index表示索引值，第三個arr表示原數

　返回值：知足條件的數據組成的新數組

// 定義數組
var arr = ["a", "b", "c", "d", 1, 2, 3, 4, 5];

var result = arr.filter(function(value, index, arr) {
     return typeof value === "string"
 })
console.log(result)

 

十一、isArray()判斷數組

參數：要判斷的數組

用法：Array.isArray(arr)

 

判斷數組的幾種方式：

①arr instanceOf Array

②arr.constructor ===Array

③Object.prototype.toString.call(arr) === "[object Array]"

④Array.isArray(arr)

3、對象拓展（控制對象狀態）

一、取消可拓展性，不能再添加新的屬性

Object.preventExtensions(obj)

參數：obj表示要處理的對象

查看對象是否取消了可拓展性

Object.isExtensible(obj)

取消可拓展性以後仍然能夠刪除、修改屬性

二、封閉方法

Object.seal(obj)

參數：obj表示要處理的對象

查看對象是不是封閉狀態

Object.isSeal(obj) 

封閉以後只能修改，不能添加、刪除屬性

三、凍結方法

Object.freeze(obj)

參數：obj表示要處理的對象 

查看對象是不是凍結狀態

Object.isfrozen(obj) 

凍結狀態的對象，不能添加、修改、刪除屬性

4、對象特性（控制對象中一個屬性的狀態）

Object.defineProperty(obj,property,option)

參數：obj：要設置的對象

　　　property：要設置的屬性名

　　　option：要設置的屬性對象

一、特性——值

定義方式：Object.defineProperty(obj,property,{

　　　　　　value:""

　　　　})

    var obj = {
        color: "blue"
    }

    // 設置特性
    Object.defineProperty(obj, "color", {
        // 設置屬性值
        value: "red"
    })

使用es5定義的屬性值的時候，特性對象裏面默認是false,
若是使用的es3.1定義的對象， 而且對象中默認已經存在相應屬性， 這個時候特性配置對象所有默認是true

二、特性——可修改性

定義方式：Object.defineProperty(obj,property,{

　　　　　　writable:false//不可修改

　　　　　})

var obj = {
        color: "blue"
    }

    // 定義特性
    Object.defineProperty(obj, "color", {
        // 設置可修改性爲false
        writable: false
    })
    // 嘗試修改obj.color
    obj.color = "red";
    // 輸出 obj
    console.log(obj)
    // 此時，沒法改變color的屬性值， 由於設置了writable 爲false

三、特性——可枚舉性

定義方式：Object.defineProperty(obj,property,{

　　　　　　enumerable:false//不可枚舉

　　　　　})

    var obj = {
        color: "blue"
    }
    // 設置特性
    Object.defineProperty(obj, "color", {
        // 設置可枚舉性爲false
        enumerable: false
    })
    // 循環輸出
    for (var i in obj) {
        console.log(i)
    }
    // 設置了特性以後， 不能循環顯示出color

四、特性——可配置性

定義方式：Object.defineProperty(obj,property,{

　　　　　　configurable:false//不可配置

　　　　　})

var obj = {
        color: "blue"
    }

    // 定義特性
    Object.defineProperty(obj, "color", {
        // 設置可修改性爲false
        writable: false,
        // 設置可配置性爲false
        configurable: false
    })    
    // 嘗試修改obj.color
    // obj.color = "red"
    // // 輸出
    // console.log(obj)

    // 嘗試再次配置
    Object.defineProperty(obj, "color", {
        writable: true
    })

當配置了configurable爲false以後

若是同時設置writable爲false， 將不能夠再次修改writable爲true

若是同時設置writable爲true， 將能夠再次修改writable爲false

不論設不設置enumerable， 都不能夠再次修改enumerable

五、get和set

get是一個隱藏函數，在獲取屬性值時調用。set也是一個隱藏函數，在設置屬性值時調用，它們的默認值都是undefined。Object.definedProperty()中的get和set對應於對象字面量中get和set方法。

通常get和set成對出現

var obj = {
        color: "red"
    }
    
    Object.defineProperty(obj, "color", {
        get: function() {
            // 備份屬性值
            console.log("讀取完成")
            return this._color; 

        },
        set: function(value) {
            // 設置備份屬性值
            console.log("設置完成")
            return this._color = value; 
        }
    })