Một số phương thức thao tác với mảng JavaScript (Phần 2/4)
- Thêm phần tử vào mảng bằng chỉ mục index
- Xóa phần tử khỏi mảng bằng chỉ mục index
- Array.push() Thêm phần tử vào cuối mảng
- Array.pop() Xóa phần tử cuối khỏi mảng
- Array.unshift() Thêm phần tử vào đầu mảng
- Array.shift() Xóa phần tử đầu khỏi mảng
- Array.splice() Thêm phần tử mới vào vị trí bất kỳ
- Array.splice() Xóa phần tử tại vị trí bất kỳ
- Array.concat() Tạo mảng mới bằng cách nối các mảng với nhau
- Array.slice() Tạo mảng mới từ một số phần tử của một mảng khác
9. Thêm phần tử vào mảng bằng chỉ mục index
– Các phần tử mảng được truy cập bằng cách sử dụng index number, bắt đầu từ 0.
Ví dụ:
[code language=”javascript”]var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits[0] = "Kiwi"; // Thay đổi giá trị của phần tử đầu tiên thành "Kiwi"[/code] Try it »
– Thuộc tính length cung cấp một cách dễ dàng để thêm một phần tử mới vào một mảng:
Ví dụ:
[code language=”javascript”]var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits[fruits.length] = "Kiwi"; // Thêm phần tử mới "Kiwi" vào cuối mảng fruits[/code] Try it »
10. Xóa phần tử khỏi mảng bằng chỉ mục index
Vì các mảng JavaScript là các đối tượng, các phần tử có thể bị xóa bằng cách sử dụng toán tử JavaScript delete:
Ví dụ:
[code language=”javascript”]var fruits = ["Banana", "Orange", "Apple", "Mango"];delete fruits[1]; // Thay đổi giá trị phần tử thứ 2 thành undefined
// Mảng lúc này: Banana,,Apple,Mango[/code]
Try it »
– Sử dụng delete xóa phần tử, nhưng không làm mất vị trí, giá trị ở vị trí đó được chuyển thành undefined trong mảng.
– Nếu muốn xóa luôn vị trí thì hãy sử dụng phương thức pop() hoặc shift() để thay thế.
11. Array.push() Thêm phần tử vào cuối mảng
– Phương thức push() thêm một hoặc nhiều một phần tử mới vào cuối (at the end) một mảng:
Ví dụ:
[code language=”javascript”]var fruits = ["Banana", "Orange", "Apple", "Mango"];// Thêm phần tử mới "Kiwi" vào cuối mảng
fruits.push("Kiwi");[/code]
Try it »
– Phương thức push() trả về độ dài mới của mảng:
Ví dụ:
[code language=”javascript”]var fruits = ["Banana", "Orange", "Apple", "Mango"];var x = fruits.push("Kiwi"); // Giá trị của x là độ dài mới của mảng
// x = 5[/code]
Try it »
12. Array.pop() Xóa phần tử cuối khỏi mảng
– Phương thức pop() xóa phần tử cuối (at the end) khỏi mảng:
Ví dụ:
[code language=”javascript”]var fruits = ["Banana", "Orange", "Apple", "Mango"];// Xóa phần tử cuối "Mango" khỏi mảng
fruits.pop();[/code]
Try it »
– Phương thức pop() trả về giá trị của phần tử đã được xóa (popped out):
Ví dụ:
[code language=”javascript”]var fruits = ["Banana", "Orange", "Apple", "Mango"];var x = fruits.pop(); // Giá trị của x là "Mango"[/code] Try it »
13. Array.unshift() Thêm phần tử vào đầu mảng
– Phương thức unshift() thêm một hoặc nhiều phần tử mới vào đầu (at the beginning) một mảng:
Ví dụ:
[code language=”javascript”]var fruits = ["Banana", "Orange", "Apple", "Mango"];// Thêm phần tử mới "Kiwi" vào đầu mảng
fruits.push("Kiwi");[/code]
Try it »
– Phương thức unshift() trả về độ dài mới của mảng:
Ví dụ:
[code language=”javascript”]var fruits = ["Banana", "Orange", "Apple", "Mango"];var x = fruits.unshift("Kiwi"); // Giá trị của x là độ dài mới của mảng
// x = 5[/code]
Try it »
Phương thức unshift() không hoạt động đúng trong Internet Explorer 8 và IE trước đó, giá trị sẽ được chèn vào, nhưng giá trị trả về sẽ là undefined.
14. Array.shift() Xóa phần tử đầu khỏi mảng
– Phương thức shift() xóa phần tử đầu (at the beginning) khỏi mảng, do đó sẽ làm thay đổi chỉ mục index của toàn bộ các phần tử phía sau (index giảm đi 1):
Ví dụ:
[code language=”javascript”]var fruits = ["Banana", "Orange", "Apple", "Mango"];// Xóa phần tử đầu "Banana" khỏi mảng
fruits.shift();[/code]
Try it »
– Phương thức shift() trả về giá trị của phần tử đã được xóa (shifted out):
Ví dụ:
[code language=”javascript”]var fruits = ["Banana", "Orange", "Apple", "Mango"];var x = fruits.shift(); // Giá trị của x là "Banana"[/code] Try it »
15. Array.splice() Thêm phần tử mới vào vị trí bất kỳ
– Phương thức splice() có thể được sử dụng để thêm một hoặc nhiều phần tử mới vào một mảng:
Ví dụ:
[code language=”javascript”]var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.splice(2, 0, "Lemon", "Kiwi");
// New Array:
// Banana,Orange,Lemon,Kiwi,Apple,Mango[/code]
Try it »
– Ở ví dụ trên:
- 2 : tham số đầu tiên xác định vị trí mà các phần tử mới sẽ được thêm vào (nối vào).
- 0 : tham số thứ 2 xác định có bao nhiêu phần tử cần được loại bỏ (removed).
- Tham số thứ 3 (“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 phần tử đã xóa:
Ví dụ:
[code language=”javascript”]var fruits = ["Banana", "Orange", "Apple", "Mango"];var removed = fruits.splice(2, 2, "Lemon", "Kiwi");
// Giá trị của mảng removed là: Apple,Mango[/code] Try it »
16. Array.splice() Xóa phần tử tại vị trí bất kỳ
– Phương thức splice() còn có thể được sử dụng để loại bỏ (remove) các phần tử mà không để lại vị trí của nó trong mảng, tức là remove hẳn vị trí và giá trị của phần tử (chứ không như Xóa phần tử bằng từ khóa delete):
Ví dụ:
[code language=”javascript”]var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.splice(0, 1); // Remove phần tử đầu tiên "Banana" khỏi mảng[/code] Try it »
– Ở ví dụ trên:
- 0 : tham số đầu tiên xác định vị trí mà các phần tử mới sẽ được thêm vào (nối vào).
- 1 : tham số thứ 2 xác định có bao nhiêu phần tử cần được loại bỏ (removed).
- Tham số thứ 3 được bỏ qua, nghĩa là không có phần tử mới nào được thêm vào.
17. Array.concat() Tạo mảng mới bằng cách nối các mảng với nhau
– Phương thức concat() tạo ra một mảng mới bằng cách hợp nhất (ghép nối) các mảng hiện có:
Ví dụ: Merging 2 Arrays
[code language=”javascript”]var myGirls = ["Cecilie", "Lone"];var myBoys = ["Emil", "Tobias", "Linus"];
var myClass = myGirls.concat(myBoys); // Concatenates (merge, join) myGirls và myBoys[/code] Try it »
Phương thức concat() không thay đổi các mảng hiện có. Nó luôn luôn trả về một mảng mới.
– Phương thức concat() có thể có một hoặc nhiều tham số ứng với số mảng muốn gộp (ghép nối):
Ví dụ: Merging 3 Arrays
[code language=”javascript”]var arr1 = ["Cecilie", "Lone"];var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
// Gộp 3 mảng arr1, arr2, arr3 thành mảng mới myClass
var myClass = arr1.concat(arr2, arr3);[/code]
Try it »
– Phương thức concat() cũng có thể lấy các giá trị làm đối số:
Ví dụ: Merging an Array with Values
[code language=”javascript”]var arr = ["Cecilie", "Lone"];var myClass = arr.concat(["Emil", "Tobias", "Linus"]);[/code] Try it »
18. Array.slice() Tạo mảng mới từ một số phần tử của một mảng khác
– Phương thức slice() cắt ra một phần của một mảng nguồn (source array) thành một mảng mới.
– Ví dụ sau cắt ra một phần bắt đầu từ phần tử thứ 2 (“Lemon”) đến hết mảng fruits, để tạo mảng mới citrus:
Ví dụ:
[code language=”javascript”]var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];var citrus = fruits.slice(2); // Lemon,Apple,Mango[/code] Try it »
Phương thức slice() tạo ra một mảng mới. Nó không loại bỏ (remove) bất kỳ phần tử nào từ mảng nguồn (source array).
– Phương thức slice() có thể có 2 tham số slice(idxStart, idxEnd).
– Ví dụ: slice(1, n) thì các giá trị của mảng mới sẽ là giá trị từ vị trí 1 đến vị trí (n – 1) được cắt ra từ mảng nguồn (source array).
var citrus = fruits.slice(1, 3); // Orange,Lemon[/code] Try it »
– Nếu đối số kết thúc idxEnd bị bỏ qua, thì giống như ví dụ đầu tiên, phương thức slice() sẽ cắt ra từ vị trí idxStart đến hết mảng nguồn (source array).
