Video học lập trình mỗi ngày

For ... in vs for ... of trong javascript. Hay bao gồm nhiều chức năng như for loop truyền thống mà hằng ngày chúng ta, những devjs đang sử dụng rất nhiều trong những dòng code của mình. Nhưng liệu có một chức năng nào bạn đã không sử dụng đúng trong trường hợp for ... of.

Đây là bài viết mà chúng ta sẽ đề cập và làm rõ một số trường hợp mà For ... of có thể làm tốt hơn những chức năng khác. For ... of xuất hiện kể từ khi ES2015 hay còn gọi là ES6. Nếu bạn muốn xem thêm những chức năng về ES6 thì có thể xem những bài viết trước về tính năng của es6 của chúng tôi.

Khi sử dụng for...of chúng ta có thể lặp lại arrays, array-like objects, và có thể sử dụng để giải quyết nhiều trường hợp nữa như (maps, sets, DOM collections).

Có thể tôi sai lầm khi nhắc lại array-like objects là gì? Nhưng nếu tôi đúng thì bạn cũng nên tìm hiểu nó như thế nào.

Giờ chúng ta sẽ lướt qua những gì for ... of trong javascript có thể làm được. Và vì sao nó là viên ngọc quý thì hãy xem từ từ, for ... of sẽ mang đến cho ta nhiều ngạc nhiên.

Array iteration

Việc loop một array thì chúng ta có thể sử dụng nhiều cách, nhưng ở đây tôi cũng nói rồi chỉ đề cập tới for ... of.

const products = ['dmitripavlutin', 'anonystick'];

for (const product of products) {
  console.log(product);
}
// 'dmitripavlutin'
// 'anonystick'

Nếu bạn cần get ra index của for ... of thì cũng rất đơn giản sử dụng entries(), thì method sẽ return [index, item] mỗi lần lặp.

const products = ['dmitripavlutin', 'anonystick'];

for (const [index, product] of products.entries()) {
  console.log(index, product);
}
// 0, 'dmitripavlutin'
// 1, 'anonystick'

In-place destructuring

Đầu tiên hãy nhìn syntax của for ... of

for (LeftHandSideExpression of Expression) {
  // statements
}

LeftHandSideExpression: biểu thức có thể được thay thế bằng bất cứ thứ gì đứng ở bên trái của biểu thức sẽ gán. Xem ví dụ bạn sẽ hiểu hơn.

const persons = [
  { name: 'dmitripavlutin' },
  { name: 'anonystick' }
];

for (const { name } of persons) {
  console.log(name);
}
// 'dmitripavlutin'
// 'anonystick'

Có thể nói khi dùng for...of trong trường hợp này có lẽ tôi sung sướng hơn những gì mà tôi đã làm chúng với for truyền thống trước kia. Hết đau đớn với những tính năng khi ES6 ra đời.

Array-like iteration

Gần đây có những khoá học mà có những bài toán như thế này: "Sử dụng vòng lặp for...of để tính tích của các phần tử trong một array gồm các số"

Tôi nghĩ những bài toán này thực sự vô nghĩa khi để bỏ tiền ra học. Bới vì sao, tôi sẽ dành một bài viết để nói về việc học như thế nào để có thể phỏng vấn thành công ở một công ty IT nào. Quay lại vấn đề mà chúng ta đang nói.

Để giải quyết bài toán đó thì với for... of thì quá ez game.

function sum() {
  let sum = 0;
  for (const number of arguments) {
    sum += number;
  }
  return sum;
}

sum(1, 2, 3); // => 6

Let’s write a function sum(num1, num2, ..., numN) that sums all its arguments:

A quick overview of iterables

Về phần này thì bạn chưa nên quan tâm cho lắm, nên tôi sẽ không giải thích phần này nhiều hơn các phần khác. Nếu như các bạn muốn hiểu thêm thì có thể xem qua một bài viết về vấn đề này "Spread operator and iteration protocols"

Ví dụ:

const array = [1, 2, 3];
const iterator1 = array[Symbol.iterator]();
iterator1.next(); // => { value: 1, done: false }

String characters iteration

Cũng giống như for ... in thì for ... of cũng có thể lặp lại một string một cách tốt nhất.

const message = 'hello';

for (const character of message) {
  console.log(character);
}
// 'h'
// 'e'
// 'l'
// 'l'
// 'o'

Maps and Sets iteration

Map là một object đặc biệt cho phép bạn liên kết key với một value. Map đã cử dụng rất nhiều cho việc lưu trữ dữ liệu key-value. Bạn có thể tìm hiểu chúng, map và set sẽ không làm bạn thất vọng đâu, tin tôi đi.

Ví dụ về maps

const names = new Map();
names.set(1, 'one');
names.set(2, 'two');

for (const [number, name] of names) {
  console.log(number, name);
}
// logs 1, 'one'
// logs 2, 'two'

for (const [number, name] of names) sẽ lặp từng item trên map. Và set cũng vậy

const colors = new Set(['white', 'blue', 'red', 'white']);

for (color of colors) {
  console.log(color);
}
// 'white'
// 'blue'
// 'red'

Iterate plain JavaScript objects

Đến đây thì devjs mới cảm thấy thở phào nhẹ nhõm khi trước khi chúng ta muốn loop một object thì chúng ta đã khổ sở như thế nào. Ở đó trước kia tôi sẽ sử dụng Object.key(obj) và sau đó sử dụng forEach or for truyền thống để giải quyết vấn đề này.

const person = {
  name: 'John Smith',
  job: 'agent'
};

Object.keys(person).forEach(prop => {
  console.log(prop, person[prop]);
});
// 'name', 'John Smith'
// 'job', 'agent'

Nhưng giờ đây ta có thể remake một cách thoải mái hơn nhiều khi kết hợp for ... of với Object.entries()

const person = {
  name: 'John Smith',
  job: 'agent'
};

for (const [prop, value] of Object.entries(person)) {
  console.log(prop, value);
}
// 'name', 'John Smith'
// 'job', 'agent'

Với Object.entries() : [['name', 'John Smith'], ['job', 'agent']]

Performance

Nhưng hãy chú ý rằng, khi bạn hay tôi xử lý một big array thì hãy cận thận với for ... of vì nó sẽ chậm hơn rất nhiều so với for truyền thống. Lời khuyên ở đây, nếu một ngày nào đó, bạn sẽ xử lý large arrays thì hy vọng rằng, bạn sẽ quay lại như lúc đầu.

const a = [/* big array */];
for (let i = 0; i < a.length; i++) {
  console.log(a[i]);
}

Kết luận

Vì sao nói for ... of là một viên đá quý:

1. It’s concise 

2. It accepts iterables, including arrays, strings, maps, sets, DOM collections 

3. It accepts array-like objects 

4. The iterated item can be destructured in-place. 

Bài viết được viết và bổ sung dựa trên bài viết "Why for...of Loop in JavaScript is a Gem"  của dmitripavlutin.com