JavaScript: Mảng (Array)

Việc sử dụng các biến để lưu trữ các giá trị gặp phải một số hạn chế như sau:

• Mỗi biến chỉ có thể chứa một giá trị duy nhất. Điều này có nghĩa là để lưu trữ n giá trị trong một chương trình, sẽ cần n khai báo biến. Do đó, việc sử dụng các biến là không khả thi khi người ta cần lưu trữ một lượng lớn các dữ liệu.
• Các biến trong một chương trình được cấp phát bộ nhớ theo thứ tự ngẫu nhiên, do đó gây khó khăn cho việc truy xuất/đọc các giá trị theo thứ tự khai báo của chúng.

JavaScript giới thiệu khái niệm mảng (array) để giải quyết được các hạn chế nêu trên.

Một mảng là một tập hợp các giá trị đồng nhất, bao gồm một tập hợp các giá trị có cùng kiểu dữ liệu, và do người dùng định nghĩa.

Các tính năng của một mảng

• Một khai báo mảng sẽ phân bổ các vùng nhớ một cách tuần tự, không phải ngầu nhiên, vậy nên dễ dàng quản lý.
• Mảng là tĩnh. Điều này có nghĩa là một mảng một khi được khởi tạo không thể thay đổi kích thước.
• Mỗi vùng nhớ đại diện cho một phần tử mảng.
• Môi phần tử mảng được xác định bởi một số nguyên duy nhất được gọi là chỉ số/chỉ mục của phần tử.
• Mảng giống như các biến, cần được khai báo trước khi chúng được sử dụng.
• Khởi tạo mảng đề cập đến việc khởi tạo giá trị cho các phần tử mảng.
• Giá trị phần tử mảng có thể được cập nhật hoặc sửa đổi nhưng không thể xóa.

Khai báo và khởi tạo mảng

Để khai báo và khởi tạo một mảng trong JavaScript, hãy sử dụng cú pháp sau:

var tên_mảng; //khai báo
tên_mảng = [val1,val2,...,valn] //khởi tạo các phần tử mảng
Hoặc:
var tên_mảng = [val1,val2…valn]

Lưu ý: Cặp [] được gọi là thứ nguyên của mảng.

Ví dụ: var numArr = [1,3,5,7] sẽ tạo ra một mảng như trong hình dưới đây.

Truy cập phần tử mảng

Cách truy cập một phần tử mảng: Tên mảng theo sau là cặp ngoặc vuông, bên trong là chỉ số của phần tử mảng.

tên_mảng[chỉ_số]

Ví dụ đơn giản:

var num = [1,3,2,5,4]
console.log(num[0]); 
console.log(num[1]);

Output:

1 
3

Đối tượng mảng

Một mảng cũng có thể được tạo bằng cách sử dụng đối tượng Array. Hàm tạo Array có thể được truyền vào như:

• Một giá trị số đại diện cho kích thước của mảng.
• Một danh sách các giá trị được phân tách bằng dấu phẩy.

Các ví dụ sau đây tạo ra một mảng bằng phương pháp này.

Thí dụ về đối tượng mảng

Ví dụ 1:

var arr = new Array(4)
for(var i = 0; i<arr.length; i++) {
   arr[i] = i * 2
   console.log(arr[i])
}

Output:

0 
2 
4 
6 

Ví dụ 2: Hàm tạo Array cho phép các giá trị được phân tách bằng dấu phẩy

var arr = new Array("JavaScript","PHP","Laravel","Vue.js")
for(var i = 0; i<names.length; i++) {
   console.log(arr[i])
}

Output:

JavaScript
PHP
Laravel
Vue.js

Phương thức của mảng

Sau đây là danh sách các phương thức của đối tượng Array cùng với mô tả của chúng.

concat()

Trả về một mảng mới sau khi nối 2 mảng với nhau.

Ví dụ:

var a = ['a', 'b', 'c'];
var b = [1, 2, 3];
var con = b.concat(a);
console.log(con); //1,2,3,a,b,c

every()

Trả về true nếu mọi phần tử trong mảng này thỏa mãn chức năng kiểm tra được cung cấp.

Ví dụ:

function check(x) {
   return (x >= 10);
}
var result = [12, 5, 8, 130, 44].every(check);
console.log(result); //false

filter()

Lọc những phần tử có giá trị theo điều kiện.

Ví dụ:

function filt(element) { 
   return (element >= 10); //Lọc những phần tử >=10
} 
var passed = [12, 5, 8, 130, 44].filter(filt); 
console.log("Result : " + passed ); // Result : 12,130,44

forEach()

Gọi một hàm cho mỗi phần tử trong mảng.

Ví dụ:

var arr = new Array(12,13,14,15)
console.log("In mảng gốc......")
arr.forEach(function(val,index) {
   console.log(val)
})

arr.reverse() //đảo ngược mảng
console.log("In mảng sau khi đảo ngược....")
arr.forEach(function(val,index){
   console.log(val)
})

Output:

In mảng gốc...... 
12 
13 
14 
15 
In mảng sau khi đảo ngược.... 
15 
14 
13 
12

indexOf()

Trả về chỉ số (nhỏ nhất) đầu tiên của một phần tử trong mảng ứng với giá trị được chỉ định hoặc -1 nếu không tìm thấy.

Ví dụ:

var in = [12, 5, 8, 130, 44, 8].indexOf(8); 
console.log("Kết quả : " + in) //Kết quả : 2

join()

Nối tất cả các phần tử của một mảng thành một chuỗi.

Ví dụ:

var arr = new Array("PHP","Laravel","Vue.js");
var str = arr.join("-");console.log(str); //PHP-Laravel-Vue.js

lastIndexOf()

Trả về chỉ mục cuối cùng (lớn nhất) của một phần tử trong mảng ứng với giá trị được chỉ định hoặc -1 nếu không tìm thấy.

Ví dụ:

var in = [12, 5, 8, 130, 44, 8].lastIndexOf(8); 
console.log("Kết quả : " + in) //Kết quả : 5

map()

Tạo một mảng mới với kết quả là lời gọi một hàm được cung cấp trên mỗi phần tử trong mảng này.

Ví dụ:

var arr = [1, 4, 9];
var newArr = arr.map(Math.sqrt);
console.log("Result : " + newArr ); //Result : 1,2,3

pop()

Loại bỏ phần tử cuối cùng khỏi mảng và trả về phần tử đó.

Ví dụ:

var arr = [1, 3, 2, 5, 4];
console.log("Kết quả : " + arr) //Kết quả : 1,3,2,5

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.

Ví dụ:

var arr = [1, 3, 2, 5, 4];
arr.push(7,6);
console.log("Kết quả : " + arr) //Kết quả : 1,3,2,5,4,7,6

reduce()

Áp dụng đồng thời một hàm đối với hai giá trị của mảng (từ trái sang phải) để giảm nó thành một giá trị.

Ví dụ:

var sum = [0, 1, 2, 3].reduce(function(x, y){return x + y;}); 
console.log("Sum : " + total ); //Sum : 6

reduceRight()

Áp dụng đồng thời một hàm đối với hai giá trị của mảng (từ phải sang trái) để giảm nó thành một giá trị.

Ví dụ:

var sum = [0, 1, 2, 3].reduceRight(function(x, y){return x + y;}); 
console.log("Sum : " + total ); //Sum : 6

reverse()

Đảo ngược thứ tự các phần tử của mảng - phần tử đầu tiên trở thành phần tử cuối cùng, phần tử cuối cùng trở thành phần tử đầu tiên, ...

Ví dụ:

var arr = [0, 1, 2, 3, 4, 5].reverse(); 
console.log("Mảng sau khi đảo ngược : " + arr); //Mảng sau khi đảo ngược: 5,4,3,2,1,0

shift()

Loại bỏ phần tử đầu tiên khỏi mảng và trả về phần tử đó.

Ví dụ:

var arr = [1, 2, 3, 4, 5].shift(); 
console.log(arr); // 1

slice()

Trích xuất một phần của mảng và trả về một mảng mới.

Ví dụ:

var arr = ["PHP", "Laravel", "Vue.js", "Node.js", "React.js"];
console.log(arr.slice(0, 2)); //PHP,Laravel
console.log(arr.slice(1, 3)); //Laravel,Vue.js

some()

Trả về true nếu có ít nhất một phần tử trong mảng thỏa mãn hàm kiểm tra.

Ví dụ:

function check(element) { 
   return (element >= 10); 
} 
var result1 = [21, 1, 2, 3, 5, 8].some(check); 
console.log(result1); //false 

var result2 = [1, 1, 2, 3, 5, 8, 13].some(check); 
console.log(result); //true

toSource()

Hiển thị mã nguồn của đối tượng.

sort()

Sắp xếp các phần tử của một mảng theo trật tự tăng dần theo bảng mã ASCII.

splice()

Thêm và/hoặc loại bỏ các phần tử từ mảng.

Cú pháp:

array.splice(index, nums, [ele1][, ..., eleN]);

index là chỉ số nơi bắt đầu thao tác, nums là số lượng phần tử muốn thao tác, [ele1][, ..., eleN] là các phần tử cụ thể muốn thao tác (có thể không có).

Ví dụ:

var arr = ["PHP", "Laravel", "Vue.js", "Node.js", "React.js"];
arr.splice(1, 0, "Angular"); //thêm Angular vào vị trí có chỉ số 1 (phần tử thứ 2)
console.log(arr); //PHP,Angular,Laravel,Vue.js,Node.js,React.js

arr.splice(1, 2, "Angular"); //xóa 2 phần tử bắt đầu từ chỉ số 1, rồi thêm Angular vào vị trí có chỉ số 1
console.log(arr); //PHP,Angular,Node.js,React.js
arr.splice(1, 2); //xóa 2 phần tử bắt đầu từ chỉ số 1
console.log(arr); //PHP,Node.js,React.js

toString()

Trả về một chuỗi hiển thị các phần tử của mảng.

Ví dụ:

var arr = new Array("đỏ", "da cam", "vàng", "lục");
var str = arr.toString();
console.log(str); //đỏ,da cam,vàng,lục

unshift()

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

Ví dụ:

var arr = ["PHP", "Laravel", "Vue.js", "Node.js", "React.js"];
var len = arr.unshift("JavaScript"); 
console.log(arr); //JavaScript,PHP,Laravel,Vue.js,Node.js,React.js 
console.log(len); //6

Phương thức của mảng trong ES6

Sau đây là một số phương thức mảng mới được giới thiệu trong ES6.

find()

find() cho phép bạn lặp qua một mảng và lấy lại phần tử đầu tiên phù hợp.

Ví dụ

var arr = [1, 2, 3]; 
var firstOdd = arr.find((x) => x % 2 == 1); 
console.log(firstOdd); // 1

findIndex()

findIndex() hoạt động tương tự như find(), nhưng thay vì trả về phần tử tìm được, nó trả về chỉ mục của phần tử đó.

var numbers = [4, 6, 3, 5];
var oddNumber = numbers.findIndex((x) => x % 2 == 1);
console.log(oddNumber); // 2

entries()

Trả về một bộ lặp mảng có thể được sử dụng để lặp qua các khóa và giá trị của mảng và sẽ trả về một mảng các mảng, trong đó mỗi mảng con là một mảng dạng [index, value]. Ví dụ:

var arr = [2, 4, 6]; 
var val = arr.entries(); 
console.log(val.next().value);  
console.log(val.next().value);  
console.log(val.next().value);

Output:

[0,2] 
[1,4] 
[2,6]

Ngoài ra, chúng ta cũng có thể sử dụng toán tử spread để lấy một mảng các mục trong một lần.

var numbers = [1, 2, 3]; 
var val= numbers.entries(); 
console.log([...val]);

Output:

[[0,1],[1,2],[2,3]]

from()

Array.from() cho phép tạo mảng mới từ đối tượng mảng. Chức năng cơ bản của from() là chuyển đổi hai loại giá trị sau thành mảng:

• Giá trị giống như mảng.
• Các giá trị có thể lặp như Set và Map.

Ví dụ

"use strict" 
for (let x of Array.from('V1Study')) {
   console.log(x)
}

Output:

V                               
1                               
S                               
t                               
u
d
y

keys()

Hàm này trả về các chỉ mục của mảng.

Ví dụ

console.log(Array.from(['x', 'y', 'z'].keys()))

Đầu ra sau đây được hiển thị khi thực hiện thành công mã trên.

[ 0, 1, 2 ] 

Array Traversal sử dụng cho vòng lặp for...in

Ta có thể sử dụng vòng lặp for...in để duyệt qua một mảng.

"use strict" 
var nums = [1001,1002,1003,1004] 
for(let j in nums) { 
   console.log(nums[j]) 
}

Output:

1001 
1002 
1003 
1004

Mảng trong JavaScript

JavaScript hỗ trợ các khái niệm sau về mảng:

Mảng đa chiều

JavaScript hỗ trợ các mảng đa chiều. Dạng đơn giản nhất của mảng đa chiều là mảng hai chiều.

Cú pháp khai báo:

var arrName = [ [val1,val2,val3,...],[v1,v2,v3,...] ]

Truy cập phần tử mảng:

Ví dụ:

var arr = [[1,2,3],[7,8,9]]  
console.log(arr[0][0]) 
console.log(arr[0][1]) 
console.log(arr[0][2]) 
console.log(arr[1][0]) 
console.log(arr[1][1]) 
console.log(arr[1][2])

Output:

1
2
3
7
8
9

Truyền mảng cho hàm

Ta có thể truyền cho hàm một con trỏ tới một mảng bằng cách chỉ định tên của mảng mà không có chỉ mục.

Ví dụ:

var arr = new Array("PHP","Laravel","Vue.js","React.js") 
function func(ar) {
   for(var i = 0; i<ar.length; i++) {
      console.log(ar[i])
   }
}
func(arr)

Output:

PHP
Laravel
Vue.js
React.js

Trả về mảng từ các hàm

JavaScript cho phép một hàm trả về một mảng.

Ví dụ:

function func() { 
   return new Array("HTML5","CSS3","JavaScript","SQL") 
} 
var arr = func() 
for(var i in arr) { 
   console.log(arr[i]);
}

Output:

HTML5
CSS3
JavaScript
SQL

Khử cấu trúc mảng

JavaScript hỗ trợ khử cấu trúc trong ngữ cảnh của một mảng.

Ví dụ

var arr = ["Laravel","Vue.js"] 
var[a,b] = arr
console.log(a)
console.log(b)

Output:

Laravel
Vue.js