Array là gì? Array trong JavaScript

Array trong JavaScript cũng là một loại object. Nhưng array khác object thông thường ở chỗ là :

• Array (mảng) được thiết kế để lưu trữ dữ liệu theo thứ tự.
• Object (đối tượng) bình thường chỉ là tập hợp của các cặp key-value.

Sau đây, mình sẽ khám phá cụ thể về array trong JavaScript .

Khởi tạo array trong JavaScript

Có hai cách để khởi tạo array rỗng là:

• Sử dụng dấu ngoặc vuông [].
• Sử dụng hàm khởi tạo new Array().

let
Bạn đang đọc: Array là gì? Array trong JavaScript 
 a1 = [];
let a2 = new Array();

Trong đó, cú pháp sử dụng [] là phổ biển hơn cả vì cách này nhanh và ngắn gọn hơn.

Ngoài ra, bạn có thể khởi tạo array trong JavaScript với một số phần tử cho trước:

let letters = [" a ", " b ", " c "];

Khi đó, các phần tử trong mảng được sắp xếp theo thứ tự, phần tử đầu tiên có chỉ số là 0. Phần tử cuối cùng có chỉ số bằng độ dài mảng trừ đi 1 đơn vị.

Để truy cập các phần tử trong mảng, bạn sử dụng arr[index] với index là chỉ số của phần tử:

let letters = [" a ", " b ", " c "];

console.log(letters[0]);  
console.log(letters[1]);  
console.log(letters[2]);  

 
console.log(letters[-1]);  
console.log(letters[3]); 

Bạn cũng hoàn toàn có thể đổi khác giá trị của thành phần trong mảng :

let letters = [" a ", " b ", " c "];

 
letters[0] = " A ";
console.log(letters[0]); 

Hoặc thêm thành phần mới vào mảng :

let letters = [" a ", " b ", " c "];

 
letters[3] = " d ";
console.log(letters[3]); 

Một số đặc điểm của array trong JavaScript

Tổng số phần tử trong mảng được xác định qua thuộc tính length:

let letters = [" a ", " b ", " c "];

console.log(letters.length); 

Bạn hoàn toàn có thể in ra hàng loạt giá trị của mảng :

let letters = [" a ", " b ", " c "];

console.log(letters); 

Giá trị các thành phần trong mảng hoàn toàn có thể thuộc bất kể kiểu tài liệu nào :

let arr = [
  " a ",  
  1,  
  null,  
  undefined,  
  { x: 1 },  
  function () {
     
    console.log(" hello ");
  },
];

 
console.log(arr[4].x);  

 
arr[5](); 

Tương tự như object, array có thể có hoặc không dùng “dấu phẩy đuôi” – dấu phẩy sau phần tử cuối cùng.

let arr = [
  " a ",
  1,
  null,
  undefined,
  { x: 1 },
  function () {
    console.log(" hello ");
  },
];

Việc thêm dấu phẩy sau phần tử cuối cùng giúp phần biểu diễn các thuộc tính giống nhau. Qua đó, việc thêm/xóa phần tử trở nên dễ dàng hơn.

Một số phương thức cơ bản của array

Một số phương thức cơ bản của array trong JavaScript là: arr.pop(), arr.push(), arr.shift() và arr.unshift().

► Phương thức arr.pop()

Lấy ra và trả về thành phần sau cuối của mảng .

let letters = [" a ", " b ", " c "];
let item = letters.pop();

console.log(item);  
console.log(letters); 

► Phương thức arr.push()

Thêm một hoặc nhiều phần tử vào cuối mảng và trả về độ dài mới của mảng.

let letters = [" a ", " b ", " c "];

 
let length = letters.push(" d ");
console.log(length);  
console.log(letters);  

 
length = letters.push(" e ", " f ");
console.log(length);  
console.log(letters); 

► Phương thức arr.shift()

Lấy ra và trả về thành phần tiên phong của mảng .

let letters = [" a ", " b ", " c "];
let item = letters.shift();

console.log(item);  
console.log(letters); 

► Phương thức arr.unshift()

Thêm một hoặc nhiều phần tử vào đầu mảng.

let letters = [" a ", " b ", " c "];

 
let length = letters.unshift(" d ");
console.log(length);  
console.log(letters);  

 
length = letters.unshift(" e ", " f ");
console.log(length);  
console.log(letters); 

Mối liên hệ giữa array và object

Như mình đã nói ở trên, array về bản chất cũng là object. Cú pháp truy cập phần tử của mảng arr[index] tương tự như cú pháp của object obj[key]. Nói cách khác, index ở array tương đương key của object.

Và khi copy array thì đó cũng là copy qua tham chiếu – tương tự như copy object:

let letters = [" a ", " b ", " c "];
let copied = letters;

 
console.log(copied);  

 
copied[1] = " new value ";

 
console.log(letters[1]); 

Điều đặc biệt quan trọng hơn của array so với object là : array tàng trữ tài liệu theo thứ tự .
JavaScript Engine sẽ cố gắng nỗ lực tàng trữ các thành phần của mảng vào các vùng nhớ liên tục nhau. Và tối ưu hóa để làm thế nào truy vấn các thành phần mảng nhanh nhất .

Nhưng tất cả những điều này sẽ không còn đúng nữa, nếu bạn sử dụng array theo kiểu của object, ví dụ:

 
let letters = [" a ", " b ", " c "];

 
letters[1000] = " d ";
console.log(letters[1000]);  

 
letters.x = 100;
console.log(letters.x);  

 
console.log(letters.length); 

Cách sử dụng trên không có lỗi cú pháp nhưng không đúng với ý nghĩa khi tạo ra array trong JavaScript.

Mục đích của array là để lưu trữ dữ liệu theo thứ tự. Nếu bạn muốn lưu trữ thuộc tính với key bất kỳ thì hãy sử dụng object thông thường {}.

Duyệt tất cả các phần tử trong mảng

Cách cơ bản nhất để duyệt tất cả các phần tử của mảng trong JavaScript là dùng vòng lặp for với chỉ số:

let letters = [" a ", " b ", " c "];

for (let i = 0; i < letters.length; i+ +) {
  console.log(letters[i]);
}

Kết quả :

a
b
c

Nếu không quan tâm đến chỉ số, bạn có thể dùng vòng lặp for...of cho ngắn gọn hơn:

let letters = [" a ", " b ", " c "];

for (let value of letters) {
  console.log(value);
}

Ngoài ra, bạn cũng có thể dùng vòng lặp for...in tương tự như cách duyệt tất cả các key trong object:

let letters = 
[
Xem thêm: Cổng Dịch Vụ Công Trực Tuyến Tỉnh Tây Ninh 
" a ", " b ", " c "];

for (let key in letters) {
  console.log(letters[key]);
}

Cách sử dụng for...in không sai, nhưng có một số vấn đề là:

• Cách này không tối ưu cho duyệt mảng nên thường chậm hơn hai cách trên.
• Đối với một số object dạng “array-like”, ngoài length và chỉ số ra thì “array-like” còn có thêm một số thuộc tính khác nữa. Việc sử dụng for...in sẽ duyệt hết tất cả các thuộc tính (bao gồm dạng số và không phải dạng số). Điều này là không cần thiết.

Nói chung, không nên sử dụng for...in để duyệt hết tất cả các phần tử của array trong JavaScript.

Vấn đề liên quan đến length của array

Thuộc tính length được tự động cập nhật mỗi khi bạn thêm/xóa phần tử trong mảng. Nhưng length không thật sự biểu thị số lượng phần tử trong mảng.

Giá trị của length bằng chỉ số lớn nhất trong mảng cộng thêm 1 đơn vị, ví dụ:

let arr = [];
arr[1000] = " a ";
console.log(arr.length); 

Chú ý: đây chỉ là ví dụ minh họa, bạn không nên sử dụng array theo cách này.

Thuộc tính length là writable. Nghĩa là bạn có thể thay đổi giá trị của thuộc tính length.

Nếu bạn tăng nó lên thì không sao. Nhưng ngược lại, nếu bạn giảm giá trị của length thì mảng sẽ bị cắt ngắn đi:

let letters = [" a ", " b ", " c "];
console.log(letters.length);  

 
letters.length = 2;
console.log(letters);  

 
letters.length = 5;
console.log(letters[2]); 

Trong ví dụ trên, khi bạn giảm length rồi tăng length trở lại, giá trị trước đó trong mảng (letters[2]) không được khôi phục trở lại.

💡 Cách đơn giản nhất để xóa mảng là gán length bằng 0: arr.length = 0.

Vấn đề về cú pháp new Array()

Đây là một cú pháp khác để khởi tạo array trong JavaScript :

let letters = new Array(" a ", " b ", " c ");

console.log(letters); 

Cú pháp trên khởi tạo array với ba thành phần tương tự như như sau :

let letters = [" a ", " b ", " c "];

Tuy nhiên, việc sử dụng new Array() lại khá ít dùng vì nó chậm và có một trường hợp khó hiểu.

Câu lệnh new Array(number) với number là một số, không khởi tạo mảng có 1 phần tử là number mà khởi tạo mảng có number phần tử.

 
let arr1 = new Array(" 1 ");
console.log(arr1);  

 
let arr2 = new Array(1);
console.log(arr2); 

💡 Để tránh nhầm lẫn, bạn chỉ nên sử dụng dấu ngoặc vuông [] để khởi tạo mảng (trừ khi bạn có mục đích đặc biệt nào khác).

Mảng nhiều chiều

Mảng trong JavaScript có thể chứa phần tử cũng là một mảng. Đó gọi là mảng nhiều chiều.

Ví dụ sử dụng mảng hai chiều để lưu ma trận 2×2 :

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

 
console.log(matrix[1][1]); 

Phương thức toString()

Array có triển khai phương thức toString() theo cách riêng. Phương thức này trả về một string chứa giá trị của các phần tử mảng – được ngăn cách nhau bởi dấu phẩy:

let letters = [" a ", " b ", " c "];
console.log(letters.toString()); 

Ví dụ cộng array với số :

console.log([] + 3);  
console.log([1] + 3);  
console.log([1, 2] + 3); 

Bởi vì, array không có phương thức Symbol.toPrimitive và valueOf() mà chỉ có phương thức toString().

Vì vậy khi thực hiện phép cộng trên, [] trở thành string rỗng, [1] trở thành "1" và [1,2] trở thành "1,2". Nên đoạn code trên tương đương với:

console.log(" " + 3);  
console.log(" 1 " + 3);  
console.log(" 1,2 " + 3); 

Tiếp theo, khi cộng string với số thì số sẽ được quy đổi kiểu tài liệu về string. Nên tác dụng thu được như trên .

So sánh array trong JavaScript

Tương tự như object, array cũng là kiểu dữ liệu tham chiếu. Vì vậy, việc so sánh array là so sánh qua tham chiếu.

Nghĩa là hai array chỉ bằng nhau khi chúng cùng tham chiếu. Ngược lại, dù rằng hai array có các thành phần giống nhau thì chúng cũng không bằng nhau .

let a = [];
let b = [];

 
console.log(a = = = a);  
console.log(a = = = b); 

Để so sánh hai array với nhau theo giá trị các thành phần, bạn hoàn toàn có thể tìm hiểu thêm cách mình tiến hành với object trong bài viết : So sánh hai object trong JavaScript .

Tổng kết

Array trong JavaScript là một loại object đặc biệt quan trọng dùng để tàng trữ tài liệu theo thứ tự .
Để khởi tạo array, bạn có hai cách :

 
let a1 = [item1, item2,...];

 
let a2 = new Array(item1, item2,...);

Cách gọi new Array(number) với number là số sẽ tạo một mảng mới có giá trị length là number, nhưng lại không có phần tử nào.

Thuộc tính length có giá trị là độ dài của mảng, chính xác hơn thì length bằng giá trị chỉ số lớn nhất cộng thêm 1 đơn vị. Mỗi khi bạn thêm/xóa phần tử trong mảng thì thuộc tính length tăng/giảm tương ứng.

Nhưng bạn cũng có thể thay đổi trực tiếp giá trị của length. Nếu giá trị của length giảm đi thì mảng cũng bị cắt ngắn đi. Và khi length bằng 0, đồng nghĩa với mảng bị xóa.

Một số phương pháp thông dụng trong mảng là :

• arr.push(item1, item2,...): thêm một hoặc nhiều phần tử vào cuối mảng.
• arr.pop(): lấy ra và trả về phần tử cuối cùng của mảng.
• arr.shift(): lấy ra và trả về phần tử đầu tiên của mảng.
• arr.unshift(item1, item2,...): thêm một hay nhiều phần tử vào đầu mảng.

Có ba cách để duyệt hết tổng thể các thành phần của mảng :

• Vòng lặp for với chỉ số for (let i=0; i < arr.length; i++): cách này chạy nhanh nhất.
• Vòng lặp for (let item of arr): cách này ngắn gọn, nên dùng khi không quan tâm chỉ số.
• Vòng lặp for (let i in arr): cách này không tối ưu cho array, không nên dùng.

So sánh array thực chất là so sánh theo tham chiếu. Để so sánh từng phần tử của mảng, bạn có thể dùng vòng lặp for...of để duyệt hết tất cả các phần tử hoặc sử dụng thư viện _.isEqual.

Thực hành

Bài 1

Đoạn code sau hiển thị như thế nào :

let letters = [" a ", " b ", " c "];
let otherArr = letters;
otherArr.push(" d ");

 
console.log(letters.length); 

Xem đáp án
Kết quả là : 4
Giải thích :

• Bởi vì array là kiểu dữ liệu tham chiếu, nên khi gán otherArr = letters thì otherArr có cùng tham chiếu với letters.
• Câu lệnh otherArr.push("d") thêm phần tử mới vào otherArr thì cũng làm thay đổi letters.

Bài 2

Hãy viết code triển khai các bước sau :

1. Tạo mảng letters với hai phần tử "a" và "b".
2. Thêm phần tử "c" vào cuối mảng.
3. Thay đổi giá trị của phần tử ở giữa thành "d".
4. Lấy ra và trả về giá trị phần tử đầu tiên của mảng.
5. Thêm hai số 1, 2 vào đầu mảng.

Xem đáp án

 
let letters = [" a ", " b "];

 
letters.push(" c ");

 
let length = letters.length;
letters[Math.floor(length / 2)] = " d ";
console.log(letters);  

 
let first = letters.shift();
console.log(first);  

 
letters.unshift(1, 2);
console.log(letters); 

Bài 3

Kết quả hiển thị là gì ?

let letters = [" a ", " b "];

letters.push(function () {
  alert(this);
});

letters[2](); 

Xem đáp án

let letters = [" a ", " b "];

letters.push(function () {
  console.log(this);
});

letters[2](); 

Cách viết letters[2] tương tự như cách truy cập phần tử trong object obj[key]. Mà giá trị tại letters[2] là một hàm. Nói cách khác, đó là phương thức của object.

Vì vậy, giá trị của this được bind với đối tượng gọi phương thức. Nên this chính là letters.

Bài 4

Viết hàm sumInput thực hiện các yêu cầu sau:

1. Sử dụng hàm prompt để yêu cầu người dùng nhập vào các số và lưu vào một mảng.
2. Dừng hỏi người dùng khi giá trị nhập vào không phải là số bình thường.
3. Tính và in ra tổng các số người dùng nhập.

Xem đáp án

 
function sumInput() {
   
  let arr = [];

   
  while (true) {
    let n = prompt(" Nhập vào 1 số ít : ", 0);

     
    if (n = = = " " | | n = = = null | | n = = = undefined | | !isFinite(n)) {
      break;
    }

     
    arr.push(+n);
  }

   
  let s = 0;
  for (let num of arr) {
    s + = num;
  }
  return s;
}

 
sumInput
(
Xem thêm: Sử dụng thuốc Phenergan cho người lớn và trẻ em
);

Tham khảo :

Source: https://suachuatulanh.org
Category : Hỏi Đáp Chuyên Gia