Skip to main content

JS - 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，可以視作物件的迴圈。
for(let item in bookInfo){
  console.log(item)
}
// name
// author
// category
// date​

複製​

  1. ...，最常見的淺拷貝用法。
info

關於淺拷貝，要特別注意它對於深層的內容會有傳址的問題。

const copy = {...bookInfo}
  1. 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'}
  1. JSON.stringify 與 JSON.parse，這是深層複製的手法，透過先轉成字串讓傳址問題解決再轉回物件。
const deepCopyBook = JSON.parse(JSON.stringify(bookInfo))
deepCopyBook.author = 'Joanna'

console.log(deepCopyBook)
console.log(bookInfo)
  1. {...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，這是用來查詢某個屬性是否存在於物件中。
console.log('author' in bookInfo) // true
  1. hasOwnProperty，同樣也適用在查詢某個屬性是否存在於物件中。
console.log(bookInfo.hasOwnProperty('author')) // true
  1. 可選串聯，新語法，對於深層不存在的屬性會回傳 undefined 而不會中斷程式碼運作。
console.log(bookInfo?.author?.name) // undefined

Object to Array​

  • Object.entries，這是把物件轉成陣列的方法。如果要把陣列轉成物件可以用 Object.fromEntries。
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 物件基本操作
Buy Me A Coffee