JS 筆記 | Object 操作篇

前一篇是關於 array 的基本操作，這篇來寫同樣重要的 object 操作。

同樣，先來建立一個物件：

let bookInfo = {
  name: 'Hogwarts professors',
  author: 'Jeremy',
  category: 'Fanfiction',
  date: '2023-10-08'
}

取 key

1. Object.keys，取出物件的鍵。

const key = Object.keys(bookInfo)
console.log(key) // ['name', 'author', 'category', 'date']

取 value

1. Object.values，取出物件的值

const value = Object.values(bookInfo)
console.log(value) //['Hogwarts professors', 'Jeremy', 'Fanfiction', '2023-10-08']

屬性刪除

1. delete，刪除一條屬性。

delete bookInfo['date']
console.log(bookInfo) // {name: 'Hogwarts professors', author: 'Jeremy', category: 'Fanfiction'}

迭代

1. for-in，可以視作物件的迴圈。現在來依序印出 bookInfo 的 key 吧！

for(let item in bookInfo){
  console.log(item)
}
// name
// author
// category
// date​

複製

1. ...，最常見的淺拷貝用法。(關於淺拷貝，要特別注意它對於深層的內容會有傳址的問題)

const copy = {...bookInfo}

2. assign，也是淺層複製，也可以用在合併複數物件。

let obj2 = {
  author2: 'Joanna',
  job: 'designer'
}

bookInfo = Object.assign(bookInfo, obj2)

console.log(bookInfo) 
// {​name: 'Hogwarts professors', author: 'Jeremy', category: 'Fanfiction', date: '2023-10-08', 
//    author2: 'Joanna', job: 'designer'}

3. JSON.stringify與JSON.parse，這是深層複製的手法，透過先轉成字串讓傳址問題解決再轉回物件。

const deepCopyBook = JSON.parse(JSON.stringify(bookInfo))
deepCopyBook.author = 'Joanna'

console.log(deepCopyBook)
console.log(bookInfo) 

4. {...obj1, ...obj2}，這是合併物件的一個方法，我們利用assign例子中建立的第二個物件來合併看看。

const newObj = {...bookInfo, ...obj2}
console.log(newObj)
// {​name: 'Hogwarts professors', author: 'Jeremy', category: 'Fanfiction', date: '2023-10-08', 
//    author2: 'Joanna', job: 'designer'}

查詢

1. property in Obj，這是用來查詢某個屬性是否存在於物件中。比如我想知道 author 這個屬性是否存在：

console.log('author' in bookInfo) // true

2. hasOwnProperty，同樣也適用在查詢某個屬性是否存在於物件中。

console.log(bookInfo.hasOwnProperty('author')) // true

3. 可選串聯，新語法，對於深層不存在的屬性會回傳 undefined 而不會中斷程式碼運作。

console.log(bookInfo?.author?.name) // undefined

Object to Array

1. Object.entries，這是把物件轉成陣列的方法。如果要把陣列轉成物件可以用Object.fromEntries。
   現在讓我們把 bookInfo 轉過去再轉回來。

const arrBookInfo = Object.entries(bookInfo)
console.log(arrBookInfo)
// [[ 'name', 'Hogwarts professors' ], [ 'author', 'Jeremy' ], [ 'category', 'Fanfiction' ],
//     [ 'date', '2023-10-08' ]]

const objBookInfo = Object.fromEntries(arrBookInfo)
console.log(objBookInfo)
// {name: 'Hogwarts professors', author: 'Jeremy', category: 'Fanfiction', date: '2023-10-08'}

參考資料

1. JavaScript 大全 (第七版) / David Flanagan / 歐萊禮出版
2. 帶你無痛提升 JavaScript 面試力 / 卡斯伯 / 博碩出版
3. JS - Object 物件基本操作