前一篇是關於 array 的基本操作，這篇來寫同樣重要的 object 操作。
同樣，先來建立一個物件：
let bookInfo = {
name: 'Hogwarts professors',
author: 'Jeremy',
category: 'Fanfiction',
date: '2023-10-08'
}
取 key
-
Object.keys，取出物件的鍵。
const key = Object.keys(bookInfo)
console.log(key) // ['name', 'author', 'category', 'date']
取 value
Object.values，取出物件的值
const value = Object.values(bookInfo)
console.log(value) //['Hogwarts professors', 'Jeremy', 'Fanfiction', '2023-10-08']
屬性刪除
-
delete，刪除一條屬性。
delete bookInfo['date']
console.log(bookInfo) // {name: 'Hogwarts professors', author: 'Jeremy', category: 'Fanfiction'}
迭代
for-in，可以視作物件的迴圈。現在來依序印出 bookInfo 的 key 吧！
for(let item in bookInfo){
console.log(item)
}
// name
// author
// category
// date
複製
...，最常見的淺拷貝用法。(關於淺拷貝，要特別注意它對於深層的內容會有傳址的問題)
const copy = {...bookInfo}
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'}
JSON.stringify與JSON.parse，這是深層複製的手法，透過先轉成字串讓傳址問題解決再轉回物件。
const deepCopyBook = JSON.parse(JSON.stringify(bookInfo))
deepCopyBook.author = 'Joanna'
console.log(deepCopyBook)
console.log(bookInfo)
{...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'}
查詢
property in Obj，這是用來查詢某個屬性是否存在於物件中。比如我想知道 author 這個屬性是否存在：
console.log('author' in bookInfo) // true
hasOwnProperty，同樣也適用在查詢某個屬性是否存在於物件中。
console.log(bookInfo.hasOwnProperty('author')) // true
- 可選串聯，新語法，對於深層不存在的屬性會回傳 undefined 而不會中斷程式碼運作。
console.log(bookInfo?.author?.name) // undefined
Object to Array
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'}
參考資料
- JavaScript 大全 (第七版) / David Flanagan / 歐萊禮出版
- 帶你無痛提升 JavaScript 面試力 / 卡斯伯 / 博碩出版
- JS - Object 物件基本操作
