關於 JavaScript 中 5 種物件取值方式

前言

在 JavaScript 中，物件是我們最常操作的資料型態之一，那麼有哪些物件取值方式呢？這一篇我就來記錄一下。

點記法（Dot Notation）

點運算子是最常見的物件取值方式，透過點運算子可以取得物件中的屬性值

const obj = {
  name: 'Ray',
  url: 'https://israynotarray.com/',
};

console.log(obj.url); // https://israynotarray.com/

中括號記法（Bracket Notation）

中括號運算子也是取得物件中的屬性值的方式之一，透過中括號運算子可以取得物件中的屬性值

const obj = {
  name: 'Ray',
  url: 'https://israynotarray.com/',
};

console.log(obj['url']); // https://israynotarray.com/

如果有一些特殊的屬性名稱，就會使用中括號運算子來取得屬性值

const obj = {
  'my name': 'Ray',
  'my-url': 'https://israynotarray.com/',
};

console.log(obj['my name']); // Ray
console.log(obj['my-url']); // https://israynotarray.com/

除此之外，中括號運算子也可以透過變數來取得屬性值，這種方式稱之為動態屬性名稱

const obj = {
  name: 'Ray',
  url: 'https://israynotarray.com/',
};

const key = 'url';

console.log(obj[key]); // https://israynotarray.com/

解構賦值（Destructuring Assignment）

解構賦值是一種可以讓你快速取出物件中的屬性值並賦值給變數的方式

const obj = {
  name: 'Ray',
  url: 'https://israynotarray.com/',
};

const { name, url } = obj;

console.log(name); // Ray
console.log(url); // https://israynotarray.com/

也同時可以重新命名變數名稱

const obj = {
  name: 'Ray',
  url: 'https://israynotarray.com/',
};

const { name: myName, url: myUrl } = obj;

console.log(myName); // Ray
console.log(myUrl); // https://israynotarray.com/

可選鏈（Optional Chaining）

可選鏈是後來新出的語法，用法其實與點記法類似，只是在 . 前面加上 ?

const obj = {
  name: 'Ray',
  url: 'https://israynotarray.com/',
};

console.log(obj?.name); // Ray

那麼可選鏈的好處是什麼呢？通常我們如果取得物件中的屬性值時，第一層屬性值可能會是 undefined，這時候如果我們使用點記法取得第二層屬性值時，就出現錯誤

const obj = {
  name: 'Ray',
  url: 'https://israynotarray.com/',
};

console.log(obj.age); // undefined
console.log(obj.age.name); // Uncaught TypeError: obj.age is undefined

但如果使用可選鏈的話，就不會出現錯誤，只需要將 . 改成 ?. 即可

const obj = {
  name: 'Ray',
  url: 'https://israynotarray.com/',
};

console.log(obj.age); // undefined
console.log(obj?.age?.name); // undefined

所以可選鏈的概念有點類似…「這裡有東西嗎？如果有的話，就繼續往下找，如果沒有的話，就不要繼續找了」

除此之外，可選鏈也有一些特殊的技巧不單只是用於取得物件中的屬性值，如果陣列中剛好有一個 null 的值就可以使用可選鏈回傳 undefined

const arr = [
  {
    name: 'Ray',
    url: 'https://israynotarray.com/',
  },
  null,
];

console.log(arr[1]?.name); // undefined

當然，函式呼叫也可以使用可選鏈

const obj = {
  name: 'Ray',
  url: 'https://israynotarray.com/',
  sayHello: null,
};

console.log(obj.sayHello?.()); // undefined

Object.keys() or Object.values() or Object.entries()

Object.keys() 可以取得物件中所有的鍵名稱，Object.values() 可以取得物件中所有的值，Object.entries() 可以取得物件中所有的鍵值，這三種方法都會回傳一個陣列

const obj = {
  name: 'Ray',
  url: 'https://israynotarray.com/',
};

console.log(Object.keys(obj)); // ["name", "url"]
console.log(Object.values(obj)); // ["Ray", "https://israynotarray.com/"]
console.log(Object.entries(obj)); // [["name", "Ray"], ["url", "https://israynotarray.com/"]]

這邊也額外補充一個 Object.fromEntries 的方法，可以將陣列轉換成物件

const arr = [
  ['name', 'Ray'],
  ['url', 'https://israynotarray.com/'],
];

console.log(Object.fromEntries(arr)); // { name: "Ray", url: "https://israynotarray.com/" }

以上就是 JavaScript 中 5 種物件取值方式哩