for...of và for...in trong JavaScript: duyệt mảng và object

Hai vòng lặp, hai nhiệm vụ khác nhau

JavaScript có hai dạng vòng lặp (loop) trông gần như giống hệt nhau nhưng làm những việc rất khác nhau. for...of đi qua các giá trị của một iterable. for...in đi qua các khóa của một object. Chỉ khác một chữ, nhưng hành vi khác nhau hoàn toàn.

Toàn bộ câu chuyện nằm trong một ví dụ:

const fruits = ["apple", "banana", "cherry"];

for (const fruit of fruits) {
    console.log(fruit);
}

for (const key in fruits) {
    console.log(key);
}

Vòng lặp đầu in ra apple, banana, cherry, tức là các giá trị. Vòng lặp thứ hai in ra 0, 1, 2, tức là các khóa, ở dạng chuỗi. Chọn nhầm một cái là bạn sẽ mất mười phút tự hỏi vì sao mảng của mình toàn là số.

for...of: lấy giá trị từ mọi thứ iterable

for...of là vòng lặp bạn sẽ dùng thường xuyên nhất. Nó chạy được trên mọi thứ JavaScript coi là iterable: mảng, chuỗi, Map, Set, NodeList, generator và nhiều thứ khác.

const scores = [92, 87, 73, 100];
let total = 0;

for (const score of scores) {
    total += score;
}

console.log("average:", total / scores.length);

Không phải xoay xở với chỉ số, không cần scores[i]. Bạn hỏi từng giá trị, bạn nhận từng giá trị. Chuỗi cũng là iterable, nên for...of duyệt qua từng ký tự một:

for (const char of "hi!") {
    console.log(char);
}

Cách này cũng xử lý đúng với hầu hết code point Unicode, một điểm cộng nhỏ nhưng có thật so với việc truy cập chuỗi bằng chỉ số.

Lấy chỉ số với for...of

Thứ duy nhất for...of không đưa thẳng cho bạn là vị trí. Khi cần, hãy kết hợp vòng lặp với entries():

const names = ["Rosa", "Boris", "Ada"];

for (const [index, name] of names.entries()) {
    console.log(`${index}: ${name}`);
}

names.entries() sinh ra các cặp [index, value], và phép destructuring ở bên trái tách chúng thành hai biến. Cách này thường gọn hơn so với quay về vòng lặp for (let i = 0; ...) cổ điển chỉ vì bạn cần i.

for...in: các khóa của một object

for...in được làm ra cho object thường. Nó duyệt qua các khóa dạng chuỗi có thể liệt kê (enumerable):

const user = {
    name: "Rosa",
    age: 30,
    city: "Lisbon",
};

for (const key in user) {
    console.log(key, "->", user[key]);
}

Lưu ý rằng bạn nhận được khóa chứ không phải giá trị. Để đọc giá trị, bạn truy cập lại object bằng user[key]. Mọi khóa đều là chuỗi, kể cả khi trông giống số.

for...in còn đi ngược lên chuỗi prototype, nên có thể làm lộ ra các thuộc tính kế thừa. Với object literal do bạn tự viết thì hiếm khi thành vấn đề, nhưng khi lặp qua instance của một lớp hoặc object đến từ thư viện, bạn nên cẩn thận:

const user = { name: "Rosa", age: 30 };

for (const key in user) {
    if (Object.hasOwn(user, key)) {
        console.log(key, user[key]);
    }
}

Object.hasOwn(user, key) bỏ qua mọi thứ được kế thừa. Trong code hiện đại, phần lớn mọi người tránh hẳn for...in và dùng Object.keys, Object.values hoặc Object.entries, chính là nội dung của phần tiếp theo.

Cách hiện đại để lặp qua object

Thay vì for...in, hãy kết hợp for...of với một trong các hàm hỗ trợ Object.*. Bạn chọn hàm nào trong ba hàm phù hợp với việc mình cần:

const user = { name: "Rosa", age: 30, city: "Lisbon" };

for (const key of Object.keys(user)) {
    console.log("key:", key);
}

for (const value of Object.values(user)) {
    console.log("value:", value);
}

for (const [key, value] of Object.entries(user)) {
    console.log(`${key} = ${value}`);
}

Object.entries đặc biệt dễ dùng: destructuring cặp [key, value] đọc tự nhiên như câu nói thường. Và vì các phương thức này chỉ trả về thuộc tính enumerable của chính object đó, bạn không phải lo về những thuộc tính kế thừa ngoài ý muốn.

Đừng dùng for...in với mảng

Về kỹ thuật thì hợp lệ, nhưng rất dễ khiến người ta vấp:

const nums = [10, 20, 30];
nums.tag = "scores";

for (const key in nums) {
    console.log(key);
}

Bạn nhận được 0, 1, 2, và cả tag. Bất kỳ thuộc tính nào ai đó gắn vào mảng, hoặc vào Array.prototype qua một polyfill, cũng sẽ xuất hiện. Các khóa là chuỗi, nên key + 1 sẽ nối chuỗi thay vì cộng số. Và thứ tự lặp không được đảm bảo khớp với thứ tự mảng trong mọi trường hợp đặc biệt.

Quy tắc dễ nhớ:

• Giá trị của mảng? for...of arr.
• Chỉ số và giá trị của mảng? for...of arr.entries().
• Chỉ cần chỉ số để đếm? Vòng lặp cổ điển for (let i = 0; i < arr.length; i++).
• Khóa hoặc cặp khóa và giá trị của object? Object.keys(obj) / Object.entries(obj) cùng với for...of.

Tóm lại: for...in là công cụ cho trường hợp đặc biệt. for...of cộng với các hàm hỗ trợ của Object đã đủ cho mọi thứ bạn cần.

break và continue dùng được ở cả hai

Cả hai vòng lặp đều hỗ trợ các cách thoát sớm quen thuộc:

const numbers = [1, 2, 3, 4, 5, 6];

for (const n of numbers) {
    if (n % 2 === 0) continue;
    if (n > 4) break;
    console.log(n);
}

continue nhảy sang lần lặp tiếp theo; break thoát hẳn khỏi vòng lặp. Đây là lý do chính để ưu tiên for...of hơn .forEach(): callback của forEach không thể break ra khỏi vòng lặp, còn for...of thì có.

Tóm tắt đặt cạnh nhau

const arr = ["a", "b", "c"];
const obj = { x: 1, y: 2, z: 3 };

// Values of an array:
for (const v of arr) console.log(v);         // a, b, c

// Index and value of an array:
for (const [i, v] of arr.entries()) console.log(i, v);

// Keys of an object:
for (const k of Object.keys(obj)) console.log(k);

// Key and value of an object:
for (const [k, v] of Object.entries(obj)) console.log(k, v);

Bốn vòng lặp, bốn nhiệm vụ, một cách nghĩ: nếu bạn muốn lấy giá trị từ thứ gì đó iterable, dùng for...of. Nếu bạn muốn làm việc với thuộc tính của một object, đi qua Object.keys / Object.values / Object.entries, cũng với for...of. Hãy để dành for...in cho trường hợp hiếm khi bạn thật sự muốn mọi khóa chuỗi enumerable của một object, dù kế thừa hay không.

Tiếp theo: truthy và falsy

Mọi vòng lặp và câu lệnh if trong JavaScript rốt cuộc đều hỏi cùng một câu: giá trị này có được coi là true không? Câu trả lời không phải lúc nào cũng hiển nhiên: chuỗi rỗng, số 0, null và undefined đều có thể hành xử khác với điều bạn nghĩ. Giá trị truthy và falsy là chủ đề tiếp theo.