javascript Object常用方法使用總結

1、Object建構函式-繼承

-只有建構函式才有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()

// 可用於判斷物件是否為空
    testForObjectkeys() {
      let myObj = {name:'xioamin', age:'12'}
      console.log(Object.keys(myObj)) // ["name", "age"]
      console.log(Object.values(myObj)) // ["xiaomin", "12"]
    }