Mảng trả về vòng lặp JavaScript

JavaScript cung cấp một số phương thức và kỹ thuật để lặp qua các mảng và phần tử và thực hiện mọi việc với chúng. Vậy… bạn nên sử dụng phương pháp nào và tại sao?

Hôm nay, chúng ta sẽ xem xét các cách khác nhau mà bạn có thể lặp lại mọi thứ với vanilla JS, khi nào và tại sao nên chọn cái này thay vì cái kia

Nào cùng đào vào bên trong

Một mảng ví dụ

Đối với bài viết hôm nay, hãy sử dụng một mảng sandwiches làm ví dụ

let sandwiches = ['turkey', 'tuna', 'ham', 'pb&j'];

Chúng tôi sẽ lặp lại nó và ghi từng mục vào bảng điều khiển, nhưng trong một trang web hoặc ứng dụng thực, bạn có thể muốn thao tác dữ liệu theo một cách nào đó

Vòng lặp for

Bạn có thể sử dụng vòng lặp for để lặp qua các mảng, NodeList và các đối tượng giống như mảng khác. Đây là cách học cũ để lặp lại mọi thứ

// logs 0, "turkey", 1, "tuna", 2, "ham", 3, "pb&j"
for (let i = 0; i < sandwiches.length; i++) {
	console.log(i); // index
	console.log(sandwiches[i]); // value
}

• Trong phần đầu tiên của vòng lặp, trước dấu chấm phẩy đầu tiên, chúng ta đặt một biến đếm (thường là ________ 38 ______, nhưng nó có thể là bất kỳ thứ gì) thành

  // logs 0, "turkey", 1, "tuna", 2, "ham", 3, "pb&j"
  for (let i = 0; i < sandwiches.length; i++) {
  	console.log(i); // index
  	console.log(sandwiches[i]); // value
  }
  

  0
• Phần thứ hai, giữa hai dấu chấm phẩy, là bài kiểm tra mà chúng tôi kiểm tra sau mỗi lần lặp lại vòng lặp. Trong trường hợp này, chúng tôi muốn đảm bảo giá trị bộ đếm nhỏ hơn tổng số mục trong mảng của chúng tôi. Chúng tôi làm điều này bằng cách kiểm tra

  // logs 0, "turkey", 1, "tuna", 2, "ham", 3, "pb&j"
  for (let i = 0; i < sandwiches.length; i++) {
  	console.log(i); // index
  	console.log(sandwiches[i]); // value
  }
  

  1 của mảng của chúng tôi
• Cuối cùng, sau dấu chấm phẩy thứ hai, chúng tôi chỉ định những gì sẽ chạy sau mỗi vòng lặp. Trong trường hợp này, chúng tôi đang thêm

  // logs 0, "turkey", 1, "tuna", 2, "ham", 3, "pb&j"
  for (let i = 0; i < sandwiches.length; i++) {
  	console.log(i); // index
  	console.log(sandwiches[i]); // value
  }
  

  2 vào giá trị của i với

  // logs 0, "turkey", 1, "tuna", 2, "ham", 3, "pb&j"
  for (let i = 0; i < sandwiches.length; i++) {
  	console.log(i); // index
  	console.log(sandwiches[i]); // value
  }
  

  4

Sau đó, chúng tôi có thể sử dụng _______ 38 _______ để lấy mục hiện tại trong vòng lặp từ mảng của chúng tôi

Đây là một bản demo

Vòng lặp // logs 0, "turkey", 1, "tuna", 2, "ham", 3, "pb&j" for (let i = 0; i < sandwiches.length; i++) { console.log(i); // index console.log(sandwiches[i]); // value } 6

Một cách tiếp cận hiện đại hơn, bạn có thể sử dụng

// logs 0, "turkey", 1, "tuna", 2, "ham", 3, "pb&j"
for (let i = 0; i < sandwiches.length; i++) {
	console.log(i); // index
	console.log(sandwiches[i]); // value
}

// logs 0, "turkey", 1, "tuna", 2, "ham", 3, "pb&j"
for (let i = 0; i < sandwiches.length; i++) {
	console.log(i); // index
	console.log(sandwiches[i]); // value
}

Trong một vòng lặp

// logs 0, "turkey", 1, "tuna", 2, "ham", 3, "pb&j"
for (let i = 0; i < sandwiches.length; i++) {
	console.log(i); // index
	console.log(sandwiches[i]); // value
}

// logs "turkey", "tuna", "ham", "pb&j"
for (let sandwich of sandwiches) {
	console.log(sandwich);
}

// logs "turkey", "tuna", "ham", "pb&j"
for (let sandwich of sandwiches) {
	console.log(sandwich);
}

Đây là một bản demo khác

Bỏ qua và kết thúc vòng lặp

Bạn có thể chuyển sang mục tiếp theo trong vòng lặp for hoặc

// logs 0, "turkey", 1, "tuna", 2, "ham", 3, "pb&j"
for (let i = 0; i < sandwiches.length; i++) {
	console.log(i); // index
	console.log(sandwiches[i]); // value
}

// logs "turkey", "tuna", "ham", "pb&j"
for (let sandwich of sandwiches) {
	console.log(sandwich);
}

// logs "turkey", "tuna", "ham", "pb&j"
for (let sandwich of sandwiches) {
	console.log(sandwich);
}

// logs "turkey", "tuna", "pb&j"
for (let sandwich of sandwiches) {

	// Skip to the next item in the loop
	if (sandwich === 'ham') continue;

	console.log(sandwich);

}

// Logs "turkey", "tuna"
for (let sandwich of sandwiches) {

	// Skip to the next item in the loop
	if (sandwich === 'ham') break;

	console.log(sandwich);

}

Đây là bản demo của

// logs "turkey", "tuna", "ham", "pb&j"
for (let sandwich of sandwiches) {
	console.log(sandwich);
}

// logs "turkey", "tuna", "ham", "pb&j"
for (let sandwich of sandwiches) {
	console.log(sandwich);
}

Các phương thức // logs "turkey", "tuna", "ham", "pb&j" for (let sandwich of sandwiches) { console.log(sandwich); } 7 và // logs "turkey", "tuna", "ham", "pb&j" for (let sandwich of sandwiches) { console.log(sandwich); } 8

Các phương thức

// logs "turkey", "tuna", "ham", "pb&j"
for (let sandwich of sandwiches) {
	console.log(sandwich);
}

// logs "turkey", "tuna", "ham", "pb&j"
for (let sandwich of sandwiches) {
	console.log(sandwich);
}

Bạn chuyển một hàm gọi lại vào phương thức

// logs "turkey", "tuna", "pb&j"
for (let sandwich of sandwiches) {

	// Skip to the next item in the loop
	if (sandwich === 'ham') continue;

	console.log(sandwich);

}

// Logs "turkey", "tuna"
for (let sandwich of sandwiches) {

	// Skip to the next item in the loop
	if (sandwich === 'ham') break;

	console.log(sandwich);

}

// logs 0, "turkey", 1, "tuna", 2, "ham", 3, "pb&j"
sandwiches.forEach(function (sandwich, index) {
	console.log(index);    // index
	console.log(sandwich); // value
});

Đây là bản demo của phương pháp

// logs "turkey", "tuna", "ham", "pb&j"
for (let sandwich of sandwiches) {
	console.log(sandwich);
}

Không giống như vòng lặp for và

// logs 0, "turkey", 1, "tuna", 2, "ham", 3, "pb&j"
for (let i = 0; i < sandwiches.length; i++) {
	console.log(i); // index
	console.log(sandwiches[i]); // value
}

// logs "turkey", "tuna", "pb&j"
for (let sandwich of sandwiches) {

	// Skip to the next item in the loop
	if (sandwich === 'ham') continue;

	console.log(sandwich);

}

// Logs "turkey", "tuna"
for (let sandwich of sandwiches) {

	// Skip to the next item in the loop
	if (sandwich === 'ham') break;

	console.log(sandwich);

}

// logs "turkey", "tuna", "pb&j"
for (let sandwich of sandwiches) {

	// Skip to the next item in the loop
	if (sandwich === 'ham') continue;

	console.log(sandwich);

}

// Logs "turkey", "tuna"
for (let sandwich of sandwiches) {

	// Skip to the next item in the loop
	if (sandwich === 'ham') break;

	console.log(sandwich);

}

// logs "turkey", "tuna", "ham", "pb&j"
for (let sandwich of sandwiches) {
	console.log(sandwich);
}

// logs "turkey", "tuna", "ham", "pb&j"
for (let sandwich of sandwiches) {
	console.log(sandwich);
}

// Skip "ham"
// logs "turkey", "tuna", "pb&j"
sandwiches.forEach(function (sandwich, index) {
	if (sandwich === 'ham') return;
	console.log(sandwich);
});

Đây là bản minh họa bỏ qua các mục trong vòng lặp

// logs "turkey", "tuna", "ham", "pb&j"
for (let sandwich of sandwiches) {
	console.log(sandwich);
}

Bạn nên sử dụng phương pháp nào, và tại sao?

Trong hầu hết các trường hợp, hầu hết thời gian, tôi sử dụng vòng lặp

// logs 0, "turkey", 1, "tuna", 2, "ham", 3, "pb&j"
for (let i = 0; i < sandwiches.length; i++) {
	console.log(i); // index
	console.log(sandwiches[i]); // value
}

Tuy nhiên, có một số trường hợp ngoại lệ đối với điều đó…

1. Nếu tôi cần chỉ mục của mặt hàng, tôi sẽ sử dụng phương pháp

   // logs "turkey", "tuna", "ham", "pb&j"
   for (let sandwich of sandwiches) {
   	console.log(sandwich);
   }
   

   7 hoặc

   // logs "turkey", "tuna", "ham", "pb&j"
   for (let sandwich of sandwiches) {
   	console.log(sandwich);
   }
   

   8
2. Nếu tôi cần chỉ mục và muốn kết thúc vòng lặp sớm sau khi một điều kiện được đáp ứng, tôi sẽ sử dụng vòng lặp for

Tôi cố gắng tránh các vòng lặp for trừ khi có lý do thuyết phục để sử dụng chúng. Chúng khó đọc. Chúng khó viết. Họ chỉ là lộn xộn

Làm cách nào để trả về một mảng mới trong JavaScript vòng lặp for?

Làm cách nào để lặp một mảng trong JavaScript?

Làm cách nào để trả về một giá trị mảng trong JavaScript?

Chúng ta có thể sử dụng JavaScript vòng lặp return in for không?