Cách tạo và sắp xếp Mảng-Array trong JavaScript

Thuộc tính length (độ dài) của các đối tượng Array (Mảng) là một thuộc tính mà nhiều người mới làm quen với JavaScript không hiểu. Nhiều người lầm tưởng rằng độ dài cho bạn biết chính xác có bao nhiêu entry (đầu mục) trong một mảng trong khi điều này chỉ đúng với một số mảng. Có người thậm chí không nhận ra rằng length (độ dài) là thuộc tính có thể ghi của mảng. Để làm rõ chính xác cách hoạt động của thuộc tính length, hãy xem điều gì sẽ xảy ra khi chúng ta tự thay đổi giá trị của nó hoặc chạy thứ gì đó cập nhật mảng (array) cũng dẫn đến việc thay đổi độ dài.

Hãy cùng bắt đầu lại từ đầu. Mỗi Mảng JavaScript có một thuộc tính gọi là length và (tùy chọn) có thể có có các thuộc tính được đánh số với tên từ 0 đến 4294967294. Nó cũng có một số hàm (method) để thao tác với các thuộc tính (property), chúng ta sẽ xét đến một số hàm này trong quá trình kiểm tra cách hoạt động của thuộc tính length. Lưu ý rằng JavaScript không hỗ trợ mảng kết hợp (associative arrays) và vì vậy tuy bạn có thể thêm các thuộc tính đã đặt tên vào một mảng, chúng không tạo thành một phần của mảng và sẽ bị bỏ qua bởi tất cả các hàm mảng (array method). Chúng cũng sẽ không ảnh hưởng đến độ dài (length).

Để minh họa chính xác những gì xảy ra với các thuộc tính mảng khi chúng ta xử lý các câu lệnh khác nhau, ta sẽ chạy hàm sau sau mỗi đoạn mã. Thao tác này sẽ ghi độ dài của mảng và tất cả các thuộc tính được đánh số vào bảng điều khiển (console) của trình duyệt.

var test = function(array) {
  console.log('length:'+ array.length);
  array.forEach(function(element, index, array) {
    console.log(index + ':' + element);
  });
};

Cách tạo mảng (Array) trong JavaScript

Chúng ta sẽ bắt đầu bằng cách xem xét các cách khác nhau để tạo một mảng trong JavaScript. Hai ví dụ đầu tiên trong số các ví dụ này tạo ra các mảng, trong đó chỉ có độ dài được thiết lập, và không có đầu mục (entry) được đánh số nào cả. Hai ví dụ tiếp theo tạo ra các đầu mục được đánh số nhỏ hơn độ dài từ 0 đến một.

Mảng có độ dài lớn hơn số lượng thuộc tính được đánh số được gọi là Mảng Thưa Thớt (sparse array), còn mảng có độ dài bằng số thuộc tính được đánh số là Mảng Dày Đặc (dense array).

//tạo mảng không có đầu mục được đánh số

var arr = new Array(5);
test(arr);
// length: 5

var arr = [];
arr.length = 5;
test(arr);
// length: 5

Lưu ý rằng literal notation - ký hiệu chữ của mảng (khi bạn xác định một mảng mới chỉ với dấu ngoặc rỗng bên trong) được ưu tiên khi tạo mảng mới.

var arr = ['a', 'b', 'c', 'd', 'e'];
test(arr);
// length:5, 0:a, 1:b, 2:c, 3:d, 4:e

var arr = [undefined, undefined, undefined, undefined, undefined];
test(arr);
// length:5, 0:undefined, 1:undefined, 2:undefined, 3:undefined, 4:undefined

Các hàm mảng xử lý các thuộc tính được đánh số (forEach trong trường hợp của chúng ta) sẽ chỉ xử lý những thuộc tính tồn tại. Thay vào đó, nếu bạn xử lý mảng bằng vòng lặp for or while thì vòng lặp cũng sẽ cố gắng xử lý những thuộc tính không tồn tại và mảng sẽ xác định những mục không tồn tại là undefined. Sau đó, code của bạn sẽ không thể phân biệt giữa ví dụ cuối cùng và hai ví dụ đầu tiên trong số các ví dụ trên. Bạn nên luôn sử dụng các hàm mảng để xử lý một mảng nếu bạn không chắc rằng mảng bạn đang xử lý có phải là một mảng dày đặc hay không.

Thay đổi Độ Dài Mảng (Array)

Các ví dụ sau đây xem xét điều gì sẽ xảy ra nếu chúng ta đặt độ dài mới cho mảng nhỏ hơn độ dài hiện tại.

var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
test(arr);
// length:6, 0:a, 1:b, 2:c, 3:d, 4:e, 5:f

arr.length = 5;
test(arr);
// length:5, 0:a, 1:b, 2:c, 3:d, 4:e

var arr = ['a','b','c','d','e','f',,,];
test(arr);
// length:8, 0:a, 1:b, 2:c, 3:d, 4:e, 5:f

arr.length = 7;
test(arr);
// length:7, 0:a, 1:b, 2:c, 3:d, 4:e, 5:f

Lưu ý rằng khi tạo mảng bằng ký hiệu[], mỗi đầu mục bao gồm một giá trị theo sau là dấu phẩy. Trường hợp giá trị bị bỏ qua thì không có thuộc tính nào được tạo cho vị trí đó. Chỉ có thể bỏ qua dấu phẩy cuối cùng nếu có một giá trị được cung cấp cho thuộc tính đó, nếu không thì độ dài sẽ bị giảm đi một.

Xóa đầu mục

JavaScript cung cấp ba hàm pop, shift và splice có thể xóa các đầu mục khỏi mảng và do đó làm giảm độ dài của mảng. Trong mỗi trường hợp, giá trị (hoặc các giá trị) bị loại bỏ được trả về bởi thao tác gọi hàm.

// pop() xóa bỏ nhân tố cuối khỏi mảng
var arr = ['a','b','c','d','e','f'];
var el = arr.pop();
test(arr); // length:5, 0:a, 1:b, 2:c, 3:d, 4:e
console.log(el); // f

// shift() xóa bỏ nhân tố đầu tiên khỏi mảng
var arr = ['a','b','c','d','e','f'];
var el = arr.shift();
test(arr); // length:5, 0:b, 1:c, 2:d, 3:e, 4:f
console.log(el); // a

// splice() có thể xóa các nhân tố hiện có
var arr1 = ['a','b','c','d','e','f'];
var arr2 = arr1.splice(0,2); // xóa 2 nhân tố bắt đầu ở vị trí 0
test(arr1); // length:4, 0:c, 1:d, 2:e, 3:f
test(arr2); // length:2, 0:a, 1:b

var arr1 = ['a','b','c','d','e','f',,,'i'];
var arr2 = arr1.splice(6,2); // xóa 2 nhân tố bắt đầu ở vị trí 6
test(arr1); // length:7, 0:a, 1:b, 2:c, 3:d, 4:e, 5:f, 6:i
test(arr2); // length:2

Thêm đầu mục

Chúng ta có thể thêm một mục mới vào một mảng chỉ bằng cách chỉ định một vị trí trong mảng mà thuộc tính được đánh số chưa tồn tại. Chúng ta cũng có thể sử dụng một trong ba hàm mà JavaScript cung cấp (push, unshift and splice) để chèn các đầu mục mới và di chuyển các đầu mục cũ khi cần thiết.

var arr = ['a','b','c','d','e','f',,,'i'];
arr[11] = 'l';
test(arr);
// length:12, 0:a, 1:b, 2:c, 3:d, 5:f, 8:i, 11:l

// push() thêm một hoặc nhiều phần tử vào cuối một mảng
var arr = ['a','b','c','d','e','f',,,,];
arr.push('j');
test(arr);
// length:10, 0:a, 1:b, 2:c, 3:d, 5:f, 9:j

// unshift() thêm một hoặc nhiều phần tử vào đầu mảng
var arr = ['a','b','c','d','e','f',,,,];
arr.unshift('x');
test(arr);
// length:10, 0:x, 1:a, 2:b, 3:c, 4:d, 5:e, 6:f

arr1 = ['a','b','c','d','e','f',,,'i'];
arr2 = arr1.splice(6,0,'g','h'); // xóa 0 phần tử từ vị trí 6, và chèn thêm 'g', 'h'
test(arr1); // length:11, 0:a, 1:b, 2:c, 3:d, 5:f, 6:g, 7:h, 10:i
test(arr2); // length:0

Thay thế đầu mục

Trường hợp chúng ta gán một giá trị mới cho một mục đã tồn tại, thì mục đó chỉ đơn giản là nhận một giá trị mới và phần còn lại của mảng không bị ảnh hưởng. Ngoài ra, bằng cách kết hợp các biến thể của hàm splice() mà chúng ta đã xem xét, chúng ta có thể thay thế các đầu mục hiện có hoặc lấp đầy khoảng trống trong mảng.

var arr1 = ['a','b','c','d','e','f',,,'i'];
var arr2 = arr1.splice(6,2,'g','h');
test(arr1); // length:9, 0:a, 1:b, 2:c, 3:d, 4:e, 5:f, 6:g, 7:h, 8:i
test(arr2); // length:2

Lời kết

Các ví dụ trên chắc đã giúp bạn hình dung về cách hoạt động của thuộc tính length của một mảng. Các ví dụ trên chắc đã cho bạn một ý tưởng tốt hơn về cách hoạt động của thuộc tính length của một mảng. Length có thể lớn hơn hoặc bằng số đầu mục trong mảng. Trường hợp bằng, chúng ta có một mảng dày đặc (dense array) và khi lớn hơn chúng ta có một mảng thưa thớt (sparse array). Tác vụ chính xác mà một hàm mảng cụ thể thực hiện có thể phụ thuộc vào việc thực sự có một thuộc tính tương ứng với vị trí nhất định trong một mảng thưa thớt hay không. Nếu chúng ta thay đổi độ dài của một mảng, nó sẽ loại bỏ bất kỳ thuộc tính được đánh số nào trong mảng nằm ở các vị trí lớn hơn độ dài mới. Nếu độ dài bằng số lượng thuộc tính được đánh số và chúng ta tăng độ dài, thì chúng ta sẽ chuyển đổi một mảng dày đặc thành một mảng thưa thớt. Các hàm mảng để xóa và thêm thuộc tính trong mảng sẽ di chuyển các mục hiện có xung quanh nơi cần thiết, và cũng sẽ giữ lại và di chuyển bất kỳ khoảng trống nào giữa các thuộc tính.

Theo Sitepoint