代码改变世界
[登录 · 注册]
  • javascript Object构造函数常用方法使用总结——Object.assign、Object.defineProperty、Object.keys、Object.value
  • javascript Object常用方法使用总结

    1、Object构造函数-继承

    -只有构造函数才有prototype属性

    -js每个对象都有一个__proto__属性 === 构造函数的prototype属性
    objectInherit() {
          function conObj () {}
          conObj.prototype.age = '12'
          let newPreObj = new conObj()
          console.log(newPreObj.age) // 12
          console.log(newPreObj.__proto__ === conObj.prototype) // true
        },

    2、Object.assign()-用于将一个或者多个对象的可枚举的值从源对象复制到目标对象。返回目标对象

     testForObjectAssign() {
          let target = {name: 'xiaomin'}
          let source = {age: '14',name:'hua'}  // 如果目标对象中有相同的属性,源对象的属性值将覆盖目标对象的属性值(name:'xioamin'>'hua')
          const finalObj = Object.assign(target, source) 
          console.log(target, finalObj) // {name: 'hua', age: '14'}
          // 关于可枚举属性值
          // for-in无法遍历出来的属性-不可枚举
          let obj1 = {a:1,b:2,c:{d:3}}
          for(let key in obj1) {
            console.log(key) // a b c
          }
          let finalObj2 = Object.assign({}, obj1)
          obj1.a = 5
          finalObj2.b = 6
          obj1.c.d = '4'
          // 可枚举出来的属性值相当于深拷贝,{d:4}是不可枚举的属性;所以Object.assign并不能完全的用于深拷贝
          console.log(obj1)  // {a:5,b:2,c:{d:4}}
          console.log(finalObj2) // {a:1,b:2,c:{d:4}}
        },
    

    3、Object.defineProperty()-用于直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象

        // Object.defineProperty()用于直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象
        testForObjectDefineProperty() {
          let obj1 = {
            name: 'xiaomin'
          }
          // 新增age属性
          Object.defineProperty(obj1, 'age', {
            value: '12', // value:数据描述符
            writable: false, // 数据描述符;writable:false情况下(即默认情况下),使用 Object.defineProperty() 添加的属性值是不可修改(immutable)的
            enumerable: true, // enumerable:true(默认false)时,新增的属性时可枚举属性
            configurable: true // configurable:tue(默认值为false),属性描述值可修改
          })
          // 修改name属性
          Object.defineProperty(obj1, 'name', {
            value: 'xiaohua'
          })
          // 属性描述值修改-configurable:true
          Object.defineProperty(obj1, 'age', {
            writable: true
          })
          // obj1.age = '14'
          for(let key in obj1) {
            console.log(key, '枚举出来的属性') 
            // enumerable:true
            // name 枚举出来的属性
            // age 枚举出来的属性
            // enumerable:false
            // name 枚举出来的属性
          }
          console.log(obj1)  // {name: 'xioahua', age: '12'}
    
          // Object.defineProperty的存取描述符get()和set()方法
          // testDate-newobject.num的值会互相影响(vuejs双向绑定的原理)
          let newobject = {}
          let testDate = 88
          Object.defineProperty(newobject, 'num', {
            get(){return testDate},
            set(val){
               testDate = val
            },
            enumerable: true,
            configurable: true
          })
          newobject.num = '000'  // 数据的双向绑定
          console.log(newobject.num, testDate)
        },
    

    4、Object.keys()、Object.values()

     Object.keys()返回一个指定对象可枚举属性的属性名组成的数组
     Object.values()返回一个指定对象可枚举属性的属性值组成的数组
    // 可用于判断对象是否为空
        testForObjectkeys() {
          let myObj = {name:'xioamin', age:'12'}
          console.log(Object.keys(myObj)) // ["name", "age"]
          console.log(Object.values(myObj)) // ["xiaomin", "12"]
        }
    

     

  • 【推广】 阿里云小站-上云优惠聚集地(新老客户同享)更有每天限时秒杀!
    【推广】 云服务器低至0.95折 1核2G ECS云服务器8.1元/月
    【推广】 阿里云老用户升级四重礼遇享6.5折限时折扣!
  • 原文:https://www.cnblogs.com/layaling/p/13692485.html
Copyright 2008-2020 晋ICP备12007731号-1