Destructuring — Lấy Giá Trị Ra Khỏi Object và Mảng

Khi chỉ cần mã đơn hàng và tổng tiền từ một object đơn hàng, việc viết đi viết lại order.orderId và order.total làm code dài ra. Càng cần nhiều trường thì càng nhiều dòng mở đầu bằng đúng một chữ order..

Bài này nói về destructuring, cách viết giúp bạn lấy một lúc chỉ những giá trị mình cần vào biến, khớp theo tên key hoặc theo vị trí.

Lấy Ra Chỉ Những Gì Bạn Cần Theo Tên — Destructuring Object

Khi cần lấy mã đơn hàng, tổng tiền và tên khách hàng ra từ một object đơn hàng, bạn sẽ phải viết một dòng const orderId = order.orderId; cho từng trường. Chữ order. lặp lại càng nhiều thì càng khó nhìn ra ngay mỗi dòng lấy giá trị nào.

Destructuring (cú pháp lấy một lúc nhiều giá trị vào biến, khớp theo tên key của object hoặc vị trí trong mảng) cho phép bạn viết gọn trong một dòng: const { orderId, total } = order;. Các tên key viết trong {} ở vế trái trở thành luôn tên biến, mỗi biến lấy giá trị của property cùng tên.

Muốn có giá trị mặc định khi một key không tồn tại, bạn thêm bằng =, như const { shippingFee = 500 } = order;. Muốn gán nó vào một tên biến khác thì viết const { orderId: id } = order;.

Với object lồng nhau, bạn lấy được thẳng giá trị bên trong bằng dạng const { customer: { name } } = order;. Phần đứng sau dấu : mang ý nghĩa khác nhau tùy nó là tên biến hay cặp ngoặc nhọn.

customer: name gán giá trị của customer vào biến tên name, còn customer: { name } lấy name từ bên trong customer. Cách viết sau không tạo ra biến nào tên customer.

const order = {
  orderId: "ORD-1268",
  total: 12800,
  customer: { name: "Maya Chen", email: "maya@example.com" },
};

// Tên key trở thành luôn tên biến
const { orderId, total } = order;
console.log(orderId);          // ORD-1268
console.log(total);            // 12800

// Thêm giá trị mặc định bằng = cho key không có
const { couponCode = "không có" } = order;
console.log(couponCode);       // không có

// Viết một tên biến khác sau dấu :
const { total: totalAmount } = order;
console.log(totalAmount);      // 12800

// Lấy thẳng giá trị từ bên trong object lồng nhau
const { customer: { email } } = order;
console.log(email);            // maya@example.com

Từ một object đơn hàng, lấy ra từng dòng một chỉ những giá trị cần cho việc hiển thị. order đã được khai báo sẵn.

① Hãy lấy mã đơn hàng và tổng tiền cùng lúc, rồi hiển thị theo dạng "ORD-3120 / 8600 dollars".

② Hãy lấy thẳng tên khách hàng từ bên trong object lồng nhau rồi hiển thị.

③ Hãy lấy phí vận chuyển với giá trị mặc định 500 rồi hiển thị. order không có trường phí vận chuyển.

④ Hãy gán mã đơn hàng vào biến tên id rồi hiển thị.

(Nếu chạy đúng, phần giải thích sẽ xuất hiện.)

Lấy Giá Trị Theo Thứ Tự — Destructuring Mảng và rest

Mảng không có tên key nên phải khớp theo vị trí. Khi muốn xử lý riêng món đầu tiên và món thứ 2 trong giỏ hàng, thay vì viết cart[0] và cart[1], bạn có thể viết liền các tên biến và lấy cả hai cùng lúc.

Cách viết là const [firstItem, secondItem] = cart;. Giá trị ở index 0 và 1 được gán lần lượt từ trái sang phải. Muốn bỏ qua một vị trí, bạn chỉ cần đặt một dấu phẩy, như const [, secondItem] = cart;.

Ở vị trí không có phần tử, bạn thêm được giá trị mặc định bằng = "(không có)". Lưu ý giá trị mặc định chỉ được dùng khi vị trí đó là undefined.

Nếu ở đó là null thì biến nhận đúng null. Muốn null cũng bị thay bằng giá trị mặc định, bạn dùng ?? đã học ở bài trước.

Muốn gom một lúc toàn bộ phần còn lại, bạn dùng rest syntax (thêm ... ở vế trái của một mẫu destructuring để gom phần còn dư chưa được lấy ra vào một mảng hoặc một object duy nhất).

Khi viết const [firstItem, ...restItems] = cart;, restItems sẽ chứa toàn bộ từ món thứ 2 trở đi dưới dạng một mảng. ... chỉ đặt được ở vị trí cuối cùng của vế trái.

const cart = ["Wireless Mouse", "USB-C Hub", "Monitor Arm"];

// Gán lần lượt từ trái sang phải
const [firstItem, secondItem] = cart;
console.log(firstItem);            // Wireless Mouse
console.log(secondItem);           // USB-C Hub

// Một dấu phẩy trống bỏ qua vị trí đó
const [, , thirdItem] = cart;
console.log(thirdItem);            // Monitor Arm

// ... gom toàn bộ phần còn lại thành mảng (đổi tên vì món 1 đã dùng ở trên)
const [headItem, ...tailItems] = cart;
console.log(tailItems.join(", "));  // USB-C Hub, Monitor Arm

// Object cũng gom được phần còn lại
const product = { name: "USB-C Hub", price: 2480, stock: 12 };
const { name, ...spec } = product;
console.log(Object.keys(spec).join(", "));  // price, stock

Tách nội dung giỏ hàng thành món đầu tiên và toàn bộ phần còn lại. cart đã được khai báo sẵn.

① Hãy tách thành món đầu tiên và phần còn lại gom vào một mảng, rồi hiển thị món đầu tiên.

② Hãy hiển thị phần còn lại có bao nhiêu món.

③ Hãy lấy riêng món thứ 2 bằng cách viết bỏ qua món đầu, rồi hiển thị.

④ Hãy lấy món thứ 5 bằng cách đặt dấu phẩy để bỏ qua 4 món đầu, kèm giá trị mặc định "(không có)", rồi hiển thị.

Tách một object sản phẩm thành trường dùng để hiển thị và phần còn lại. product đã được khai báo sẵn.

① Hãy lấy riêng tên sản phẩm, gom phần còn lại vào một object khác, rồi hiển thị tên sản phẩm.

② Hãy hiển thị các key của object gom phần còn lại, nối bằng ", ".

③ Hãy lấy số lượng tồn kho với giá trị mặc định 0 khi không có key đó, rồi hiển thị.