Hướng dẫn xử lý mảng trong javascript mới nhất 2020

Xử lý mảng trong javascript là một trong những keyword được search nhiều nhất trên Google về chủ đề xử lý mảng trong javascript. Trong bài viết này, xaydungweb.vn sẽ viết bài viết Hướng dẫn xử lý mảng trong javascript mới nhất 2020.

Hướng dẫn xử lý mảng trong javascript mới nhất 2020

Việc giải quyết mảng trong javascript đóng vai trò rất quan trọng vì nó được dùng khá nhiều trong thực tế. Chính cho nên việc biết một số hàm xử lý mảng thông dụng trong javascript sẽ làm bạn dễ dàng học cũng như tìm hiểu javascript hơn.

Mảng thực chất cũng là một Object (đối tượng) nên thực chất các hàm mà ta hay gọi chính là các bí quyết (method) của phân khúc mảng, do vậy bạn đừng nhầm lẫn giữa hai khái niệm nhé. Trong nội dung bài này mình sẽ gọi là các hàm giải quyết mảng để tiện cho việc diễn giải hơn.

1. mục lục các hàm giải quyết mảng trong javascript

Phần này chúng ta sẽ nghiên cứu một số hàm có sẵn trong javascript được tích hợp vào array object, chính vì nó chỉ dùng trong array object nên nếu bạn sử dụng với kiểu dữ liệu không giống sẽ bị sai đấy nhé.

Hàm array.valueOf()

Hàm này có chức năng tương tự như hàm array.join() mà ta đã học ở bài trước, có nghĩa là nó sẽ nối các phần tử với nhau vào một chuỗi phương pháp nhau bởi dấu phẩy.

ví dụ: xem demo

1
2

var mang = ["Học", "lập", "trình", "tại", "freetuts.net"];
document.write(mang.valueOf());

Hàm array.push()

Hàm thêm một phần tử vào cuối mảng.

ví dụ: nhìn thấy dùng thử

1
2
3
4
5
6
7
8
9

var đưa = ["Học", "lập", "trình", "tại", "freetuts.net"];
// in mảng
document.write(mang.valueOf());
document.write('

');
// Thêm và in
mang.push("Miễn phí");
document.write(mang.valueOf());

Hàm array.pop()

Ngược với hàm array.push(), hàm này có chức năng xóa đi phần tử cuối cùng trong mảng.

gợi ý: xem demo

1
2
3
4
5
6
7
8
9

var mang = ["Học", "lập", "trình", "tại", "freetuts.net"];
// in mảng
document.write(mang.valueOf());
document.write('

');
// Thêm và in
mang.pop();
document.write(mang.valueOf());

Hàm array.shift()

Hàm xóa phần tử trước nhất của mảng, sau đó dồn các phần tử phía sau xuống một bậc.

gợi ý: nhìn thấy demo

1
2
3
4
5
6
7
8
9

var mang = ["Học", "lập", "trình", "tại", "freetuts.net"];
// in mảng
document.write(mang.valueOf());
document.write('

');
// Thêm và in
mang.shift();
document.write(mang.valueOf());

Hàm array.unshift()

Thêm một phần tử vào vị trí trước tiên của mảng, cùng lúc đẩy các phẩn từ phía sau lên một bậc.

ví dụ: xem demo

1
2
3
4
5
6
7
8
9

var mang = ["Học", "lập", "trình", "tại", "freetuts.net"];
// in mảng
document.write(mang.valueOf());
document.write('

');
// Thêm và in
mang.unshift("Chào Mừng");
document.write(mang.valueOf());

Hàm array.splice()

Hàm splice() có ba tham số truyền vào giống như sau: splice(position_add, num_element_remove, value1, value2, ...).

Trong đó:

position_add là vị trí sẽ thêm (vị trí đầu tiên là 0)
num_element_remove là số phần tử sẽ xóa (bắt đầu từ position_add)
value1, value2, .. Là mục lục các phần tử sẽ được thêm vào sau khi tại vị trí position_add và sau khi remove num_element_remove phần tử.

gợi ý 1: nhìn thấy demo

1
2
3
4

var đưa = ["Học", "lập", "trình", "tại", "freetuts.net"];
mang.splice(1, 2, 'PHP', 'căn bản ');
document.write(mang.valueOf());

Trong gợi ý này thì:

Vị trí thêm là số 1 (phần tử có trị giá là “lập”)
Xóa 2 phần tử liên tiếp từ vị trí 1 (xóa phần tử “lập” và “trình”)
Thêm hai phần tử “php” và “căn bản” vào

Cuối cùng ta có được một mảng gồm ["Học", "php", "căn bản", "tại", "freetuts.net"].

ví dụ 2: nhìn thấy demo

Trong ví dụ này ta sẽ không thêm phần tử nữa mà sẽ lợi dụng hàm này để xóa đi một số phần tử.

1
2
3
4

var mang = ["Học", "lập", "trình", "tại", "freetuts.net"];
// xóa phần tử "lập" và "trình"
mang.splice(1, 2);
document.write(mang.valueOf());

Hàm array.sort()

Hàm này dùng để sắp xếp các phần tử trong mảng theo thứ tự chữ cái alpha.

gợi ý: nhìn thấy dùng thử

1
2
3
4
5
6
7

var mang = ["Học", "lập", "trình", "tại", "freetuts.net"];
document.write(mang.valueOf());
document.write('

');
// bố trí lại
mang.sort();
document.write(mang.valueOf());

Hàm array.reverse()

Hàm đảo ngược các phẩn tử lại. Vị trí đầu sẽ được chuyển xuống cuối mảng và vị trí cuối mảng sẽ được chuyển lên đầu mảng.

ví dụ: nhìn thấy dùng thử

1
2
3
4
5
6
7

var mang = ["Học", "lập", "trình", "tại", "freetuts.net"];
document.write(mang.valueOf());
document.write('

');
// Đảo ngược vị trí của các phần tử
đưa.reverse();
document.write(mang.valueOf());

Hàm array.concat()

Hàm sử dụng để nối hai mảng với nhau và trả về một mảng gồm tổng số phần tử của hai mảng đó.

ví dụ: nhìn thấy demo

1	`var` `mang1 = ["Học",` `"lập",` `"trình"];` `var` `mang2 = ["tại",` `"freetuts.net"];// Nối mảng var mang_con = mang1.concat(mang2); document.write(mang_con.valueOf());`

Hàm array.slice()

Hàm sử dụng để lấy một số phần tử con trong mảng. Có hai tham số truyền vào như sau: slice(start, end).

Trong đó:

start: là vị trí khởi đầu
end: là vị trí chấm dứt

Lưu ý: Để easy hiểu thì start sẽ phần tử trước nhất là 0 và end sẽ tính phần tử trước hết là 1. Chính do vậy bạn sẽ phải cộng thêm 1 ở end thì mới quét đúng phần tử mong muốn

ví dụ: xem demo

1
2
3
4
5
6
7

var mang = ["Học", "lập", "trình", "tại", "freetuts.net"];
// get phần tử "tại" và "freetuts.net"
var mang_moi = mang.slice(3, 5);
// In ra thử
document.write(mang_moi.valueOf());

Trường hợp bạn mong muốn lấy từ vị trí nào đó đến cuối mảng thì bạn sẽ truyền một tham số thôi.

ví dụ: nhìn thấy demo

2. Lời kết

Trên là danh sách các hàm xử lý mảng trong javascript mà ta hay sử dụng nhất, vẫn còn khá nhiều hàm nên mình không thể liệt kê hết được. Sau này học nâng cao lên bạn đủ nội lực tự khái niệm thêm các hàm riêng cho mình bằng phương pháp sử dụng prototype.

nguồn: freetuts.net