ES5拓展

一、JSON拓展

1、JSON.parse(str,fun)：将JSON字符串转为js对象

　两个参数：str表示要处理的字符串；fun处理函数，函数有两个参数，属性名、属性值

// 定义json字符串
var str = '{"a": 1, "b": "2", "c": {"d": 3}}'
// 转为对象
var obj = JSON.parse(str, function(key, value) {
    // console.log(this, arguments)
    // 我们要把所有的字符串转为数字
    if (typeof value === "string") {
        // 转为数字
        return +value;
    }
    return value;
});

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

二、数组拓展

1、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)
})

2、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)

3、some()判断数组中是否有成员满足条件

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

接收一个参数，是一个函数

　　函数有三个参数：第一个key表示成员值，第二个index表示索引值，第三个arr表示原数组

返回值：布尔值

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

4、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)

5、fill()填充数组的方法

用法：arr.fill()

返回值：原数组，原数组会发生改变

var arr = new Array(5)//创建一个长度为5的数组
arr.fill(2)//用2填充数组

6、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)

7、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)

8、indexOf()检索，获取成员索引值

从前往后查找

参数：要检索的成员

返回值：被查找的成员下标，如果不存在返回-1

var arr1 = [1,2,3,4,5,3,2,4]
console.log(arr1.indexOf(2))//从前往后查找，输出1

9、lastIndexOf()检索，获取成员索引值

从后往前查找，下标永远是从左面开始计数，但是查找时是从后面开始找，返回第一个匹配的下标

参数：要检索的成员

返回值：被查找的成员下标，如果不存在返回-1

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

10、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)

 

11、isArray()判断数组

参数：要判断的数组

用法：Array.isArray(arr)

 

判断数组的几种方式：

①arr instanceOf Array

②arr.constructor ===Array

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

④Array.isArray(arr)

三、对象拓展（控制对象状态）

1、取消可拓展性，不能再添加新的属性

Object.preventExtensions(obj)

参数：obj表示要处理的对象

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

Object.isExtensible(obj)

取消可拓展性之后仍然可以删除、修改属性

2、封闭方法

Object.seal(obj)

参数：obj表示要处理的对象

查看对象是否是封闭状态

Object.isSeal(obj) 

封闭之后只能修改，不能添加、删除属性

3、冻结方法

Object.freeze(obj)

参数：obj表示要处理的对象 

查看对象是否是冻结状态

Object.isfrozen(obj) 

冻结状态的对象，不能添加、修改、删除属性

四、对象特性（控制对象中一个属性的状态）

Object.defineProperty(obj,property,option)

参数：obj：要设置的对象

　　　property：要设置的属性名

　　　option：要设置的属性对象

1、特性——值

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

　　　　　　value:""

　　　　})

    var obj = {
        color: "blue"
    }

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

使用es5定义的属性值的时候，特性对象里面默认是false,
如果使用的es3.1定义的对象， 并且对象中默认已经存在相应属性， 这个时候特性配置对象全部默认是true

2、特性——可修改性

定义方式：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

3、特性——可枚举性

定义方式：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

4、特性——可配置性

定义方式：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

5、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; 
        }
    })