1. Phương thức và thuộc tính của mảng?

Sức mạnh thực sự của mảng trong JavaScript là các thuộc tính và phương thức được xây dựng bên trong nó

Có một số thuộc tính của mảng như sau:

  • constructor : Trả về một tham chiếu tới hàm array mà tạo đối tượng đó.
  • index : Thuộc tính biểu diễn chỉ mục dựa trên zero của sự so khớp trong chuỗi.
  • input : Thuộc tính này chỉ có mặt trong các mảng được tạo bởi các so khớp Regular Expression.
  • length : Phản ánh số phần tử trong một mảng.
  • prototype : Thuộc tính prototype cho phép bạn thêm các thuộc tính và phương thức tới một đối tượng.

Cũng có nhiều phương thức liên quan đến mảng. Một số phương thức dùng để thay đổi mảng ban đầu ( Mutator Methods ) , một vài số dùng để truy cập giá trị, trả về một số giá trị cần thiết và không làm thay đổi mảng hiện có ( Accessor Methods ), phương thức dùng để lặp các phần tử trong mảng ( Iterator Methods ), … Còn rất nhiều phương thức hay thuộc tính khác mà mình không thể kể hết hay nói hết được. Mình sẽ chỉ đưa ra những phương thức và thuộc tính hay dùng thôi còn lại các bạn có thể nắm bắt dần dần hoặc tìm hiểu sâu hơn khi đã vững kiến thức.

2. Thuộc tính chiều dài trong mảng của JavaScript

Length – là thuộc tính đưa ra độ dài của mảng. Nếu bạn dùng một số nguyên âm, số thực hoặc một chuỗi làm chỉ mục thì độ dài của mảng cũng là một số nguyên dương cao nhất.

Cú pháp: arr.length; trong đó thì arr là tên của biến mảng.

Ví dụ:

var foo = [];
console.log(foo.length) // 0

var number = [1, 2, 3];
number[9] = 9;
number[-3] = 'so am';
number['string'] = 'String';
console.log(number.length); // 10
console.log(number); // [ 1, 2, 3, empty * 6, 9, '-3': 'so am', string: 'String']

3. Thêm phần tử vào trong mảng

Cách dễ nhất để thêm phần tử mới vào mảng là sử dụng phương thức push

var fruits = ["Chuối", "Cam", "Táo", "Ổi"];
fruits.push("Dưa");  // thêm phần tử mới (Dưa) vào fruits
document.write(fruits);

Phần tử mới có thể thêm vào mảng bằng cách sử dụng thuộc tính độ dài

var fruits = ["Chuối", "Cam", "Táo", "Ổi"]; 
fruits[fruits.length] = "Dưa";    // thêm phần tử mới (Dưa) vào fruits 
document.write(fruits);

Thêm phần tử với chỉ số cao có thể tạo ra các “lỗ hổng” không xác định trong mảng

var fruits = ["Chuối", "Cam", "Táo", "Ổi"];
fruits[10] = "Dưa";  // thêm phần tử mới (Dưa) vào fruits
document.write(fruits);

4. Chuyển đổi mảng thành một chuỗi trong JavaScript

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)

Ví dụ:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write(fruits);

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ề.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write(fruits);

5. Thêm mới và loại bỏ các phần tử mảng trong JavaScript

Khi bạn làm việc với mảng, bạn có thể dễ dàng loại bỏ các phần tử và thêm các phần tử mới. Hay ta thường gọi là việc Popping và Pushing.

Ta có thể xóa phần tử trong mảng bằng câu lệnh delete . Truy nhiên sử dụng delete có thể để lại những lỗ hổng trển mảng và gây nguy hiểm. Vì vậy thay vào đó ta có thể sử dụng pop hoặc shift được giới thiệu ở phần sau đây.

5.1. Hàm array.push()

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

<script language="javascript">
           var mang = ["Học", "lập", "trình", "tại", "laptrinhtudau.com"];
           
           // in mảng
           document.write(mang.valueOf());
           document.write('<br/>');
           
           // Thêm và in
           mang.push("Miễn phí");
           document.write(mang.valueOf());
 </script>

Khi sử dụng phương thức push thì sẽ trả về độ dài mảng mới, tính luôn cả phần tử vừa được thêm.

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo1").innerHTML = fruits.push("Kiwi");
document.getElementById("demo2").innerHTML = fruits;
</script>

5.2. 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.

var arr = new Array(1, 2, 4, 5, 9, 6);
document.write(arr.join() + '<br>');
//xóa phần tử cuối
arr.pop();
document.write(arr.join() + '<br>');

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.

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.pop();
document.getElementById("demo2").innerHTML = fruits;
</script>

5.3. Hàm array.shift()

Hàm này 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. 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.

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

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

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

5.4. Hàm array.unshift()

Hàm này được dùng để thêm một phần tử mới vào vị trí đầu mảng. 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)

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

6. Cắt một mảng trong JavaScript

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: var tên mảng = array.slice(start, end);

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)

Ví dụ:

var arr = new Array(1, 2, 4, 5, 9, 6);
document.write(arr.join() + '<br>');
//thêm 2 phần tử vào vị trí thứ 1 và 0 xóa phần tử nào
arr.splice(1,0,3,8);
document.write(arr.join() + '<br>');

Phương pháp slice() sẽ tạo ra một mảng mới. Nó không xóa bất cứ phần tử nào của mảng cha. Phương thức silce() cũng có thể mất 2 đối số như slice(1,3) . Sau đó phương thức chọn các phần tử từ đối số bắt đầu và lên đến (nhưng không bao gồm) đối số kết thúc.

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1,3);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>

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)

Chú ý

Ta có thể lợi dụng phương thức slice() để để loại bỏ các phần tử mà không để lại “lỗ hổng” trong mảng hay để thêm hoặc xóa “nhiều phần tử” ở một “vị trí bất kỳ”

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.splice(0, 1);
document.getElementById("demo2").innerHTML = fruits;
</script>

7. Ghép các mảng lại với nhau trong JavaScript

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. 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.

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);
document.write(data);
document.write("<hr>MỘT SỐ VÍ DỤ KHÁC<hr>");
document.write(motorbike.concat(city, SinhVien));
document.write("<br>");
document.write(motorbike.concat(city));