3 điều có thể bạn chưa biết về array trong Javascript

Array là một định nghĩa rất quen thuộc và cũng thường xuyên được sử dụng trong bất kỳ ngôn ngữ lập trình nào; đây là một loại biến rất đặc biệt vì có thể dùng để lưu trữ nhiều giá trị trong cùng 1 lần. Tuy nhiên, với JavaScript, và luôn có nhiều điêù để chúng ta khám phá

Tham khảo bài viết này, mình xin đề cập đến 3 tính năng không thực sự phổ biến và có thể bạn chưa biết về Array

Nào hãy cùng bắt đầu nhé

1. Thêm những thuộc tính custom vào Array.

Trong thực tế, hầu hết mọi thứ chúng ta đề cập trong JavaScript đều trả ra như một object. Có 2 loại dữ liệu trong JavaScript là dữ liệu nguyên thủy và object, nhưng dữ liệu nguyên thủy thì luôn được bao ở bên trong object

Array trong JavaScript có thể có 3 loại thuộc tính khác nhau là thuộc tính chỉ số, tích hợp (built-in) cuối cùng là thuộc tính custom

Hai thuộc tính đầu chắc hẳn là rất quen thuộc với các bạn

var framgia = ["div1", "div2", "div3"];

// Thuộc tính chỉ số :
console.log(framgia[1]);
//=> "div2"

framgia[3] = "div4";
console.log(framgia);
//=> ["div1", "div2", "div3", "div4"]

// Thuộc tính tích hợp (có thể gọi bằng object.key hoặc là object["key"]):
console.log(framgia.length);
//=> 4

console.log(framgia["length"]);
//=> 4

Thực tế thì chúng ta không thường xuyên cần thiết phải tạo thêm một thuộc tính mới cho một Array. Tuy nhiên, bạn hoàn toàn có thể xem nó như là một object bình thường với key - value và thêm thuộc tính custom cho mục đích của bạn. Ví dụ

var framgia = ["div1", "div2", "div3"];
framgia.slogan = "From Asia to the World."

console.log("Framgia have " + framgia + ". Our sologan is : " + framgia.slogan)
//=> Framgia have div1,div2,div3. Our sologan is : From Asia to the World.

Chú ý là thuộc tính custom mà bạn mới thêm vào sẽ là một enumerable - có nghĩa là nó sẽ được sử dụng trong các vòng lặp như for..in, vv

2. Duyệt qua các phần tử của Array.

Chắc hẳn là bạn đã quá quen thuộc với việc này bằng việc sử dụng việc đánh chỉ số của các phần tử trong một array?

Tuy nhiên, kể từ phiên bản ECMAScript6 (có thể hiểu đơn giản ECMAScript là tiêu chuẩn quy định các chúng ta sử dụng và những gì có thể làm được với JavaScript), chúng ta có một cách khác để duyệt qua các phần tử của array mà chỉ cần tương tác trực tiếp với các giá trị chứ không hề động đến chỉ số các phần tử trong đó

Thay vì dùng vòng lặp for như trước kia thì chúng ta sẽ dùng vòng lặp for..of như sau

var framgia = ["div1", "div2", "div3"];

// Duyệt mảng qua chỉ số.
for (var item = 0; item < framgia.length; item++){
  console.log(item);
}
//=> "div1"
//=> "div2"
//=> "div3"

// Duyệt mảng bằng `for..of`.
for (let item of framgia){
  console.log(item);
}
//=> "div1"
//=> "div2"
//=> "div3"

2. Số lượng phần tử không phải là chiều dài của Array.

Thông thường, khi nhắc đến chiều dài của một array, chúng ta sẽ nghĩ ngay đó là số lượng giá trị có trong nó hoặc là chiều dài mà chúng ta truyền vào. Tuy nhiên, trên thực tế, chiều dài của một array phụ thuộc và chỉ số lớn nhất có ở bên trong nó

Chiều dài là một khái niệm rất linh hoạt của array, cho dù là bạn có cố định chiều dài trước thì chiều dài vẫn tăng thêm nếu bạn thêm các phần tử mới vào array. Hãy xem một ví dụ đơn giản

var ary = [];
ary.length = 3;

console.log(ary);
//=> []

console.log(ary.length);
//=> 3

ary[5] = "abcd";

console.log(ary.length);
//=> 6

Trong ví dụ bên trên, với ary rỗng là [] thì chúng ta cũng fix cứng được chiều dài của nó là 3. Sau khi thêm vào một phần tử tại vị trí 5 thì ngay lập tức chiều dài chuyển từ 3 lên thành 6. Tuy nhiên điều này không có nghĩa là JavaScript đã tự động tạo cho chúng ta các phần tử từ vị trí 0 đến 4 đâu nhé. Bạn có thể in ary ra hoặc dùng toán tử in để kiểm tra như sau

console.log(ary);
//=> [5: "abcd"]

console.log(0 in ary);
// false

Array như trên thì chúng ta vẫn thườn gọi nó là thưa thớt - có các chỉ số rời rạc và có khoảng trống. Trái với đó là array dày đặc - các chỉ số liên tục và đơn giản số lượng phần tử cũng chính là chiều dài

Chiều dài luôn đảm bảo lớn hơn chỉ số lớn nhất của các phần tử có trong mảng (xem chi tiết hơn tại MND). Và do đó, việc quy định chiều dài cũng có thể cắt bỏ một phần của array. Hãy cùng xem ví dụ để thấy rõ hơn ý này

var ary = [];
ary.length = 3;
console.log(ary.length);
//=> 3

ary[5] = "abcd";
console.log(ary.length);
//=> 6

ary.length = 2;
console.log(ary.length);
//=> 2

console.log(ary[5]);
//=> undefined

console.log(ary);
//=> []

Như vậy là phần tử tại chỉ số 5 đã bị cắt bỏ ra khỏi ary sau khi ta fix lại chiều dài

Tham khảo.

• http://www.hongkiat.com/blog/javascript-arrays/

• http://es6-features.org

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/length

Cám ơn bạn đã theo dõi bài viết!!!