Nhiều lập trình viên khi mới bắt đầu viết Javascript sẽ thường gặp khó khăn với Array (mảng). Dù là một cấu trúc dữ liệu quan trọng nhưng lại rất khó sử dụng vì chứa rất nhiều kiểu dữ liệu khác nhau. Vậy array là gì mà lại quan trọng đến vậy và cách sử dụng như thế nào? Cùng tìm hiểu trong bài viết này nhé!

Định nghĩa về Array Javascript

Array (mảng) trong JavaScript là một kiểu dữ liệu đặc biệt, cho phép lưu trữ một tập hợp các giá trị. Mỗi phần tử trong mảng có một chỉ số (index), giúp chúng ta truy cập trực tiếp tới phần tử đó. Cấu trúc mảng trong JavaScript có thể chứa bất kỳ kiểu dữ liệu nào, từ số, chuỗi cho đến các đối tượng hay mảng khác. 

Một đặc điểm nổi bật của mảng trong JavaScript là nó có thể chứa các phần tử có kiểu dữ liệu khác nhau trong cùng một mảng. Hãy tưởng tượng một ngăn kéo chứa nhiều chiếc bút cùng loại. Ngăn kéo đó chính là mảng, và các chiếc bút là các phần tử trong mảng. Ví dụ, bạn có thể tạo một mảng chứa cả số và chuỗi như sau:

let arr = [1, "hello", true, [2, 3]];

Trong ví dụ trên, mảng arr chứa bốn phần tử, bao gồm một số, một chuỗi, một giá trị boolean và một mảng con. Điều này cho thấy tính linh hoạt và tiện dụng của mảng trong JavaScript.

Một số đặc điểm của Array trong Javascript

Mảng (array) trong JavaScript không chỉ là một cấu trúc dữ liệu đơn giản mà còn mang nhiều đặc điểm đặc biệt giúp cho việc xử lý dữ liệu trở nên linh hoạt và mạnh mẽ hơn. Dưới đây là một số đặc điểm nổi bật của mảng trong JavaScript:

Chỉ số bắt đầu từ 0

Một trong những đặc điểm đầu tiên và quan trọng nhất của mảng trong JavaScript là chỉ số (index). Các phần tử trong mảng được chỉ định vị trí thông qua chỉ số và chỉ số này luôn bắt đầu từ 0, không phải từ 1. Điều này có nghĩa là phần tử đầu tiên trong mảng sẽ có chỉ số là 0, phần tử thứ hai có chỉ số 1, và cứ thế tiếp tục.

Đây là một điểm khác biệt quan trọng khi làm việc với mảng trong JavaScript so với một số ngôn ngữ lập trình khác, nơi các chỉ số có thể bắt đầu từ 1.

Ví dụ:

let fruits = ["Apple", "Banana", "Cherry"];

console.log(fruits[0]); // "Apple"

console.log(fruits[1]); // "Banana"

Có thể chứa nhiều kiểu dữ liệu khác nhau

Mảng trong JavaScript rất linh hoạt khi có thể chứa bất kỳ loại dữ liệu nào, bao gồm các kiểu dữ liệu cơ bản như số, chuỗi, boolean, và các đối tượng phức tạp như mảng con, hàm, hoặc đối tượng. Điều này giúp lập trình viên có thể lưu trữ và xử lý dữ liệu đa dạng trong cùng một mảng.

Ví dụ:

let mixedArray = [42, "Hello", true, [1, 2, 3], {name: "John", age: 30}];

console.log(mixedArray[0]); // 42

console.log(mixedArray[1]); // "Hello"

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

console.log(mixedArray[4].name); // "John"

Dễ dàng thay đổi kích thước

Một đặc điểm đặc biệt của mảng trong JavaScript là bạn có thể thay đổi kích thước mảng một cách dễ dàng. Bạn có thể thêm hoặc xóa phần tử vào bất kỳ vị trí nào trong mảng, hoặc thay đổi số lượng phần tử trong mảng mà không cần phải khai báo lại mảng. Điều này giúp mảng rất linh hoạt trong việc lưu trữ và cập nhật dữ liệu trong quá trình lập trình.

Các phương thức như push(), pop(), shift(), unshift() giúp thêm hoặc xóa phần tử ở cuối hoặc đầu mảng, trong khi splice() cho phép bạn thay đổi phần tử tại vị trí bất kỳ trong mảng.

Ví dụ:

let fruits = ["Apple", "Banana"];

fruits.push("Orange"); // Thêm phần tử vào cuối mảng

console.log(fruits); // ["Apple", "Banana", "Orange"]

fruits.pop(); // Xóa phần tử cuối cùng

console.log(fruits); // ["Apple", "Banana"]

Cách khai báo Array trong Javascript

Trong ví dụ trên, mảng arr chứa bốn phần tử, bao gồm một số, một chuỗi, một giá trị boolean và một mảng con. Điều này cho thấy tính linh hoạt và tiện dụng của mảng trong JavaScript.

Sử dụng dấu ngoặc vuông

Cách đơn giản nhất để khai báo một mảng là sử dụng dấu ngoặc vuông []:

let fruits = ["Apple", "Banana", "Cherry"];

Sử dụng từ khóa new Array()

Một cách khác để tạo mảng là sử dụng constructor Array():

let fruits = new Array("Apple", "Banana", "Cherry");

Tuy nhiên, cách này ít được sử dụng trong thực tế, bởi vì cú pháp [] rõ ràng và dễ hiểu hơn.

Khai báo mảng rỗng

Bạn cũng có thể khai báo một mảng rỗng và sau đó thêm các phần tử vào mảng:

let fruits = [];

fruits.push("Apple");

fruits.push("Banana");

15 phương thức thông dụng khi làm việc với mảng Javascript

Trong JavaScript, mảng không chỉ là một cấu trúc dữ liệu thụ động mà còn đi kèm với rất nhiều phương thức hữu ích để thao tác với dữ liệu trong mảng. Dưới đây là 15 phương thức thông dụng bạn sẽ thường xuyên sử dụng khi làm việc với mảng trong JavaScript.

Array Length

Phương thức length trả về số lượng phần tử có trong mảng. Đây là một thuộc tính, không phải phương thức, nhưng vẫn được coi là một trong những cách quan trọng để làm việc với mảng.

Ví dụ:

let fruits = ["Apple", "Banana", "Cherry"];

console.log(fruits.length); // Output: 3

ArraytoString()

Phương thức toString() chuyển đổi mảng thành một chuỗi, với các phần tử được phân cách bởi dấu phẩy.

Ví dụ:

let fruits = ["Apple", "Banana", "Cherry"];

console.log(fruits.toString()); // Output: "Apple,Banana,Cherry"

Array join()

Phương thức join() tương tự như toString(), nhưng cho phép bạn chỉ định một ký tự khác thay thế dấu phẩy giữa các phần tử.

Ví dụ:

let fruits = ["Apple", "Banana", "Cherry"];

console.log(fruits.join(" - ")); // Output: "Apple - Banana - Cherry"

Array pop() và push()

pop(): Loại bỏ phần tử cuối cùng trong mảng và trả về giá trị của phần tử đó.

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

Ví dụ:

let fruits = ["Apple", "Banana", "Cherry"];

fruits.pop(); // "Cherry"

fruits.push("Grapes"); // ["Apple", "Banana", "Grapes"]

Array shift()

Phương thức shift() loại bỏ phần tử đầu tiên trong mảng và trả về giá trị của phần tử đó.

Ví dụ:

 let fruits = ["Apple", "Banana", "Cherry"];

fruits.shift(); // "Apple"

Array unshift()

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

Ví dụ:

let fruits = ["Banana", "Cherry"];

fruits.unshift("Apple"); // ["Apple", "Banana", "Cherry"]

Array concat()

Phương thức concat() kết hợp hai hoặc nhiều mảng thành một mảng mới.

Ví dụ:

let fruits1 = ["Apple", "Banana"];

let fruits2 = ["Cherry", "Grapes"];

let allFruits = fruits1.concat(fruits2); // ["Apple", "Banana", "Cherry", "Grapes"]

Array includes()

Phương thức includes() kiểm tra xem một phần tử có tồn tại trong mảng hay không.

Ví dụ:

let fruits = ["Apple", "Banana", "Cherry"];

console.log(fruits.includes("Banana")); // true

console.log(fruits.includes("Grapes")); // false

Array splice()

Phương thức splice() thay đổi nội dung của mảng bằng cách xóa hoặc thay thế các phần tử.

Ví dụ:

let fruits = ["Apple", "Banana", "Cherry"];

fruits.splice(1, 1, "Grapes"); // ["Apple", "Grapes", "Cherry"]

Array slice()

Phương thức slice() trả về một mảng mới chứa các phần tử từ một mảng ban đầu, bắt đầu từ chỉ số được chỉ định và kết thúc trước chỉ số cuối cùng.

Ví dụ:

let fruits = ["Apple", "Banana", "Cherry"];

let selectedFruits = fruits.slice(1, 3); // ["Banana", "Cherry"]

Array filter()

Phương thức filter() tạo ra một mảng mới chứa các phần tử thỏa mãn điều kiện được chỉ định trong một hàm.

Ví dụ:

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

let evenNumbers = numbers.filter(num => num % 2 === 0); // [2, 4]

Array reduce()

Phương thức reduce() áp dụng một hàm vào từng phần tử của mảng và trả về một giá trị duy nhất.

Ví dụ:

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

let sum = numbers.reduce((acc, num) => acc + num, 0); // 15

Array find()

Phương thức find() tìm và trả về phần tử đầu tiên thỏa mãn điều kiện chỉ định trong hàm.

Ví dụ:

let fruits = ["Apple", "Banana", "Cherry"];

let foundFruit = fruits.find(fruit => fruit === "Banana"); // "Banana"

Array sort()

Phương thức sort() sắp xếp các phần tử trong mảng theo thứ tự tăng dần hoặc giảm dần.

Ví dụ:

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

numbers.sort((a, b) => a - b); // [1, 3, 5, 8]

Array map()

Phương thức map() tạo ra một mảng mới với các phần tử được thay đổi dựa trên hàm bạn chỉ định.

Ví dụ:

let numbers = [1, 2, 3];

let doubled = numbers.map(num => num * 2); // [2, 4, 6]

Lợi ích của array 

Trong thiết kế website, mảng sẽ giúp bạn sắp xếp và quản lý các dữ liệu liên quan một cách hiệu quả, chẳng hạn như danh sách sản phẩm, bài viết, bình luận,... Bên cạnh đó, bạn có thể dễ dàng duyệt qua các phần tử trong mảng để thực hiện các thao tác như hiển thị, cập nhật hoặc xóa dữ liệu.

Mảng có thể kết hợp với các cấu trúc dữ liệu khác để tạo ra các cấu trúc dữ liệu phức tạp hơn, như danh sách liên kết, cây, đồ thị. Ví dụ một mảng chứa thông tin sản phẩm có thể được viết như sau:

const products = [

{ id: 1, name: 'Áo thun', price: 100000 },

{ id: 2, name: 'Quần jean', price: 200000 },

{ id: 3, name: 'Giày thể thao', price: 300000 }

];

Hay một ví dụ về dùng vòng lặp để hiển thị thông tin sản phẩm:

products.forEach(product => {

console.log(`Sản phẩm: ${product.name}, Giá: ${product.price}`);

});

Ngoài 2 ví dụ trên thì còn vô số ứng dụng khác để áp dụng array vào trong lập trình. Qua đó, có thể thấy array là một trong những công cụ mạnh mẽ và linh hoạt trong JavaScript, giúp người dùng xử lý và quản lý dữ liệu một cách dễ dàng và hiệu quả. Hy vọng bài viết này của LPTech đã giúp bạn làm việc dễ dàng hơn với mảng trong JavaScript.