美文网首页
ES5_ json、Object对象、数组的扩展19-10-15

ES5_ json、Object对象、数组的扩展19-10-15

作者: 你坤儿姐 | 来源:发表于2019-10-15 13:41 被阅读0次

    一.ES5_json扩展

    1.JSON.stringify(obj/arr)
    js对象(数组)转换为json对象(数组)
    2.JSON.parse(json)
    json对象(数组)转换为js对象(数组)

    二.ES5_Object扩展

    ES5给Object扩展的静态方法,常用的2个

    1.Object.create(prototype, [descriptors])

    *作用:已指定对象原型 创建新的对象
    *为新的对象指定新的属性,并对属性进行描述

    • value : 指定值
    • writable: 标识当前属性是否能修改, 默认为false
    • configurable: 标识当前属性是否可以被删除 默认为false
    • enumerable: 标识当前属性是否能用for in 枚举 默认为false
      示例:
    var obj = {username: 'damu', age:30};
    var obj1 = {};
    obj1 = Object.create(obj,{
        sex:{
           value: '男',
           writable: true,
           configurable: true,
           enumerable: true,
      }
    });
    console.log(obj.sex);
    obj1.sex = '女';
    console.log(obj1.sex);
    //delete obj1.sex;
    //console.log(obj1);
    for(var i in obj1){
      console.log(i);
    }
    
    2.Object.defineProperties (object, descriptors)

    *作用:为指定对象定义扩展多个属性
    *get : 用来获取当前属性值的回调函数
    *set : 监听当前属性值改变 触发回调函数,并实参就是修改后的值
    *存取器属性:setter ,getter 一个用来存值,一个用来取值

    var obj2 = {firstName: 'kobe', lastName: 'bryant'};
    Object.defineProperties(obj2,{
       fullName: {
            get: function () { //get方法在这里是专门用来获取属性的值,获取属性值的时候get方法自动调用
                return this.firtName + ' ' + this.lastName;
         }
            set: function (data){ //set 监听扩展属性,当扩展属性自动发生变化的时候回自动调用,自动调用后会将变化的值作为实参注入到set函数,这个data就是变化的值。
               console.log('set()', data)
               var names = data.split(' ');
               this.firstName = names[0];
               this.lastName = names[1];
         }
       }
    })
    console.log(obj2.fullName);//打印扩展属性,此时get方法自动调用
    obj2.fullName = 'tim duncan';//属性发生改变的时候调用set方法
    console.log(obj2.fullName);
    

    对象本身的两个方法

    • get propertyName(){} 用来得到当前属性的回调函数
    • set propertyName(){} 用来修改当前属性变化的回调函数
      var obj = {
          firstName: 'curry',
          lastName: 'stephen',
          get fullName(){
               return this.firstName + ' ' + this.lastName;
          }
          set fullName(data){
             var names = data.split(' ');
             this.firstName = names[0];
             this.lastName = names[1];
         }
    };
      console.log(obj);
      obj.fullName = 'kobe bryant';
      console.log(obj.fullName);
    

    三.ES5_数组的扩展

    1. Array.prototype.indexOf(value): 输入值在数组中的第一个下标
      2.Array.prototype.lastIndexOf(value):得到的值在数组中最后一个下标
      3.Array.prototype.forEach(function(item, index){ }) :遍历数组
      4.Array.prototype.map(function(item, index){ }): 遍历数组返回一个新数组,返回加工之后的值
      5.Array.prototype.filter(function(item, index){ }) :
    var arr = [2,7,3,5,9,5,2,9,7];
    console.log(arr.indexOf(2)); //打印2的下标
    console.log(arr.lastIndexOf(7));//打印最后一个7的下标
    arr.forEach(function (item, index)){ //遍历并打印所有的数组和下标
        console.log(item, index);
    }
    
    //使用map方法让之前的数组每一个都加10
    var arr1 = arr.map(function (item, index){
        return item + 10;
    });
    console.log(arr1);
    //打印结果[12,17,13,15,19,15,12,19,17]
    
    //使用filter过滤出arr中大于5的的数
    var arr2 = arr.filter(function (item, index) {
       return item > 5
    })
    console.log(arr, arr2);
    //打印结果[7,9,9,7]
    

    相关文章

      网友评论

          本文标题:ES5_ json、Object对象、数组的扩展19-10-15

          本文链接:https://www.haomeiwen.com/subject/icyjmctx.html