For vs forEach() vs for/in vs for/of in JavaScript

2360

Người viết: Nguyen Van Ngoc

Trong bài viết này chúng ta sẽ cùng so sánh sự khác biệt của 4 cách duyệt mảng trong Javascript:

  • for (let i = 0; i < arr.length; ++i)
  • arr.forEach((v, i) => { /* … */ })
  • for (let i in arr)
  • for (const v of arr)

Syntactic Overview

Khởi tạo mảng:

for và for/in cho phép bạn truy cập vào index của mảng chứ không phải là phần tử thực tế, thế nên bạn cần sử dụng arr[i] để lấy giá trị:

Với forEach() và for/of bạn có thể truy cập trực tiếp đến giá trị của phần tử, forEach() cho phép bạn truy cập đến index của phần tử, for/of thì không.

Non-Numeric Properties

Array trong javascript là object nên bạn cũng có thể thêm một phần tử có key là stringthay vì chỉ là number thôi:

3 trên 4 cách duyệt mảng bên trên bỏ qua các phần tử có key không phải là số, trừ for/in:

Đó là ví do tại sao lặp qua một mảng sử dụng for/in là bad practice, những cách còn lại bỏ qua các phần tử có key không phải number:

Thế nên tránh sử dụng for/in trừ khi bạn thực sự muốn duyệt qua các phần tử có key không phải số. Sử dụng rule guard-for-in của ESLint để không cho phép for/in

Có thể bạn quan tâmjava

12 Thư viện JavaScript trực quan hóa dữ liệu hot nhất năm 2019

FabricJS (Canvas library) và xây dựng tool chế ảnh – thư viện Javascript

Empty Elements

Javascript array cho phép chứa các phần tử rỗng, dưới đây là một ví dụ về cú pháp hợp lệ:

for/in và for/eachbỏ qua các phần tử rỗng, for và for/of thì không:

Function Context

Scope của this bên trong forfor/in, và for/of chính là scope bên ngoài của các cấu trúc lặp này, forEach() thì không như vậy trừ khi bạn dùng arrow function

Thế nên sử dụng arrow function đối với forEach nếu không this sẽ không tồn tại.

Async/Await và Generators

forEach cũng không hoạt động tốt với Async/Await hoặc Generators. Nếu forEach callback là đồng bộ thì không thành vấn đề, nhưng bạn không thể sử dụng await bên trong forEach callback

Không sử dụng được yield nốt:

Sử dụng trong for/of thì hoàn toàn ok:

Kết luận

Nói chung, for/of là cách mạnh mẽ nhất để lặp lại qua một mảng trong JavaScript. Nó ngắn gọn hơn một vòng lặp thông thường và không có nhiều trường hợp đặc biệt như for/in và forEach(). Nhược điểm chính của for/of là bạn không thể trực tiếp lấy được index của phần tử đang được duyệt(*). forEach() có một số trường hợp sẽ khiến code của bạn chạy không theo ý muốn nên cần hạn chế dùng , nhưng trong nhiều trường hợp khác nó giúp code của bạn ngắn gọn hơn.

(*) Để lấy được index của phần tử đang được duyệt khi sử dụng for/of, sử dụng Array entries function:

Techtalk via Viblo

CHIA SẺ