Hướng dẫn cách tính tổng các phần tử trong mảng JavaScript. Bạn sẽ học được cách sử dụng sử dụng vòng lặp for, forEach để tính tổng các số có trong mảng, cũng như là phương thức Array reduce trong JavaScript để tính tổng các phần tử trong mảng sau bài học này.

Chúng ta có 3 phương pháp cơ bản để tính tổng các phần tử trong mảng JavaScript sau đây:

• Sử dụng vòng lặp for để tính tổng các số có trong mảng
• Sử dụng forEach để tính tổng các số có trong mảng
• Sử dụng Array reduce trong JavaScript

Sử dụng vòng lặp for để tính tổng các số có trong mảng JavaScript

Để tính tổng các phần tử trong mảng JavaScript, chúng ta đơn giản tạo ra một vòng lặp để truy xuất và cộng lần lượt giá trị của các phần tử vào một tổng chung.

Có nhiều cách để tạo ra vòng lặp nhằm Duyệt mảng và truy xuất giá trị, và một trong số đó chính là dùng vòng lặp for.

Ví dụ, chúng ta sử dụng vòng lặp for để tính tổng các số có trong mảng JavaScript như sau:

let num = [48, 75, 92, 61, 54, 83, 76];
let sum = 0;
for (let i = 0; i < num.length;i++){
    sum += num[i];
}

console.log(sum); //489

Chúng ta cũng có thể sử dụng vòng lặp while nếu muốn để thay thế cho for trong phép tính tổng các phần tử trong mảng JavaScript. Ví dụ:

let num = [48, 75, 92, 61, 54, 83, 76];
let sum = 0, i = 0;
while ( i < num.length){
    sum += num[i];
    ++i;
}

console.log(sum); //489

• Xem thêm: For trong JavaScript và vòng lặp với số lần cụ thể
• Xem thêm: While trong JavaScript và vòng lặp không giới hạn số lầ

Tính tổng các phần tử trong mảng JavaScript bằng forEach

forEach trong JavaScript vốn được sử dụng để lấy phần tử trong mảng theo thứ tự.

Do vậy chúng ta cũng hoàn toàn có thể sử dụng forEach để tính tổng các phần tử trong mảng JavaScript như sau:

let num = [48, 75, 92, 61, 54, 83, 76];
let sum = 0;
num.forEach(function(element){
  sum +=element;
});

console.log(sum); //489

Ngoài forEach, chúng ta cũng có thể sử dụng bất cứ hàm hay phương thức có tác dụng giống như forEach là lấy phần tử trong mảng theo thứ tự. Ví dụ như là Array map hoặc Array filter chẳng hạn.

Ví dụ đối với Array map, chúng ta đã biết phương thức này vốn có tác dụng tạo mảng mới từ các phần tử trong mảng JavaScript. Tuy nhiên thì Array map cũng có thể xử lý tuần tự các phần tử trong mảng ban đầu, nên nếu bỏ đi chức năng tạo mảng mới thì chúng ta hoàn toàn có thể dùng nó tương tự như forEach để tính tổng phần tử trong mảng ban đầu như sau:

let num = [48, 75, 92, 61, 54, 83, 76];
let sum = 0;
num.map(function(element){
  sum += element;
});

console.log(sum); //489

Chuyện này cũng hoàn toàn tương tự như với Array filter, chúng ta bỏ đi chức năng chính mà chỉ sử dụng tới chức năng xử lý tuần tự phần tử là có thể tiến hành tính tổng phần tử trong mảng ban đầu bằng Array filter như dưới đây:

let num = [48, 75, 92, 61, 54, 83, 76];
let sum = 0;
num.filter(function(element){
  sum += element;
});

console.log(sum); //489

Tính tổng các phần tử trong mảng JavaScript bằng Array reduce

Phương thức Array reduce lại hoàn toàn khác với 2 phương thức Array map và Array filter ở trên, bởi chức năng tính tổng các phần tử trong mảng JavaScript không phải là chức năng phụ, mà là chức năng chính của nó. Bởi vậy đây cũng là phương thức gọn gàng và được sử dụng nhiều nhất trong các phương pháp tính tổng các phần tử trong mảng.

Tất nhiên Array reduce không phải được sử dụng chỉ để tính tổng các phần tử. Bạn có thể tìm hiểu thêm rất nhiều cách sử dụng khác nhau của phương thức này tại bài viết Array reduce trong JavaScript

Với việc tính tổng các phần tử trong mảng JavaScript, chúng ta sử dụng Array reduce với cú pháp sau đây:

Trong đó:

• arr là mảng ban đầu
• callbackFN là hàm callback chứa xử lý tính tổng. Hàm callback sẽ nhận từng phần tử từ mảng arr để tính tổng.
• initialValue là giá trị đầu tiên được truyền vào hàm callback trong lần gọi hàm đầu tiên. Nếu được lược bỏ thì giá trị phần tử đầu tiên của mảng arr sẽ được sử dụng.

Lại nữa, hàm callback sử dụng trong phương thức reduce có thể được viết với 1 trong 3 cách sau đây:

Trong đó:

• accumulator là biến dùng để tích lũy các kết trả về sau mỗi lần gọi hàm callback. Sau khi tất cả các phần tử được xử lý, accumulator sẽ là kết quả cuối cùng được trả về từ Array reduce.
• value là tên một biến dùng để gán giá trị của phần tử đang được lấy từ mảng để truyền vào callbackFN
• index là tên một biến dùng để gán index của phần tử đang được lấy từ mảng để truyền vào callbackFN
• array là tên một biến dùng để gán cả mảng ban đầu để truyền vào callbackFN

Hàm callback sẽ nhận lần lượt các phần tử từ mảng ban đầu rồi cộng dồn vào biến tích lũy accumulator. Và vào lần trả về cuối cùng, accumulator chính là tổng cần tìm.

Ví dụ cụ thể, chúng ta có thể tính tổng các phần tử trong mảng JavaScript bằng Array reduce như sau:

let num = [48, 75, 92, 61, 54, 83, 76];
let sum = num.reduce(function(accumulator, element){
  return accumulator + element;
}, 0);

console.log(sum);

Trong ví dụ này, chúng ta chỉ định giá trị của initialValue bằng 0, và dùng hàm callback với các đối số gồm accumulator và element như trên.

Lại nữa, chúng ta có thể dùng arrow function để thay thế cho hàm callback khi sử dụng phương thức Array reduce, như ví dụ sau đây:

let num = [48, 75, 92, 61, 54, 83, 76];
let sum = num.reduce((sum, element) => sum + element, 0);

console.log(sum);
// 489

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn về cách tính tổng các phần tử trong mảng JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của 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/tinh-tong-cac-phan-tu-trong-mang-javascript/