Hiện nay, việc mà ta sử dụng vòng lặp for để duyệt mảng và xử lý mảng là vô cùng dễ dàng và phổ biến. Tuy nhiên các bạn chưa học về vòng lặp(sẽ được học vào các bài học tới) và chưa hiểu gì về nó. Và vì vậy ở bài này sẽ là một số những phương thức duyệt mảng mà không cần dùng vòng lặp. Những phương thức này cũng giúp ta khá nhiều trong code, làm việc với mảng một cách ngắn gọn và chuyên nghiệp.

1. Hàm forEach() trong JavaScript

Hàm forEach() là một hàm có sẵn của Js. Hàm này được sử dụng để duyệt và thao tác với từng phần tử của mảng.

Cú pháp khai báo:

numbers.forEach(myFunction);

Trong đó:

  • numbers : chính là mảng mà ta sẽ thao tác.
  • myFunction : là một hành động mà ta sẽ làm với mảng. Ví dụ: tính toán mảng, thêm, bớt,… Ta thường coi nó chính là một hàm.

Ví dụ:

const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
document.write(txt);
function myFunction(value, index, array) {
  txt += value + "<br>"; 
}

Ở ví dụ này mình đã lấy giống hết cú pháp cho các bạn dễ hình dung. Hàm myFunction có 3 giá trị đó là:

  • Value : phần tử của mảng.
  • Index : là số chỉ mục của mảng
  • array : chính mảng.

Khi sử dụng tham số value thì ví dụ trên sẽ được viết lại thành:

const numbers = [45, 4, 9, 16, 25];

let txt = "";
numbers.forEach(myFunction);
document.write(txt);

function myFunction(value) {
  txt += value + "<br>"; 
}

Ta có thể nhận thấy việc sử dụng forEach() làm code rõ ràng hơn, cú pháp ngắn gọn, dễ thao tác hơn trong đa số trường hợp khi so với for hoặc while .

2. Hàm Map() trong JavaScript

Về cơ bản thì map() giống với forEach(). Nhưng map() sẽ tạo ra một mảng mới sau khi đã thực hiện chức năng trên mỗi phần tử mảng. Hàm map() sẽ không thực hiện chức năng cho các phần tử mảng không có giá trị. Và đồng thời map() sẽ không làm thay đổi mảng gốc.

Cú pháp:

const array1 = [value1,value2,...];
const array2 = numbers1.map(myFunction);

Cú pháp cũng tương tự như khi dùng forEach . Chỉ có điều ta có thêm một mảng mới là array2 mà thôi. Nhưng các bạn cần chú ý rằng với myFunction mà khi các bạn chỉ dùng value thì index và array có thể sẽ bị bỏ qua.

Hàm map() giúp ta dễ dàng thao tác với từng phần tử mình muốn trong mảng mà không làm thay đổi giá trị của mảng. Cùng với đó nó cũng ngắn gọn và dễ dàng tiện lợi

3. Hàm filter() trong JavaScript

Hàm filter cũng tương tự như hàm map(). Chỉ khác là nó sẽ trả lại một mảng mới, thoả mãn điều kiện mà bạn xác định.

Ví dụ:

//trả về một mảng mới có giá trị phần tử lớn hơn 18
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);

document.write(over18);

function myFunction(value) {
  return value > 18;
}

Hay dùng làm tìm số chẵn lẻ:

const randoms = [4,6,78,2,84,8,68,34,23,5,6,238,885];
let odds = randoms.filter(number => number % 2 === 1);
document.write(odds);
// => [23, 5, 885]

4. Hàm reduce() và reduceRight() trong JavaScript

Hàm reduce() sẽ biến đổi một mảng thành một giá trị đơn giản bằng cách duyệt qua từng phần tử từ trái sang phải. Hàm này sẽ tạo ra một mảng mới mà không làm thay đổi mảng gốc.

Ví dụ:

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);

document.write(sum);

function myFunction(total, value, index, array) {
  return total + value;
}

Đối với hàm reduce ta lại có thêm một đối số là total. Nó có nghĩa là giá trị ban đầu hay giá trị trả về trước đó.

Ví dụ trên không sử dụng tham số chỉ mục và mảng. Nó có thể được viết lại thành:

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);

document.write(sum);

function myFunction(total, value) {
  return total + value;
}

Hàm reduce() có thể chấp nhận một giá trị ban đầu:

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction, 100);

document.write(sum);

function myFunction(total, value) {
  return total + value;
}

Hàm reduceRight() giống y hệt như hàm reduce(). Chỉ khác một điều nhỏ là nó duyệt qua phần tử từ phải sang trái. Một ví dụ đơn giản như sau:

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);

document.write(sum);

function myFunction(total, value, index, array) {
  return total + value;
}

5. Hàm some() và every() trong JavaScript

Hàm every() sẽ duyệt tất cả các phần tử trong mảng. Tất cả phải thỏa mãn điều kiện cho trước. Nó giống như toán tử && vậy.

Còn với hàm some() thì cũng duyệt tất cả các phần tử trong mảng như every(). Chỉ khác một điều là nó chỉ cần một phần tử mảng thỏa mãn điều kiện là đủ. Nó lại giống toán tử || vậy.

Ví dụ:

<p id="demo"></p>
<p id="demo2"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);
let allOver18 = numbers.every(myFunction);
document.getElementById("demo").innerHTML = "Some over 18 is " + someOver18;
document.getElementById("demo2").innerHTML = "All over 18 is " + allOver18;
function myFunction(value, index, array) {
  return value > 18;
}
</script>