Javascript Array Methods

18/07/2019

Bài sau » « Bài trước

Convert Array thành String

Javascript phương thức toString() dùng để chuyển đổi Array thành Strings với dấu phẩy ngăn cách giữa các phần tử.

var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.getElementById("demo").innerHTML = fruits.toString(); // Kết quả là : Banana,Orange,Apple,Mango

Phương thức join() cũng convert các phần tử của Array thành String. Nhưng không giống với toString(), join() có thể thay đổi kí tự ngăn cách giữa các phần tử.

var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.getElementById("demo").innerHTML = fruits.join(" * "); // Kết quả là : Banana * Orange * Apple * Mango

Xóa phần tử cuối cùng trong Array

Khi bạn muốn xóa phần tử cuối cùng trong Array thì pop() là lựa chọn.

var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.pop(); // Xóa phần tử cuối "Mango" document.getElementById("demo").innerHTML = fruits; // Kết quả Array fruits là: ["Banana", "Orange", "Apple"];

Bạn cũng có thể lấy phần tử đã bị xóa đi bằng cách gán cho nó 1 biến.

var fruits = ["Banana", "Orange", "Apple", "Mango"]; var x = fruits.pop(); // Gián phần tử được xóa "Mango" cho biến x document.getElementById("demo").innerHTML = x; document.getElementById("demo2").innerHTML = fruits; // Kết quả Array fruits là: ["Banana", "Orange", "Apple"];

Thêm phần tử trong Array

Phương thức push() dùng để thêm phần tử mới vào cuối Array.

var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.push("Kiwi"); // Add phần tử ("Kiwi") vào cuối Array fruits

Bạn có thể lấy chiều dài của Array sau khi Add xong phần tử mới bằng cách gán cho 1 biến.

var fruits = ["Banana", "Orange", "Apple", "Mango"]; var x = fruits.push("Kiwi"); // Biến x là độ dài của Array sau khi add xong "Kiwi" = 5

Xóa phần tử đầu tiên trong Array

Ngược lại với pop(), Ta có phương thức shift() dùng để xóa phần tử đầu tiên trong Array và chỉ số index của các phần tử khác cũng giảm lại.

var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.shift(); // Remove phần tử đầu tiên "Banana"

Bạn có thể lấy giá trị của phần tử được xóa bằng cách gán nó vào 1 biến.

var fruits = ["Banana", "Orange", "Apple", "Mango"]; var x = fruits.shift(); // Gán phần tử bị xóa "Banana" cho biến x

Thêm phần tử đầu tiên vào Array

Phương thức unshift() dùng để add phần tử vào vị trí đầu tiên trong Array và tăng chỉ số index cho các phần tử cũ trong Array.

var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.unshift("Lemon"); // Array fruits sẽ là: "Lemon","Banana", "Orange", "Apple", "Mango"

Và sau khi add phần tử, ta có thể lấy được tổng số phần tử hiện có trong Array bằng cách gán cho biến x, xem code ví dụ bên dưới:

var fruits = ["Banana", "Orange", "Apple", "Mango"]; var x = fruits.unshift("Lemon"); // Kết quả biến x là 5

Thay đổi phần tử trong Array

Truy cập các phần tử trong Array bằng cách dùng chỉ số index.

Trong Array index được đếm từ 0.

Để thay đổi giá trị của một vị trí nào đó, ta chỉ cần trỏ đúng vị trí và gán giá trị mới cho nó là được. Xem thêm ở ví dụ sau:

var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits[1] = "Kiwi"; // Thay đổi phần tử có index = 1 thành "Kiwi" // Vậy kết quả Array thay đổi thành: "Banana", "Kiwi", "Apple", "Mango"

Sử dụng thuộc tính length là cách đơn giản để thêm phần tử vào Array.

var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits[fruits.length] = "Kiwi"; // Vậy kết quả Array thay đổi thành: "Banana", "Orange", "Apple", "Mango","Kiwi"

Xóa phần tử trong Array

Từ khi Javascript Array là một object, thì phần tử trong Array có thể được xóa bằng cách dùng Javascript operator delete

var fruits = ["Banana", "Orange", "Apple", "Mango"]; delete fruits[0]; // Xóa giá trị phần tử đầu tiên, Khi này giá trị phần tử đầu tiên là: undefined

Sử dụng delete các phần tử bị xóa giá trị của nó sẽ là undefined. Sử dụng pop() hoặc shift() thay thế.

Splice Array

Phương thức splice() có thể dùng để Add phần tử vào Array.

var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2, 0, "Lemon", "Kiwi");

- Tham số đầu tiên (2): xác định vị trí mà các phần tử mới được thêm vào.

- Tham số thứ 2 (0): Xác định số phần tử sẽ được xóa.

- Tham số tự do ("Lemon", "Kiwi") định nghĩa các phần tử sẽ được thêm vào. Ngoài ra, ta cũng có thể lấy được các phần tử đã bị xóa khỏi Array bằng cách gán nó vào 1 biến.

var fruits = ["Banana", "Orange", "Apple", "Mango"]; var remove_item = fruits.splice(2, 2, "Lemon", "Kiwi"); // Kết quả là: "Apple", "Mango"

Dùng splice để xóa phần tử

Trường hợp bạn muốn dùng splice() chỉ để xóa các phần tử trong Array thì ta làm như sau:

var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(1, 2); // Từ vị trí 1, xóa 2 phần tử // Kết quả Array fruits sau khi xóa là: "Banana","Mango"

Ghép mảng

Phương thức concat() tạo ra 1 Array mới bằng cách ghép 2 Array lại với nhau.

var myGirls = ["Cecilie", "Lone"]; var myBoys = ["Emil", "Tobias", "Linus"]; var myChildren = myGirls.concat(myBoys); // Kết quả là: Cecilie,Lone,Emil,Tobias,Linus

Phương thức concat() không thay đổi Array hiện tại. Mà nó luôn trả về kết quả là Array mới.

Slice Array

Phương thức slice() dùng để cắt 1 phần Array thành 1 Array mới.

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; var citrus = fruits.slice(1); // Kết quả là: "Orange", "Lemon", "Apple", "Mango"

Phương thức slice() nó sẽ tạo new Array. Chứ không remove phần tử trong Array ban đầu.

Phương thức slice() có thể nhận vào 2 tham số :slice(1, 3) . Tham số 1: là vị trí bắt đầu cắt. Tham số 2 (không bắt buộc): là số phần tử được cắt.

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; var citrus = fruits.slice(1, 2); // Cắt từ vị trí 1 và cắt 2 phần tử. Kết quả là: "Orange", "Lemon"

Nếu tham số thứ 2 không có, thì slice() sẽ tự động cắt đến hết Array. Xem lại ví dụ đầu tiên ở trên.

Tự động convert sang toString()

Javascript tự động covert Array thành dạng String có dấu phẩy ngăn cách, khi truy xuất đến tên biến của Array.

Dưới đây là 2 ví dụ khác nhau nhưng kết quả giống nhau:

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; document.getElementById("demo").innerHTML = fruits.toString();

Hoặc:

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; document.getElementById("demo").innerHTML = fruits;

Tất cả Javascript object đều có phương thức toString().

Bài sau » « Bài trước
Back to top