Chuyển tới nội dung
Home » Foreach Js Là Gì | Giới Thiệu Về Foreach

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

My forEach() method

So sánh for và foreach trong C#

Foreach mang trong mình một số ưu điểm như:

  • Câu lệnh ngắn gọn, sẽ sử dụng.
  • Rất có ích khi duyệt danh sách, tập hợp mà không thể truy xuất thông qua chỉ số phần tử.
  • Duyệt các danh sách, tập hợp có số phần tử không xác định hoặc số phần tử thay đổi liên tục.

Mặc dù có nhiều ưu điểm nhưng không hẳn là foreach hơn hẵn for. Cùng điểm qua một vài tiêu chí để xem 2 đối thủ này ai hơn ai nhé.

Tiêu chí

For

Foreach

Khả năng truy xuất phần tử

Truy xuất ngẫu nhiên (có thể gọi bất kỳ phần tử nào trong mảng để sử dụng)

Truy xuất tuần tự (chỉ sử dụng được giá trị phần tử đang xét)

Thay đổi được giá trị của các phần tử

Không

Duyệt mảng, tập hợp khi không biết được số phần tử của mảng, tập hợp

Không

Hiệu suất (tốc độ xử lý) (*)

Đối với mảng, danh sách hoặc tập hợp có khả năng truy xuất ngẫu nhiên thì for sẽ chiếm ưu thế

Đối với mảng, danh sách hoặc tập hợp không có khả năng truy xuất ngẫu nhiên thì foreach chiếm ưu thế

(*) Nhìn chung hiệu suất của for và foreach còn phụ thuộc vào cấu trúc dữ liệu đang xét cho nên việc so sánh này chỉ mang tính chất tham khảo.

Sau đây là 2 đoạn chương trình kiểm tra tốc độ của for và foreach đối với 2 cấu trúc dữ liệu là mảng 1 chiều (có khả năng truy xuất ngẫu nhiên) và danh sách liên kết LinkedList (không có khả năng truy xuất ngẫu nhiên):

Đầu tiên là mảng 1 chiều:


/* Kiểm tra tốc độ của for */ /* * Sử dụng 1 cái đồng hồ để đo thời gian chạy của 2 vòng lặp for và foreach * Ở đây mình chỉ kiểm tra tốc độ chứ không tập trung giải thích cú pháp * Các bạn có thể tìm hiểu thêm. */ Stopwatch start = new Stopwatch(); start.Start(); int[] IntArray = new int[Int32.MaxValue / 100]; int s = 0; int Length = IntArray.Length; for (int i = 0; i < Length; i++) { s += IntArray[i]; } start.Stop(); Console.WriteLine(" Thoi gian chay cua for: {0} giay {1} mili giay", start.Elapsed.Seconds, start.Elapsed.Milliseconds); /* Kiểm tra tốc độ của foreach */ Stopwatch start2 = new Stopwatch(); start2.Start(); int[] IntArray2 = new int[Int32.MaxValue / 100]; int s2 = 0; foreach (int item in IntArray2) { s2 += item; } start2.Stop(); Console.WriteLine(" Thoi gian chay cua foreach: {0} giay {1} mili giay", start2.Elapsed.Seconds, start2.Elapsed.Milliseconds);

  • Đoạn chương trình mình thực hiện:

    • Khai báo 1 mảng 1 chiều có 20 triệu phần tử (khai báo số phần tử lớn để có thể thấy được sự chêch lệch về tốc độ)
    • Lần lượt dùng for, foreach để duyệt mảng đó và thực hiện 1 câu lệnh nào đó.
    • Cuối cùng là xuất ra thời gian thực thi của từng trường hợp dưới dạng giây và mili giây.
  • Kết quả khi chạy đoạn chương trình trên:
  • Dựa vào kết quả ta có thể thấy được sự chêch lệch nhỏ về tốc độ, nếu kiểm tra với số phần tử lớn hơn hoặc cấu trúc dữ liệu phức tạp hơn thì chêch lệch này càng lớn.

Tiếp theo là đến danh sách liên kết LinkedList:


/* * Khai báo 1 LinkedList chưa các số nguyên int và khởi tạo giá trị cho nó. */ LinkedList

list = new LinkedList

(); for (int i = 0; i < 100000; i++) { list.AddLast(i); } /* Kiểm tra tốc độ của for */ Stopwatch st = new Stopwatch(); int s1 = 0, length = list.Count; st.Start(); for (int i = 0; i < length; i++) { /* * Vì LinkedList không thể truy xuất thông qua chỉ số phần tử * nên mình phải sử dụng 1 phương thức hỗ trợ làm điều này. * Và đây chính là sự hạn chế của for đối với các cấu trúc dữ liệu tương tự như danh sách liên kết này. */ s1 += list.ElementAt(i); } st.Stop(); /* Kiểm tra tốc độ của foreach */ Stopwatch st2 = new Stopwatch(); int s2 = 0; st2.Start(); foreach (int item in list) { /* * Vì foreach không quan tâm đến chỉ số phần tử nên code viết rất ngắn gọn */ s2 += item; } st2.Stop(); /* In ra giá trị tính tổng giá trị các phần tử khi duyệt bằng for và foreach để chắc chắn rằng cả 2 đều chạy đúng */ Console.WriteLine(" s1 = {0} s2 = {1}", s1, s2); Console.WriteLine(" Thoi gian chay cua for = {0} giay {1} mili giay", st.Elapsed.Seconds, st.Elapsed.Milliseconds); Console.WriteLine(" Thoi gian chay cua foreach = {0} giay {1} mini giay", st2.Elapsed.Seconds, st2.Elapsed.Milliseconds);


  • Chương trình mình thực hiện:

    • Tạo 1 LinkedList và thêm vào 100000 phần tử.
    • Sau đó lần lượt dùng for, foreach duyệt LinkedList trên và tính tổng giá trị các phần tử trong mảng.
    • Cuối cùng in ra thời gian chạy của for, foreach.
  • Kết quả khi chạy chương trình trên là:
  • Dựa vào kết quả chạy ta thấy sự chênh lệch là quá lớn, rõ ràng đối với cấu trúc dữ liệu phức tạp, không hỗ trợ truy xuất thông qua chỉ số phần tử nữa thì foreach chiếm ưu thế.

Tuỳ vào từng trường hợp mà ta nên dùng for hay foreach. Không nên lạm dụng 1 thứ quá nhiều.

Lặp qua Array-like object bằng forEach

Như các phương thức

map

,

filter

,

find

, ..etc. Chúng ta không thể lặp qua một array-like, chỉ có forEach có khả năng làm điều này.


const fruits = { "0": "Apple", "1": "Mango", "length": 2 } Array.prototype.forEach.call(fruits, function(fruit) { console.log(fruit) // "Apple", "Mango" });

Ngoài ra bạn cũng có thể lặp qua NodeList từ DOM HTML bằng forEach


document.querySelectorAll("img").forEach(function(element) { console.log(element) // HTMLElement })

My forEach() method
My forEach() method

Khi nào nên sử dụng forEach ?

Bạn nên sử dụng forEach trong JavaScript khi cần duyệt qua từng phần tử của mảng và thực hiện một hành động nào đó trên từng phần tử.

Ví dụ như:

  • Bạn muốn in ra từng phần tử trong mảng
  • Bạn muốn tính tổng của các phần tử trong mảng
  • Bạn muốn tìm phần tử trong mảng
  • Bạn muốn thay đổi giá trị của từng phần tử
  • Bạn muốn thêm thuộc tính mới cho từng phần tử

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:

  • Sử dụng phương thức array.prototype.reduce và concat(). (tham khảo)
  • Sử dụng vòng lặp for, while thông thường. (tham khảo)

Ví dụ:


var arrays = [[1, 2, 3], [4, 5], [6]]; // Your code here. // => [1, 2, 3, 4, 5, 6]

Every and some

Hãy viết hàm every() và some() thoả mãn:


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

Chúc bạn thực hành vui vẻ. Xin chào và hẹn gặp lại ở bài viết sau trong series JavaScript cơ bản. Thân ái,

01. Các hàm duyệt mảng trong JS - map và forEach.
01. Các hàm duyệt mảng trong JS – map và forEach.

Tải xuống

Tài liệu

Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học Vòng lặp foreach trong lập trình C# cơ bản dưới dạng file PDF trong link bên dưới.

Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com

Đừng quên like và share để ủng hộ Kteam và tác giả nhé!

Giới thiệu hàm forEach trong JavaScript

Hàm forEach là gì? Hay vòng lặp forEach trong JavaScript là gì?

Trả lời: forEach là một phương thức có sẵn của array, để duyệt qua mỗi phần tử của mảng và thực hiện một hành động nào đó.

Cú pháp


arr.forEach(function callback(currentValue, index, array) { // code xử lý }[, thisArg]);

Giải thích


  • callback

    : Hàm 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

    – 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

    .
  • Bạn có thể bỏ qua tên hàm

    callback

    .


arr.forEach(function(currentValue, index, array) { // code xử lý }[, thisArg]);

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]);

Kết quả:


1 3 5

Ví dụ sử dụng thisArg


function Counter() { this.sum = 0; this.count = 0; this.add = function(array) { array.forEach(function(item) { this.sum += item; ++this.count; }, this); // this chính là đối tượng tạo new Counter } } const obj = new Counter(); obj.add([2, 5, 9]); console.log(obj.count); // 3 console.log(obj.sum); // 16

JS loop - 5 : Các hàm forEach, map, filter và reduce trong JavaScript
JS loop – 5 : Các hàm forEach, map, filter và reduce trong JavaScript

Lưu ý khi sử dụng forEach trong JavaScript

  • forEach giữ nguyên dữ liệu trong mảng gốc. Nó chỉ thực hiện và xử lý các hành động được xác định trong hàm callback.
  • Hàm forEach không thể sử dụng kết hợp với break. Trong trường hợp cần dừng vòng lặp với điều kiện nào đó, ta cần sử dụng các vòng lặp khác như for hoặc while thay thế.
  • forEach có thể sử dụng với mảng rỗng hoặc một mảng không đầy đủ. Lúc này nếu mảng không có phần tử nào nó sẽ không thực hiện bất cứ hành động nào.

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.

Nội dung bài viết

Khóa học

Bạn mới bắt đầu học lập trình? Bạn đang muốn học thêm ngôn ngữ lập trình mới? C# là lựa chọn hoàn hảo để đáp ứng các nhu cầu trên.

Ngôn ngữ C# là một ngôn ngữ mới, cấu trúc rõ ràng, dễ hiểu và dễ học. C# thừa hưởng những ưu việt từ ngôn ngữ Java, C, C++ cũng như khắc phục được những hạn chế của các ngôn ngữ này. C# là ngôn ngữ lập trình hướng đối tượng được phát triển bởi Microsoft, được xây dựng dựa trên C++ và Java.

Khoá học lần này sẽ mang đến toàn bộ những kiến thức cơ bản về C#. Chào mừng các bạn đã đến với khoá học LẬP TRÌNH C# CƠ BẢN của Kteam.

Đánh giá

Bình luận

em không thực hiện được code về đếm thời gian của for va foreach, nó báo lỗi CS0246 cho Stopwatch.

Trang web bị lỗi không load được hình ảnh khi truy cập qua iphone XS 64gb bản quốc tế mã ZP.

Phân biệt For và Foreach - Unity Hỏi Đáp - E6
Phân biệt For và Foreach – Unity Hỏi Đáp – E6

Kết luận

Nội dung bài này giúp các bạn nắm được:

  • Cú pháp của foreach trong C#.
  • Sử dụng foreach trong C#.
  • So sánh for và foreach trong C#.

Bài sau chúng ta sẽ tìm hiểu về LỚP STRING TRONG C#.

Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận hoặc góp ý của mình để phát triển bài viết tốt hơn. Đừng quên “Luyện tập – Thử thách – Không ngại khó”.

Tham khảo

  • http://eloquentjavascript.net/05_higher_order.html
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

Bản gốc: Blog Complete JavaScript

Facebook Fanpage: Complete JavaScript

Facebook Group: Hỏi đáp JavaScript VN

All rights reserved

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.

Java - Sử dụng foreach với đối tượng của lớp ta tự định nghĩa
Java – Sử dụng foreach với đối tượng của lớp ta tự định nghĩa

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?

[Khóa học lập trình C# Cơ bản] - Bài 24: Vòng lặp foreach trong C# | HowKteam
[Khóa học lập trình C# Cơ bản] – Bài 24: Vòng lặp foreach trong C# | HowKteam

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



array

.

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

value

,

index



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.

JavaScript forEach() method in 8 minutes! ➿
JavaScript forEach() method in 8 minutes! ➿

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.

Tự tạo chatbot AI hỏi đáp trên dữ liệu của chính bạn: NVIDIA Chat With RTX, hoàn toàn miễn phí
Tự tạo chatbot AI hỏi đáp trên dữ liệu của chính bạn: NVIDIA Chat With RTX, hoàn toàn miễn phí

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



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.

Full Highlights T1 vs DK | Match 33 | LCK Mùa Xuân 2024
Full Highlights T1 vs DK | Match 33 | LCK Mùa Xuân 2024

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]); }

Redis là gì? Bài học này đủ để bắt đầu | Là một Backend bạn đã từng gặp những trường hợp này chưa?
Redis là gì? Bài học này đủ để bắt đầu | Là một Backend bạn đã từng gặp những trường hợp này chưa?

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



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

ASYNC JavaScript trong 30 phút (CALLBACK, PROMISES, ASYNC AWAIT)
ASYNC JavaScript trong 30 phút (CALLBACK, PROMISES, ASYNC AWAIT)

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.

GIẢI THÍCH DI (Dependency Injection) qua ví dụ dễ hiểu !
GIẢI THÍCH DI (Dependency Injection) qua ví dụ dễ hiểu !

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

Abstract class và interface ???
Abstract class và interface ???

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.

Làm front-end nên lựa chọn Angular hay ReactJS hay VueJS
Làm front-end nên lựa chọn Angular hay ReactJS hay VueJS

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’];

Auth: 03 - JWT là gì và những điều cần biết 🎉
Auth: 03 – JWT là gì và những điều cần biết 🎉

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é!

Regex và 6 nhóm kí hiệu hay được sử dụng
Regex và 6 nhóm kí hiệu hay được sử dụng

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" })

DESIGN PATTERNS | Bạn có dám chắc trả lời được 5 Câu hỏi này không? | Hướng dẫn cách học 23 patterns
DESIGN PATTERNS | Bạn có dám chắc trả lời được 5 Câu hỏi này không? | Hướng dẫn cách học 23 patterns

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’];

Phân biệt Map và ForEach trong Js #javascript #programming #learning
Phân biệt Map và ForEach trong Js #javascript #programming #learning

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.

Ai nói forEach là xấu khi làm việc với Loops with Async / Await | Nodejs tutorial | Cách tôi FIX
Ai nói forEach là xấu khi làm việc với Loops with Async / Await | Nodejs tutorial | Cách tôi FIX

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()



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()



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:

Ôn tập mảng, đối tượng và các hàm array foreach, push trong javascript @Thầy Hộ Fpoly
Ôn tập mảng, đối tượng và các hàm array foreach, push trong javascript @Thầy Hộ Fpoly

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);

[Javascript Basic] My forEach() method trong javascript💻
[Javascript Basic] My forEach() method trong javascript💻

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”];

forEach() vs. map() - What’s the Difference?
forEach() vs. map() – What’s the Difference?

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
vòng lặp foreach
vòng lặp foreach

Keywords searched by users: foreach js là gì

Tìm Hiểu Về Foreach Trong Javascript
Tìm Hiểu Về Foreach Trong Javascript
Javascript Cơ Bản: Sử Dụng Vòng Lặp Và Tối Ưu Hóa Vòng Lặp
Javascript Cơ Bản: Sử Dụng Vòng Lặp Và Tối Ưu Hóa Vòng Lặp
Có Nên Dừng Việc Sử Dụng Foreach Trong Javascript Hay Không?
Có Nên Dừng Việc Sử Dụng Foreach Trong Javascript Hay Không?
So Sánh Foreach Và Map Trong Javascript
So Sánh Foreach Và Map Trong Javascript
My Foreach() Method - Youtube
My Foreach() Method – Youtube
Javascript — Map Vs. Foreach
Javascript — Map Vs. Foreach
Loại Vòng Lặp Nào Nhanh Nhất Trong Javascript?
Loại Vòng Lặp Nào Nhanh Nhất Trong Javascript?
For Vs Foreach Vs For/In Vs For/Of Trong Javascript | Topdev
For Vs Foreach Vs For/In Vs For/Of Trong Javascript | Topdev
Giới Thiệu Về Closure Trong Javascript: Những Điều Cần Biết Cho Người Mới  Bắt Đầu Học Lập Trình Javascript ( Important ). - Nodemy - Học Viện Đào Tạo  Lập Trình Thực Chiến
Giới Thiệu Về Closure Trong Javascript: Những Điều Cần Biết Cho Người Mới Bắt Đầu Học Lập Trình Javascript ( Important ). – Nodemy – Học Viện Đào Tạo Lập Trình Thực Chiến
Vòng Lặp Foreach Trong Lập Trình C# Cơ Bản | How Kteam
Vòng Lặp Foreach Trong Lập Trình C# Cơ Bản | How Kteam
Vòng Lặp Foreach Trong Lập Trình C# Cơ Bản | How Kteam
Vòng Lặp Foreach Trong Lập Trình C# Cơ Bản | How Kteam
Javascript Là Gì? Tìm Hiểu Về Ngôn Ngữ Lập Trình Javascript Từ A-Z -  Vnskills Academy
Javascript Là Gì? Tìm Hiểu Về Ngôn Ngữ Lập Trình Javascript Từ A-Z – Vnskills Academy
Kiến Thức Về Vòng Lặp Foreach Trong Php Từ A-Z | Ironhack Việt Nam
Kiến Thức Về Vòng Lặp Foreach Trong Php Từ A-Z | Ironhack Việt Nam
6 Sự Thật Bạn Nên Biết Về Foreach Trong Php
6 Sự Thật Bạn Nên Biết Về Foreach Trong Php
Cơ Bản]Array Trong Javascript (Phần 2) | By Long Nguyen | F8
Cơ Bản]Array Trong Javascript (Phần 2) | By Long Nguyen | F8
Trời Sinh Ra For Loop Sao Còn Sinh Array.Foreach Trong Javascript?
Trời Sinh Ra For Loop Sao Còn Sinh Array.Foreach Trong Javascript?
Tìm Hiểu Về Foreach Trong Javascript
Tìm Hiểu Về Foreach Trong Javascript
Javascript: Vòng Lặp Foreach Trong Mảng - Đại Phố Web & Hosting
Javascript: Vòng Lặp Foreach Trong Mảng – Đại Phố Web & Hosting
Js Loop - 5 : Các Hàm Foreach, Map, Filter Và Reduce Trong Javascript -  Youtube
Js Loop – 5 : Các Hàm Foreach, Map, Filter Và Reduce Trong Javascript – Youtube
Kiến Thức Về Vòng Lặp Foreach Trong Php Từ A-Z | Ironhack Việt Nam
Kiến Thức Về Vòng Lặp Foreach Trong Php Từ A-Z | Ironhack Việt Nam
Grasp Là Gì? Chuyên Gia Thông Tin Và Nguyên Tắc Dành Cho Người Sáng Tạo  Trong Javascript | Hackernoon
Grasp Là Gì? Chuyên Gia Thông Tin Và Nguyên Tắc Dành Cho Người Sáng Tạo Trong Javascript | Hackernoon
Các Loại Vòng Lặp Trong Javascript
Các Loại Vòng Lặp Trong Javascript

See more here: kientrucannam.vn

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *