Vòng lặp JavaScript

JavaScript cung cấp nhiều cách để lặp qua các vòng lặp. Hướng dẫn này giải thích tất cả các khả năng lặp khác nhau trong JavaScript hiện đại

Giới thiệu

JavaScript cung cấp nhiều cách để lặp qua các vòng lặp. Hướng dẫn này giải thích từng cái với một ví dụ nhỏ và các thuộc tính chính.

for

const list = ['a', 'b', 'c']
for (let i = 0; i < list.length; i++) {
  console.log(list[i]) //value
  console.log(i) //index
}
  • Bạn có thể làm gián đoạn mộtforsử dụng vòng lặpbreak
  • Bạn có thể chuyển tiếp nhanh đến lần lặp tiếp theo củaforsử dụng vòng lặpcontinue

cho mỗi

Được giới thiệu trong ES5. Với một mảng, bạn có thể lặp lại các thuộc tính của nó bằng cách sử dụnglist.forEach():

const list = ['a', 'b', 'c']
list.forEach((item, index) => {
  console.log(item) //value
  console.log(index) //index
})

//index is optional list.forEach(item => console.log(item))

tiếc là bạn không thể thoát ra khỏi vòng lặp này.

do...while

const list = ['a', 'b', 'c']
let i = 0
do {
  console.log(list[i]) //value
  console.log(i) //index
  i = i + 1
} while (i < list.length)

Bạn có thể làm gián đoạn mộtwhilesử dụng vòng lặpbreak:

do {
  if (something) break
} while (true)

và bạn có thể chuyển sang lần lặp tiếp theo bằng cách sử dụngcontinue:

do {
  if (something) continue

//do something else } while (true)

while

const list = ['a', 'b', 'c']
let i = 0
while (i < list.length) {
  console.log(list[i]) //value
  console.log(i) //index
  i = i + 1
}

Bạn có thể làm gián đoạn mộtwhilesử dụng vòng lặpbreak:

while (true) {
  if (something) break
}

và bạn có thể chuyển sang lần lặp tiếp theo bằng cách sử dụngcontinue:

while (true) {
  if (something) continue

//do something else }

Sự khác biệt vớido...whileđó làdo...whileluôn thực hiện chu kỳ của nó ít nhất một lần.

for...in

Lặp lại tất cả các thuộc tính có thể liệt kê của một đối tượng, đặt tên thuộc tính.

for (let property in object) {
  console.log(property) //property name
  console.log(object[property]) //property value
}

for...of

ES6giới thiệufor...ofvòng lặp, kết hợp tính ngắn gọn của forEach với khả năng phá vỡ:

//iterate over the value
for (const value of ['a', 'b', 'c']) {
  console.log(value) //value
}

//get the index as well, using entries() for (const [index, value] of [‘a’, ‘b’, ‘c’].entries()) { console.log(index) //index console.log(value) //value }

Lưu ý việc sử dụngconst. Vòng lặp này tạo ra một phạm vi mới trong mỗi lần lặp, vì vậy chúng tôi có thể sử dụng một cách an toàn thay vìlet.

for...invsfor...of

Sự khác biệt vớifor...inLà:

  • for...of lặp qua các giá trị thuộc tính
  • for...in lặp lại các tên thuộc tính

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn js khác: