for...in
Show demo below
const arr = ['a', 'b', 'c'];
for (index in arr) { console.log(index); }
//ouput:
//1
//2
//3
Vòng lặp for ... in chỉ ghi các thuộc tính có thể liệt kê của đối tượng có thể lặp lại. Nó không ghi nhật ký các phần tử mảng a, b, c vì đó không phải là thuộc tính - chúng là giá trị. Nó ghi lại các chỉ mục mảng cũng như arr, là các thuộc tính thực tế.
Nếu bạn không chắc tại sao các thuộc tính này được lặp lại, có một lời giải thích kỹ lưỡng hơn về cách lặp lại mảng và cho ... trong công việc. Chỉ mục mảng chỉ là các thuộc tính có thể liệt kê với tên số nguyên và giống với các thuộc tính đối tượng chung.
Vòng lặp for ... in sẽ duyệt qua tất cả các khóa số nguyên trước khi đi qua các khóa khác và theo thứ tự tăng dần, làm cho hành vi của for ... gần giống với phép lặp mảng bình thường.
Tuy nhiên, vòng lặp for ... in sẽ trả về tất cả các thuộc tính có thể liệt kê, bao gồm những thuộc tính có tên không phải là số nguyên và những thuộc tính được kế thừa.
Không giống như for ... of, for ... in sử dụng kiểu liệt kê thuộc tính thay vì trình vòng lặp của mảng. Trong các mảng thưa thớt, for ... of sẽ truy cập vào các vị trí trống, nhưng for ... in thì không.
Tốt hơn là sử dụng vòng lặp for với chỉ mục số, vì chúng sẽ trả về chỉ mục dưới dạng số thay vì chuỗi, và cũng tránh các thuộc tính không phải chỉ mục.
for...of
Show demo below
const arr = ['a', 'b', 'c'];
for (index of arr) { console.log(index); }
//ouput:
// a
// b
// c
Vòng lặp for ... of lặp lại và ghi lại các giá trị có thể lặp lại, dưới dạng một mảng (có thể lặp lại), xác định sẽ được lặp lại. Các phần tử a, b, c của đối tượng được hiển thị, nhưng không có thuộc tính nào của đối tượng đó.
Vòng lặp for ... of hoạt động dựa trên các giá trị có nguồn gốc từ từng giá trị có thể lặp lại theo thứ tự tuần tự. Mỗi hoạt động của vòng lặp trên một giá trị được gọi là một lần lặp và vòng lặp được cho là lặp lại trên giá trị có thể lặp lại. Mỗi lần lặp thực hiện các câu lệnh có thể tham chiếu đến giá trị trình tự hiện tại.
Sự khác biệt giữa for ... of và for ... in
Cả hai câu lệnh for ... in và for ... of đều lặp lại một cái gì đó. Sự khác biệt chính giữa chúng là ở những gì chúng lặp lại.
Câu lệnh for ... in lặp qua các thuộc tính chuỗi có thể liệt kê của một đối tượng, trong khi câu lệnh for ... of lặp qua các giá trị mà đối tượng có thể lặp được xác định để được lặp lại.
for await...of
Câu lệnh for await ... of tạo ra một vòng lặp lặp qua các đối tượng có thể lặp lại không đồng bộ cũng như trên các vòng lặp đồng bộ, bao gồm: built-in String, Array, Array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set, và các vòng lặp không đồng bộ / đồng bộ hóa do người dùng xác định.
Nó gọi một móc lặp tùy chỉnh với các câu lệnh sẽ được thực thi cho giá trị của từng thuộc tính riêng biệt của đối tượng. Câu lệnh này chỉ có thể được sử dụng bên trong một hàm không đồng bộ.
forEach
Array.prototype.forEach () là prototype thực thi một hàm được cung cấp một lần cho mỗi phần tử mảng.
const arr = ['a', 'b', 'c'];
arr.forEach {element => console.log(element); }
//ouput:
// a
// b
// c
forEach () gọi một hàm callbackFn được cung cấp một lần cho mỗi phần tử trong mảng theo thứ tự chỉ mục tăng dần. Nó không được gọi cho các thuộc tính chỉ mục đã bị xóa hoặc chưa được khởi tạo. (Đối với các mảng thưa thớt, hãy xem ví dụ bên dưới.)
Lưu ý: không thể sử dụng "break" và "return" trong forEach
const arr = ['a', 'b', 'c'];
arr.forEach {element => {console.log(element); break;}}
//ouput:
// Uncaught SyntaxError: expected expression, got keyword 'break'