• 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; 
            }
        })
  • 相关阅读:
    ionic 刷新页面的几种方法
    Highcharts中如何外部修改pointStart
    前端分页 思路
    快捷选时间
    获取今天,昨天,本周,上周,本月,上月时间
    angularjs 弹出框 $modal
    SQL 查找存在某内容的存储过程都有哪些
    LINQ to SQL和Entity Framework
    SQL模糊查询条件的四种匹配模式
    数据库--中文表名及字段名的优缺点
  • 原文地址:https://www.cnblogs.com/zjp-/p/9152253.html
Copyright © 2020-2023  润新知