Các phương thức xử lý mảng trong JavaScript

- Trong JavaScript đã tích hợp sẵn các phương thức dùng để xử lý mảng. Với các phương thức này, ta có thể làm được những công việc như: chuyển một mảng về dạng chuỗi, thêm hoặc xóa các phần tử mảng, ghép các mảng lại với nhau, . . . .

- Dưới đây là bảng tóm tắt một vài phương thức xử lý mảng phổ biến mà ta phải thường hay dùng:

- Lưu ý: length được gọi là thuộc tính (không phải phương thức)

1) Chuyển mảng về dạng chuỗi ký tự

- Phương thức toString() dùng để chuyển một mảng về dạng chuỗi ký tự.

(chuỗi trả về sẽ là một dãy các phần tử mảng được ngăn cách bởi dấu phẩy)

- Cú pháp:

<script>
    var mobile = ["HTC", "Nokia", "SamSung", "LG", "Apple"];
    var text = mobile.toString();
</script>

- Ngoài ra, ta cũng có thể dùng phương thức join() để chuyển một mảng về dạng chuỗi ký tự.

- Tuy nhiên, đối với phương thức join() thì ta có thể xác định thêm ký tự đặt giữa các phần tử mảng trong chuỗi trả về.

- Cú pháp:

<script>
    var mobile = ["HTC", "Nokia", "SamSung", "LG", "Apple"];
    var text = mobile.join("- - -");
</script>

2) Thêm một phần tử mới vào vị trí cuối mảng

- Phương thức push() được dùng để thêm một phần tử mới vào vị trí cuối mảng.

- Cú pháp:

<script>
    var mobile = ["HTC", "Nokia", "SamSung", "LG", "Apple"];
    mobile.push("Lenovo");
</script>

- Lưu ý: Phương thức push() ngoài việc thêm một phần tử mới vào vị trí cuối mảng thì nó còn trả về tổng số lượng phần tử trong mảng (tính luôn cả phần tử mới vừa được thêm vào)

<script>
    var mobile = ["HTC", "Nokia", "SamSung", "LG", "Apple"];
    var x = mobile.push("Lenovo"); //Biến x sẽ có giá trị là 6
</script>

3) Xóa phần tử ở vị trí cuối mảng

- Phương thức pop() được dùng để xóa phần tử nằm ở vị trí cuối mảng.

- Cú pháp:

<script>
    var mobile = ["HTC", "Nokia", "SamSung", "LG", "Apple"];
    mobile.pop();
</script>

- Lưu ý: Phương thức pop() ngoài việc xóa phần tử nằm ở vị trí cuối mảng thì nó còn trả về giá trị của phần tử bị xóa.

<script>
    var mobile = ["HTC", "Nokia", "SamSung", "LG", "Apple"];
    var x = mobile.pop(); //Biến x sẽ có giá trị là chuỗi Apple
</script>

4) Thêm một phần tử mới vào vị trí đầu mảng

- Phương thức unshift() được dùng để thêm một phần tử mới vào vị trí đầu mảng.

- Cú pháp:

<script>
    var mobile = ["HTC", "Nokia", "SamSung", "LG", "Apple"];
    mobile.unshift("Lenovo");
</script>

- Lưu ý: Phương thức unshift() ngoài việc thêm một phần tử mới vào vị trí đầu mảng thì nó còn trả về tổng số lượng phần tử trong mảng (tính luôn cả phần tử mới vừa được thêm vào)

<script>
    var mobile = ["HTC", "Nokia", "SamSung", "LG", "Apple"];
    var x = mobile.unshift("Lenovo"); //Biến x sẽ có giá trị là 6
</script>

5) Xóa phần tử ở vị trí đầu mảng

- Phương thức shift() được dùng để xóa phần tử nằm ở vị trí đầu mảng.

- Cú pháp:

<script>
    var mobile = ["HTC", "Nokia", "SamSung", "LG", "Apple"];
    mobile.shift();
</script>

- Lưu ý: Phương thức shift() ngoài việc xóa phần tử nằm ở vị trí đầu mảng thì nó còn trả về giá trị của phần tử bị xóa.

<script>
    var mobile = ["HTC", "Nokia", "SamSung", "LG", "Apple"];
    var x = mobile.shift(); //Biến x sẽ có giá trị là chuỗi HTC
</script>

6) Ghép các mảng lại với nhau

- Phương thức concat() được dùng để ghép các mảng con lại với nhau rồi trả về một mảng mới.

- Cú pháp:

- Lưu ý: Mảng được trả về sẽ chứa tất cả các phần tử của những mảng con, thứ tự của các phần tử sẽ giống với thứ tự được sắp xếp lúc ghép mảng.

<script>
    var mobile = ["HTC", "Nokia"];
    var motorbike = ["Honda", "Yamaha", "Suzuki"];
    var SinhVien = ["Nguyễn Thành Nhân", 1993];
    var city = ["Cần Thơ", "Vĩnh Long"];
    var data = motorbike.concat(city, SinhVien, mobile);
</script>

7) Trích xuất một phần của mảng

- Phương thức slice() được dùng để trích xuất một phần của mảng ban đầu rồi trả về một mảng mới.

- Cú pháp:

- Trong đó:

• "start" là chỉ số của phần tử bắt đầu được trích xuất.
• "end" là chỉ số của phần tử kết thúc việc trích xuất (mảng trả về không bao gồm phần tử này)

<script>
   var data = ["HTC", "Nokia", "Apple", "LG", "Honda", "SYM", "Suzuki"];
   var abc = data.slice(1,5);
</script>

- Lưu ý: Giá trị của tham số "start" và "end" cũng có thể là số âm. Tuy nhiên, với số âm thì chỉ số của các phần tử mảng sẽ được xác định theo chiều ngược lại (phần tử đầu tiên sẽ có chỉ số là -1)

<script>
   var data = ["HTC", "Nokia", "Apple", "LG", "Honda", "SYM", "Suzuki"];
   var abc = data.slice(-6,-3);
</script>

8) Thêm & xóa phần tử ở vị trí bất kỳ trong mảng

- Như chúng ta đã biết:

• Phương thức push() dùng để thêm một phần tử mới vào vị trí cuối mảng.
• Phương thức pop() dùng để xóa phần tử nằm ở vị trí cuối mảng.
• Phương thức unshift() dùng để thêm một phần tử mới vào vị trí đầu mảng.
• Phương thức shift() dùng để xóa phần tử nằm ở vị trí đầu mảng.

- Tuy nhiên, để thêm hoặc xóa "nhiều phần tử" ở một "vị trí bất kỳ" thì ta phải làm như thế nào !?

  ==> Phương thức splice() có thể giải quyết được vấn đề này.

- Phương thức splice() dùng để thêm hoặc xóa "một hoặc nhiều phần tử" ở vị trí bất kỳ trong mảng.

8.1) Trường hợp xóa phần tử mảng

- Nếu dùng phương thức splice() để xóa phần tử mảng thì ta sử dụng cú pháp như sau:

- Trong đó:

• Tham số "start" là chỉ số của phần tử bắt đầu được xóa.
• Tham số "length" là số lượng phần tử mà bạn muốn xóa.

<script>
    var data = ["HTC", "Nokia", "Apple", "LG", "Honda", "SYM", "Suzuki"];
    data.splice(1,4);
</script>

- Lưu ý: Nếu ta bỏ trống tham số "length" thì phương thức splice() sẽ xóa tất cả những phần tử bắt đầu từ phần tử có chỉ số là start cho đến hết mảng.

<script>
    var data = ["HTC", "Nokia", "Apple", "LG", "Honda", "SYM", "Suzuki"];
    data.splice(1);
</script>

8.2) Trường hợp thêm phần tử vào mảng

- Nếu dùng phương thức splice() để thêm phần tử mới vào mảng thì ta sử dụng cú pháp như sau:

- Trong đó:

• Tham số "start" là chỉ số của phần tử nơi mà bạn muốn chèn các phần tử mới ngay tại đó.
• Tham số "0" là số không.
• Các tham số "phần tử mới" là những phần tử mà bạn muốn thêm vào mảng.

<script>
    var mobile = ["HTC", "Nokia", "SamSung", "LG", "Apple"];
    mobile.splice(2, 0, " a ", " b ", " c ", " d ");
</script>

- Lưu ý: Nếu ta thay giá trị của tham số 0 thành một số khác thì phương thức splice() ngoài việc thêm phần tử mới vào mảng, nó còn xóa đi những phần tử nằm phía sau phần tử có chỉ số là start với số lượng phần tử bị xóa sẽ bằng với giá trị của tham số này.

<script>
    var mobile = ["HTC", "Nokia", "SamSung", "LG", "Apple"];
    mobile.splice(1, 3, " a ", " b ", " c ", " d ");
</script>

9) Xác định số lượng phần tử của mảng

- Thuộc tính length dùng để trả về số lượng phần tử của một mảng.

<script>
    var mobile = ["HTC", "Nokia", "SamSung", "LG", "Apple"];
    var a = mobile.length; //Biến a sẽ có giá trị là 5
</script>