ES5拓展

一、JSON拓展

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

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表示原数组

返回值:布尔值

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)

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

当配置了configurablefalse之后

如果同时设置writablefalse, 将不可以再次修改writabletrue

如果同时设置writabletrue, 将可以再次修改writablefalse

不论设不设置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; 
        }
    })

猜你喜欢

转载自www.cnblogs.com/zjp-/p/9152253.html
ES5