Tổng hợp Array (Mảng) trong JavaScript

Tổng hợp Array (Mảng) trong JavaScript

Tổng hợp kiến thức Array (Mảng) trong JavaScript từ cơ bản đến nâng cao: cách tạo, truy cập, thêm xóa, duyệt, tìm kiếm, lọc, sắp xếp và xử lý dữ liệu hiệu quả, chi tiết như nào hãy cùng chúng tôi phân tích:

Array, hay còn gọi là mảng, là một trong những kiểu dữ liệu được sử dụng thường xuyên nhất khi lập trình JavaScript. Nếu biến thông thường giúp lưu một giá trị, thì mảng cho phép bạn tập hợp nhiều giá trị vào cùng một cấu trúc để dễ dàng quản lý, truy xuất và xử lý.

Từ danh sách sản phẩm, danh sách người dùng, các bài viết, kết quả tìm kiếm cho đến dữ liệu nhận từ API, rất nhiều dữ liệu trong ứng dụng JavaScript đều được biểu diễn dưới dạng mảng. Vì vậy, hiểu cách tạo mảng, truy cập phần tử, thêm xóa dữ liệu, duyệt mảng và sử dụng các phương thức xử lý mảng sẽ giúp bạn viết code ngắn gọn và hiệu quả hơn.

Bài viết này tổng hợp những kiến thức quan trọng về Array trong JavaScript theo hướng từ cơ bản đến nâng cao. Thay vì chỉ liệt kê các phương thức, nội dung tập trung vào cách tư duy khi làm việc với mảng, trường hợp nên sử dụng từng phương thức và những điểm dễ gây nhầm lẫn trong quá trình lập trình.

Tổng hợp Array (Mảng) trong JavaScript

Array trong JavaScript là gì?

Array là một cấu trúc dữ liệu cho phép lưu trữ nhiều giá trị theo một thứ tự nhất định. Mỗi phần tử trong mảng được xác định bằng một vị trí gọi là chỉ mục, hay index.

Điểm đặc biệt là index của mảng trong JavaScript bắt đầu từ 0. Điều đó có nghĩa phần tử đầu tiên nằm ở vị trí 0, phần tử thứ hai nằm ở vị trí 1 và cứ tiếp tục như vậy.

const fruits = ["Táo", "Cam", "Xoài"];

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

Kết quả:

Táo
Cam
Xoài

Trong ví dụ trên, mảng fruits có ba phần tử. Phần tử đầu tiên là "Táo" với index bằng 0, phần tử cuối cùng là "Xoài" với index bằng 2.

Cách tạo một mảng

JavaScript cung cấp nhiều cách để tạo Array. Trong thực tế, cách sử dụng dấu ngoặc vuông là phương pháp phổ biến và dễ đọc nhất.

Tạo mảng bằng cú pháp ngoặc vuông

Bạn có thể tạo mảng bằng cách đặt các giá trị bên trong cặp dấu [] và ngăn cách chúng bằng dấu phẩy.

const colors = ["Đỏ", "Xanh", "Vàng"];

console.log(colors);

Mảng có thể chứa nhiều kiểu dữ liệu khác nhau, chẳng hạn chuỗi, số, boolean, object hoặc thậm chí một mảng khác.

const data = [
    "Web Mới",
    2026,
    true,
    { category: "JavaScript" },
    [1, 2, 3]
];

Tuy nhiên, trong các dự án thực tế, việc giữ cho một mảng có cấu trúc dữ liệu nhất quán thường giúp code dễ hiểu và dễ bảo trì hơn.

Tạo mảng bằng Array constructor

Bạn cũng có thể sử dụng Array() để tạo mảng.

const fruits = new Array("Táo", "Cam", "Xoài");

console.log(fruits);

Cách viết này hợp lệ nhưng thường không được ưu tiên khi chỉ cần tạo một mảng thông thường. Cú pháp ngoặc vuông thường trực quan và ngắn gọn hơn.

Tạo mảng bằng Array.of()

Phương thức Array.of() tạo một mảng từ các đối số được truyền vào.

const numbers = Array.of(10, 20, 30);

console.log(numbers);

Phương thức này đặc biệt hữu ích khi muốn tạo mảng từ một danh sách giá trị mà không phải quan tâm đến cách constructor Array() xử lý tham số.

Tạo mảng bằng Array.from()

Array.from() cho phép tạo một mảng mới từ một đối tượng có thể lặp hoặc có cấu trúc giống mảng.

const text = "JavaScript";

const characters = Array.from(text);

console.log(characters);

Kết quả là một mảng chứa từng ký tự của chuỗi.

["J", "a", "v", "a", "S", "c", "r", "i", "p", "t"]

Đây là phương thức thường gặp khi cần chuyển đổi dữ liệu dạng iterable hoặc array-like thành Array thực sự.

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

Để lấy một phần tử, bạn sử dụng index đặt trong cặp dấu ngoặc vuông.

const users = ["An", "Bình", "Cường"];

console.log(users[0]);
console.log(users[2]);

Nếu truy cập một index không tồn tại, JavaScript sẽ trả về undefined.

console.log(users[10]);

Kết quả:

undefined

Truy cập phần tử cuối cùng

Cách truyền thống để lấy phần tử cuối cùng là sử dụng độ dài của mảng trừ đi 1.

const fruits = ["Táo", "Cam", "Xoài"];

const lastFruit = fruits[fruits.length - 1];

console.log(lastFruit);

Từ các phiên bản JavaScript hiện đại, bạn cũng có thể sử dụng at().

const fruits = ["Táo", "Cam", "Xoài"];

console.log(fruits.at(-1));

Việc sử dụng index âm với at() giúp lấy phần tử tính từ cuối mảng một cách trực quan hơn.

Thay đổi giá trị phần tử

Array được tạo bằng const vẫn có thể thay đổi các phần tử bên trong. Từ khóa const chỉ ngăn việc gán lại biến sang một mảng hoàn toàn khác, chứ không khóa nội dung của mảng.

const fruits = ["Táo", "Cam", "Xoài"];

fruits[1] = "Dưa hấu";

console.log(fruits);

Kết quả:

["Táo", "Dưa hấu", "Xoài"]

Đây là một điểm quan trọng cần phân biệt giữa việc thay đổi nội dung của một Array và việc gán lại biến chứa Array đó.

Kiểm tra độ dài của mảng

Thuộc tính length cho biết số lượng phần tử hiện có trong mảng.

const fruits = ["Táo", "Cam", "Xoài"];

console.log(fruits.length);

Kết quả là:

3

length không phải là index của phần tử cuối cùng. Nếu mảng có 3 phần tử thì index cuối cùng là 2, còn length là 3.

Bạn cũng có thể thay đổi trực tiếp thuộc tính length. Đây là một cách có thể dùng để cắt ngắn mảng.

const numbers = [1, 2, 3, 4, 5];

numbers.length = 3;

console.log(numbers);

Kết quả:

[1, 2, 3]

Tuy nhiên, cần thận trọng khi thay đổi length vì các phần tử bị loại bỏ theo cách này sẽ không còn trong mảng.

Thêm phần tử vào Array

JavaScript cung cấp nhiều cách để thêm dữ liệu vào mảng. Tùy vị trí muốn thêm mà bạn có thể chọn push(), unshift() hoặc các phương thức khác.

Thêm phần tử vào cuối bằng push()

push() thêm một hoặc nhiều phần tử vào cuối mảng.

const fruits = ["Táo", "Cam"];

fruits.push("Xoài");

console.log(fruits);

Kết quả:

["Táo", "Cam", "Xoài"]

Phương thức này làm thay đổi trực tiếp mảng ban đầu và trả về độ dài mới của mảng.

const fruits = ["Táo", "Cam"];

const newLength = fruits.push("Xoài");

console.log(newLength);

Thêm phần tử vào đầu bằng unshift()

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

const fruits = ["Cam", "Xoài"];

fruits.unshift("Táo");

console.log(fruits);

Kết quả:

["Táo", "Cam", "Xoài"]

Giống push(), unshift() cũng thay đổi mảng ban đầu và trả về độ dài mới.

Xóa phần tử khỏi mảng

Để xóa dữ liệu, bạn có thể sử dụng pop(), shift(), splice() hoặc lựa chọn các phương pháp không làm thay đổi mảng tùy theo mục đích.

Xóa phần tử cuối bằng pop()

pop() loại bỏ phần tử cuối cùng và trả về chính phần tử vừa bị xóa.

const fruits = ["Táo", "Cam", "Xoài"];

const removedFruit = fruits.pop();

console.log(removedFruit);
console.log(fruits);

Kết quả:

Xoài
["Táo", "Cam"]

Xóa phần tử đầu bằng shift()

shift() loại bỏ phần tử đầu tiên của mảng.

const fruits = ["Táo", "Cam", "Xoài"];

const removedFruit = fruits.shift();

console.log(removedFruit);
console.log(fruits);

Kết quả:

Táo
["Cam", "Xoài"]

Xóa hoặc thay thế phần tử bằng splice()

splice() là một trong những phương thức linh hoạt nhất khi thao tác trực tiếp với mảng. Nó có thể xóa, thêm hoặc thay thế phần tử tại một vị trí cụ thể.

Cú pháp cơ bản:

array.splice(start, deleteCount, item1, item2, ...);

Ví dụ xóa một phần tử bắt đầu từ index 1:

const fruits = ["Táo", "Cam", "Xoài"];

fruits.splice(1, 1);

console.log(fruits);

Kết quả:

["Táo", "Xoài"]

Bạn cũng có thể dùng splice() để thay thế dữ liệu.

const fruits = ["Táo", "Cam", "Xoài"];

fruits.splice(1, 1, "Dưa hấu");

console.log(fruits);

Kết quả:

["Táo", "Dưa hấu", "Xoài"]

Ghép và tách mảng

Ghép nhiều mảng bằng concat()

concat() tạo ra một mảng mới bằng cách nối các mảng hoặc giá trị khác vào mảng hiện tại.

const first = [1, 2];

const second = [3, 4];

const result = first.concat(second);

console.log(result);

Kết quả:

[1, 2, 3, 4]

Điểm đáng chú ý là concat() không thay đổi mảng ban đầu.

Tách một phần mảng bằng slice()

slice() tạo ra một mảng mới chứa một phần dữ liệu được lấy từ mảng ban đầu.

const numbers = [10, 20, 30, 40, 50];

const result = numbers.slice(1, 4);

console.log(result);

Kết quả:

[20, 30, 40]

Tham số đầu tiên là vị trí bắt đầu, còn tham số thứ hai là vị trí kết thúc nhưng không bao gồm phần tử tại vị trí đó.

Đây là điểm dễ nhầm: slice() không bao gồm index cuối trong kết quả.

Duyệt qua các phần tử

Khi cần xử lý từng phần tử trong mảng, JavaScript cung cấp nhiều cách khác nhau. Mỗi phương pháp phù hợp với một mục đích nhất định.

Sử dụng vòng lặp for

Vòng lặp for phù hợp khi bạn cần kiểm soát index hoặc điều kiện lặp một cách chi tiết.

const fruits = ["Táo", "Cam", "Xoài"];

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

Sử dụng for...of

for...of giúp lấy trực tiếp giá trị của từng phần tử.

const fruits = ["Táo", "Cam", "Xoài"];

for (const fruit of fruits) {
    console.log(fruit);
}

Cách viết này thường dễ đọc khi bạn chỉ cần xử lý giá trị mà không cần quan tâm đến index.

Sử dụng forEach()

forEach() thực thi một hàm callback cho từng phần tử trong mảng.

const fruits = ["Táo", "Cam", "Xoài"];

fruits.forEach(function(fruit, index) {
    console.log(index, fruit);
});

Bạn cũng có thể viết bằng arrow function:

fruits.forEach((fruit, index) => {
    console.log(index, fruit);
});

forEach() rất phù hợp khi bạn muốn thực hiện một hành động trên từng phần tử. Tuy nhiên, nó không phải lựa chọn phù hợp nếu mục tiêu của bạn là tạo ra một mảng mới, tìm một phần tử hoặc dừng vòng lặp ngay khi thỏa mãn điều kiện.

Tìm kiếm dữ liệu trong mảng

Kiểm tra phần tử bằng includes()

includes() kiểm tra xem một giá trị có tồn tại trong mảng hay không và trả về true hoặc false.

const fruits = ["Táo", "Cam", "Xoài"];

console.log(fruits.includes("Cam"));
console.log(fruits.includes("Dưa hấu"));

Phương thức này phù hợp với các trường hợp kiểm tra sự tồn tại đơn giản.

Tìm index bằng indexOf()

indexOf() trả về vị trí đầu tiên tìm thấy giá trị. Nếu không tìm thấy, kết quả là -1.

const fruits = ["Táo", "Cam", "Xoài"];

console.log(fruits.indexOf("Cam"));
console.log(fruits.indexOf("Dưa hấu"));

Tìm phần tử bằng find()

find() phù hợp khi cần tìm một phần tử dựa trên điều kiện.

const products = [
    { name: "Laptop", price: 2000 },
    { name: "Chuột", price: 50 },
    { name: "Bàn phím", price: 100 }
];

const product = products.find(item => item.price > 100);

console.log(product);

find() chỉ trả về phần tử đầu tiên thỏa mãn điều kiện. Nếu không có phần tử phù hợp, kết quả là undefined.

Tìm vị trí bằng findIndex()

Nếu cần vị trí của phần tử thay vì chính phần tử đó, bạn có thể dùng findIndex().

const numbers = [10, 20, 30, 40];

const index = numbers.findIndex(number => number > 25);

console.log(index);

Kết quả là 2 vì số 30 là phần tử đầu tiên lớn hơn 25.

Tìm phần tử cuối cùng bằng findLast()

Trong JavaScript hiện đại, findLast() cho phép tìm phần tử cuối cùng thỏa mãn điều kiện.

const numbers = [10, 20, 30, 40, 50];

const result = numbers.findLast(number => number > 25);

console.log(result);

Khác với find(), phương thức này tìm từ cuối mảng về đầu mảng.

Lọc dữ liệu với filter()

filter() tạo ra một mảng mới gồm tất cả phần tử đáp ứng điều kiện được chỉ định.

const numbers = [1, 2, 3, 4, 5, 6];

const evenNumbers = numbers.filter(number => number % 2 === 0);

console.log(evenNumbers);

Kết quả:

[2, 4, 6]

Đây là phương thức rất hữu ích khi xử lý dữ liệu thực tế, chẳng hạn lọc sản phẩm theo giá, lọc bài viết theo danh mục hoặc lọc người dùng theo trạng thái.

const products = [
    { name: "Laptop", price: 2000 },
    { name: "Chuột", price: 50 },
    { name: "Màn hình", price: 500 }
];

const affordableProducts = products.filter(product => product.price < 1000);

console.log(affordableProducts);

Điểm quan trọng là filter() không làm thay đổi mảng gốc mà tạo ra một mảng mới.

Biến đổi dữ liệu với map()

map() tạo một mảng mới bằng cách biến đổi từng phần tử theo logic bạn cung cấp.

const numbers = [1, 2, 3, 4];

const doubled = numbers.map(number => number * 2);

console.log(doubled);

Kết quả:

[2, 4, 6, 8]

Ví dụ xử lý một danh sách object:

const users = [
    { name: "An", age: 20 },
    { name: "Bình", age: 25 }
];

const names = users.map(user => user.name);

console.log(names);

Kết quả:

["An", "Bình"]

Một lỗi phổ biến là dùng map() chỉ để thực hiện một hành động phụ mà không quan tâm đến mảng kết quả. Trong trường hợp đó, forEach() thường thể hiện đúng mục đích hơn.

Tính toán tổng hợp với reduce()

reduce() là một trong những phương thức mạnh nhất của Array. Nó cho phép bạn duyệt qua mảng và tích lũy dữ liệu để tạo ra một kết quả cuối cùng.

Ví dụ tính tổng:

const numbers = [10, 20, 30, 40];

const total = numbers.reduce((sum, number) => {
    return sum + number;
}, 0);

console.log(total);

Kết quả:

100

Trong ví dụ này, giá trị 0 là giá trị khởi tạo của biến tích lũy sum. Mỗi lần lặp, giá trị hiện tại được cộng thêm vào tổng.

reduce() không chỉ dùng để tính tổng. Nó còn có thể được dùng để đếm số lượng, nhóm dữ liệu, tạo object hoặc thực hiện nhiều dạng tổng hợp khác.

Đếm số lần xuất hiện

Ví dụ dưới đây sử dụng reduce() để đếm số lần mỗi loại trái cây xuất hiện.

const fruits = ["Táo", "Cam", "Táo", "Xoài", "Cam", "Táo"];

const counts = fruits.reduce((result, fruit) => {
    result[fruit] = (result[fruit] || 0) + 1;
    return result;
}, {});

console.log(counts);

Kết quả:

{
    Táo: 3,
    Cam: 2,
    Xoài: 1
}

Kiểm tra điều kiện với some() và every()

Kiểm tra ít nhất một phần tử bằng some()

some() trả về true nếu có ít nhất một phần tử thỏa mãn điều kiện.

const numbers = [1, 3, 5, 8];

const hasEvenNumber = numbers.some(number => number % 2 === 0);

console.log(hasEvenNumber);

Kết quả là true vì mảng có số 8 là số chẵn.

Kiểm tra toàn bộ phần tử bằng every()

every() chỉ trả về true khi tất cả phần tử đều đáp ứng điều kiện.

const numbers = [2, 4, 6, 8];

const allEven = numbers.every(number => number % 2 === 0);

console.log(allEven);

Có thể hiểu đơn giản:

  • some(): Có ít nhất một phần tử đúng không?
  • every(): Tất cả phần tử đều đúng không?

Sắp xếp phần tử với sort()

sort() sắp xếp các phần tử trong mảng. Đây là phương thức có một điểm dễ gây bất ngờ: nếu không cung cấp hàm so sánh, JavaScript sẽ xử lý các phần tử theo thứ tự chuỗi.

const numbers = [10, 2, 30, 4];

numbers.sort();

console.log(numbers);

Kết quả có thể không giống như mong đợi khi bạn muốn sắp xếp số theo giá trị.

Để sắp xếp số tăng dần, hãy cung cấp hàm so sánh:

const numbers = [10, 2, 30, 4];

numbers.sort((a, b) => a - b);

console.log(numbers);

Sắp xếp giảm dần:

const numbers = [10, 2, 30, 4];

numbers.sort((a, b) => b - a);

console.log(numbers);

sort() làm thay đổi mảng ban đầu. Nếu muốn giữ nguyên dữ liệu gốc, bạn có thể tạo bản sao trước khi sắp xếp.

const numbers = [10, 2, 30, 4];

const sortedNumbers = [...numbers].sort((a, b) => a - b);

console.log(numbers);
console.log(sortedNumbers);

Đảo ngược mảng với reverse()

reverse() đảo ngược thứ tự các phần tử và làm thay đổi trực tiếp mảng ban đầu.

const numbers = [1, 2, 3, 4, 5];

numbers.reverse();

console.log(numbers);

Nếu không muốn thay đổi mảng gốc, có thể tạo bản sao trước khi đảo ngược.

const numbers = [1, 2, 3, 4, 5];

const reversed = [...numbers].reverse();

console.log(reversed);

Nối các phần tử thành chuỗi với join()

join() kết hợp các phần tử trong mảng thành một chuỗi. Bạn có thể truyền ký tự phân cách tùy ý.

const fruits = ["Táo", "Cam", "Xoài"];

const result = fruits.join(", ");

console.log(result);

Kết quả:

Táo, Cam, Xoài

Phương thức này thường hữu ích khi cần chuyển một danh sách thành nội dung văn bản.

Chuyển đổi chuỗi thành mảng với split()

split() là phương thức của String nhưng thường được sử dụng kết hợp với Array. Nó giúp tách chuỗi thành một mảng dựa trên ký tự phân cách.

const text = "HTML,CSS,JavaScript";

const technologies = text.split(",");

console.log(technologies);

Kết quả:

["HTML", "CSS", "JavaScript"]

Điều này tạo thành một cặp thao tác rất phổ biến:

  • split() biến chuỗi thành mảng.
  • join() biến các phần tử của mảng thành chuỗi.

Gộp mảng lồng nhau với flat()

Khi một mảng chứa các mảng con, bạn có thể sử dụng flat() để làm phẳng cấu trúc.

const numbers = [1, [2, 3], [4, 5]];

const result = numbers.flat();

console.log(result);

Kết quả:

[1, 2, 3, 4, 5]

Bạn cũng có thể chỉ định độ sâu cần làm phẳng.

const numbers = [1, [2, [3, [4]]]];

const result = numbers.flat(2);

console.log(result);

Kết hợp map() và flat() bằng flatMap()

flatMap() thực hiện biến đổi tương tự map() rồi làm phẳng kết quả ở một cấp.

const numbers = [1, 2, 3];

const result = numbers.flatMap(number => [number, number * 2]);

console.log(result);

Phương thức này hữu ích khi mỗi phần tử đầu vào có thể tạo ra nhiều phần tử đầu ra.

Sao chép mảng đúng cách

Một trong những vấn đề quan trọng khi làm việc với Array là hiểu cách JavaScript xử lý tham chiếu.

Nếu bạn gán một mảng cho biến khác bằng dấu =, hai biến sẽ cùng tham chiếu đến một Array.

const original = [1, 2, 3];

const copy = original;

copy.push(4);

console.log(original);

Kết quả:

[1, 2, 3, 4]

Điều này xảy ra vì copy không phải là một bản sao độc lập. Nó chỉ là một biến khác cùng trỏ đến mảng ban đầu.

Sao chép bằng spread operator

Với mảng một cấp, spread operator là cách phổ biến để tạo một bản sao mới.

const original = [1, 2, 3];

const copy = [...original];

copy.push(4);

console.log(original);
console.log(copy);

Hai mảng lúc này là hai Array khác nhau.

Sao chép bằng slice()

Bạn cũng có thể dùng slice() không có tham số để tạo bản sao của mảng.

const original = [1, 2, 3];

const copy = original.slice();

console.log(copy);

Tuy nhiên, cả spread operator và slice() đều chỉ tạo bản sao nông, hay còn gọi là shallow copy. Nếu mảng chứa object hoặc mảng con, các cấu trúc bên trong vẫn có thể dùng chung tham chiếu.

So sánh hai mảng

Không nên dùng toán tử === để kiểm tra hai Array có cùng nội dung hay không.

const first = [1, 2, 3];

const second = [1, 2, 3];

console.log(first === second);

Kết quả là false vì đây là hai đối tượng Array khác nhau trong bộ nhớ.

Nếu muốn so sánh nội dung, bạn cần xây dựng logic phù hợp với dữ liệu. Với mảng chỉ chứa giá trị nguyên thủy, có thể kết hợp length, every() và index.

const first = [1, 2, 3];

const second = [1, 2, 3];

const isEqual =
    first.length === second.length &&
    first.every((value, index) => value === second[index]);

console.log(isEqual);

Đối với mảng chứa object hoặc cấu trúc lồng nhau, việc so sánh sẽ phức tạp hơn và cần lựa chọn chiến lược phù hợp với dữ liệu thực tế.

Destructuring với Array

Array destructuring cho phép lấy các phần tử trong mảng và gán chúng vào các biến một cách ngắn gọn.

const colors = ["Đỏ", "Xanh", "Vàng"];

const [first, second, third] = colors;

console.log(first);
console.log(second);
console.log(third);

Bạn cũng có thể bỏ qua một phần tử.

const colors = ["Đỏ", "Xanh", "Vàng"];

const [first, , third] = colors;

console.log(first);
console.log(third);

Lấy phần còn lại bằng rest

Ký hiệu ba dấu chấm có thể được dùng trong destructuring để gom các phần tử còn lại.

const numbers = [1, 2, 3, 4, 5];

const [first, second, ...rest] = numbers;

console.log(first);
console.log(second);
console.log(rest);

Kết quả của rest là một mảng mới chứa các phần tử còn lại.

Spread operator với Array

Spread operator giúp trải các phần tử của mảng ra trong một biểu thức. Đây là công cụ rất hữu ích khi kết hợp hoặc sao chép dữ liệu.

const first = [1, 2];

const second = [3, 4];

const combined = [...first, ...second];

console.log(combined);

Bạn cũng có thể thêm phần tử mới khi tạo mảng:

const numbers = [2, 3, 4];

const result = [1, ...numbers, 5];

console.log(result);

Array và object có gì khác nhau?

Array và Object đều có thể dùng để lưu trữ nhiều dữ liệu nhưng chúng phục vụ những mục đích khác nhau.

Đặc điểm Array Object
Cách truy cập Thông qua index Thông qua key
Thứ tự Phù hợp với dữ liệu có thứ tự Phù hợp với dữ liệu dạng thuộc tính
Ví dụ Danh sách sản phẩm Thông tin một sản phẩm
Cấu trúc ["Táo", "Cam"] { name: "Táo", price: 20 }

Trong ứng dụng thực tế, hai cấu trúc này thường kết hợp với nhau. Chẳng hạn, danh sách sản phẩm có thể là một Array, trong khi mỗi sản phẩm bên trong lại là một Object.

const products = [
    {
        name: "Laptop",
        price: 2000
    },
    {
        name: "Bàn phím",
        price: 100
    }
];

Các phương thức Array thường dùng

Phương thức Công dụng chính Thay đổi mảng gốc
push() Thêm phần tử vào cuối Có
pop() Xóa phần tử cuối Có
unshift() Thêm phần tử vào đầu Có
shift() Xóa phần tử đầu Có
splice() Thêm, xóa hoặc thay thế tại vị trí cụ thể Có
slice() Lấy một phần mảng Không
concat() Nối các mảng Không
map() Biến đổi từng phần tử Không
filter() Lọc phần tử theo điều kiện Không
find() Tìm phần tử đầu tiên phù hợp Không
findIndex() Tìm index của phần tử phù hợp Không
some() Kiểm tra có ít nhất một phần tử phù hợp Không
every() Kiểm tra toàn bộ phần tử Không
reduce() Tổng hợp dữ liệu thành một kết quả Không
includes() Kiểm tra giá trị có tồn tại Không
indexOf() Tìm vị trí của giá trị Không
sort() Sắp xếp phần tử Có
reverse() Đảo ngược thứ tự Có
join() Chuyển mảng thành chuỗi Không
flat() Làm phẳng mảng lồng nhau Không

Cách chọn phương thức Array phù hợp

Khi làm việc với mảng, điều quan trọng không phải là ghi nhớ tất cả phương thức mà là xác định đúng mục tiêu cần thực hiện.

  • Nếu muốn thêm dữ liệu vào cuối, dùng push().
  • Nếu muốn xóa phần tử cuối, dùng pop().
  • Nếu muốn thêm dữ liệu vào đầu, dùng unshift().
  • Nếu muốn xóa phần tử đầu, dùng shift().
  • Nếu muốn lấy một phần mảng mà không sửa dữ liệu gốc, dùng slice().
  • Nếu muốn thay đổi từng phần tử và tạo mảng mới, dùng map().
  • Nếu muốn giữ lại các phần tử thỏa mãn điều kiện, dùng filter().
  • Nếu muốn tìm một phần tử đầu tiên phù hợp, dùng find().
  • Nếu muốn kiểm tra một giá trị có tồn tại, dùng includes().
  • Nếu muốn kiểm tra có ít nhất một phần tử thỏa điều kiện, dùng some().
  • Nếu muốn kiểm tra mọi phần tử đều thỏa điều kiện, dùng every().
  • Nếu muốn tính toán hoặc tổng hợp toàn bộ dữ liệu thành một kết quả, dùng reduce().
  • Nếu muốn sắp xếp dữ liệu, dùng sort() và chú ý đến hàm so sánh khi xử lý số.
  • Nếu muốn thay đổi trực tiếp một đoạn dữ liệu trong mảng, cân nhắc splice().

Những lỗi thường gặp khi làm việc với Array

Nhầm giữa index và length

Với một mảng có 5 phần tử, length bằng 5 nhưng index cuối cùng chỉ là 4.

const numbers = [10, 20, 30, 40, 50];

console.log(numbers.length);
console.log(numbers[numbers.length - 1]);

Quên rằng sort() mặc định xử lý theo chuỗi

Khi sắp xếp số, hãy cung cấp hàm so sánh để có kết quả đúng theo giá trị số.

numbers.sort((a, b) => a - b);

Dùng map() nhưng không trả về giá trị

Callback của map() cần trả về giá trị để tạo ra phần tử tương ứng trong mảng mới. Nếu dùng dấu ngoặc nhọn mà không có return, kết quả có thể là mảng chứa undefined.

const numbers = [1, 2, 3];

const result = numbers.map(number => {
    number * 2;
});

console.log(result);

Cách viết đúng:

const numbers = [1, 2, 3];

const result = numbers.map(number => {
    return number * 2;
});

console.log(result);

Nhầm lẫn giữa slice() và splice()

Hai tên phương thức khá giống nhau nhưng cách hoạt động khác biệt.

  • slice() lấy ra một phần mảng và không sửa mảng gốc.
  • splice() có thể thêm, xóa hoặc thay thế dữ liệu và làm thay đổi mảng gốc.

Gán mảng trực tiếp và tưởng rằng đã tạo bản sao

Việc viết const copy = original không tạo ra một bản sao độc lập. Nếu cần một bản sao nông, có thể sử dụng spread operator hoặc slice().

Nguyên tắc sử dụng Array hiệu quả

Khi code JavaScript ngày càng lớn, cách bạn thao tác với mảng có ảnh hưởng trực tiếp đến khả năng đọc và bảo trì chương trình. Một đoạn code ngắn không phải lúc nào cũng là đoạn code tốt nếu nó khiến người khác khó hiểu mục đích.

Hãy chọn phương thức dựa trên ý nghĩa của thao tác. Nếu đang lọc dữ liệu, hãy ưu tiên filter(). Nếu đang chuyển đổi dữ liệu, hãy nghĩ đến map(). Nếu đang tổng hợp nhiều giá trị thành một kết quả, reduce() thường là lựa chọn phù hợp.

Ngoài ra, cần chú ý những phương thức làm thay đổi mảng gốc như push(), pop(), shift(), unshift(), splice(), sort() và reverse(). Trong những tình huống cần giữ nguyên dữ liệu ban đầu, hãy cân nhắc tạo bản sao trước khi thao tác.

Với các ứng dụng hiện đại, đặc biệt là khi làm việc với trạng thái dữ liệu, việc hạn chế thay đổi trực tiếp dữ liệu gốc thường giúp chương trình dễ dự đoán hơn. Những phương thức như map(), filter(), slice() và concat() thường hữu ích trong các trường hợp cần tạo dữ liệu mới thay vì sửa dữ liệu cũ.

Kết luận

Array là nền tảng quan trọng trong JavaScript và xuất hiện ở gần như mọi ứng dụng có xử lý dữ liệu. Từ những thao tác đơn giản như thêm, xóa, truy cập phần tử cho đến các bài toán phức tạp hơn như lọc dữ liệu, biến đổi danh sách, tìm kiếm, sắp xếp và tổng hợp, Array đều có những công cụ phù hợp.

Thay vì cố gắng ghi nhớ tất cả phương thức cùng lúc, bạn nên nắm chắc nhóm thao tác thường xuyên sử dụng như push(), pop(), slice(), splice(), map(), filter(), find(), some(), every() và reduce(). Khi hiểu rõ phương thức nào làm thay đổi mảng gốc và phương thức nào tạo ra dữ liệu mới, bạn sẽ tránh được nhiều lỗi khó phát hiện trong quá trình lập trình.

Quan trọng hơn, hãy tập trung vào cách lựa chọn công cụ theo mục đích. Khi tư duy theo hướng đó, Array không còn là danh sách dài các phương thức cần học thuộc mà trở thành một bộ công cụ linh hoạt để tổ chức và xử lý dữ liệu trong JavaScript.

  • ★★★★★ ★★★★★
  • 0 Bình luận
Trần Thị Vân | Content Creator Web Mới
Trần Thị Vân
Trần Thị Vân là Content Creator tại Web Mới, phụ trách nghiên cứu, biên soạn nội dung và chia sẻ kiến thức về website, SEO, lập trình cùng các xu hướng công nghệ
Chia sẻ nội dung đánh giá của bạn về Tổng hợp Array (Mảng) trong JavaScript
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
Đánh giá của bạn
Tên *
Email
Số điện thoại *
Bình luận, Hỏi đáp
Đăng ký tư vấn thiết kế website
Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn