Array
Duy Văn | 06/02/2025
Giới thiệu
Arrays trong JS là một kiểu dữ liệu đặc biệt, nó là một object chứa một tập hợp các giá trị, tương tự như list của bên Python.
Cú pháp khai báo array:
let a = [1, 2, 3, 4, 5];
const b = ['a', 'b', 'c', 'd', 'e'];
Ngoài ra, có thể sử dụng Array() để tạo arrays, nhưng hành vi của nó rất dễ gây nhầm lần
let a = Array(5);
console.log(a); // [empty x 5]
let b = Array(5, 10, 15);
console.log(b); // [5, 10, 15]
Array trong JS có thể chứa nhiều kiểu dữ liệu khác nhau, không nhất thiết phải cùng kiểu dữ liệu. Ví dụ:
let a = [1, 'a', true, null, undefined];
Để truy cập vào phần tử của array, ta sử dụng index, index bắt đầu từ 0. Ví dụ:
let a = [1, 2, 3, 4, 5];
console.log(a[0]); // 1
console.log(a[1]); // 2
Truy cập vào phần tử cuối thì dùng index .length - 1
let a = [1, 2, 3, 4, 5];
console.log(a[a.length - 1]); // 5
Thay đổi một phần tử array cũng tương tự như Python, chỉ cần gán giá trị mới vào index đó. Ví dụ:
let a = [1, 2, 3, 4, 5];
a[0] = 10;
console.log(a); // [10, 2, 3, 4, 5]
Còn truy cập vào toàn bộ array thì gọi thẳng tên
let a = [1, 2, 3, 4, 5];
console.log(a); // [1, 2, 3, 4, 5]
Kiểu
Kiểu của array là một object chứ không phải là list như Python.
Các method hay gặp
.length- trả về số lượng phần tử trong array.sort()- sắp xếp array - mặc định sắp xếp theo thứ tự alphabet rồi tới số.push(ele)- thêm một phần tử vào cuối array
Ngoài ra, để đưa giá trị vào array, chúng ta có thể gán thẳng vào index, tuy nhiên nó sẽ không báo out of range như bên Python mà sẽ để các phần tử ở giữa là undefined, ví dụ
let a = [1, 2, 3, 4, 5];
a[6] = 10;
console.log(a); // [1, 2, 3, 4, 5, undefined, 10]
Khác biệt của arrays với objects là arrays chỉ dùng index số, còn objects thì có thể dùng index string, tức là bắt cặp key-value. Ví dụ:
let a = {name: 'Duy', age: 25};
let b = ['Duy', 25];
Khi sử dụng arrays, chúng ta cũng có thể hiểu index của từng phần tử chính là tên của nó
Để kiểm tra xem một biến có đang được gán vào arrays không thì không nên dùng typeof do nó sẽ chỉ trả ra object, mà nên dùng Array.isArray(). Ví dụ:
let a = [1, 2, 3, 4, 5];
console.log(Array.isArray(a)); // true
Hoặc so sánh thẳng kiểu của nó với Array
let a = [1, 2, 3, 4, 5];
console.log(a instanceof Array); // true
Object và Array có thể nest vào với nhau như đã thấy ở JSON
Methods
.length
Trả về số lượng phần tử trong array, tương tự như của String (trả về số ký tự)
let a = [1, 2, 3, 4, 5];
console.log(a.length); // 5
toString()
Chuyển array thành string, mỗi phần tử cách nhau bởi dấu ,
let a = [1, 2, 3, 4, 5];
console.log(a.toString()); // '1,2,3,4,5'
Method này sẽ hoạt động với các phần tử không phải là string, nó sẽ tự động chuyển sang string
Nó sẽ chuyển được cả nested array
let a = [1, 2, [3, 4], 5];
Hiểu nôm na như là nó unpack nested array ra thành một array 1 chiều rồi chuyển sang string
at()
Method này không phải là một method mà là một cú pháp mới áp dụng cho cả array, bình thường thì chỉ dùng [] là đủ
let a = [1, 2, 3, 4, 5];
console.log(a[0]); // 1
Vấn đề ở [] trong JS là nó không hỗ trợ index âm, nếu muốn truy cập vào phần tử cuối thì phải dùng .length - 1. at() cho phép truy cập phần tử sử dụng index âm
let a = [1, 2, 3, 4, 5];
console.log(a.at(-1)); // 5
join()
Chuyển array thành string, mỗi phần tử cách nhau bởi dấu , hoặc dấu khác nếu truyền vào. Mạnh hơn toString() ở chỗ có thể tùy chỉnh dấu ngăn cách
let a = [1, 2, 3, 4, 5];
console.log(a.join('-')); // '1-2-3-4-5'
pop()
Xóa phần tử cuối của array và trả về phần tử đó
let a = [1, 2, 3, 4, 5];
console.log(a.pop()); // 5
console.log(a); // [1, 2, 3, 4]
push()
Thêm một phần tử vào cuối array
let a = [1, 2, 3, 4, 5];
a.push(6);
console.log(a); // [1, 2, 3, 4, 5, 6]
shift and unshift
shift() xóa phần tử đầu tiên của array và trả về phần tử đó
let a = [1, 2, 3, 4, 5];
console.log(a.shift()); // 1
console.log(a); // [2, 3, 4, 5]
unshift() thêm một phần tử vào đầu array
let a = [1, 2, 3, 4, 5];
a.unshift(0);
console.log(a); // [0, 1, 2, 3, 4, 5]
delete()
Xóa một phần tử trong array, nhưng không thay đổi index của các phần tử còn lại
let a = [1, 2, 3, 4, 5];
delete a[2];
console.log(a); // [1, 2, empty, 4, 5]
Vấn đề của delete là nó để lại lỗ hổng - tức là ô trống trong array, nên không nên dùng nó. Nếu muốn xóa phần tử thì nên dùng pop() hoặc shift() hoặc splice()
splice()
Xóa một hoặc nhiều phần tử trong array, hoặc thêm một hoặc nhiều phần tử vào array
let a = [1, 2, 3, 4, 5];
a.splice(2, 1); // Xóa 1 phần tử từ index 2
console.log(a); // [1, 2, 4, 5]
let a = [1, 2, 3, 4, 5];
a.splice(2, 0, 10, 20); // Thêm 10, 20 vào index 2
console.log(a); // [1, 2, 10, 20, 3, 4, 5]
Về cơ bản nó sẽ xóa phần tử từ index start đến start + deleteCount rồi thêm các phần tử còn lại vào index start
slice()
Tạo một array mới từ một array đã có, với các phần tử từ index start đến end - 1
let a = [1, 2, 3, 4, 5];
let b = a.slice(1, 3);
console.log(b); // [2, 3]
Search
indexOf() và lastIndexOf()
Trả về index của phần tử đầu tiên tìm thấy trong array, nếu không tìm thấy thì trả về -1
let a = [1, 2, 3, 4, 5];
console.log(a.indexOf(3)); // 2
console.log(a.indexOf(10)); // -1
Ngoài ra lastIndexOf sẽ trả về index của lần cuối cùng phần tử đó xuất hiện
includes()
Kiểm tra xem một phần tử có tồn tại trong array không, trả về true hoặc false, tương tự in của Python
let a = [1, 2, 3, 4, 5];
console.log(a.includes(3)); // true
console.log(a.includes(10)); // false
Sort
sort()
Method này sẽ sắp xếp array, mặc định sắp xếp theo thứ tự alphabet rồi tới số
let a = [5,4,2,3,1];
a.sort();
console.log(a); // [1, 2, 3, 4, 5]
sort sẽ áp dụng lên chính array gốc, vì thế họ tạo ra thêm toSort() để tạo ra một array mới
let a = [5,4,2,3,1];
let b = a.toSort();
console.log(a); // [5, 4, 2, 3, 1]
console.log(b); // [1, 2, 3, 4, 5]
Tuy niên sort không thể hoạt động với số vì nó sort theo string, 25 sẽ đứng trước 3. Để sắp xếp số thì phải truyền vào một function để so sánh
let a = [5, 25, 2, 3, 1];
a.sort((a, b) => a - b);
console.log(a); // [1, 2, 3, 5, 25]
// a.sort(function(a, b) {return a - b;});
Cũng có thể sort theo thứ tự ngược lại
let a = [5, 25, 2, 3, 1];
a.sort((a, b) => b - a);
console.log(a); // [25, 5, 3, 2, 1]
// a.sort(function(a, b) {return b - a;});
Sau khi sort thì lấy ra giá trị đầu chính là min, cuối chính là max
reverse()
Đảo ngược array
let a = [1, 2, 3, 4, 5];
a.reverse();
console.log(a); // [5, 4, 3, 2, 1]
Như sort, reverse sẽ áp dụng lên chính array gốc, nếu muốn tạo ra một array mới thì dùng toReverse()
let a = [1, 2, 3, 4, 5];
let b = a.toReverse();
console.log(a); // [1, 2, 3, 4, 5]
console.log(b); // [5, 4, 3, 2, 1]
Iterate qua Array
forEach()
Duyệt qua từng phần tử của array và thực hiện một hàm cho mỗi phần tử
let a = [1, 2, 3, 4, 5];
a.forEach((ele) => {
console.log(ele);
});
Ngoài ra, function cũng có thể được define ở dưới
let a = [1, 2, 3, 4, 5];
function print(ele) {
console.log(ele);
}
a.forEach(print);
map()
Tạo ra một array mới từ một array đã có, với mỗi phần tử là kết quả của hàm được truyền vào
let a = [1, 2, 3, 4, 5];
let b = a.map((ele) => ele * 2);
console.log(b); // [2, 4, 6, 8, 10]
Hoặc dùng function
let a = [1, 2, 3, 4, 5];
function double(ele) {
return ele * 2;
}
let b = a.map(double);
console.log(b); // [2, 4, 6, 8, 10]
filter()
Tạo ra một array mới từ một array đã có, với các phần tử là kết quả của hàm trả về true
let a = [1, 2, 3, 4, 5];
let b = a.filter((ele) => ele % 2 === 0);
console.log(b); // [2, 4]
Hoặc dùng function
let a = [1, 2, 3, 4, 5];
function isEven(ele) {
return ele % 2 === 0;
}
let b = a.filter(isEven);
console.log(b); // [2, 4]
reduce()
Tính toán một giá trị duy nhất từ một array, với kết quả của mỗi lần tính toán là tham số thứ 2 của hàm
let a = [1, 2, 3, 4, 5];
let b = a.reduce((acc, ele) => acc + ele, 0);
console.log(b); // 15
Hoặc dùng function
let a = [1, 2, 3, 4, 5];
function sum(acc, ele) {
return acc + ele;
}
let b = a.reduce(sum);
console.log(b); // 15
every()
Kiểm tra xem tất cả phần tử của array có thoả mãn điều kiện không, trả về true hoặc false
let a = [1, 2, 3, 4, 5];
let b = a.every((ele) => ele > 0);
console.log(b); // true
Hoặc dùng function
let a = [1, 2, 3, 4, 5];
function isPositive(ele) {
return ele > 0;
}
let b = a.every(isPositive);
console.log(b); // true