JavaScript

Một số phương thức thao tác với mảng JavaScript (Phần 2/4)

Một số phương thức thao tác với mảng JavaScript (Phần 2/4)
Được viết bởi Minh Hoàng

Series lập trình JavaScript, ngôn ngữ lập trình linh động, thực thi phía client.

Một số phương thức thao tác với mảng JavaScript (Phần 2/4)

9. Thêm phần tử vào mảng bằng chỉ mục index

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ụ:
var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits[0] = "Kiwi";		// Thay đổi giá trị của phần tử đầu tiên thành "Kiwi"
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ụ:
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
Try it »
10. Xóa phần tử khỏi mảng bằng chỉ mục index

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ụ:
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
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

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ụ:
var fruits = ["Banana", "Orange", "Apple", "Mango"];

// Thêm phần tử mới "Kiwi" vào cuối mảng
fruits.push("Kiwi");
Try it »

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

Ví dụ:
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
Try it »
12. Array.pop() Xóa phần tử cuối khỏi mảng

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ụ:
var fruits = ["Banana", "Orange", "Apple", "Mango"];

// Xóa phần tử cuối "Mango" khỏi mảng
fruits.pop();
Try it »

– Phương thức pop() trả về giá trị của phần tử đã được xóa (popped out):

Ví dụ:
var fruits = ["Banana", "Orange", "Apple", "Mango"];

var x = fruits.pop();	// Giá trị của x là "Mango"
Try it »
13. Array.unshift() Thêm phần tử vào đầu mảng

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ụ:
var fruits = ["Banana", "Orange", "Apple", "Mango"];

// Thêm phần tử mới "Kiwi" vào đầu mảng
fruits.push("Kiwi");
Try it »

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

Ví dụ:
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
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

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ụ:
var fruits = ["Banana", "Orange", "Apple", "Mango"];

// Xóa phần tử đầu "Banana" khỏi mảng
fruits.shift();
Try it »

– Phương thức shift() trả về giá trị của phần tử đã được xóa (shifted out):

Ví dụ:
var fruits = ["Banana", "Orange", "Apple", "Mango"];

var x = fruits.shift();	// Giá trị của x là "Banana"
Try it »
15. Array.splice() Thêm phần tử mới vào vị trí bất kỳ

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ụ:
var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.splice(2, 0, "Lemon", "Kiwi");

// New Array:
// Banana,Orange,Lemon,Kiwi,Apple,Mango
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ụ:
var fruits = ["Banana", "Orange", "Apple", "Mango"];

var removed = fruits.splice(2, 2, "Lemon", "Kiwi");

// Giá trị của mảng removed là: Apple,Mango
Try it »
16. Array.splice() Xóa phần tử tại vị trí bất kỳ

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ụ:
var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.splice(0, 1);	// Remove phần tử đầu tiên "Banana" khỏi mảng
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

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
var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];

var myClass = myGirls.concat(myBoys);	// Concatenates (merge, join) myGirls và myBoys
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
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);
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
var arr = ["Cecilie", "Lone"];

var myClass = arr.concat(["Emil", "Tobias", "Linus"]);
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

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ụ:
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];

var citrus = fruits.slice(2);		// Lemon,Apple,Mango
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 fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];

var citrus = fruits.slice(1, 3);	// Orange,Lemon
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).

Tham khảo w3schools.

Cảm ơn bạn đã theo dõi. Đừng ngần ngại hãy cùng thảo luận với chúng tôi!
[likebtn theme=”github” dislike_enabled=”0″ show_dislike_label=”1″]

Giới thiệu

Minh Hoàng

Xin chào, tôi là Hoàng Ngọc Minh, hiện đang làm BrSE, tại công ty Toyota, Nhật Bản. Những gì tôi viết trên blog này là những trải nghiệm thực tế tôi đã đúc rút ra được trong cuộc sống, quá trình học tập và làm việc. Các bài viết được biên tập một cách chi tiết, linh hoạt để giúp người đọc có thể tiếp cận một cách dễ dàng nhất. Hi vọng nó sẽ có ích hoặc mang lại một góc nhìn khác cho bạn[...]

Bình luận của bạn

avatar

Một số phương thức thao tác với mảng JavaScript (Phần 2/4)

by Minh Hoàng Time to read: 11 min
0