Một số phương thức thao tác với mảng JavaScript (Phần 3/4)

Nội dung chính:

Array.forEach() Lặp mảng
Array.map() Tạo mảng mới
Array.filter() Tạo mảng mới
Array.reduce() Thao tác với từng phần tử của mảng
Array.reduceRight() Thao tác với từng phần tử của mảng
Array.every() Kiểm tra phần tử của mảng
Array.some() Kiểm tra phần tử của mảng

19. Array.forEach() Lặp mảng

– Phương thức forEach() lặp qua từng phần tử của mảng.

Ví dụ:

[code language=”javascript”]var result = "";
var numbers = [45, 4, 9, 16, 25, 100];
numbers.forEach(myFunction);

function myFunction(value, index, array) {
result = result + value + "<br>";
}[/code] Try it »

– Hàm myFunction nhận 3 tham số:

value : Giá trị của phần tử mảng.
index : Chỉ mục của phần tử mảng.
array : mảng (array itself).

– Ví dụ trên chỉ sử dụng tham số giá trị (value parameter). Nên có thể được viết lại thành:

[code language=”javascript”]var result = "";
var numbers = [45, 4, 9, 16, 25, 100];
numbers.forEach(myFunction);

function myFunction(value) {
result = result + value + "<br>";
}[/code]

– Array.forEach() được hỗ trợ trong tất cả các trình duyệt, ngoại trừ Internet Explorer 8 và các phiên bản IE cũ hơn.

20. Array.map() Tạo mảng mới

– Phương thức map() tạo ra một mảng mới bằng cách thực hiện một hàm trên mỗi phần tử của mảng.

– Phương thức map() không thực thi hàm cho các phần tử mảng mà không có giá trị (như: null, undefined).

– Phương thức map() không làm thay đổi mảng ban đầu (original array).

Ví dụ: Tạo mảng mới numbers2 bằng cách nhân mỗi giá trị mảng numbers1 với 2

[code language=”javascript”]var numbers1 = [45, 4, 9, 16, 25, 100];
var numbers2 = numbers1.map(myFunction); // 90,8,18,32,50,200

function myFunction(value, index, array) {
return value * 2;
}[/code] Try it »

– Hàm myFunction nhận 3 tham số:

value : Giá trị của phần tử mảng.
index : Chỉ mục của phần tử mảng.
array : mảng (array itself).

– Ví dụ trên chỉ sử dụng tham số giá trị (value parameter). Nên có thể được viết lại thành:

[code language=”javascript”]var numbers1 = [45, 4, 9, 16, 25, 100];
var numbers2 = numbers1.map(myFunction);

function myFunction(value) {
return value * 2;
}[/code]

– Array.map() được hỗ trợ trong tất cả các trình duyệt, ngoại trừ Internet Explorer 8 và các phiên bản IE cũ hơn.

21. Array.filter() Tạo mảng mới

Phương thức filter() tạo ra một mảng mới với các phần tử mảng thỏa mãn một điều kiện cụ thể.

Ví dụ: Tạo mảng mới over18 gồm các số lớn hơn 18 từ mảng numbers

[code language=”javascript”]var numbers = [45, 4, 9, 16, 25, 100];
var over18 = numbers.filter(myFunction); // 45,25,100

function myFunction(value, index, array) {
return value > 18;
}[/code] Try it »

– Hàm myFunction nhận 3 tham số:

value : Giá trị của phần tử mảng.
index : Chỉ mục của phần tử mảng.
array : mảng (array itself).

– Ví dụ trên chỉ sử dụng tham số giá trị (value parameter). Nên có thể được viết lại thành:

[code language=”javascript”]var numbers = [45, 4, 9, 16, 25, 100];
var over18 = numbers.filter(myFunction);

function myFunction(value) {
return value > 18;
}[/code]

– Array.filter() được hỗ trợ trong tất cả các trình duyệt, ngoại trừ Internet Explorer 8 và các phiên bản IE cũ hơn.

22. Array.reduce() Thao tác với từng phần tử của mảng

– Phương thức reduce() chạy một hàm trên mỗi phần tử mảng để tạo ra một giá trị đơn (single value).

– Phương thức reduce() hoạt động từ trái sang phải mảng ban đầu (original array).

– Phương thức reduce() không làm thay đổi mảng ban đầu (original array).

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

[code language=”javascript”]var numbers = [45, 4, 9, 16, 25, 100];
var sum = numbers.reduce(myFunction); // 199

function myFunction(total, value, index, array) {
return total + value;
}[/code] Try it »

– Hàm myFunction nhận 4 tham số:

total : Giá trị khởi tạo (initial value), hoặc giá trị được trả về trước đó (previously returned value).
value : Giá trị của phần tử mảng.
index : Chỉ mục của phần tử mảng.
array : mảng (array itself).

– Ví dụ trên chỉ sử dụng total parameter và value parameter. Nên có thể được viết lại thành:

[code language=”javascript”]var numbers = [45, 4, 9, 16, 25, 100];
var sum = numbers.reduce(myFunction);

function myFunction(total, value) {
return total + value;
}[/code]

– Array.reduce() được hỗ trợ trong tất cả các trình duyệt, ngoại trừ Internet Explorer 8 và các phiên bản IE cũ hơn.

23. Array.reduceRight() Thao tác với từng phần tử của mảng

– Phương thức reduceRight() chạy một hàm trên mỗi phần tử mảng để tạo ra một giá trị đơn (single value).

– Phương thức reduceRight() hoạt động từ phải sang trái mảng ban đầu (original array).

– Phương thức reduceRight() không làm thay đổi mảng ban đầu (original array).

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

[code language=”javascript”]var numbers = [45, 4, 9, 16, 25, 100];
var sum = numbers.reduceRight(myFunction); // 199

function myFunction(total, value, index, array) {
return total + value;
}[/code] Try it »

– Hàm myFunction nhận 4 tham số:

total : Giá trị khởi tạo (initial value), hoặc giá trị được trả về trước đó (previously returned value).
value : Giá trị của phần tử mảng.
index : Chỉ mục của phần tử mảng.
array : mảng (array itself).

– Ví dụ trên chỉ sử dụng total parameter và value parameter. Nên có thể được viết lại thành:

[code language=”javascript”]var numbers = [45, 4, 9, 16, 25, 100];
var sum = numbers.reduceRight(myFunction);

function myFunction(total, value) {
return total + value;
}[/code]

– Array.reduceRight() được hỗ trợ trong tất cả các trình duyệt, ngoại trừ Internet Explorer 8 và các phiên bản IE cũ hơn.

24. Array.every() Kiểm tra phần tử của mảng

– Phương thức every() kiểm tra xem tất cả các giá trị mảng có thỏa mãn một điều kiện cụ thể hay không.