array javascript - itviec blog

Array Javascript là cấu trúc dữ liệu được sử dụng để lưu trữ nhiều giá trị trong một biến duy nhất. Chúng có thể chứa nhiều kiểu dữ liệu khác nhau và các phần tử được truy cập theo chỉ mục bắt đầu từ 0.

Đọc bài viết sau đây để được giải đáp chi tiết hơn về:

  • Tổng quan về Array Javascript
  • Các phương pháp cũng như cách sử dụng Array Javascript trong khai báo
  • Thao tác Array Javascript cơ bản

Định nghĩa về Array Javascript

Mảng (Array) là kiểu dữ liệu trong Javascript và được sử dụng để lưu trữ nhiều giá trị trong một biến. Các giá trị trong mảng có thể thuộc bất kỳ kiểu dữ liệu nào, chẳng hạn như chuỗi, số, boolean, hoặc các kiểu dữ liệu khác.

array javascript - itviec blog

Array Javascript (Nguồn: Geeksforgeeks)

Một số thuật ngữ cơ bản trong Array Javascript như:

  • Mảng (Array): Cấu trúc dữ liệu trong Javascript cho phép bạn lưu trữ nhiều giá trị trong một biến duy nhất.
  • Phần tử mảng (Array Element): Mỗi giá trị trong một mảng được gọi là một phần tử, các phần tử được truy cập theo chỉ mục của chúng.
  • Chỉ mục mảng (Array Index): Một biểu diễn số cho biết vị trí của một phần tử trong mảng. Mảng Javascript được lập chỉ mục bằng 0, nghĩa là phần tử đầu tiên có chỉ mục là 0.
  • Độ dài mảng (Array Length): Số lượng phần tử trong một mảng, có thể truy xuất bằng thuộc tính length.

12 phương thức cơ bản của Array Javascript 

Array Length

Thuộc tính length có công dụng trả về độ dài (kích thước) của một mảng:

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The length Property</h2>

<p>The length property returns the length of an array:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = fruits.length;
document.getElementById("demo").innerHTML = size;
</script>

</body>
</html>

ArraytoString()

Phương thức Javascript toString() giúp chuyển đổi một mảng thành một chuỗi các giá trị mảng, được phân tách bằng dấu phẩy.

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The toString() Method</h2>

<p>The toString() method returns an array as a comma separated string:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
</script>

</body>
</html>

Array join()

Phương pháp join() giúp nối tất cả các phần tử trong mảng thành một chuỗi. Nhìn chung, join() hoạt động giống toString() nhưng bạn có thể chỉ định thêm dấu phân cách. 

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
</html>

Array pop() và push()

Trong quá trình khai báo array, khi muốn thêm hoặc xóa bớt một phần tử trong mảng, bạn có thể sử dụng pop() và push(). Trong khi pop() được dùng để xóa phần tử cuối trong mảng thì push() có công dụng thêm một phần tử mới vào trong mảng.

Khi sử dụng pop() để xóa phần tử, kết quả sẽ trả về giá trị đã được “bật ra”.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.pop();

Tương tự, khi bạn thêm một phần tử mới vào cuối mảng, bạn sẽ sử dụng push(). Push() sẽ trả về kết quả là độ dài của mảng mới. Cụ thể:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.push("Kiwi");

Array shift()

Shift() có công dụng xóa phần tử đầu tiên trong mảng và chuyển các phần tử khác sang chỉ mục thấp hơn. Khi khai báo, shift() sẽ trả về giá trị mảng sau khi phần tử đã được chuyển ra.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.shift();

Array unshift()

Khác với shift(), unshift() sẽ thêm một phần tử mới vào mảng (ở phần đầu) và bỏ dịch chuyển ở các phần tử cũ hơn. Khi trả về kết quả, unshift() sẽ trả về độ dài mảng mới sau khi đã được thêm phần tử vào.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");

Array concat()

Trong Javascript, khi muốn thực hiện nối các mảng, nghĩa là nối các mảng lại với nhau từ đầu đến cuối, bạn sẽ sử dụng phương thức concat() để tạo ra một mảng mới phù hợp với mảng hiện có. 

Chẳng hạn như khi nối hai mảng riêng biệt sau:

let myGirls = ["Cecilie", "Lone"];
let myBoys = ["Emil", "Tobias", "Linus"];

let myChildren = myGirls.concat(myBoys);

Bên cạnh đó, khi sử dụng phương pháp concat(), bạn nên lưu ý một số điều như sau:

  • concat() không thay đổi các mảng hiện có, kết quả trả về sẽ là một mảng mới đã được nối từ phần tử đầu tiên đến cuối cùng.
  • concat() có thể lấy bất kỳ số lượng đối số của mảng hoặc có thể lấy chuỗi để làm đối số.

Array splice()

splice() được sử dụng để thêm các mục mới vào trong một mảng. Chẳng hạn như:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

Ở ví dụ trên:

  • Tham số đầu tiên (2) xác định vị trí mà các phần tử mới sẽ được thêm vào (nối vào)
  • Tham số 0 xác định số lượng phần tử bị xóa
  • Các tham số còn lại như “Lemon” và “Kiwi” chính là phần tử mới sẽ được thêm vào. 

Kết quả sau khi sử dụng splice() để thêm phần tử như sau:

array javascript - itviec blog

Ngoài ra, bạn cũng có thể sử dụng splice() để xóa các phần tử mà không để xuất hiện khoảng trống trong khoảng. Cụ thể:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);

Trong đó:

  • Tham số 0 đầu tiên xác định vị trí mà các phần tử mới sẽ được thêm vào.
  • Tham số thứ hai là số 1 xác định số lượng phần tử sẽ bị xóa.
  • Các tham số còn lại được bỏ qua vì không có phần tử mới được thêm vào.

Kết quả hiển thị:

array javascript - itviec blog

Array slice()

slice() trong Array có công dụng cắt một phần tử của mảng thành một mảng mới. Chúng có công dụng tạo một mảng mới và không xóa bất kỳ phần tử nào khỏi mảng nguồn.

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1, 3);

Phương thức slice() có thể lấy hai đối số như slice(1,3) và chọn các phần tử từ số bắt đầu và lên đến đối số kết thúc trong mảng. Nếu đối số kết thúc bị bỏ qua, slice() sẽ cắt phần còn lại của mảng.

Array find()

Phương thức find() có chức năng trả về giá trị của phần tử mảng đầu tiên qua hàm kiểm tra (a test function). Hàm này có 3 đối số chủ yếu là giá trị (value), chỉ mục (index) và mảng (array).

Để hiểu rõ hơn về cách hoạt động của find(), bạn có thể xem qua ví dụ sau: Tìm (trả về giá trị) phần tử đầu tiên lớn hơn 18 như sau:

const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

Array sort()

Khi muốn sắp xếp dữ liệu mảng trong mã, bạn có thể sử dụng phương thức sort() để thực hiện sắp xếp theo thứ tự từ A-Z. Ví dụ như:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();

Kết quả hiển thị:

array javascript - itviec blog

Ngoài ra, Array Javascript cũng có thêm phương thức toSorted() như một cách an toàn để thực hiện sắp xếp mảng mà không làm thay đổi cấu trúc mảng gốc.

Sự khác biệt giữa toSorted() và sort() là toSorted() cho phép tạo một mảng mới và vẫn giữ nguyên mảng gốc trong khi sort() có thể làm thay đổi mảng gốc.

const months = ["Jan", "Feb", "Mar", "Apr"];
const sorted = months.toSorted();

Array reverse()

Cách hoạt động của reverse() giúp đảo ngược các phần tử trong một mảng, cụ thể như:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();

Kết quả hiển thị:

array javascript - itviec blog

Bên cạnh đó, khi kết hợp sort() và reverse(), bạn có thể thực hiện sắp xếp một mảng theo thứ tự giảm dần, như sau:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
fruits.reverse();

Kết quả hiển thị:

array javascript - itviec blog

Bên cạnh 12 phương thức cơ bản, Array Javascript còn có một số phương thức như map(), filter(), reduce(), some(), every(), includes(),…

Bạn có thể tìm hiểu thêm về phương thức của Array Javascript qua các nguồn tài nguyên chất lượng như FreeCodeCamp, W3School hay MDN Web Docs để nâng cao thêm “tay nghề” lập trình của mình nhé!

Cách khai báo Array Javascript

Khi khai báo Array, bạn có thể thực hiện một trong hai cách là Array Literal và Array Constructor.

Tạo Array bằng cách sử dụng Array Literal

Tạo Array bằng cách dùng Literal sẽ sử dụng dấu ngoặc vuông [] để định nghĩa và tạo mảng. Phương pháp này có cú pháp ngắn gọn và thường được sử dụng nhiều bởi vì tính đơn giản của chúng. Cú pháp cơ bản của Array Literal như sau:

let arrayName = [value1, value2, ...];

Ví dụ:

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p id="demo"></p>

<script>
let cars = [
  "Saab",
  "Volvo",
  "BMW"
];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Tạo Array bằng cách Array Constructor

Array Constructor là phương pháp tạo mảng bằng cách dùng hàm Array constructor. Phương pháp này cho phép khởi động và có thể được sử dụng để tạo mảng có độ dài hoặc phần tử được chỉ định. Cú pháp cơ bản của phương pháp này như sau:

let arrayName = new Array();

Ví dụ: 

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p id="demo"></p>

<script>
let cars = new Array("Saab", "Volvo", "BMW");
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Thao tác cơ bản với Array Javascript

Truy cập phần tử của Array

Bất kỳ phần tử nào trong mảng đều có thể truy cập bằng cách sử dụng số chỉ mục (index number). Chỉ mục trong mảng thường bắt đầu bằng 0. 

let courses = ["HTML", "CSS", "Javascript", "React"];

console.log(courses[0]);
console.log(courses[1]);
console.log(courses[2]);
console.log(courses[3]);

Kết quả hiển thị của đoạn mã trên như sau:

HTML

CSS

Javascript

React

Truy cập phần tử đầu tiên của Array

Các chỉ số mảng bắt đầu từ 0, do đó bạn có thể truy cập phần tử đầu tiên của mảng bằng cách sử dụng chỉ số đó.

let courses = ["HTML", "CSS", "JavaScript", "React"];

let firstItem = courses[0];

console.log("First Item: ", firstItem);

Lúc này, kết quả sẽ hiển thị phần tử đầu tiên trong mảng chính là HTML. 

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

Bạn có thể thực hiện truy cập phần tử mảng cuối cùng bằng cách sử dụng số chỉ mục [array.length-1].

let courses = ["HTML", "CSS", "JavaScript", "React"];

let lastItem = courses[courses.length - 1];

console.log("First Item: ", lastItem);

Sau khi thực hiện lệnh trên, kết quả sẽ hiển thị phần tử cuối trong mảng là React. 

Sửa đổi các phần tử Mảng

Để thực hiện sửa đổi các phần tử trong mảng bằng cách gán trị mới cho chỉ mục tương ứng của chúng. Cụ thể như sau:

let courses = ["HTML", "CSS", "Javascript", "React"];
console.log(courses);

courses[1]= "Bootstrap";
console.log(courses);

Kết quả hiển thị sau khi bạn thực hiện lệnh đổi phần tử CSS sang Boostrap. 

[ 'HTML', 'CSS', 'Javascript', 'React' ]

[ 'HTML', 'Bootstrap', 'Javascript', 'React' ]

Thêm phần tử vào Mảng

Để tiến hành thêm một hoặc một số phần tử vào mảng, bạn có thể sử dụng push() hoặc unshift(). Cách thực hiện cụ thể như:

let courses = ["HTML", "CSS", "Javascript", "React"];

courses.push("Node.js");

courses.unshift("Web Development");

console.log(courses);

Kết quả hiển thị như sau:

[ 'Web Development', 'HTML', 'CSS', 'Javascript', 'React', 'Node.js' ]

Loại một phần tử khỏi Mảng

Khi bạn muốn xóa các phần tử không còn cần thiết trong mảng, có thể sử dụng phương thức pop(), shift() hoặc splice(). Cụ thể như:

let courses = ["HTML", "CSS", "Javascript", "React", "Node.js"];
console.log("Original Array: " + courses);

let lastElement = courses.pop();
console.log("After Removing the last elements: " + courses);

let firstElement = courses.shift();
console.log("After Removing the First elements: " + courses);

courses.splice(1, 2);
console.log("After Removing 2 elements starting from index 1: " + courses);

Kết quả hiển thị cho đoạn mã trên như sau:

Original Array: HTML,CSS,Javascript,React,Node.js

After Removing the last elements: HTML,CSS,Javascript,React

After Removing the First elements: CSS,Javascript,React

After Removing 2 elements starting from index 1: CSS

Array Length

Đối với một đoạn mã dài và có nhiều phần tử, để biết được trong mảng đó có bao nhiêu phần tử, bạn có thể sử dụng thuộc tính length. Cụ thể như sau:

let courses = ["HTML", "CSS", "Javascript", "React", "Node.js"];
let len = courses.length;
console.log("Array Length: " + len);

Khi đó, kết quả sẽ hiển thị độ dài của mảng là 5.

Tăng và giảm độ dài của Mảng

Khi thực hiện tăng hoặc giảm độ dài của Mảng bằng cách sử dụng thuộc tính length trong Javascript. Cụ thể như sau:

let courses = ["HTML", "CSS", "Javascript", "React", "Node.js"];
courses.length = 7;
console.log("Array After Increase the Length: ", courses);
courses.length = 2;
console.log("Array After Decrease the Length: ", courses)

Kết quả hiển thị sau khi thực hiện đoạn mã trên: 

Array After Increase the Length:  [ 'HTML', 'CSS', 'Javascript', 'React', 'Node.js', <2 empty items> ]

Array After Decrease the Length:  [ 'HTML', 'CSS' ]

Lặp lại các phần tử Mảng

Bạn có thể lặp lại mảng và truy cập các phần tử mảng bằng cách sử dụng for và forEach loop. Cụ thể khi sử dụng for:

let courses = ["HTML", "CSS", "JavaScript", "React"];
for (let i = 0; i < courses.length; i++) {
    console.log(courses[i])
}

Hoặc khi bạn sử dụng ForEach loop:

let courses = ["HTML", "CSS", "JavaScript", "React"];
courses.forEach(function myfunc(elements) {
    console.log(elements);
});

Nối Mảng (Array Concatenation)

Khi bạn thực hiện kết hợp hai hoặc nhiều mảng bằng phương thức concat() thì trình duyệt sẽ trả về một mảng mới chứa các phần tử từ các mảng đã kết hợp. Cụ thể:

let courses = ["HTML", "CSS", "JavaScript", "React"];
let otherCourses = ["Node.js", "Expess.js"];
let concateArray = courses.concat(otherCourses);
console.log("Concatenated Array: ", concateArray);

Kết quả sẽ trả về như sau:

Concatenated Array:  [ 'HTML', 'CSS', 'JavaScript', 'React', 'Node.js', 'Expess.js' ]

Chuyển đổi Array sang Chuỗi (String)

Khi thực hiện chuyển đổi từ Mảng (Array) sang chuỗi (String), bạn có thể sử dụng phương pháp toString() tích hợp để thực hiện quá trình này. Cụ thể:

let courses = ["HTML", "CSS", "JavaScript", "React"];
console.log(courses.toString());

Kiểm tra loại của Mảng

Để thực hiện kiểm tra kiểu của một Mảng, bạn sử dụng toán tử Javascript typeof. Khi trả kết quả, chúng sẽ trả về object cho các mảng. Cụ thể:

let courses = ["HTML", "CSS", "JavaScript", "React"];
console.log(typeof courses);

Câu hỏi thường gặp về Array Javascript

Khi nào nên sử dụng Array Javascript?

Bạn nên sử dụng khai báo Array Javascript khi:

  • Cần lưu trữ một danh sách các giá trị có thứ tự và thực hiện phép toán hoặc thao tác trên nhiều phần tử.
  • Không cần các thuộc tính hoặc phương thức đặc biệt mà đối tượng (Object) cung cấp.
  • Cần lưu trữ các giá trị có thể là số, chuỗi, hoặc bất kỳ kiểu dữ liệu nào khác trong cùng một danh sách. 

Sự khác nhau giữa Array và Object

Trong Javascript, sự khác nhau cơ bản giữa Array và Object chính là cách thức tổ chức và khả năng truy cập dữ liệu trong Array cũng như Object. Cụ thể:

  • Array: Trong Javascript, Array được dùng như một cấu trúc dữ liệu để lưu trữ các phần tử. Các phần tử này được truy cập thông qua chỉ số (index) dạng số bắt đầu từ 0.
  • Object: Một cấu trúc dữ liệu được dùng để lưu trữ các cặp key-value. Trong đó, key thường là một chuỗi (string) và value có thể là bất kỳ dữ liệu nào. 

Làm thế nào để biết một biến có phải là Array không?

Chẳng hạn như đoạn mã dưới đây, khi sử dụng typeof, Javascript Operator sẽ trả về kết quả là một Object. Vậy để giải quyết vấn đề này, bạn có thể sử dụng phương pháp là Array.isArray(), cụ thể:

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The isArray() Method</h2>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = Array.isArray(fruits);
</script>

</body>
</html>

Ngoài ra, một phương pháp nữa bạn có thể sử dụng là instanceof trả về true nếu một đối tượng được tạo bởi một hàm nhất định. Cụ thể:

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The instanceof Operator</h2>

<p>The instanceof operator returns true if an object is an instance of a specified object type:</p>

<p id="demo"></p>

<script> 
// Create an Array
const fruits = ["apples", "bananas", "oranges"];

document.getElementById("demo").innerHTML =
"Array: " + (fruits instanceof Array);
</script>

</body>
</html>

Kết quả đoạn mã trên:

array javascript - itviec blog

Tổng kết về Array Javascript

Như vậy, bài viết đã giải đáp chi tiết về Array Javascript, một trong những cấu trúc dữ liệu cơ bản trong Javascript. Để nắm vững hơn nền tảng kiến thức về Javascript, hãy thử áp dụng chúng vào những dự án thực tế cũng như có cơ hội tìm hiểu nhiều hơn về khái niệm nâng cao.

Bằng cách này, bạn sẽ đạt được nhiều cơ hội cũng như thành tích nổi bật trong công việc, trở thành Javascript Developer chuyên nghiệp.

Xem thêm: Javascript Developer là gì? Các hướng phát triển của Javascript Developer