JS - Object 物件基本操作

關於 Object {} 物件

  • 物件.屬性=屬性值

      object.type = value

    物件.方法(參數)

      object.method()
    • 相同物件都有相同的屬性、不同的屬性值
    • 相同物件都有相同的方法可以用
  • name(key) & Value 成對

      object = {name1: value1, name2: value2, ...}
  • value 可以裝什麼?
    (屬性)1. 原生的值 (boolean / number / string ... 等)
    (屬性)2. 物件 object
    (方法)3. 函式 function

  • 例:

      var member = {
          firstName: "Eudora",
          lastName: "Huang",
          fullName: function(){
               return this.firstName + " " + this.lastName
          }
      }
      console.log(member.fullName())
      //結果 :  "Eudora Huang"
    • 注意:用箭頭函示寫 value 裡的 function 時,this 會是 undefind(this的初始值) 而非該函數擁有者(此例為 member)
    • 取值時若為 function 必須要加 ( ),不然會輸出整段 fucntion code(參行8取fullName時後面加括弧)


基本操作語法

new Object() 建立 object

  • 建立一個空物件

      let obj = {}
  • 建立一個物件並定義key & value

      let obj = new Object();
          obj.key1 = 'value1';  //或 obj["key1"] = 'value1';
          obj.key2 = 2;         //   obj["key2"] = 2;
          obj.key3 = 'value3';  //   obj["key3"] = 'value3';

    
      let obj = {
          key1: 'value1',
          key2: 2,
          key3: 'value3',
      }
  • object

      obj
      // { key1: 'value1', key2: 2, key3: 'value3' }

Object.values() 取 object 值

  • 取所有的value

      Object.values(obj)
      // ['value1', 2, 'value3']
  • 取特定的value

      obj.key1     
      // 'value1'
    • .的方式只能以 key 取

      obj['key1']    
      // 'value1'
    • [ ]的方式,[ ]裡面可以放變數或判斷式
    • 如果單純只放key,要加引號 ' '

Object.keys() 取 object 屬性(key)

  • 取所有的key

      Object.keys(obj)   
      //['key1', 'key2', 'key3']
  • 取第N個的key (從0開始)

      Object.keys(obj)[0]   
      //'key1'

delete 刪除 object 屬性(key)

  • delete刪除特定的key

      delete obj.key1

Object.entries(obj)Object.fromEntries() 轉型應用

  • object 轉成 array of array

      Object.entries(obj)
      //  [ [ 'key1', 'value1' ], [ 'key2', 2 ], [ 'key3', 'value3' ] ]
  • array of array 轉回 Object

      Object.fromEntries(Object.entries(obj))
      // { key1: 'value1', key2: 2, key3: 'value3' }

參考資料