Bất cứ khi nào bạn muốn lặp qua một mảng trong JavaScript, cách tiếp cận chung được thực hiện là sử dụng arr.forEach((item, index) => console.log(item, index));2, arr.forEach((item, index) => console.log(item, index));3 hoặc bất kỳ vòng lặp tương tự nào. Mặc dù đây là một lựa chọn hợp lệ, có nhiều cách tiếp cận khác mà bạn có thể thực hiện để lặp qua một mảng trong JavaScript.
cho mỗi
arr.forEach((item, index) => console.log(item, index));4 cho phép bạn lặp qua tất cả các mục trong một mảng. Ví dụ, một vòng lặp như thế này:
for (let i = 0; i < arr.length; i++) { console.log(arr[i]); }
sẽ trở thành:
arr.forEach((item) => console.log(item));
Điều này giúp loại bỏ sự cần thiết phải tiếp tục sử dụng chỉ mục để truy cập mục, đặc biệt là khi các mục trong mảng là đối tượng và truy cập thuộc tính của chúng có thể trở thành rắc rối trong khi sử dụng chỉ mục (trừ khi bạn gán nó cho một biến mới trong vòng lặp.)
Bạn cũng có thể truy cập chỉ mục:
arr.forEach((item, index) => console.log(item, index));
bản đồ
arr.forEach((item, index) => console.log(item, index));5 vòng lặp qua một mảng và trả về một mảng mới. Điều này rất hữu ích khi bạn đang lặp qua một mảng, nhưng cũng đang sửa đổi nó.
Ví dụ, để làm điều này trong một vòng lặp:
for (let i = 0; i < arr.length; i++) { arr[i] = arr[i] + 1; }
Có thể được thực hiện theo cách này trong bản đồ:
arr = arr.map((item) => item + 1);
Bạn cũng có thể gán nó cho một mảng mới:
const newArr = arr.map((item) => item + 1);
Bạn cũng có thể truy cập chỉ mục:
const newArr = arr.map((item, index) => item + index);
giảm
arr.forEach((item, index) => console.log(item, index));6 cho phép bạn lặp qua một mảng và tích lũy kết quả từ các lần lặp trước cho đến lần lặp hiện tại. Cuối cùng, một kết quả duy nhất được thêm vào.
Ví dụ: giả sử bạn muốn lấy tổng số phần tử trong một mảng. Sử dụng cho vòng lặp, bạn có thể làm điều đó như thế này:
let sum = 0; for (let i = 0; i < arr.length; i++){ sum += arr[i] }
Sử dụng arr.forEach((item, index) => console.log(item, index));6, bạn có thể làm theo cách này:
const arr = [1, 2, 3, 4]; const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue);
Tham số arr.forEach((item, index) => console.log(item, index));8 là kết quả sau lần lặp cuối cùng trước mức hiện tại và cuối cùng, giá trị của nó sẽ là giá trị được trả về. Theo mặc định, giá trị ban đầu của nó là giá trị của phần tử thứ nhất và lần lặp bắt đầu từ phần tử thứ hai. Vì vậy, trong ví dụ trên, trong lần lặp đầu tiên arr.forEach((item, index) => console.log(item, index));8 sẽ là 1 và for (let i = 0; i < arr.length; i++) { arr[i] = arr[i] + 1; }0 sẽ là 2. 1 + 2 là 3 nên trong lần lặp thứ hai arr.forEach((item, index) => console.log(item, index));8 sẽ là 3 và for (let i = 0; i < arr.length; i++) { arr[i] = arr[i] + 1; }0 sẽ là 3 (vì đó là mục trong mảng sau 2), và như vậy. Cuối cùng, giá trị trả về sẽ là 10.
Bạn cũng có thể vượt qua for (let i = 0; i < arr.length; i++) { arr[i] = arr[i] + 1; }3 để đặt giá trị ban đầu khác với phần tử đầu tiên. Nếu for (let i = 0; i < arr.length; i++) { arr[i] = arr[i] + 1; }3 được cung cấp, việc lặp lại sẽ bắt đầu từ phần tử đầu tiên. Vượt qua for (let i = 0; i < arr.length; i++) { arr[i] = arr[i] + 1; }3 cũng hữu ích nếu bạn không chắc chắn liệu có các mục trong mảng của bạn hay không, vì arr.forEach((item, index) => console.log(item, index));6 ném lỗi nếu mảng trống và không cung cấp for (let i = 0; i < arr.length; i++) { arr[i] = arr[i] + 1; }3.
Một ví dụ về việc sử dụng for (let i = 0; i < arr.length; i++) { arr[i] = arr[i] + 1; }3:
const arr = [1, 2, 3, 4]; const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
Với for (let i = 0; i < arr.length; i++) { arr[i] = arr[i] + 1; }3 được đặt thành 0, trong lần lặp đầu tiên arr.forEach((item, index) => console.log(item, index));8 sẽ là 0 và for (let i = 0; i < arr.length; i++) { arr[i] = arr[i] + 1; }0 sẽ là 1 (bắt đầu từ phần tử đầu tiên trong mảng).
mọi
arr = arr.map((item) => item + 1);2 cho phép bạn lặp qua một mảng và kiểm tra xem tất cả các mục trong mảng trả về đúng trong chức năng gọi lại được cung cấp. Điều này rất hữu ích khi bạn đang lặp qua một mảng để đảm bảo nó hợp lệ cho một quy trình xác thực nhất định. Vòng lặp sẽ dừng và trả về sai bất cứ khi nào nó gặp một mục không trả về đúng trong hàm gọi lại.
Ví dụ: để kiểm tra rằng tất cả các mục trong mảng lớn hơn 0, bạn có thể làm điều đó như thế này với vòng lặp arr.forEach((item, index) => console.log(item, index));2:
arr.forEach((item) => console.log(item));0
Để làm điều này bằng cách sử dụng arr = arr.map((item) => item + 1);2:
arr.forEach((item) => console.log(item));1
Nó sẽ kiểm tra rằng mỗi arr = arr.map((item) => item + 1);5 là arr = arr.map((item) => item + 1);6 và nếu một trong các mục không phải, nó sẽ dừng vòng lặp và trả về sai.
Nếu bạn không cần thực sự lưu trữ giá trị trong một biến như trong ví dụ trên, bạn chỉ có thể:
arr.forEach((item) => console.log(item));2
Bạn cũng có thể vượt qua arr = arr.map((item) => item + 1);7 dưới dạng tham số thứ hai với arr = arr.map((item) => item + 1);5.
một số
Không giống như arr = arr.map((item) => item + 1);2, const newArr = arr.map((item) => item + 1);0 cho phép bạn lặp qua một mảng và kiểm tra xem ít nhất một mục có trả lại đúng cho chức năng gọi lại không. Khi một mục được tìm thấy vượt qua bài kiểm tra được cung cấp, vòng lặp sẽ dừng và trả về đúng. Nếu không tìm thấy mục nào vượt qua bài kiểm tra được cung cấp, vòng lặp sẽ trả về sai.
Ví dụ: để kiểm tra xem ít nhất một mục lớn hơn 0 trong mảng sử dụng cho vòng lặp:
arr.forEach((item) => console.log(item));3
Để làm điều này bằng cách sử dụng const newArr = arr.map((item) => item + 1);0:
arr.forEach((item) => console.log(item));4
Bạn cũng có thể loại bỏ việc gán nó cho một biến nếu bạn không cần nó:
arr.forEach((item) => console.log(item));5
Bạn có thể truy cập chỉ mục bằng cách chuyển nó dưới dạng tham số thứ hai cho chức năng gọi lại.
lọc
const newArr = arr.map((item) => item + 1);2 Vòng lặp qua một mảng và trả về một mảng mới chỉ với các phần tử trả về const newArr = arr.map((item) => item + 1);3 trong hàm gọi lại.
Ví dụ: để chỉ nhận được các phần tử lớn hơn 0 trong mảng, bạn có thể làm theo cách này với Loop:
arr.forEach((item) => console.log(item));6
Để làm điều này bằng cách sử dụng const newArr = arr.map((item) => item + 1);4:
arr.forEach((item) => console.log(item));7
Bạn cũng có thể truy cập chỉ mục bằng cách chuyển một đối số thứ hai cho mảng gọi lại.
tìm thấy
Với const newArr = arr.map((item) => item + 1);5, bạn có thể lặp qua một mảng để tìm phần tử đầu tiên trả về đúng cho một chức năng nhất định. Khi phần tử được tìm thấy, vòng lặp sẽ dừng và phần tử sẽ được trả về. Nếu không tìm thấy yếu tố nào thỏa mãn xác thực, const newArr = arr.map((item) => item + 1);6 sẽ được trả về. Điều này tương tự như const newArr = arr.map((item) => item + 1);0, ngoại trừ const newArr = arr.map((item) => item + 1);5 trả về phần tử trong khi const newArr = arr.map((item) => item + 1);0 chỉ trả về một boolean.
Ví dụ: để tìm một phần tử trong mảng lớn hơn 0 bằng cách sử dụng vòng lặp:
arr.forEach((item) => console.log(item));8
Để làm điều này bằng cách sử dụng const newArr = arr.map((item) => item + 1);5:
arr.forEach((item) => console.log(item));9
Bạn cũng có thể truy cập chỉ mục bằng cách chuyển một đối số thứ hai cho mảng gọi lại.
Tìm kiếm
Điều này tương tự như const newArr = arr.map((item) => item + 1);5, ngoại trừ việc nó trả về chỉ số của phần tử. Nếu không tìm thấy phần tử, nó sẽ trả về -1.
Ví dụ: để tìm chỉ mục của một phần tử trong mảng lớn hơn 0 bằng cách sử dụng vòng lặp:
arr.forEach((item, index) => console.log(item, index));0
Sử dụng const newArr = arr.map((item, index) => item + index);2:
arr.forEach((item, index) => console.log(item, index));1
Bạn cũng có thể truy cập chỉ mục bằng cách chuyển một đối số thứ hai cho mảng gọi lại.
Tìm kiếm
Điều này tương tự như const newArr = arr.map((item) => item + 1);5, ngoại trừ việc nó trả về chỉ số của phần tử. Nếu không tìm thấy phần tử, nó sẽ trả về -1.
Ví dụ: để tìm chỉ mục của một phần tử trong mảng lớn hơn 0 bằng cách sử dụng vòng lặp:
Sử dụng const newArr = arr.map((item, index) => item + index);2:
tính tương thích của trình duyệt web