Điều thông thường bạn làm với một mảng là gì? Thêm hoặc xóa các mục khỏi một mảng. Lặp lại các mục của nó! Đây là nơi phương thức mảng forEach () tỏa sáng.
Trước khi đi sâu vào xem forEach () hoạt động như thế nào, chúng ta cần xem cách hoạt động của vòng lặp. Vòng lặp là một khái niệm khoa học máy tính cơ bản. Nếu bạn muốn trở thành một lập trình viên âm thanh, thành thạo các vòng lặp là bước đầu tiên bạn cần làm.
Đây là một ví dụ về vòng lặp for trong Javascript.
let languages = ['Python', 'Javascript', 'PHP', 'Golang'];
for (i = 0; i < languages.length; i++) {
console.log(languages[i])
}
Đầu ra
Python Javascript PHP Golang
Như bạn có thể thấy, vòng lặp for cho phép chúng ta thực thi một khối mã cụ thể; tuy nhiên, nhiều khi chúng ta muốn. Vì vậy, chúng tôi đã lặp lại danh sách các ngôn ngữ và in tên trong trường hợp này.
Sau ES6, chúng ta không cần sử dụng vòng lặp for để truy cập từng phần tử một và thực hiện các thao tác cụ thể. Để lặp lại từng mục trong mảng, chúng ta có thể sử dụng hàm forEach () mảng Javascript và thực hiện thao tác bắt buộc đối với chúng.
Chúng ta có thể nhận được đầu ra tương tự như vòng lặp for bằng cách sử dụng cho mỗi() phương pháp.
let languages = ['Python', 'Javascript', 'PHP', 'Golang'];
languages.forEach(element => {
console.log(element)
});
Đầu ra
Python Javascript PHP Golang
Bạn có thể thấy rằng chúng tôi nhận được cùng một đầu ra. Điều này là do vòng lặp for tốn nhiều thời gian hơn để đi qua từng mục trong đó hàm forEach () hiệu quả hơn để duyệt qua từng phần tử của mảng.
Mảng JavaScript forEach
Mảng JavaScript forEach () là một hàm tích hợp có thể thực thi một hàm trên từng mục trong mảng. Các cho mỗi() phương thức được gọi trên mảng Đối tượng và được truyền hàm trên mỗi phần tử trong mảng.
Hàm forEach () chấp nhận hàm gọi lại. Hàm gọi lại này áp dụng cho tất cả các phần tử của mảng và đưa ra kết quả. Hàm gọi lại cũng có thể nhận tham số thứ hai của chỉ mục nếu bạn cần tham chiếu đến chỉ mục của phần tử hiện tại trong mảng.
Tóm lại, phương thức Javascript forEach () thực thi một hàm được cung cấp một lần cho mỗi phần tử mảng. Do đó, Javascript forEach chỉ được sử dụng trên Mảng, Bản đồ và Bộ. Bài viết này mô tả ngắn gọn cách sử dụng phương thức forEach () để lặp lại các phần tử của mảng trong JavaScript.
Cú pháp
array.forEach(function(currentValue, index, array), thisValue)
Thông số
hàm (giá trị hiện tại, chỉ mục, mảng)
Nó là bắt buộc, và nó là một hàm cho mỗi phần tử trong mảng.
Xem các đối số Hàm sau:
currentValue
Yêu cầu. Giá trị của phần tử hiện tại.
mục lục
Không bắt buộc. Chỉ số mảng của phần tử hiện tại.
mảng
Không bắt buộc. Nó là đối tượng mảng mà phần tử hiện tại thuộc về.
giá trị này
Tham số thisValue là Tùy chọn. Nó là giá trị được truyền cho hàm để được sử dụng làm this giá trị.
Nếu tham số này trống, giá trị undefined will be passed as its this giá trị.
Thí dụ
Hãy để chúng tôi lấy một ví dụ về cho mỗi hàm số.
Tạo một tệp có tên server.js và mở tệp đó bên trong VSCode. Sau đó, viết mã sau vào server.js tập tin.
// server.js
const apps = ['WhatsApp', 'Instagram', 'Facebook'];
const playStore = [];
apps.forEach(function(item){
playStore.push(item)
});
console.log(playStore);
Vì vậy, ở đây trước tiên, chúng ta đã lấy một mảng ứng dụng. Sau đó, chúng tôi đã lặp lại từng mảng một bằng cách sử dụng cho mỗi và thêm các mục vào mảng mới được gọi là Cửa hang tro chơi và hiển thị nó.
Mảng.nguyên mẫu.vìMỗi()
Hàm tạo nguyên mẫu cho phép chúng tôi thêm các thuộc tính và phương thức mới vào Mảng() Đối tượng chính nó. Đã có một số phương pháp có sẵn trong Javascript và một trong số chúng là cho mỗi.
Khi xây dựng thuộc tính, Tất cả các mảng sẽ được cung cấp thuộc tính và giá trị của nó theo mặc định. Khi xây dựng một phương thức, Tất cả các mảng sẽ có sẵn phương thức này. Nguyên mẫu là một phương thức khởi tạo đối tượng toàn cục có sẵn cho tất cả các đối tượng Javascript.
Hãy để chúng tôi lấy một ví dụ về điều đó.
// server.js
function Square() {
this.squareArray = [];
}
Square.prototype.multiply = function(arr) {
arr.forEach(function(value) {
this.squareArray.push(value * value);
}, this);
};
const obj = new Square();
obj.multiply([2, 5, 9]);
console.log(obj.squareArray);
Truy cập chỉ mục của một phần tử được lặp lại trong forEach ()
Một điều cần lưu ý là nếu bạn thấy cú pháp của hàm forEach (), thì gọi lại() hàm chấp nhận một đối số chỉ mục. Vì vậy, bây giờ chúng ta có thể lấy chỉ mục của phần tử lặp hiện tại bằng cách sử dụng tham số đó.
let languages = ['Python', 'Javascript', 'PHP', 'Golang'];
languages.forEach((element, index) => {
console.log('The element is: ', element)
console.log('The element's index is:', index)
});
Đầu ra
The element is: Python The element's index is: 0 The element is: Javascript The element's index is: 1 The element is: PHP The element's index is: 2 The element is: Golang The element's index is: 3
Bạn có thể thấy rằng chỉ mục của Python là 0 vì chỉ số mảng bắt đầu từ 0. Sau đó là 1, 2 và 3. Trong ví dụ này, chúng tôi đang sử dụng hàm mũi tên làm hàm gọi lại có quyền truy cập vào mục được lặp hiện tại và chỉ mục của nó. Việc gọi lại được thực hiện 4 lần.
Không có cách nào để phá vỡ cho mỗi vòng lặp khác với việc ném một ngoại lệ. Do đó, nếu bạn cần hành vi như vậy cho mã của mình, thì phương thức forEach sẽ không khả dụng.
Truy cập vào mảng bên trong lệnh gọi lại
Chúng ta có thể truy cập vào mảng trong lệnh gọi lại forEach. Đây là mảng tương tự hiện được lặp lại bởi phương thức forEach (). Hàm callback cũng chấp nhận mảng như một đối số và bên trong khối hàm, chúng ta có thể sử dụng mảng.
let languages = ['Python', 'Javascript', 'PHP', 'Golang'];
languages.forEach((element, index) => {
if (index == languages.length - 1) {
console.log(`${element} is the last element of the iteration`)
}
});
Đầu ra
Golang is the last element of the iteration
Bạn có thể thấy rằng chúng tôi đã truy cập vào ngôn ngữ mảng bên trong khối hàm gọi lại để so sánh chỉ số với chỉ mục cuối cùng của mảng và nếu cả hai đều giống nhau, thì if condition nắm giữ. Điều này là do chúng tôi đã ghi lại phần tử cuối cùng của quá trình lặp lại mảng.
Tăng dần với forEach ()
Chúng ta có thể định nghĩa một bộ đếm bên ngoài hàm forEach (), và sau đó bên trong hàm, chúng ta có thể tăng số đếm với số lượng bất kỳ mà chúng ta muốn, và nó sẽ tăng bộ đếm. Vì vậy, hoạt động đếm sẽ được tăng lên nhân với độ dài chính xác của các mục mảng.
let languages = ['Python', 'Javascript', 'PHP', 'Golang'];
let count = 0
languages.forEach(() => {
count = count + 2
console.log(count)
});
Đầu ra
2 4 6 8
Trong ví dụ này, chúng ta đã tăng giá trị đếm lên 2. Trong bộ đếm lặp đầu tiên = 0 + 2 = 2 và sau đó 2 + 2 = 4, 2 + 4 = 6, 2 + 6 = 8.
So sánh for và for… in () trong Javascript
Xem phần sau cho… trong cú pháp.
for (variable in object) {
// do something
}
Vòng lặp for… in được sử dụng để lặp lại các thuộc tính có thể liệt kê của các đối tượng.
Mọi thuộc tính trong Đối tượng sẽ có giá trị Enumerable. Nếu giá trị đó được đặt thành true, thì thuộc tính là Enumerable.
Khi bạn tạo Đối tượng, nó sẽ kế thừa các phương thức cụ thể từ nguyên mẫu của nó.
Ví dụ, phương thức Javascript Object.keys (). Đây là những thứ không thể liệt kê được. Bất kỳ thuộc tính nào bạn thêm vào Đối tượng sẽ được liệt kê trong hầu hết các phần.
Hãy xem một ví dụ để giúp hiểu rõ hơn. Trong ví dụ dưới đây, chúng tôi sẽ in từng giá trị có thể liệt kê trong Đối tượng trên bảng điều khiển.
const obj = {
millie: 'eleven',
noah: 'will',
finn: 'mike',
sadie: 'max'
}
for (let char in obj) {
console.log( obj[char] )
}
Đầu ra
➜ es git:(master) ✗ node app eleven will mike max ➜ es git:(master) ✗
Đừng quên, mảng cũng là các đối tượng; đó là lý do tại sao chúng ta cũng có thể sử dụng vòng lặp for… in trên Mảng.
Sửa đổi mảng trong một lần lặp
Hãy để chúng tôi thực hiện một tình huống trong đó chúng tôi thay đổi mảng đang được lặp lại, sau đó bỏ qua các giá trị khác. Xem ví dụ sau.
// app.js
let arr = [1, 2, 3, 4, 5];
arr.forEach(item => {
if(item == 3) {
arr.shift();
}
console.log(item);
});
Trong ví dụ trên, nếu điều kiện được đáp ứng, thì phần tử tiếp theo của mảng sẽ bị bỏ qua.
Chúng tôi đã sử dụng hàm shift () mảng Javascript để bỏ qua giá trị thứ 3.
Vì vậy, khi mục = 3, giá trị 4 bị bỏ qua và chuyển trực tiếp đến 5.
Điều đó có nghĩa là chúng tôi đã sửa đổi mảng bằng cách sử dụng logic của chúng tôi và bỏ qua một phần tử, điều này vi phạm hàm forEach vì nó luôn thực thi từng mục của một mảng.
lặp lại (khóa, giá trị) trong Javascript
Nếu chúng ta muốn lặp lại cặp khóa-giá trị trong javascript, thì vòng lặp forEach sẽ không giúp chúng ta. Thay vào đó, chúng ta có thể sử dụng vòng lặp Javascript for… in. Xem ví dụ sau.
// app.js
let strangerThings = [{
name: 'Dustin',
age: 13
}, {
name: 'Mike',
age: 12
},
{
name: 'Eleven',
age: 11
}];
for (const name in strangerThings) {
if (strangerThings.hasOwnProperty(name)) {
console.log(strangerThings[name]);
}
}
Xem kết quả sau.
➜ es git:(master) ✗ node app
{ name: 'Dustin', age: 13 }
{ name: 'Mike', age: 12 }
{ name: 'eleven', age: 11 }
➜ es git:(master) ✗
điều này bên trong vòng lặp forEach
Hãy chạy đoạn mã sau trong trình duyệt và chú ý đến giá trị.
const names = ['krunal', 'ankit', 'rushabh'];
function iterate(name) {
console.log(this === window);
}
names.forEach(iterate);
Đây bên trong iterate () bằng cửa sổ, đối tượng chung trong môi trường trình duyệt.
Bạn có thể cần đặt điều này thành Đối tượng quan tâm trong một số trường hợp. Sau đó chỉ ra Đối tượng này là đối số thứ hai khi gọi hàm forEach ().
Javascript forEach bỏ qua các vị trí trống.
JS forEach () bỏ qua các vùng trống của mảng.
const names = ["krunal", "", "ankit"];
names.forEach(function(name) {
console.log(name);
});
Đầu ra
➜ es git:(master) ✗ node app krunal ankit ➜ es git:(master) ✗
Các mảng tên chứa krunalmột vị trí trống, và ankit. JS forEach () lặp lại krunal và ankitnhưng bỏ qua vị trí trống.
Cách ngắt vòng lặp forEach trong Javascript
Bạn không thể thoát khỏi hàm forEach. Thay vào đó, bạn nên sử dụng vòng lặp for bình thường.
Trong một số trường hợp, hàm Array.every () có thể sẽ đáp ứng các yêu cầu.
Làm cách nào để chuyển đến lần lặp tiếp theo của vòng lặp Javascript Array.forEach ()
Bạn có thể quay lại nếu bạn muốn bỏ qua lần lặp hiện tại.
Vì bạn đang ở trong hàm, nếu bạn quay lại trước khi làm bất cứ điều gì khác, bạn đã bỏ qua một cách hiệu quả việc thực thi mã bên dưới câu lệnh trả về.
ForEach của JavaScript hoạt động khác với JavaScript được sử dụng trong các ngôn ngữ khác cho mỗi vòng lặp.
Các hàm số được thực thi cho từng mục trong mảng theo thứ tự tăng dần nếu bạn đọc trên MDN. Vì vậy, nếu chúng ta muốn tiếp tục bài viết tiếp theo, tức là chạy hàm tiếp theo, bạn có thể trả về một hàm hiện tại mà không cần nó thực hiện bất kỳ tính toán nào.
Khả năng tương thích
Phương pháp này là một phần mở rộng JavaScript cho tiêu chuẩn ECMA-262; do đó, nó có thể không có trong các triển khai tiêu chuẩn khác. Do đó, bạn cần thêm mã sau vào đầu tập lệnh của mình để làm cho nó hoạt động.
if (!Array.prototype.forEach)
{
Array.prototype.forEach = function(fun /*, thisp*/)
{
var len = this.length;
if (typeof fun != "function")
throw new TypeError();
var thisp = arguments[1];
for (var i = 0; i < len; i++)
{
if (i in this)
fun.call(thisp, this[i], i, this);
}
};
}
Javascript forEach () và Javascript push ()
Hãy sao chép tất cả các giá trị từ mảng này sang mảng khác bằng cách sử dụng hàm foreach và push () trong Javascript.
// app.js
const elements = [11, 21, 46];
const copy = [];
elements.forEach(function(element){
copy.push(element);
});
console.log(copy);
Xem kết quả đầu ra.
➜ es git:(master) ✗ node app [ 11, 21, 46 ] ➜ es git:(master) ✗
Sự khác biệt giữa forEach () và vòng lặp for trong
Javascript forEach () là một phương thức Array trong đó chúng ta có thể thực thi một hàm trên mỗi mục trong một mảng.
Javascript for in loop được sử dụng để lặp qua các thuộc tính có thể liệt kê của các đối tượng.
Mọi thuộc tính trong một đối tượng sẽ có giá trị Enumerable – nếu giá trị đó được đặt thành true, thì thuộc tính là Enumerable.
Chức năng không đồng bộ với forEach
Xem đoạn mã sau.
let ratings = [9.1, 9.2, 9.3];
let sum = 0;
let godfather = async function(x, y) {
return x + y;
};
ratings.forEach(async function(rating) {
sum = await godfather(sum, rating);
});
console.log(sum);
Đầu ra
➜ es git:(master) ✗ node app 0 ➜ es git:(master) ✗
Trong đoạn mã trên, kết quả mong đợi sẽ là 27,6, nhưng chúng tôi nhận được 0 vì async / await.
Mẹo chính về phương thức JavaScript dành cho phương thức Each ()
- Các cho mỗi() áp dụng một quy định hàm số cho từng mục riêng lẻ.
- Được giới thiệu với ECMAScript 3.
- Phương pháp này chỉ thi hành hàm được chỉ định nếu một mục mảng có một giá trị.
- Của nó trở về giá trị là chưa xác định.
Đó là nó cho hướng dẫn này.
Array.prototype.find ()
Array.prototype.findIndex ()
Array.prototype.map ()
Array.prototype.filter ()
Array.prototype.every ()