JavaScript

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

Một số phương thức thao tác với mảng JavaScript (Phần 3/4)
Được viết bởi Minh Hoàng

Series lập trình JavaScript, ngôn ngữ lập trình linh động, thực thi phía client.

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

19. Array.forEach() Lặp 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ụ:
var result = "";
var numbers = [45, 4, 9, 16, 25, 100];
numbers.forEach(myFunction);

function myFunction(value, index, array) {
    result = result + value + "<br>"; 
}
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:

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

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

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

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
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;
}
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:

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

function myFunction(value) {
    return value * 2;
}

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

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
var numbers = [45, 4, 9, 16, 25, 100];
var over18 = numbers.filter(myFunction);	// 45,25,100

function myFunction(value, index, array) {
    return value > 18;
}
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:

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

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

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

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
var numbers = [45, 4, 9, 16, 25, 100];
var sum = numbers.reduce(myFunction);		// 199

function myFunction(total, value, index, array) {
    return total + value;
}
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 parametervalue parameter. Nên có thể được viết lại thành:

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

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

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

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
var numbers = [45, 4, 9, 16, 25, 100];
var sum = numbers.reduceRight(myFunction);	// 199

function myFunction(total, value, index, array) {
    return total + value;
}
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 parametervalue parameter. Nên có thể được viết lại thành:

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

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

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

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.

  • Trả về true nếu tất cả giá trị mảng thỏa mãn điều kiện.
  • Trả về false khi có ít nhất 1 giá trị mảng không thỏa mãn điều kiện.
Ví dụ: Kiểm tra xem tất cả các giá trị mảng có lớn hơn 18 hay không
var numbers = [45, 4, 9, 16, 25, 100];
var allOver18 = numbers.every(myFunction);	// false

function myFunction(value, index, array) {
    return value > 18;
}
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:

var numbers = [45, 34, 39, 136, 25, 100];
var allOver18 = numbers.every(myFunction);

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

Array.every() đượ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.

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

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

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

  • Trả về true nếu có ít nhất 1 giá trị mảng thỏa mãn điều kiện.
  • Trả về false khi tất cả các giá trị mảng không thỏa mãn điều kiện.
Ví dụ: Kiểm tra xem có giá trị mảng nào lớn hơn 18 hay không
var numbers = [45, 4, 9, 16, 25, 100];
var allOver18 = numbers.some(myFunction);	// true

function myFunction(value, index, array) {
    return value > 18;
}
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:

var numbers = [45, 4, 9, 16, 25, 100];
var allOver18 = numbers.some(myFunction);

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

Array.some() đượ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.

Tham khảo w3schools.

Cảm ơn bạn đã theo dõi. Đừng ngần ngại hãy cùng thảo luận với chúng tôi!
[likebtn theme=”github” dislike_enabled=”0″ show_dislike_label=”1″]

Giới thiệu

Minh Hoàng

Xin chào, tôi là Hoàng Ngọc Minh, hiện đang làm BrSE, tại công ty Toyota, Nhật Bản. Những gì tôi viết trên blog này là những trải nghiệm thực tế tôi đã đúc rút ra được trong cuộc sống, quá trình học tập và làm việc. Các bài viết được biên tập một cách chi tiết, linh hoạt để giúp người đọc có thể tiếp cận một cách dễ dàng nhất. Hi vọng nó sẽ có ích hoặc mang lại một góc nhìn khác cho bạn[...]

1
Bình luận của bạn

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
Recent comment authors
Mới nhất Cũ nhất Thích nhiều nhất

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

by Minh Hoàng Time to read: 8 min
1