Phương thức Object.values() của JavaScript lấy danh sách giá trị trong đối tượng. Bạn có thể lặp qua kết quả phương thức values() xem nội dung mỗi giá trị trong đối tượng.
Đối tượng chứa khóa và giá trị. Đôi khi bạn chỉ muốn lấy giá trị trong đối tượng. Giả sử có đối tượng lưu tên mọi người trên bảng xếp hạng. Ta chỉ muốn lấy tên từ đối tượng thay vì khóa liên kết tên (ví dụ: vị trí).
Đó là lúc phương thức Object.values() xuất hiện. Phương thức này cho bạn thấy tất cả giá trị trong đối tượng. Trong hướng dẫn này, chúng ta thảo luận cách dùng Object.values(). Chúng ta tham khảo ví dụ chi tiết giúp bạn bắt đầu.
JavaScript Object.values()
Phương thức Object.values() JavaScript nhận đối tượng và trả về các thuộc tính có thể liệt kê (enumerable) trong mảng. Giá trị được sắp xếp như khi bạn lặp qua đối tượng thủ công và đẩy vào mảng.
Hãy xem cú pháp phương thức này:
let players = { a: "lucy", b: "harry" }
console.log(Object.values(players))
Phương thức Object.values() nhận một đối số: tên đối tượng giá trị bạn muốn xem. Trong cú pháp này, in kết quả phương thức ra console.
Mã trả về tên người chơi trong đối tượng JavaScript: lucy và harry. Các tên trả về trong danh sách, in ra console JavaScript:
["lucy", "harry"]
Chú ý giá trị cùng thứ tự như trong từ điển.
81% người tham gia cho biết họ cảm thấy tự tin hơn về cơ hội việc làm công nghệ sau khi tham gia bootcamp. Được ghép nối với bootcamp ngay hôm nay.
Sinh viên trung bình của bootcamp dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được việc đầu tiên.
Phương thức Object.values() là cách dễ dàng lấy giá trị từ đối tượng. Cách thay thế là tạo danh sách mới và lặp qua đối tượng với vòng lặp for, thêm mỗi giá trị vào danh sách mới. Phương pháp đó tốn thời gian và mã hơn.
Hãy xem ví dụ phương thức hoạt động.
Ví dụ Object.values() JavaScript
Giả sử có đối tượng chứa thông tin San Jose, thành phố California. Ta muốn lấy tất cả thông tin thành phố này không lấy nhãn liên kết mỗi dữ liệu.
Xem cặp khóa-giá trị:
city: "San Jose",
Chỉ muốn lấy tên thành phố, thay vì nhãn city.
Hãy xem chương trình cho phép làm này:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
</head>
<body>
<div id="root"></div>
<script async defer>
const cityData = {
city: "San Jose",
state: "California",
area: 181.36,
land: 178.24,
water: 3.12,
urban: 342.27,
metro: 2694.61,
elevation: 82,
population: 1021795,
timezone: "Los_Angeles/Pacific",
website: "www.sanjoseca.gov"
}
let arr = Object.values(cityData);
let root = document.getElementById('root');
root.innerHTML = JSON.stringify(arr);
</script>
</body>
</html>
Trước, thiết lập trang HTML chuẩn với thẻ <head>, <body>, và meta cơ bản trong <head>.
Dùng thẻ <script> viết mã JavaScript. Trong thẻ, khai báo đối tượng JavaScript. Đối tượng gọi là cityData.
Tiếp, lấy giá trị trong đối tượng dùng Object.values(). Sau đó chọn thẻ HTML <div> với id root trong mã. Đây trường hợp dùng phương thức getElementById JavaScript.
Sau chọn thẻ <div>, thay thế nội dung thẻ <div> bằng kết quả Object.values().
Mã trả về danh sách:
["San Jose","California", 181.36, 178.24, 3.12, 342.27, 2694.61, 82, 1021795, "Los_Angeles/Pacific", "www.sanjoseca.gov"]
Ta thấy tất cả giá trị đối tượng gốc. Các giá trị lưu như danh sách.
Kết luận
Phương thức Object.values() JavaScript trả về danh sách giá trị trong đối tượng. Phương thức nhận một đối số: tên đối tượng bạn muốn lấy giá trị.
Bạn muốn học thêm lập trình JavaScript? Xem hướng dẫn Cách học JavaScript. Bạn tìm mẹo học hàng đầu và danh sách khóa cho người mới và trung cấp.
Xem các hướng dẫn nếu muốn học thêm về đối tượng JavaScript:
JavaScript Object.keys(): Hướng dẫn
JavaScript Objects: Hướng dẫn
JavaScript Class: Hướng dẫn