Chủ đề nổi bật
03/08/2018, 10:00

Các hàm xử lý mảng trong javascript

Việc xử lý mảng trong javascript đóng vai trò rất quan trọng vì nó được sử dụng khá nhiều trong thực tế. Chính vì vậy việc biết một số hàm xử lý ...

Việc xử lý mảng trong javascript đóng vai trò rất quan trọng vì nó được sử dụng khá nhiều trong thực tế.  Chính vì vậy việc biết một số hàm xử lý mảng thông dụng trong javascript sẽ giúp 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 phương thức (method) của đối tượng mảng, vì 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 xử lý mảng để tiện cho việc diễn giải hơn.

1. Danh sách các hàm xử lý mảng trong javascript

Phần này chúng ta sẽ tìm hiể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 dùng với kiểu dữ liệu khác sẽ bị sai đấy nhé.

Hàm array.valueOf()

Hàm này có tác dụ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 cách nhau bởi dấu phẩy.

Ví dụ: XEM DEMO

var mang = ["Học", "lập", "trình", "tại", "code24h.com"];
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ụ: XEM DEMO

var mang = ["Học", "lập", "trình", "tại", "code24h.com"];

// in mảng
document.write(mang.valueOf());
document.write('<br/>');

// 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ó tác dụng xóa đi phần tử cuối cùng trong mảng.

Ví dụ: XEM DEMO

var mang = ["Học", "lập", "trình", "tại", "code24h.com"];

// in mảng
document.write(mang.valueOf());
document.write('<br/>');

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

Hàm array.shift()

Hàm xóa phần tử đầu tiên của mảng, sau đó dồn các phần tử phía sau xuống một bậc.

Ví dụ: XEM DEMO

var mang = ["Học", "lập", "trình", "tại", "code24h.com"];

// in mảng
document.write(mang.valueOf());
document.write('<br/>');

// 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í đầu tiên của mảng, đồng thời đẩy các phẩn từ phía sau lên một bậc.

Ví dụ: XEM DEMO

var mang = ["Học", "lập", "trình", "tại", "code24h.com"];

// in mảng
document.write(mang.valueOf());
document.write('<br/>');

// 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 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à danh sách 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ử.

Ví dụ 1: XEM DEMO

var mang = ["Học", "lập", "trình", "tại", "code24h.com"];

mang.splice(1, 2, 'PHP', 'căn bản ');
document.write(mang.valueOf());

Trong ví dụ này thì:

  • Vị trí thêm là số 1 (phần tử có giá trị 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", "code24h.com"].

Ví dụ 2: XEM 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ử.

var mang = ["Học", "lập", "trình", "tại", "code24h.com"];
// 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.

Ví dụ: XEM DEMO

var mang = ["Học", "lập", "trình", "tại", "code24h.com"];
document.write(mang.valueOf());
document.write('<br/>');

// Sắp xếp 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ụ: XEM DEMO

var mang = ["Học", "lập", "trình", "tại", "code24h.com"];
document.write(mang.valueOf());
document.write('<br/>');

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

Hàm array.concat()

Hàm 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ụ: XEM DEMO

var mang1 = ["Học", "lập", "trình"];<br>var mang2 = ["tại", "code24h.com"];<br><br>// Nối mảng<br>var mang_con = mang1.concat(mang2);<br>document.write(mang_con.valueOf());

Hàm array.slice()

Hàm 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í bắt đầu 
  • end: là vị trí kết thúc 

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

Ví dụ: XEM DEMO

var mang = ["Học", "lập", "trình", "tại", "code24h.com"];

// Lấy phần tử "tại" và "code24h.com"
var mang_moi = mang.slice(3, 5);

// In ra thử
document.write(mang_moi.valueOf());

Trường hợp bạn 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ụ: XEM DEMO

<!DOCTYPE html>
<html>
    <body>
        <script language="javascript">
            var mang = ["Học", "lập", "trình", "tại", "code24h.com"];

            // Lấy phần tử "tại" và "code24h.com"
            var mang_moi = mang.slice(3);

            // In ra thử
            document.write(mang_moi.valueOf());
        </script>
    </body>
</html>

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 có thể tự định nghĩa thêm các hàm riêng cho mình bằng cách sử dụng prototype. 

BÀI KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

Bài liên quan
Mới nhất

Image Map trong JavaScript

Bạn có thể sử dụng JavaScript để tạo Image map ở Client-Side. Các Image map được kích hoạt bởi thuộc tính usemap cho thẻ <img /> và được định nghĩa bởi các thẻ mở rộng đặc biệt <map> và <area>. Hình ảnh mà tạo bản đồ đó được chèn vào trong trang bởi sử dụng phần tử ...

Tài liệu tham khảo & Framework cho Javascript

Dưới đây chúng tôi liệt kê tất cả các nguồn tài liệu hữu ích và Framework cho JavaScript. Bạn nên sử dụng chúng để thực hành cũng như hiểu sâu hơn những chủ đề đã được đề cập trong loạt bài này. Các JavaScript Framework hàng đầu: Follow fanpage của ...

Xử lý lỗi trong JavaScript

Có 3 kiểu lỗi trong chương trình: (a) lỗi cú pháp (Syntax Error), (b) lỗi trong khi chạy chương trình (Runtime Error), và (c) lỗi về tính logic của cấu trúc chương trình (Logical Error). Syntax Error Lỗi cú pháp (Syntax Error), cũng được gọi là parsing error, xảy ra tại thời gian biên dịch ...

Đa phương tiện (Multimedia) trong JavaScript

Đối tượng navigator trong JavaScript bao gồm một đối tượng con gọi là plugins . Đối tượng này là một mảng, với một cổng vào (entry) cho mỗi plug-in được cài đặt trên trình duyệt. Đối tượng navigator.plugins chỉ được hỗ trợ bởi Netscape, Firefox và Mozilla. Ví dụ Dưới đây là ví dụ minh ...

Các hàm có sẵn trong JavaScript

Đối tượng Number chỉ chứa các phương thức mặc định mà là một phần của sự định nghĩa của mỗi đối tượng. Phương thức Miêu tả constructor() Trả về hàm mà tạo sự instance của đối tượng này. Theo mặc định, nó là đối tượng Number. toExponential() Làm một số hiển thị ở dạng số mũ, ...

Debug trong JavaScript

Trong khi mã hóa chương trình, các nhà lập trình có thể tạo ra các lỗi. Một lỗi trong một chương trình hoặc một script được xem như là một bug . Tiến trình tìm kiếm và sửa các bug được gọi là dubugging và là một phần bình thường của tiến trình lập trình. Chương này giới thiệu một số công ...

Document Object Model (DOM) trong JavaScript

Mỗi trang web cư ngụ bên trong một cửa sổ trình duyệt mà có thể xem như là một đối tượng. Một đối tượng Document biểu diễn tài liệu HTML được hiển thị trong cửa sổ đó. Đối tượng Document có nhiều thuộc tính đa dạng như các đối tượng khác mà cho phép truy cập và chỉnh sửa nội dung tài liệu. ...

Đối tượng Boolean trong JavaScript

Miêu tả Đối tượng Boolean biểu diễn hai giá trị, hoặc "true" hoặc "false". Nếu tham số value bị bỏ qua hoặc là 0, -0, null, false, NaN , undefined, hoặc một chuỗi trống (""), đối tượng có một giá trị khởi tạo là false. Cú pháp Sử dụng cú pháp sau để tạo một đối tượng Boolean . ...

Đối tượng String trong JavaScript

Đối tượng String giúp bạn làm việc với một dãy các ký tự; nó giúp xử lý các kiểu dữ liệu chuỗi gốc trong JavaScript với một số phương thức giúp đỡ. Khi JavaScript tự động biến đổi giữa chuỗi gốc và các đối tượng String, bạn có thể gọi bất kỳ phương thức giúp đỡ nào của đối tượng String ...

Điều hướng trang (Redirect) trong JavaScript

Điều hướng lại trang là gì? Bạn có thể gặp tình huống khi bạn click vào một URL để tới trang X nhưng bạn được điều hướng tới trang Y. Nó xảy ra là do Page Redirection – Điều hướng lại trang . Khái niệm này khác với: JavaScript – Refresh trang. Có nhiều lý do khác nhau để tại sao bạn muốn ...