Hướng dẫn foreach object trong javascript

1. Đặ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.

2. 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).

3. 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.

4. 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

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.

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.

• Xem thêm: Callback trong JavaScript và cách gọi một hàm bên trong hàm khác

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.

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

colors.forEach(function(element){
  console.log(element);
});

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

colors.forEach(function(a){
  console.log(element);
});

colors.forEach(function(x1){
  console.log(element);
});

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'];
colors.forEach(element => console.log(element));

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

colors.forEach(function(element, index){
  console.log( index, element);
});

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.

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

colors.forEach(function(element, index, array){
  console.log( index, element,array);
});

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

colors.forEach(function(a, b, c){
  c.forEach(x => console.log(x));
});

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];
nums.forEach(element => console.log(element));

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 = [];
nums[1] = 10;
nums[3] = 12;
nums[7] = 20;
console.log(nums);


nums.forEach(element => console.log(element));

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'];
let copyarray = [];


for (let i = 0; i < myarray.length; i++) {
  copyarray.push(myarray[i]);
}


myarray.forEach(function(item){
  copyarray.push(item);
})

Đế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'];

const value ="a";
let count = 0;
myarray.forEach(function(element){

  if (element === value) {
    count += 1;
  }
})

console.log(count);

Rất đơn giản, phần tử a 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.

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.

• Xem thêm: for…of trong JavaScript và cách lấy giá trị từ đối tượng

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];
nums.forEach(element => console.log(element));





for (let element of nums){
  console.log(element);
}

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

myarray.forEach(function(element){
  console.log(elment);
})





for (let element of myarray){
  console.log(elment);
  if (element === "b") {
    console.log("END!");
    break;
  }
}

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.

Hãy chia sẻ và cùng lan tỏa kiến thức lập trình Nhật Bản tại Việt Nam!

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

Thay thế phần tử trong mảng JavaScript (index, splice)

Thêm phần tử vào mảng trong JavaScript (unshift, push, index)