Bài 14. Các Phương thức xử lý mảng

bởi | Th9 23, 2022 | Chưa phân loại

Ở bài trước chúng ta đã được lam quen với khái niệm về mảng, cách lưu trữ cũng như truy xuất các phần tử trong mảng. Ở bài này Wecode sẽ tổng hợp và giới thiệu đến các bạn các hàm xử lý mảng mà javascript đã tích hợp sẵn cho chúng ta và thường dùng nhất

Phương thức Length

Đây là một thuộc tính trong mảng, trả về số lượng phần tử đang có trong mảng.

Cú pháp: 

arr.length;

Trong đó: arr là tên của biến mảng.

Thử ví dụ sau:

<html>
<body>
<h2>JavaScript Arrays</h2>
<p>The length property returns the length of an array.</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = "Độ dài của mảng là: "+fruits.length;
</script>
</body>
</html>

Phương thức join()

Phương thức join() này có tác dụng gộp tất cả các phần tử có trong mảng thành một chuỗi.

Cú Pháp:

arr.join(string);

Trong đó:

  • arr là tên biến mảng mà chúng ta cần gộp.
  • string là chuỗi phân cách giữa các phần tử sau khi gộp (để trống là ngăn cách bằng dấu ,).
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>Hàm join() có tác dụng gộp tất cả các phần tử có trong mảng thành một chuỗi.</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(", ");
</script>
</body>
</html>

Phưng thức valueOf()

Phương thức này tương tự như hàm join(), nhưng chỉ có thể nối các phần tử trong mảng bằng dấy , thôi.

Phương thức push()

Hàm này có tác dụng thêm một hoặc nhiều phần tử vào cuối mảng.

<html>
<body>
<h2>JavaScript Array Methods</h2> 
<h2>push()</h2>
<p>The push() method appends a new element to an array:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.push("Kiwi","Cherry");
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>

Phương Thức pop()

Phương thức này có tác dụng xóa phần tử cuối cùng trong mảng.

<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>pop() method</h2>
<p>The pop() method removes the last element from an array.</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.pop();
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>

Phương thức pop() trả về phần tử vừa bị xóa khỏi mảng

<html>
<body>
<h2>JavaScript Array Methods</h2> 
<h2>pop()</h2>
<p>The pop() method returns the value that was "popped out":</p>
<p id="demo1"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.pop();
</script>
</body>
</html>

Phương thức unshift()

Phương thức unshift() có tác dụng thêm một hoặc nhiều phần tử vào đầu mảng.

<html>
<body>
<h2>JavaScript Array Methods</h2> 
<h2>Phương thức unshift()</h2>
<p>Phương thức unshift() thêm một hoặc nhiều phần tử vào đầu mảng:</p>

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

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

</body>
</html>

Phương thức unshift() trả về độ dài của mảng mới.

<html>
<body>
<h2>JavaScript Array Methods</h2> 
<h2>Phương thức unshift()</h2>
<p>Phương thức unshift() thêm một hoặc nhiều phần tử vào đầu mảng:</p>

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

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = "Mảng trước khi thêm: "+fruits;
document.getElementById("demo2").innerHTML = "Độ dài mảng sau khi thêm: "+fruits.unshift("Lemon","Pineapple");
</script>

</body>
</html>

Phương thức shift()

Phương thức shift() này loại bỏ phần tử mảng đầu tiên và “dịch chuyển” tất cả các phần tử còn lại về phía trước (phía bên trái).

<html>
<body>
<h2>JavaScript Array Methods</h2> 
<h2>shift()</h2>
<p>Phương thức shift() loại bỏ phần tử đầu tiên của mảng và dồn các phần tử khác về phía trước (bên trái):</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.shift();
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>

Phương thức shift() trả về giá trị đã được “loại bỏ”:

<html>
<body>
<h2>JavaScript Array Methods</h2> 
<h2>shift()</h2>
<p>Phương thức shift() trả về giá trị đã được "loại bỏ":</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
document.getElementById("demo2").innerHTML = "Phần tử đã được loại bỏ: "+fruits.shift();
</script>
</body>
</html>

Phương thức splice()

Phương thức splice() có tác dụng thêm phần tử vào mảng theo một vị trí xác định.

Cú pháp:

arr.splice(index, howmany, item1, ....., itemX)

Trong đó:

  • arr là tên biến mảng các bạn muốn thêm vào.
  • index là vị trí mà các bạn muốn thêm phần tử vào (bắt đầu từ 0).
  • howmany là số phần tử sẽ xóa tính tự vị trí thêm mảng, để 0 nếu không muốn xóa phần tử nào.
  • item1,…itemX là giá trị của các phần tử muốn thêm vào.
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>Phương thức splice()</h2>
<p>Phương thức splice() có tác dụng thêm phần tử vào mảng theo một vị trí xác định:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.splice(2, 0, "Lemon", "Kiwi");
document.getElementById("demo2").innerHTML = "Mảng sau khi thêm: "+fruits;
</script>
</body>
</html>
  • Tham số đầu tiên (2) xác định vị trí mà các phần tử mới sẽ được thêm vào (nối vào).
  • Tham số thứ hai (0) xác định có bao nhiêu phần tử nên được loại bỏ .
  • Phần còn lại của các tham số (“Lemon”, “Kiwi”) xác định các phần tử mới sẽ được thêm vào .

Phương thức splice() trả về một mảng với các mục đã xóa:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>Phương thức splice()</h2>
<p>Phương thức splice() có tác dụng thêm phần tử vào mảng theo một vị trí xác định:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = "Mảng ban đầu " + fruits;
let removed = fruits.splice(2, 2, "Lemon", "Kiwi"); 
document.getElementById("demo2").innerHTML = "Mảng mới: " + fruits;
document.getElementById("demo3").innerHTML = "Các phần tử loại bỏ: " + removed; 
</script>
</body>
</html>

Sử dụng splice () để loại bỏ các phần tử

Với cài đặt thông số thông minh, bạn có thể sử dụng splice() để loại bỏ các phần tử mà không để lại “lỗ hổng” trong mảng:

<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>Phương thức splice()</h2>
<p>Phương thức splice() có thể dùng để loại bỏ các phần tử trong mảng:</p>
<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 = "Mảng sau khi loại bỏ: "+fruits;
</script>
</body>
</html>

Trong câu lệnh fruits.splice(0, 1);

  • Tham số đầu tiên (0) xác định vị trí mà các phần tử mới sẽ được thêm vào (nối vào).
  • Tham số thứ hai (1) xác định có bao nhiêu phần tử cần được loại bỏ .
  • Phần còn lại của các tham số bị bỏ qua. Không có yếu tố mới sẽ được thêm vào.

Phương thức slice()

Phương thức slice() này có tác dụng lấy ra một hoặc một số phần tử trong mảng.

Cú pháp:

arr.slice(begin,end);

Trong đó:

  • arr là tên biến mảng các bạn muốn thêm vào.
  • begin là vị trí bắt đầu.
  • end là vị trí kết thúc, nếu muốn cắt từ vị trí đầu đến hết thì bỏ trống giá trị này.
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>Phương thức slice()</h2>
<p>Trong ví dụ này phương thức slice() sẽ lấy ra 1 phần của mảng bắt đầu từ phần tử 1 ("Orange"):</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1);
document.getElementById("demo").innerHTML = fruits + "<br><br>Mảng được cắt ra: " + citrus;
</script>
</body>
</html>
  • Phương thức slice() tạo một mảng mới.
  • Phương thức slice() không xóa bất kỳ phần tử nào khỏi mảng nguồn.

Phương thức concat()

Phương thức concat() này có tác dụng ghép 2 mảng lại với nhau.

<html>
<body>
	<script>
		var arr1 = new Array(1, 2, 4, 5, 9, 6);
		var arr2 = new Array(3, 8, 9, 10);
		document.write("Mảng sau khi nối: "+arr1.concat(arr2) + '<br>');
</script>
</body>
</html>

Phương thức toString()

JavaScript tự động chuyển đổi một mảng thành một chuỗi được phân tách bằng dấu phẩy giống như khi chúng ta xuất một mảng nguyên thủy

Điều này luôn xảy ra khi bạn cố gắng xuất một mảng.

<html>
<body>
<h2>JavaScript Array Methods</h2> 
<h2>Phương thức toString()</h2>
<p>The toString() method returns an array as a comma separated string:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
</script>
</body>
</html>

Lưu ý: Tất cả các đối tượng JavaScript đều có phương thức toString ().