Hướng dẫn object key, value javascript

Khi làm việc với object trong Javascript, đôi khi chúng ta cần lấy các key/value để sử dụng với mục đích như so sánh, hiển thị,... Làm thế nào để lấy các values và keys của object?

Để truy xuất values cũng như keys thì Javascript cung cấp cho chúng ta các method như Object.keys(), Object.values(), Object.entries(). Hôm nay chúng ta cùng tìm hiểu về các method này nhé ^^.

Trước tiên, chúng ta cần tìm hiểu keys, values, entries của Object là gì đã nhé!

• keys của một object là danh sách các tên thuộc tính(property names).
• values của một object là danh sách các giá trị của thuộc tính(property values).
• entries danh sách các cặp key/value tương ứng của object.

Chúng ta cùng xem một ví dụ về Object trong Javascript:

const user = {
  name: "Ha",
  class: "10b1"
}

Object user có values là ["Ha", "10b1"], keys bao gồm ["name", "class"] và entries là [["name", "Ha"], ["class", "10b1"]].

Chúng ta cùng thử truy xuất để lấy các keys, values, entries trong ví dụ này nhé!

Object.keys()

method Object.keys() giúp chúng ta lấy các keys của object. Ta sẽ lấy keys của user ở ví dụ trên như sau:

const user = {
  name: "Ha",
  class: "10b1"
}
console.log(Object.keys(user)); // ['name', 'class']

Object.keys() sẽ trả về một array các key có trong object cho chúng ta 😁. Trong một số trường hợp, bạn muốn kiểm tra đây là một empty object thì chúng ta có thể kiểm tra dựa vào length của array key:

const emptyObj = {};
const nonEmptyObj = { blog: 'homiedev.com' };

Object.keys(emptyObj).length === 0;    // true
Object.keys(nonEmptyObj).length === 0; // false

Object.values()

Để lấy các value trong Object thì ta sẽ sử dụng Object.values(), nó sẽ trả về cho chúng ta một array các value của Object.

Ta thử lấy các values trong user:

const user = {
  name: "Trang",
  class: "11b2"
}
console.log(Object.values(user)); // ['Trang', '11b2']

Ví dụ tiếp theo, ta sẽ tạo một object courses là một danh sách các khóa học trong giỏ hàng, chúng ta sẽ tính tổng tiền thanh toán thử nhé:

const courses = {
  "javascript": 22.5,
  "react": 10.5,
  "html/css": 12.5
}

Bây giờ chúng ta sẽ sử dụng Object.values() để lấy giá bán của các khóa học và tính tổng:

const prices = Object.values(courses);
console.log(prices); // [22.5, 10.5, 12.5]

const total = prices.reduce((sum, price) => sum + price);
console.log(total); // 45.5

Object.entries()

Để lấy danh sách key/value tương ứng thì chúng ta sẽ sử dụng Object.entries().

Chúng ta cùng tạo một ví dụ, ví dụ này mình muốn xem các key/value trong object courses có giá > 0. Chúng ta sẽ làm như sau:

const courses = {
  "javascript": 0,
  "react": 10.5,
  "html/css": 12.5
}

for (const entry of Object.entries(courses)) {
  const [course, price] = entry;

  if (price > 0) console.log(entry);
}

Như vậy là với Object.entries(), chúng ta có thể xem thông tin của khóa học tùy thuộc vào điều kiện 😁. Tùy vào từng trường hợp ta có thể sử dụng method này để giúp giải quyết bài toán của chúng ta ^^.

Chúng ta có một số nội dung cần nắm để có thể hiểu ví dụ trên:

• Tìm hiểu về destructuring javascript
• for...in và for...of JavaScript

Kết luận

Như vậy là chúng ta đã tìm hiểu xong các method giúp chúng ta truy xuất values, keys trong Object. Các method này rất cần thiết khi chúng ta làm việc với object trong Javascript.

Hy vọng bài viết giúp ích cho các bạn ^^. Chúc các bạn học tốt.