Foreach Js Là Gì | Giới Thiệu Về Foreach

Hàm forEach() trong Javascript

Trong bài này mình sẽ nói về hàm forEach trong javascript, đây là hàm dùng để lặp qua các phần tử của mảng một cách dễ dàng.

Hàm forEach sẽ lần lượt truyền các phần tử của mảng vào một hàm được cung câp trước đó, hàm này sẽ tiến hành xử lý các thành phần tử cửa mảng như là một tham số truyền vào.

Kết luận

Tổng quan là hàm forEach trong JavaScript là một công cụ rất hữu ích và tiện lợi để duyệt qua các phần tử của một mảng và thực hiện một hành động trên từng phần tử. Nó có cú pháp đơn giản và dễ hiểu hơn vòng lặp for truyền thống, tái sử dụng được hàm, không thay đổi giá trị của mảng ban đầu và có thể sử dụng với các đối tượng khác nhau như set hoặc map. Vì thế, nó là một lựa chọn tuyệt vời khi duyệt qua một mảng trong JavaScript.

Vòng lặp foreach trong lập trình C# cơ bản

Đặt bài toán

Cho một mảng

numbers= [1, 2, 3, 4, 5, 6,7, 8, 9, 10]

. Hãy tính tổng các số trong mảng và hiển thị ra console.

Khi mới học JavaScript, mình giải bài toán này như sau:


const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; let sum = 0; // duyệt từng phần tử của mảng để cộng dồn vào biến sum for (let i = 0; i < numbers.length; i++) { sum += numbers[i]; } console.log(sum); // 55


Cách giải trên khá dễ hiểu. Mình duyệt tất cả các phần tử mảng bằng vòng lặp for với chỉ số. Tại mỗi lượt lặp, mình lấy phần tử đang duyệt cộng dồn với biến

sum

.

Có một vấn đề với cách này, đó là việc sử dụng chỉ số có thể khiến bạn bị nhầm với một biến trước đó. Dẫn đến những lỗi sai không đoán trước được.

Lúc này, forEach JavaScript xuất hiện giúp bạn giải quyết vấn đề trên.

Cách triển khai hàm forEach JavaScript

Một cách đơn giản để triển khai hàm forEach như sau:


function forEach(array, action) { for (let i = 0; i < array.length; i++) { action(array[i]); } }


Hàm

forEach

trên nhận đầu vào là một mảng

array

và một hàm

action

– thực hiện hành động với mỗi phần tử của mảng

array[i]

.

Áp dụng hàm forEach để giải quyết bài toán trên


const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; let sum = 0; forEach(numbers, function (element) { sum += element;}); console.log(sum); // 55


Mình có thể diễn giải thuật toán trên bằng lới như sau: Với mỗi phần tử trong mảng

numbers

, mình lấy nó ra và cộng dồn với biến sum. Kết quả thu được, sẽ ghi ra console.

Nếu so sánh với cách làm trước thì cách này rõ ràng là dài hơn. Tuy nhiên, đây chỉ là một ví dụ cơ bản, nên mình sẽ không bàn về độ dài, ngắn của code.

Vấn đề nên quan tâm trước tiên đó là: code-đọc-dễ-hiểu.

Theo quan điểm cá nhân mình, việc sử dụng hàm forEach giúp code gần giống với ngôn ngữ tự nhiên hơn. Quan điểm của bạn về vấn đề này thế nào?

This bên trong callback

Hãy chạy ví dụ sau và chú ý hiển thị giá trị của

this

và so với window global nhé.


fruits.forEach(function(fruit, index, array) { console.log(this); // window {...} console.log(this === window) // true })



this

bên trong hàm

callback

bằng window (window là một đối tượng toàn cục trong môi trường trình duyệt.

Trong một số tình huống, bạn sẽ cần truy cập từ khoá

this

ngay bên trong vòng lặp, có thể là một ngữ cảnh khác để tính toán lựa chọn dữ liệu cho bạn. Bằng cách đó, ta có thể chỉ ra đối tượng

this

bằng tham số thứ 2 trong forEach:


fruits.forEach(function() {}, thisArg)


Hãy xem ví dụ bên dưới, giả sử mình có ngữ cảnh kho chứa chỉ có mỗi loại trái cây chuối, cần kiểm tra danh sách trái cây nào chưa có trong ngữ cảnh kho sẽ được chuyển vào đó.


// Kho chứa let stored = { stored: ["Banana"] } // Danh sách trái cây mới let fruits = ["Apple", "Orange", "Banana", "Mango"] // Lặp qua danh sách trái cây mới fruits.forEach(function(fruit) { // Kiểm tra xem trái cây mới có tồn tại trong kho chứa, nếu không thì chuyển vào if(!this.stored.includes(fruit)) { this.stored.push(fruit) } }, stored) // Kết quả mong muốn : ["Banana", "Apple", "Orange", "Mango"] console.log(stored) // ["Banana", "Apple", "Orange", "Mango"]


Ngoài ra, đối với ví dụ trên, chúng ta có thể sử dụng arrow function làm hàm callback của forEach() sẽ tốt hơn. Arrow function bảo toàn giá trị của

this

khỏi phạm vi

lexical scope

. Vì vậy không cần sử dụng đến đối số thứ 2 trong forEach.

forEach trong JavaScript

forEach() là một phương thức của đối tượng Array trong JavaScript, có tác dụng lấy các phần tử trong mảng theo thứ tự và chuyển chúng đến hàm callback để xử lý. Vòng lặp trong forEach không thể dừng lại giữa chừng và số lần lặp sẽ luôn bằng với số phần tử có trong mảng ban đầu.

Cú pháp tổng quát của forEach trong JavaScript như sau:

org_array.forEach(callbackFn(value, index, array))

Trong đó:

• 
org_array

  là mảng ban đầu cần lấy phần tử
• 
callbackFN

  là hàm callback sẽ nhận từng phần tử từ
  
org_array

  để xử lý
• 
value

  là tên một biến để gán giá trị của phần tử đang được lấy để truyền cho
  
callbackFN

• 
index

  là tên một biến để gán index của phần tử đang được lấy để truyền cho
  
callbackFN

• 
array

  là tên một biến để gán cả mảng ban đầu để truyền cho
  
callbackFN


Phương thức forEach sẽ lấy lần lượt các phần tử từ đầu đến cuối mảng và chuyển chúng đến hàm callback để xử lý. Hàm callback khi đó sẽ được gọi với các đối số là giá trị, index của phần tử hiện được lấy, cũng như chính mảng ban đầu, thông qua các biến

value

,

index

và

array

.

Lưu ý là chúng ta có thể lược bỏ các biến

value

,

index

và

array

, cũng như là sử dụng các tên biến khác nhau để biểu diễn chúng. Ví dụ như thay vì

(value, index, array)

bạn cũng có thể sử dụng

(a, b, c)

hoặc

x1, x2, x3

chẳng hạn.

Và tùy thuộc vào việc chỉ định các đối số trong hàm callback mà chúng ta có các cách sử dụng forEach trong JavaScript khác nhau.

Một số ứng dụng của foreach trong JavaScript

Phương thức forEach sẽ lấy lần lượt các phần tử từ đầu đến cuối mảng và chuyển chúng đến hàm callback để xử lý. Do vậy, bằng cách viết các xử lý trong hàm callback này mà chúng ta có vô vàn cách khác nhau để ứng dụng foreach trong JavaScript.

Theo trang web Mozilla thì các ứng dụng của forEach có thể kể đến như sau:

In lần lượt giá trị các phần tử trong mảng JavaScript

Chúng ta sử dụng forEach để lấy các giá trị của mảng theo thứ tự và in chúng ra màn hình như sau:

const nums = [1,2,3,4];

Chúng ta cũng có thể sử dụng forEach với các mảng mà trong đó các phần tử không tồn tại liên tục như sau:

let nums = [];

Thay thế vòng lặp for trong JavaScript

Khi chúng ta cần thao tác với phần tử trong mảng JavaScript, sử dụng forEach sẽ tiết kiệm công sức viết code hơn so với vòng lặp for truyền thống.

Hãy so sánh cách viết 2 phương pháp trên khi cần copy các phần tử trong mảng như sau:

let myarray = [‘a’, ‘b’, ‘c’];

Đếm số lần xuất hiện của phần tử trong mảng JavaScript

Một ứng dụng nổi bật khác của forEach mà Kiyoshi muốn giới thiệu đó chính là khả năng đếm số lần xuất hiện của phần tử trong mảng JavaScript. Ý tưởng ở đây đơn giản là kiểm tra lần lượt từng phần tử trong mảng có giống với phần tử cần tìm không, và nếu giống nhau thì đếm nó.

Ví dụ cụ thể:

let myarray = [‘a’, ‘b’, ‘c’, ‘a’, ‘d’,’c’];

Rất đơn giản, phần tử xuất hiện 2 lần trong chuỗi và chúng ta đã đếm chính xác kết quả này thông qua forEach.

Tại sao nên sử dụng forEach ?

Sử dụng forEach trong JavaScript có nhiều lợi ích sau đây:

1. Cú pháp rõ ràng: Hàm forEach có cú pháp rõ ràng, đơn giản và dễ hiểu hơn vòng lặp for truyền thống. Có những chỗ như vòng lặp trong vòng lặp, cần phải tăng biến đếm, cần phải kiểm tra điều kiện và các thao tác khác mà sẽ làm cho vòng lặp trở nên phức tạp hơn.
2. Hiệu quả cao: forEach được thực thi nhanh hơn vòng lặp for truyền thống, vì nó không cần phải kiểm tra điều kiện và tăng biến đếm.
3. Tái sử dụng hàm: Có thể sử dụng hàm forEach cho nhiều mảng khác nhau, thay vì viết vòng lặp riêng cho mỗi mảng.
4. Không thay đổi giá trị ban đầu của mảng: forEach không thay đổi giá trị của mảng gốc, nó chỉ duyệt qua mảng và thực hiện hành động trên từng phần tử, nếu cần thay đổi thì có thể sử dụng map.
5. Tương thích với các đối tượng khác: foreach không chỉ hỗ trợ duyệt qua mảng mà còn hỗ trợ đối tượng Set, Map.Điều này cho phép bạn sử dụng cùng một hàm duyệt để thực hiện hành động trên nhiều kiểu dữ liệu khác nhau.

Ví dụ:

const set = new Set([1, 2, 3]); set.forEach(value => console.log(value)); const map = new Map([[1, ‘one’], [2, ‘two’], [3, ‘three’]]); map.forEach((value, key) => console.log(key, value));

Foreach là một công cụ rất hữu ích trong javascript và được sử dụng rộng rãi, sử dụng nó sẽ giúp bạn duyệt qua mảng và thực hiện hành động trên mỗi phần tử một cách dễ dàng, nhanh chóng và tiện lợi.

Một số từ khóa trong vòng lặp forEach JS

Khi so sánh với các vòng lặp khác, ngôn ngữ lập trình khác, bạn sẽ thấy một số từ khóa hay sử dụng trong vòng lặp như:

return

,

break

và

continue

.

Câu hỏi đặt ra là liệu những từ khóa này có sử dụng được trong vòng lặp forEach JavaScript hay không? Cách sử dụng của chúng có giống hay không?

Sau đây là câu trả lời.

Từ khóa return trong forEach

Từ khóa

return

dùng để dừng lại một hàm và trả về giá trị từ hàm đó.

Giả sử, bạn cần viết một hàm tìm vị trí của số chẵn đầu tiên trong một mảng. Nếu không tìm thấy thì trả về giá trị

-1

.

Sau đây là code sử dụng vòng lặp for thông thường:


function findFirstEvenIndex(arr) { for (let i = 0; i < arr.length; i++) { if (arr[i] % 2 === 0) return i; } return -1; } // Ví dụ const arr = [1, 2, 3, 4, 5]; const ret = findFirstEvenIndex(arr); console.log("ret=", ret); // ret= 1


Chuyển đoạn code trên sang forEach như sau:


function findFirstEvenIndex(arr) { arr.forEach(function (item, i) { if (arr[i] % 2 === 0) return i; }); return -1;} // Ví dụ const arr = [1, 2, 3, 4, 5]; const ret = findFirstEvenIndex(arr); console.log("ret=", -1); // ret= -1


Tại sao kết quả lại là -1?

Tại vì từ khóa

return

trong forEach chỉ có tác dụng để thoát khỏi hàm callback bên trong forEach mà thôi. Do đó, kết quả của hàm trên là giá trị của câu lệnh

return -1

cuối cùng.

Dể giải quyết bài toán này, mình khuyên bạn không nên dùng

forEach

. Thay vào đó bạn có thể dùng vòng lặp for thông thường như trên, hoặc sử dụng vòng lặp for…in như sau:


function findFirstEvenIndex(arr) { for (let i in arr) { if (arr[i] % 2 === 0) return i; } return -1; } // Ví dụ const arr = [1, 2, 3, 4, 5]; const ret = findFirstEvenIndex(arr); console.log("ret=", ret); // ret= 1


Chú ý: vòng lặp

for...in

chỉ nên dùng với array, không nên sử dụng với đối tượng

array-like

.

Từ khóa break trong forEach

Từ khóa

break

thường dùng để thoát khỏi câu lệnh

switch

hoặc thoát khỏi vòng lặp (

for

,

while

,

do...while

,

for...in

).

Ví dụ đoạn code sau dùng để thoát khỏi vòng lặp for khi bằng :


const arr = [1, 2, 3, 4, 5]; for (let i = 0; i < arr.length; i++) { if (i === 3) break; console.log("i=", i); } /* Kết quả trên console: i= 0 i= 1 i= 2 */


Nếu sử dụng từ khóa

break

với forEach thì sao?


const arr = [1, 2, 3, 4, 5]; arr.forEach((item, i) => { if (i === 3) break; console.log("i=", i); }); /* Kết quả trên console: Uncaught SyntaxError: Illegal break statement */


Đúng vậy, bạn sẽ bị lỗi cú pháp Illegal break statement vì từ khóa break là không hợp lệ với forEach JS.

Nghĩa là bạn không thể sử dụng từ khóa break với forEach. Thay vào đó bạn có thể sử dụng vòng lặp for như trên hoặc dùng phương thức

arr.some()

để thay thế:


const arr = [1, 2, 3, 4, 5]; arr.some(function (item, index) { if (index === 3) return true; console.log("i=", index); }); /* Kết quả trên console: i= 0 i= 1 i= 2 */


Từ khóa continue trong forEach

Từ khóa

continue

thường dùng để bỏ qua một lượt lặp trong vòng lặp.

Ví dụ đoạn code sau dùng để bỏ qua lượt lặp khi bằng :


const arr = [1, 2, 3, 4, 5]; for (let i = 0; i < arr.length; i++) { if (i === 3) continue; console.log("i=", i); } /* Kết quả trên console: i= 0 i= 1 i= 2 i= 4 */


Nếu chuyển sang dùng với

forEach

:


const arr = [1, 2, 3, 4, 5]; arr.forEach(function(item, i) { if (i === 3) continue; console.log("i=", i); }); /* Kết quả trên console: Uncaught SyntaxError: Illegal continue statement: no surrounding iteration statement */


Bạn sẽ bị lỗi Illegal continue statement: no surrounding iteration statement. Vì từ khóa

continue

không hợp lệ với forEach JavaScript.

Nghĩa là bạn cũng không thể dùng

continue

bên trong

forEach

được. Thay vào đó, bạn có thể dùng vòng lặp for như trên hoặc sử dụng từ khóa

return

như sau:


const arr = [1, 2, 3, 4, 5]; arr.forEach(function (item, i) { if (i === 3) return; console.log("i=", i); }); /* Kết quả trên console: i= 0 i= 1 i= 2 i= 4 */


Ưu, nhược điểm của việc sử dụng forEach

Bất cứ thứ gì cũng có hai mặt của nó, forEach cũng không ngoại lệ. Sau đây là một số ưu, nhược điểm của forEach:

Ưu điểm:

• Code rõ ràng, gần với ngôn ngữ tự nhiên
• Trong nhiều trường hợp sẽ ngắn gọn hơn việc sử dụng for, while.

Nhược điểm:

• Chắc chắn code sẽ chạy chậm hơn so với việc sử dụng vòng lặp (tuy nhiên không đáng kể)
• Không giống các ngôn ngữ lập trình khác như C/C++, Java (hầu như chỉ sử dụng vòng lặp)

Trên đây là một số ưu, nhược điểm của việc sử dụng forEach. Tôi không khuyên các bạn nên sử dụng phương thức này. Đây chỉ đơn giản là một cách thức duyệt mảng, bạn có thể sử dụng nó hoặc bạn chỉ cần sử dụng vòng lặp for, while.

It’s the choice.

Sử dụng forEach trong JavaScript

• In ra các phần tử trong mảng với forEach trong JavaScript:


const fruits = ["apple", "banana", "cherry", "date"]; fruits.forEach(function(fruit, index) { console.log(`Fruit at index ${index}: ${fruit}`); });


Ta cũng có thể sử dụng forEach với Arrow Function:


const fruits = ["apple", "banana", "cherry", "date"]; fruits.forEach((fruit, index) => console.log(`Fruit at index ${index}: ${fruit}`));


Cả 2 cách trên đều cho ta kết quả như sau:


Fruit at index 0: apple Fruit at index 1: banana Fruit at index 2: cherry Fruit at index 3: date


• Truy cập mảng gốc trong forEach

Như đã hướng dẫn trong cú pháp sử dụng forEach ta có thể truy cập mảng gốc trong forEach bằng tham số thứ 3 trong hàm forEach như sau:


const fruits = ["apple", "banana", "cherry", "date"]; fruits.forEach(function(fruit, index, arr) { console.log(arr); });



["apple", "banana", "cherry", "date"] ["apple", "banana", "cherry", "date"] ["apple", "banana", "cherry", "date"] ["apple", "banana", "cherry", "date"]


• Sử dụng this trong forEach

Trong forEach chưa chắc có giá trị this cụ thể. Mặc định, trong hàm callback của nó, giá trị của this là undefined trong chế độ “strict mode” (chế độ nghiêm ngặt), và nó sẽ tham chiếu đến đối tượng toàn cục (chẳng hạn window) nếu không ở trong chế độ strict.

Đồng thời, ta có thể truyền một giá trị this tùy ý cho forEach với thisArg, như sau:


const obj = { prop: 'Hello', logProp: function(item) { console.log(this.prop + ' ' + item); } }; const fruits = ['apple', 'banana', 'cherry']; fruits.forEach(obj.logProp, obj); // Sử dụng obj làm giá trị 'this'


Ví dụ thực tế:


const user = { name: 'John', friends: ['Alice', 'Bob', 'Charlie'], greetFriends: function() { this.friends.forEach(function(friend) { console.log(`${friend}, this is ${this.name}.`); }, this); } }; user.greetFriends();


Trong ví dụ trên, this ở đây đề cập đến đối tượng user bằng cách truyền nó vào giá trị thứ hai, nó cho phép chúng ta truy cập thuộc tính name của đối tượng user.

Lưu ý: Ngoài sử dụng thisArg để điều khiển this một cách rõ ràng thì không có cách nào để tự động xác định giá trị this của hàm callback trong forEach.

Hàm forEach trong Javascript là gì?

forEach javascript là một phương thức thuộc đối tượng mảng trong javascript. Hàm này sẽ giúp lặp qua các phần tử của mảng, nó có một tham số truyền vào, và tham số này sẽ lưu trữ giá trị của phần tử trong mỗi lần lặp.

Hàm forEach sẽ không thực hiện đối với những phần tử không có giá trị.

Bài viết này được đăng tại [free tuts .net]

Cú pháp như sau:

array.forEach(function(currentValue, index, arr), thisValue)

Trong đó:

• 
currentValue

  – giá trị của phần tử hiện tại.
• 
index

  – chỉ số của phần tử hiện tại.
• 
arr

  – mảng mà phần tử hiện tại thuộc về.
• 
thisValue

  – tham số không bắt buộc. Nếu được truyền vào thì thisValue sẽ được sử dụng làm giá trị this. Nếu không được truyền vào thì giá trị “this” là “undefined”.

Thực ra thì bạn hoàn toàn có thể sử dụng vòng lặp for, nhưng javascript đã cung cấp phương thức forEach rồi nên từ giờ bạn sẽ có thêm một sự lựa chọn.

Ví dụ: Lặp qua và in giá trị của các phần tử trong mảng ranks.

let ranks = [‘A’, ‘B’, ‘C’]; ranks.forEach(function (e) { console.log(e); // A B C });

Với bài này thì bạn có thể sử dụng vòng lặp for như sau:

let ranks = [‘A’, ‘B’, ‘C’]; for (let i = 0; i < ranks.length; i++) { console.log(ranks[i]); }

Sử dụng foreach trong C#

Trong C#, có những danh sách, tập hợp mà ta không thể truy xuất đến các phần tử của nó thông qua chỉ số phần tử được (ví dụ như kiểu List – sẽ được trình bày trong bài LIST TRONG C# hoặc các collection, generic – sẽ được trình bày trong bài COLLECTION TRONG C# và bài GENERIC TRONG C#).

Trong trường hợp như vậy, để duyệt các danh sách, tập hợp có tính chất như trên thì foreach là lựa chọn tốt nhất.

Chúng ta sẽ tìm hiểu sức mạnh của foreach qua các bài học sau. Còn trong bài học này mình chỉ ví dụ đơn giản để các bạn có thể nắm cú pháp cũng như cách sử dụng foreach.

• Xét chương trình sau:


/* * Khai báo mảng 1 chiều IntArray và khởi tạo giá trị. * Các bạn có thể xem lại cú pháp này ở bài Mảng 1 chiều trong C# * Khai báo 1 biến Sum để chứa giá trị tổng các phần tử trong mảng IntArray. */ int[] IntArray = { 1, 5, 2, 4, 6 }; int Sum = 0; /* * Sử dụng foreach để duyệt mảng và in giá trị của các phần tử trong mảng. * Đồng thời tận dụng vòng lặp để tính tổng các phần tử trong mảng. */ foreach (int item in IntArray) { Console.Write("\t" + item); Sum += item; } Console.WriteLine("\n Sum = " + Sum);


Có lẽ chúng ta đã không mấy xa lạ với đoạn chương trình trên. Đoạn chương trình trên sẽ duyệt mảng để in ra các giá trị của mảng và tính tổng các phần tử trong mảng.

Nhưng thay vì sử dụng for thì mình sử dụng foreach để các bạn có thể thấy được sự tương đồng giữa các thành phần trong cấu trúc foreach và CẤU TRÚC VÒNG LẶP FOR TRONG C#.

Kết quả khi chạy đoạn chương trình trên:

Ví dụ thứ 2: ta thử sử dụng foreach để duyệt mảng jagged


/* * Khai báo 1 mảng jagged tên là JaggedArray và khởi tạo giá trị. * Các bạn có thể xem lại cú pháp khai báo này ở bài Mảng nhiều chiều trong C#. */ int[][] JaggedArray = { new int[] { 1, 2, 3 }, new int[] { 5, 2, 4, 1, 6}, new int[] { 7, 3, 4, 2, 1, 5, 9, 8} }; /* * Tương tự như dùng for, ta cũng dùng 2 vòng foreach lồng vào nhau để duyệt mảng. */ foreach (int[] Element in JaggedArray) { foreach (int item in Element) { Console.Write(item + " "); } Console.WriteLine(); }


Ta có thể thấy cách duyệt foreach ngắn gọn hơn nhiều so với cách duyệt bằng vòng lặp for thông thường.

Ta cũng chả quan tâm đến việc phải xử lý độ dài mảng hay chỉ số phần tử để truy xuất 1 phần tử nào đó.

• Kết quả khi chạy đoạn chương trình trên:

Cơ bản về forEach


forEach

là phương thức lặp qua từng phần tử của mảng theo thứ tự tăng dần mà không làm thay đổi kết cấu của mảng, nhận vào một callback đảm nhiệm nhiệm vụ lặp qua từng phần tử của mảng được cung cấp, có 3 tham số chính được cung cấp là item, index, array.

• item: Giá trị của phần tử trong mảng
• index: Vị trí của phần tử trong mảng
• array: Mảng gốc đang được lặp từ forEach


array.forEach(callback[, thisArg]);


Nào bây giờ hãy xem cách hoạt động của forEach.

Giả sử trường hợp chúng ta nhận được mảng danh sách trái cây như sau


const fruits = ["Apple", "Orange", "Banana", "Mango"];


Chúng ta sẽ lặp qua mảng

fruits

và

console.log

các từng phần tử trong mảng với forEach bằng cách:


fruits.forEach(function(fruit) { console.log(fruit); // Apple, Orange, Banna, Mango })


Hàm nằm bên trong forEach là một callback nhận vào tham số

fruit

là giá trị của từng phần tử nằm trong mảng, đây là cách rất đơn giản để ta lặp qua mảng và lấy giá trị của phần tử nằm trong một mảng bất kỳ được cung cấp thông qua dạng [Array].forEach

Từ JavaScript forEach đến các phương thức khác

Ngoài forEach, JavaScript còn cung cấp một số phương thức khác, tương tự dành cho array. Đó là: entries, every, filter, find, findIndex, keys, map, reduce, reduceRight, some, values.

array.prototype.entries()

Trả về một mảng đối tượng mới, chứa key/value cho mỗi phần tử trong array.


a.entries()


Để duyệt mảng đối tượng mới này, ta sử dụng vòng lặp for…of


var a = ['a', 'b', 'c']; var iterator = a.entries(); for (let e of iterator) { console.log(e); } // => [0, 'a'] // => [1, 'b'] // => [2, 'c']


array.prototype.every()

Trả về true nếu như tất cả các phần tử trong mảng thoả mãn 1 hàm kiểm tra, ngược lại trả về false.


arr.every(callback[, thisArg])


Tham số truyền vào giống hệt với hàm forEach. Ví dụ sau trả về true nếu tất cả các phần tử trong mảng thoả mãn đều >= 10:


function isBigEnough(element, index, array) { return element >= 10; } console.log([12, 5, 8, 130, 44].every(isBigEnough)); // => false console.log([12, 54, 18, 130, 44].every(isBigEnough)); // => true


array.prototype.filter()

Giống như cái tên của nó, phương thức này dùng để lọc ra các phần tử trong mảng thoả mãn một điều kiện cho trước. Và trả về một mảng mới chứa những phần tử đó.


var newArray = arr.filter(callback[, thisArg])


Tham số truyền vào giống hệt với hàm forEach. Ví dụ sau lọc ra những phần tử trong mảng có giá trị >= 10:


function isBigEnough(value) { return value >= 10; } var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); console.log(filtered); // [12, 130, 44]


array.prototype.find()

Trả về giá trị của phần tử đầu tiên trong mảng thoả mãn điều kiện cho trước, nếu không tìm thấy thì trả về undefined.


var var1 = arr.find(callback[, thisArg])


Tham số truyền vào cũng giống hệt như hàm forEach. Ví dụ sau tìm ra một object với tên của nó thoả mãn điều kiện cho trước:


var inventory = [ {name: 'apples', from: 'usa'}, {name: 'bananas', from: 'vietnam'}, {name: 'cherries', from: 'usa'}, {name: 'cherries', from: 'china'} ]; function findCherries(fruit) { return fruit.name === 'cherries'; } console.log(inventory.find(findCherries)); // {name: 'cherries', from: 'usa'}


array.prototype.findIndex()

Trả về chỉ số đầu tiên của phần tử thoả mãn điều kiện cho trước, ngược lại trả về -1.


var id = arr.findIndex(callback[, thisArg])


Tham số truyền vào cũng giống hệt như hàm forEach. Ví dụ sau tìm ra chỉ số object với tên của nó thoả mãn điều kiện cho trước:


var inventory = [ {name: 'apples', from: 'usa'}, {name: 'bananas', from: 'vietnam'}, {name: 'cherries', from: 'usa'}, {name: 'cherries', from: 'china'} ]; function findCherries(fruit) { return fruit.name === 'cherries'; } console.log(inventory.findIndex(findCherries)); // => 2


array.prototype.map()

Trả về mảng mới với mỗi phần tử là kết quả của việc gọi hàm callback ứng với mỗi phần tử của mảng ban đầu.


var new_array = arr.map(callback[, thisArg])


Tham số truyền vào cũng giống hệt như hàm forEach. Ví dụ sau trả về mảng mới mà mỗi phần tử của mảng mới là căn bậc hai của phần tử tương ứng trong mảng ban đầu:


var numbers = [1, 4, 9]; var roots = numbers.map(Math.sqrt); console.log(roots); // => [1, 2, 3] console.log(numbers); // => [1, 4, 9]


Những phương thức còn lại bạn có thể tham khảo thêm tại đây. Tôi sẽ không trình bày thêm vì bài viết sẽ quá dài.

Ưu, nhược điểm của việc sử dụng forEach

Bất cứ thứ gì cũng có hai mặt, forEach JavaScript cũng không ngoại lệ. Sau đây là một số ưu, nhược điểm của phương thức

forEach

:

Ưu điểm

• Code rõ ràng, gần với ngôn ngữ tự nhiên.
• Trong nhiều trường hợp sẽ ngắn gọn hơn việc sử dụng vòng lặp
  
for

  hay
  
while

  .

Nhược điểm

• Code thường sẽ chạy chậm hơn so với việc sử dụng vòng lặp (tuy nhiên không đáng kể).
• Không giống các ngôn ngữ lập trình khác như C/C++, Java (hầu như chỉ sử dụng vòng lặp).

Trên đây là một số ưu, nhược điểm của việc sử dụng

forEach

. Mình không khuyên bạn nên hay không nên sử dụng phương thức này.

Đây chỉ đơn giản là một cách thức để duyệt mảng, bạn có thể sử dụng nó hoặc bạn chỉ cần sử dụng vòng lặp.

It’s the choice.

Tổng kết

Trên đây Kiyoshi đã trình bày về forEach trong JavaScript và cách lấy phần tử của mảng theo thứ tự rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành với các ví dụ ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

URL Link

https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/foreach-trong-javascript/

Viết bởi Kiyoshi. Đã đăng ký bản quyền tác giả tại Creativecommons và DMCA

Bài viết liên quan

HOME › học javascript – lập trình javascript cơ bản>>04. mảng trong javascript

Foreach là một hàm có sẵn trong JavaScript, cho phép duyệt qua các phần tử của một mảng (hoặc các đối tượng có thể duyệt được khác như Set, Map) và thực hiện một hành động nhất định trên từng phần tử.

Hàm forEach có thể sử dụng để thay thế việc duyệt mảng bằng vòng lặp for truyền thống, cả về cả cú pháp và hiệu quả.

Giới thiệu hàm forEach của JavaScript

JavaScript cung cấp sẵn cho chúng ta phương thức forEach – là một phương thức có sẵn của array, để thực hiện hành động với mỗi phần tử của mảng.

Cú pháp


arr.forEach(function callback(currentValue, index, array) { //your iterator }[, thisArg]);


Giải thích

callback: là hàm để thực hiện với mỗi phần tử của mảng, bao gồm 3 tham số:

• currentValue: phần tử hiện tại đang được xử lý của array.
• index: chỉ số của phần tử hiện tại đang được xử lý của array.
• array: mảng hiện tại đang gọi hàm forEach.

thisArg: giá trị được sử dụng như là this, là tham chiếu tới đối tượng khi thực hiện hàm callback.

Chú ý:

• Nếu thisArg bị bỏ qua thì mặc định giá trị đó là undefined.

Ví dụ in ra nội dung của mảng:


function printContentArray(array){ array.forEach(function print(element){ console.log(element); }); } printContentArray([1, 3, 5]); // => 1 // => 3 // => 5


Ví dụ sử dụng thisArg:


function Counter() { this.sum = 0; this.count = 0; } Counter.prototype.add = function(array) { array.forEach(function(entry) { this.sum += entry; ++this.count; }, this); // ^---- Note }; var obj = new Counter(); obj.add([2, 5, 9]); console.log(obj.count); // => 3 console.log(obj.sum); // => 16


Ví dụ về các trường hợp sử dụng forEach trong JavaScript

Ví dụ 1: Thêm thuộc tính mới cho từng phần tử trong mảng:

const students = [ { name: “John”, age: 20 }, { name: “Mary”, age: 22 }, { name: “Mike”, age: 24 } ]; students.forEach(function(student) { student.major = “IT”; }); console.log(students);

Ví dụ 2: Tính tổng của các phần tử trong mảng:

const numbers = [1, 2, 3, 4, 5]; let sum = 0; numbers.forEach(function(value) { sum += value; }); console.log(sum);

Ví dụ 3: Tìm phần tử trong mảng:

const numbers = [1, 2, 3, 4, 5]; const target = 3; let found = false; numbers.forEach(function(value) { if (value === target) { found = true; } }); console.log(found);

Ví dụ 4: Thay đổi giá trị của từng phần tử trong mảng:

const numbers = [1, 2, 3, 4, 5]; numbers.forEach(function(value, index) { numbers[index] = value * 2; }); console.log(numbers);

Trong các ví dụ trên, forEach được sử dụng để duyệt qua từng phần tử trong mảng và thực hiện một hành động nào đó trên từng phần tử, ví dụ như in ra, tính tổng, tìm phần tử, thay đổi giá trị hoặc thêm thuộc tính. Các bạn có thể sử dụng forEach cho các tác vụ tương tự trong ứng dụng của mình.

Ví dụ 5: Duyệt qua một đối tượng và in ra các thuộc tính của nó:

const person = { name: “John”, age: 30, job: “Developer” }; Object.keys(person).forEach(function(key) { console.log(key + “: ” + person[key]); });

Ví dụ 6: Sử dụng arrow function trong forEach

const numbers = [1, 2, 3, 4, 5]; numbers.forEach(value => console.log(value));

Ví dụ 7: Sử dụng forEach trong Set

const fruits = new Set([“Apple”, “Banana”, “Mango”]); fruits.forEach(fruit => console.log(fruit));

Ví dụ 8: Sử dụng forEach trong Map

const ages = new Map([[“John”, 30], [“Mike”, 35], [“Mary”, 25]]); ages.forEach((value, key) => console.log(key + “: ” + value));

Ví dụ 9: Sử dụng forEach trong async/await

const fetchData = async () => { const response = await fetch(‘https://jsonplaceholder.typicode.com/todos’); const data = await response.json(); data.forEach(async (item) => { console.log(item); }); } fetchData();

Trong các ví dụ nâng cao hơn, chúng ta có thể sử dụng forEach trên đối tượng và arrow function, sử dụng forEach trên Set và Map, và sử dụng forEach trong async/await.

Sử dụng forEach trong JavaScript như thế nào ?

Sử dụng hàm forEach trong JavaScript rất đơn giản, bạn chỉ cần gọi hàm forEach trên mảng và truyền vào một hàm callback. Hàm callback sẽ được thực thi trên từng phần tử của mảng.

Cú pháp:

arr.forEach(callback(currentValue, index, array))

• arr: là mảng cần duyệt
• callback: hàm xử lý mỗi phần tử của mảng, nó nhận vào 3 tham số:
  • currentValue: giá trị của phần tử hiện tại
  • index: chỉ số của phần tử hiện tại
  • array: mảng gốc

Ví dụ:

const numbers = [1, 2, 3, 4, 5]; numbers.forEach(function(value, index, array) { console.log(‘Value:’, value); console.log(‘Index:’, index); console.log(‘Array:’, array); });

hoặc

const numbers = [1, 2, 3, 4, 5]; numbers.forEach(value => console.log(value));

Trong ví dụ trên, hàm forEach sẽ duyệt qua từng phần tử của mảng numbers và in ra giá trị của mỗi phần tử.

Bạn cũng có thể dùng forEach để thay đổi giá trị của mảng, tuy nhiên nếu bạn muốn thay đổi giá trị mảng và lặp lại cùng một mảng thì nên sử dụng map.

Còn nếu bạn muốn duyệt qua mảng và tìm giá trị phù hợp thì bạn nên sử dụng find hoặc findIndex. Nếu muốn tìm kiếm và thực hiện hành động trên các giá trị phù hợp thì bạn nên sử dụng filter.

Cú pháp và nguyên tắc hoạt động của foreach trong C#

Cấu trúc lặp foreach cho phép chúng ta duyệt 1 mảng hoặc 1 tập hợp (sẽ được trình bày trong bài TỔNG QUAN VỀ COLLECTION TRONG C#).

Một số đặc trưng của foreach:

• Foreach không duyệt mảng hoặc tập hợp thông qua chỉ số phần tử như cấu trúc lặp for.
• Foreach duyệt tuần tự các phần tử trong mảng hoặc tập hợp.
• Foreach chỉ dùng để duyệt mảng hoặc tập hợp ngoài ra không thể làm gì khác.

Cú pháp

foreach (


in

// Code xử lý

Trong đó:

• Các từ khoá foreach, in là từ khoá bắt buộc.
• 
  là kiểu dữ liệu của các phần tử trong mảng hoặc tập hợp.
  
• 
  là tên 1 biến tạm đại diện cho phần tử đang xét khi duyệt mảng hoặc tập hợp.
  
• 
  là tên của mảng hoặc tập hợp cần duyệt.
  

Nguyên tắc hoạt động

Foreach cũng có nguyên tắc hoạt động tương tự như các cấu trúc lặp khác cụ thể như sau:

• Ở vòng lặp đầu tiên sẽ gán giá trị của phần tử đầu tiên trong mảng vào biến tạm.
• Thực hiện khối lệnh bên trong vòng lặp foreach.
• Qua mỗi vòng lặp tiếp theo sẽ thực hiện kiểm tra xem đã duyệt hết mảng hoặc tập hợp chưa. Nếu chưa thì tiếp gán giá trị của phần tử hiện tại vào biến tạm và tiếp tục thực hiện khối lệnh bên trong.
• Nếu đã duyệt qua hết các phần tử thì vòng lặp sẽ kết thúc.

Qua nguyên tắc hoạt động trên ta có thể thấy:

• Biến tạm trong vòng lặp foreach sẽ tương đương với phần tử i trong cách duyệt của vòng lặp for (đã trình bày trong bài CẤU TRÚC VÒNG LẶP FOR TRONG C#).
• Qua mỗi bước lặp ta chỉ có thể thao tác với giá trị của phần tử đang xét mà không thể tương tác với các phần tử đứng trước nó hay đứng sau nó (trong CẤU TRÚC VÒNG LẶP FOR TRONG C# thì hoàn toàn được).
• Bằng cách duyệt của foreach ta không thể thay đổi giá trị của các phần tử vì lúc này giá trị của nó đã được sao chép ra một 1 biến tạm và ta chỉ có thể thao tác với biến tạm.
• Thậm chí việc thay đổi giá trị của biến tạm cũng không được phép. Nếu ta cố làm điều đó thì sẽ gặp lỗi sau:

Sử dụng forEach để lấy giá trị, index của phần tử trong mảng, cũng như cả mảng đó theo thứ tự

Khi muốn sử dụng cả bản thân mảng ban đầu trong hàm callback, ngoài các đối số value và index thì chúng ta cần chỉ định thêm cả đối số array khi sử dụng forEach để lấy giá trị và index của phần tử trong mảng, cũng như chính mảng đó, với cú pháp như sau:

org_array.forEach(callbackFn (value, index, array))

Ví dụ cụ thể:

let colors = [‘red’, ‘black’, ‘green’];

Và tương tự ở trên thì chúng ta có thể tùy ý thay đổi tên biến

element, index, array

bằng các tên biến khác, ví dụ như

x1, x2, x3

hay

a, b, c

chẳng hạn.

Lưu ý là ở đây chúng ta đã truyền cả mảng array ban đầu vào trong hàm callback, nên chúng ta có thể sử dụng các phương pháp xử lý mảng bên trong hàm callback để làm việc với array này.Ví dụ, chúng ta có thể sử dụng chính phương thức forEach với mảng array này bên trong hàm callback và tạo thành một vòng lặp lồng nhau như sau:

let colors = [‘red’, ‘black’, ‘green’];

Truy cập mảng gốc bên trong vòng lặp

Để truy cập vào chính mảng đang được lặp qua, chúng ta sẽ sử dụng tham số thứ 3 bên trong hàm callback. Bây giờ hãy cùng thử hiển thị tham số thứ 3

array

bên trong vòng lặp đang thực thi.


fruits.forEach(function(fruit, index, array) { console.log(array); // ["Apple", "Orange", "Banana", "Mango"] // 4 lần })


Mảng tham số thứ 3 bên trong hàm

callback

là mảng mà phương thức forEach () đã gọi.

Kết luận

forEach() là một phương thức lặp qua tất cả phần tử trong mảng một cách hiệu quả. Đối số đầu tiên nó là hàm callback, gọi cho mọi phần trong mảng với 3 đối số

item

,

index

,

array

.

forEach() là phương thức rất hữu ích để lặp qua tất cả giá trị trong mảng mà không làm phá vỡ cấu trúc mảng ban đầu.

forEach trong Javascript

This post hasn’t been updated for 5 years

Đặt vấn đề

Xét một ví dụ đơn giản : ” Tính tổng của mảng numbers = [1,2,3,4,5,6]” .

Thông thường, chúng ta sẽ làm như sau :


const numbers = [1, 2, 3, 4, 5, 6]; let sum = 0; for(let i = 0; i < numbers.length; i++) { sum += numbers[i]; } console.log(sum); // => 21


Cách trên khá dễ hiểu và thường đọc xong người ta sẽ nghĩ đến dùng cách này luôn. Tuy nhiên, trong trường hợp nào đó, vô tình chúng ta bị nhầm lẫn biến i đó với một biến số nào trước đó thì thật tệ hại.

Ngoài cách dùng vòng for, chúng ta có thể dùng tới forEach, một hàm khá hay và ngắn gọn.

Sử dụng forEach thế nào ?

Bài toán trên có thể được sử dụng với forEach như sau :


const numbers = [1, 2, 3, 4, 5, 6]; let sum = 0; forEach(numbers, function(element){ sum += element; }); console.log(sum); // => 21


Cũng khá là dễ hiểu nhỉ vì nó khá giống với ngôn ngữ tự nhiên mà (hihi).

Giới thiệu về forEach

forEach là một phương thức có sẵn của array được Javascript cung cấp.

**Cú pháp của nó là : **


arr.forEach(function callback(currentValue, index, array) { // your iterator }[, thisArg]);


Giải thích

callback: là hàm để thực hiện với mỗi phần tử của mảng, bao gồm 3 tham số:

currentValue: phần tử hiện tại đang được xử lý của array.

index: chỉ số của phần tử hiện tại đang được xử lý của array.

array: mảng hiện tại đang gọi hàm forEach.

thisArg: giá trị được sử dụng như là this, là tham chiếu tới đối tượng khi thực hiện hàm callback (Nếu thisArg không được nói tới thì mặc định là undefined)

Ví dụ in ra tổng của mảng :


function sumOfArray(numbers){ numbers.forEach(function sumElement(element){ console.log(element); }); }


Ví dụ có sử dụng thisArg


function Counter() { this.sum = 0; this.count = 0; } Counter.prototype.add = function(array) { array.forEach(function(item) { this.sum += item; ++this.count; }, this); }; const obj = new Counter(); obj.add([2, 5, 9]); console.log(obj.count); // => 3 console.log(obj.sum); // => 16


Khá là dễ hiểu phải không ạ? Đoạn code khi sử dụng forEach khá là dễ hiểu và ngắn gọn, tuy nhiên thì code sẽ chạy chậm hơn so với việc sử dụng vòng lặp (tuy nhiên không đáng kể). Tùy vào từng trường hợp thì mình có thể sử dụng linh hoạt.

Một số hàm khác

Ngoài forEach, thì Javascript còn cung cấp một số phương thức khác như : filter, reduce , map, every …. Trong project mình đang làm cũng liên quan khá nhiều tới xử lí các array, ơn giời là các phương thức này đã cứu cánh mình rất nhiều, nếu mình còn dùng for và for để xử lí thì … bao nhiêu dòng code cho đủ, và mỗi lần maintain lại thật là ác mộng! Sau đây là một số phương thức mình hay dùng :

1. Map

Cái đầu tiên phải kể đến đó chính là map, một hàm mình dùng khá là nhiều .

Xét một ví dụ:


let arrayName = dataResponse.map( item => { return item.Name }


Nói một cách dễ hiểu, map trả về 1 mảng mới có độ dài bằng mảng ban đầu

1. Filter

Nghe tới tên, là ta có thể hình dung luôn được nó sẽ làm gì rồi đúng không ạ? Đó chính là tìm kiếm. Filter trả về 1 mảng có độ dài <= với độ dài mảng ban đầu.

Xét ví dụ sau :


let companyObject = dataCompany.filter((company) => { return company["companyId"] === companyId; })


1. Reduce

Reduce thường được dùng nhiều cho việc tính toán, nó trả về một giá trị.

Xét ví dụ:


let total_weight = animals.reduce((weight, animal, index, animals) => { return weight += animal.weight }, 0)


Ngoài ra, thì có rất nhiều hàm khác, mình có thể tìm hiểu thêm ở đây .

Với các ví dụ đơn giản kể trên, ta đã hiểu hơn về cách sử dụng các hàm map, filter và reduce. Các hàm này sẽ càng tối ưu hơn với các dữ liệu hay mã code nhiều, phức tạp, mình khuyên các bạn nên tìm hiểu về nó, vì nó khá hay và và đơn giản.

Trên đây là chia sẻ của mình về việc foreEach và các hàm trong javascript. Cám ơn các bạn đã đọc, mong bài viết của mình phần nào có thể giúp ích cho các bạn trong việc xử lí với array!

Nguồn tham khảo:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

All Rights Reserved

JavaScript forEach là cái quái gì?

Trong JavaScript, để duyệt array thì forEach là một hàm rất hay. Vậy hàm forEach trong JavaScript cụ thể là như thế nào? Cách sử dụng forEach JavaScript ra sao? Mình hãy cùng tìm hiểu để làm chủ forEach js nhé!

Cách triển khai hàm forEach

Một cách triển khai hàm forEach như sau:


function forEach(array, action){ for(var i = 0; i < array.length; i++) action(array[i]); }


Hàm forEach trên nhận đầu vào là một mảng array và một hàm số action – thực hiện hành động đối với mỗi phần tử của mảng (array[i]).

Áp dụng hàm forEach để giải quyết bài toán trên


var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; var sum = 0; forEach(numbers, function(element){ sum += element; }); console.log(sum); // => 55


Ta có thể diễn giải thuật toán trên bằng lới như sau: Với mỗi phần tử trong mảng numbers, ta sẽ lấy nó ra và cộng dồn với biến sum. Kết quả thu được, sẽ ghi ra console. Nếu so sánh với cách trình bày ở trên thì cách này rõ ràng sẽ dài hơn. Tuy nhiên, đây chỉ là một ví dụ cơ bản, nên ta sẽ không bàn về độ dài, ngắn của code. Vấn đề tôi và bạn quan tâm trước tiên đó là: code-đọc-dễ-hiểu. Theo quan điểm cá nhân tôi thì việc sử dụng hàm forEach giúp code gần giống với ngôn ngữ tự nhiên hơn. Không biết quan điểm của bạn về vấn đề này thế nào?

Vị trí của phần tử trong forEach

Thông thường, chúng ta chỉ sử dụng tham số thứ nhất để xử lý các trường hợp gặp phải. Nhưng một số trường hợp chúng ta cũng cần đến tham số vị trí của giá trị để khai thác thông tin dữ liệu chính xác. Đây cũng là mục đích để ta tìm hiểu về vị trí của phần tử trong phương thức forEach, nó là tham số thứ 2, sau tham số giá trị đầu tiên trong callback.

Ta sẽ cùng tìm hiểu cách truy xuất vị trí của các giá trị trong mảng

fruits

qua ví dụ bên dưới


fruits.forEach(function (fruit, index) { console.log(fruit, "Vị trí " + index); // "Apple" "Vị trí 0" // "Orange" "Vị trí 1" // "Banner" "Vị trí 2" // "Mango" "Vị trí 3" })


Một ví dụ khác nữa về forEach javascript

Ví dụ: sử dụng hàm forEach để in ra các phần tử của mảng.

demoP = document.getElementById(“demo”); var numbers = [4, 9, 16, 25]; function myFunction(item, index) { demoP.innerHTML = demoP.innerHTML + “index[” + index + “]: ” + item + “”; }

Trên là cách sử dụng hàm foreach trong javascript. Qua bài này bạn phải nắm bắt cú pháp nói chung và những tham số truyền vào của hàm forEach. Để lặp qua các phần tử của mảng thì có rất nhiều giải pháp, và tùy vào từng trường hợp mà bạn hãy chọn một giải pháp phù hợp.

Sử dụng forEach để lấy giá trị của phần tử trong mảng theo thứ tự

Chúng ta chỉ định đối số value và sử dụng forEach để lấy giá trị của phần tử trong mảng theo thứ tự với cú pháp như sau:

org_array.forEach(callbackFn(value))

Ví dụ cụ thể, chúng ta lấy lần lượt giá trị của mảng, truyền nó vào hàm và in lần lượt chúng ra màn hình như sau:

let colors = [‘red’, ‘black’, ‘green’];

Chúng ta không nhất thiết phải dùng tên biến

element

, mà có thể tùy ý thay đổi tên biến

element

sử dụng ở trên bằng các tên biến khác như sau:

let colors = [‘red’, ‘black’, ‘green’];

Lại nữa, chúng ta có thể dùng hàm mũi tên arrow để rút gọn code ở trên như sau:

let colors = [‘red’, ‘black’, ‘green’];

Tổng kết

Phương thức forEach trong JavaScript là một công cụ hữu ích để lặp qua mảng và thực hiện các hành động trên từng phần tử. Nó giúp bạn tạo mã ngắn gọn và dễ đọc hơn khi làm việc với mảng dữ liệu trong ứng dụng web của bạn. Hi vọng rằng bài viết này đã giúp bạn hiểu rõ hơn về cách sử dụng forEach và cách tích hợp nó vào mã JavaScript của bạn.

Stringee Communication APIs là giải pháp cung cấp các tính năng giao tiếp như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài CSKH cho phép tích hợp trực tiếp vào ứng dụng/website của doanh nghiệp nhanh chóng. Nhờ đó giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp bởi thông thường nếu tự phát triển các tính năng này có thể mất từ 1 – 3 năm.

Bộ API giao tiếp của Stringee hiện đang được tin dùng bởi các doanh nghiệp ở mọi quy mô, lĩnh vực ngành nghề như TPBank, VOVBacsi24, VNDirect, Shinhan Finance, Ahamove, Logivan, Homedy, Adavigo, bTaskee…

Quý bạn đọc quan tâm xin mời đăng ký NHẬN TƯ VẤN TẠI ĐÂY:

Khi làm việc với mảng bạn thường làm gì, lặp qua một mảng?

Trong JavaScript, chúng ta có thể sử dụng một số phương thức được cung cấp như

map

,

reduce

, etc để lặp mảng. Nhưng, trong phạm vi bài viết này, ta chỉ làm việc với

forEach

chứ không phải 2 phương thức đã nhắc đến. Chúng ta sẽ tìm hiểu về cách sử dụng phương thức

forEach

, phạm vi áp dụng, các đối tượng thường được áp dụng

Từ JavaScript forEach đến các phương thức khác

Ngoài forEach, JavaScript còn cung cấp một số phương thức khác, tương tự dành cho array. Đó là: entries, every, filter, find, findIndex, keys, map, reduce, reduceRight, some, values.

Hàm arr.entries()

Trả về một mảng đối tượng mới, chứa key/value cho mỗi phần tử trong array.


a.entries();


Để duyệt mảng đối tượng mới này, mình sử dụng vòng lặp

for...of

:


const a = ["a", "b", "c"]; const iterator = a.entries(); for (let e of iterator) { console.log(e); } /* * [0, 'a'] * [1, 'b'] * [2, 'c'] */


Hàm arr.every()

Trả về

true

nếu như tất cả các phần tử trong mảng thoả mãn 1 hàm kiểm tra, ngược lại trả về

false

.


arr.every(callback[, thisArg])


Tham số truyền vào giống với hàm

forEach

.

Ví dụ sau trả về

true

nếu tất cả các phần tử trong mảng thoả mãn đều lớn hơn hoặc bằng 10:


function isBigEnough(element, index, array) { return element >= 10; } console.log([12, 5, 8, 130, 44].every(isBigEnough)); // false console.log([12, 54, 18, 130, 44].every(isBigEnough)); // true


Hàm arr.filter()

Giống như cái tên của nó, phương thức này dùng để lọc ra các phần tử trong mảng thoả mãn một điều kiện cho trước và trả về một mảng mới chứa những phần tử đó.


let newArray = arr.filter(callback[, thisArg])


Tham số truyền vào giống với hàm

forEach

.

Ví dụ sau lọc ra những phần tử trong mảng có giá trị lớn hơn hoặc bằng 10:


function isBigEnough(value) { return value >= 10; } const filtered = [12, 5, 8, 130, 44].filter(isBigEnough); console.log(filtered); // [12, 130, 44]


Hàm arr.find()

Trả về giá trị của phần tử đầu tiên trong mảng thoả mãn điều kiện cho trước, nếu không tìm thấy thì trả về

undefined

.


let var1 = arr.find(callback[, thisArg])


Tham số truyền vào cũng giống như hàm

forEach

.

Ví dụ sau tìm ra một object với

name

thoả mãn điều kiện cho trước:


const inventory = [ { name: "apples", from: "usa" }, { name: "bananas", from: "vietnam" }, { name: "cherries", from: "usa" }, { name: "cherries", from: "china" }, ]; function findCherries(fruit) { return fruit.name === "cherries"; } console.log(inventory.find(findCherries)); // {name: 'cherries', from: 'usa'}


Hàm arr.findIndex()

Trả về chỉ số đầu tiên của phần tử thoả mãn điều kiện cho trước, ngược lại trả về

-1

.


let id = arr.findIndex(callback[, thisArg])


Tham số truyền vào cũng giống như hàm

forEach

.

Ví dụ sau tìm ra chỉ số object với

name

thoả mãn điều kiện cho trước:


const inventory = [ { name: "apples", from: "usa" }, { name: "bananas", from: "vietnam" }, { name: "cherries", from: "usa" }, { name: "cherries", from: "china" }, ]; function findCherries(fruit) { return fruit.name === "cherries"; } console.log(inventory.findIndex(findCherries)); // 2


Hàm arr.map()

Trả về mảng mới với mỗi phần tử là kết quả của việc gọi hàm callback với mỗi phần tử của mảng ban đầu.


let new_array = arr.map(callback[, thisArg])


Tham số truyền vào cũng giống như hàm

forEach

JavaScript.

Ví dụ sau trả về mảng mới, mà mỗi phần tử của mảng mới là căn bậc hai của phần tử tương ứng trong mảng ban đầu:


const numbers = [1, 4, 9]; const roots = numbers.map(Math.sqrt); console.log(roots); // [1, 2, 3] console.log(numbers); // [1, 4, 9]


Những phương thức còn lại bạn có thể tham khảo thêm tại bài viết: Các phương thức của mảng trong JavaScript.

Nội dung

Để đọc hiểu bài này tốt nhất các bạn nên có kiến thức cơ bản về các phần:

• CẤU TRÚC CƠ BẢN MỘT CHƯƠNG TRÌNH TRONG C# console application
• BIẾN và KIỂU DỮ LIỆU trong C#
• TOÁN TỬ TRONG C#
• CÂU ĐIỀU KIỆN TRONG C#
• CẤU TRÚC CƠ BẢN VÒNG LẶP
• CẤU TRÚC HÀM CƠ BẢN TRONG C#
• MẢNG 1 CHIỀU TRONG C#
• MẢNG 2 CHIỀU TRONG C#

Trong bài học này, chúng ta sẽ cùng tìm hiểu các vấn đề:

• Cú pháp và nguyên tắc hoạt động của foreach trong C#
• Sử dụng foreach trong C#
• So sánh for và foreach trong C#

Thực hành

Flattening

Cho một mảng hai chiều, hãy chuyển mảng đó thành mảng một chiều, ví dụ:


let arrays = [[1, 2, 3], [4, 5], [6]]; /* * Code xử lý * * Đáp án: [1, 2, 3, 4, 5, 6] */


► Sử dụng phương thức

arr.reduce()

và

arr.concat()

.

► Sử dụng vòng lặp for, while thông thường.

Every and some

Hãy viết hàm

every()

và

some()

thoả mãn:

• 
every(arr, func)

  : trả về
  
true

  khi tất cả các phần tử của mảng
  
arr

  làm hàm
  
func

  trả về
  
true

  , ngược lại thì trả về
  
false

  .
• 
some(arr, func)

  : trả về
  
true

  khi ít nhất một phần tử của mảng
  
arr

  làm hàm
  
func

  trả về
  
true

  , ngược lại thì trả về
  
false

  .


console.log(every([NaN, NaN, NaN], isNaN)); // true console.log(every([NaN, NaN, 4], isNaN)); // false console.log(some([NaN, 3, 4], isNaN)); // true console.log(some([2, 3, 4], isNaN)); // false


Xem đáp án:

Tổng kết

Trên đây là một số kiến thức cơ bản về forEach trong JavaScript.

Hy vọng qua bài viết này bạn hiểu được forEach JavaScript là gì? Cách sử dụng forEach và khi nào nên sử dụng forEach JS.

Tham khảo: Higher-Order Functions

★ Nếu bạn thấy bài viết này hay thì hãy theo dõi mình trên Facebook để nhận được thông báo khi có bài viết mới nhất nhé:

• Facebook Fanpage: Complete JavaScript
• Facebook Group: Hỏi đáp JavaScript VN

JAVASCRIPT FOREACH LÀ CÁI QUÁI GÌ?

Bài đăng này đã không được cập nhật trong 2 năm

Trong JavaScript, để có thể duyệt array thì forEach là một hàm rất hay. Vậy forEach cụ thể là như thế nào và cách sử dụng nó ra sao? Chúng ta sẽ cùng tìm hiểu ngay sau đây.

Ví dụ: Cho một mảng numbers = [1, 2, 3, 4, 5, 6,7, 8, 9, 10]. Hãy tính tổng các số trong mảng và hiển thị ra console. Thông thường, chúng ta sẽ giải bài toán này như sau:


var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; var sum = 0; for(var i = 0; i < numbers.length; i++) sum += numbers[i]; console.log(sum); // => 55


Cách giải trên là khá dễ hiểu. Chúng ta lấy từng phần tử trong mảng ra theo chỉ số, rồi cộng với biến sum. Tuy nhiên có một vấn đề với cách này (cũng không hẳn là một vấn đề), đó là việc sử dụng chỉ số i có thể khiến bạn bị nhầm với một biến số trước đó. Dẫn đến những sai lầm không thể đoán trước. Lúc này, forEach xuất hiện giúp bạn giải quyết vấn đề đó.

Sử dụng this trong hàm callback của forEach

Trước tiên hãy xét ví dụ dưới đây.

let ranks = [‘A’, ‘B’, ‘C’]; ranks.forEach(function (e) { console.log(this); // window object });

Nếu chạy trong chế độ bình thường thì con trỏ this chính là đối tượng window, nhưng nếu chạy trong chế độ strict mode thì nó sẽ là undefined. Nếu bạn muốn biết rõ hơn vê con trỏ this thì hãy xem trong bài viết hiểu rõ về this trong Javascript.

Bây giờ mình muốn con trỏ this chính là biến

ranks

thì làm bằng cách nào? Rất đơn giản, hãy sử dụng tham số

thisValue

mà mình đã giới thiệu ở phần 1.

let ranks = [‘A’, ‘B’, ‘C’]; ranks.forEach(function (e) { console.log(this); // ranks }, ranks);

Chạy ví dụ này lên thì this chính là biến ranks.

Tuy nhiên, nếu bạn sử dụng arrow function thì đối tượng this không tồn tại nhé các bạn.

let ranks = [‘A’, ‘B’, ‘C’]; ranks.forEach((e) => { console.log(this); // window object }, ranks);

Cùng chuyên mục:

Cách gán giá trị cho thẻ input trong javascript

Để gán giá trị cho thẻ input thì ta có hai cách, thứ nhất là…

Biểu thức chính quy RegEx trong Javascript

Bài này chúng ta sẽ tìm hiểu đến chuỗi và cách sử dụng biểu thức…

Hướng dẫn cách sử dụng forEach trong JavaScript. Bạn sẽ học được cách sử dụng forEach để lấy các phần tử trong mảng theo thứ tự, sự khác biệt giữa forEach và for of, cũng như các ứng dụng khác nhau của forEach trong JavaScript sau bài học này.

Sự khác biệt giữa forEach và for…of trong JavaScript

Để lấy phần tử của mảng theo thứ tự trong JavaScript, ngoài phương thức forEach ở trên thì chúng ta còn một phương pháp khác, đó chính là sử dụng for…of mà Kiyoshi đã giới thiệu trước đây.

Vậy 2 phương pháp này có gì khác nhau? Hãy cùng so sánh sự khác biệt giữa forEach và for…of trong JavaScript như dưới đây:

1. Kết quả 2 phương pháp khi sử dụng với mảng có phần tử không tồn tại liên tục là khác nhau. forEach sẽ trả về đúng số phần tử tồn tại trong mảng, trong khi for…of sẽ trả về tất cả các giá trị (bao gồm cả undefined) của tất cả các vị trí index trong mảng. Ví dụ:

let nums = [1,,3,4];

1. Không thể sử dụng lệnh break trong forEach. Nói cách khác thì chúng ta không thể dừng vòng lặp forEach giữa chừng. Tuy nhiên điều này là có thể với vòng lặp for…of. Ví dụ:

let myarray = [‘a’, ‘b’, ‘c’,”d”];

Sử dụng forEach để lấy giá trị và index của phần tử trong mảng theo thứ tự

Chúng ta chỉ định đối số value và thêm cả đối số index khi sử dụng forEach để lấy giá trị và index của phần tử trong mảng theo thứ tự với cú pháp như sau:

org_array.forEach(callbackFn(value, index))

Ví dụ cụ thể:

let colors = [‘red’, ‘black’, ‘green’];

Và tương tự ở trên thì chúng ta có thể tùy ý thay đổi tên biến

element, index

bằng các tên biến khác, ví dụ như

x1, x2

hay

a, b

chẳng hạn.

forEach trong JavaScript là gì?

Như các ngôn ngữ lập trình khác, forEach trong JavaScript là một phương thức có sẵn trong mảng. Với nó ta có thể lặp qua từng phần tử có trong mảng và xử lý chúng theo thứ tự. Thông thường, chúng ta sẽ bắt gặp forEach trong trường hợp cần hiển thị dữ liệu lên giao diện người dùng.

Ta cùng nhau xem cú pháp cơ bản của forEach trong JavaScript:


array.forEach(function(item, index, array) { // Thực hiện hành động trên mỗi phần tử ở đây });


• item: Giá trị của phần tử hiện tại trong mảng.
• index: Chỉ mục của phần tử hiện tại trong mảng.
• array: Mảng gốc mà chúng ta đang lặp qua.

>>> Xem thêm bài viết về ngôn ngữ lập trình PHP:

• ReactJS là gì? Tất tần tật những điều căn bản về ReactJS
• Lập trình viên Full Stack là gì? Mức lương của một lập trình viên full stack tại Việt Nam
• 5 ngôn ngữ lập trình cơ bản và phổ biến nhất cho người mới

Keywords searched by users: foreach js là gì

Categories: Tìm thấy 26 Foreach Js Là Gì

See more here: kientrucannam.vn

See more: https://kientrucannam.vn/vn/