Mảng JavaScript được giải thích: Cơ bản, Các thao tác và Ví dụ thực tế

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Giới thiệu

Mảng JavaScript là gì và tại sao chúng quan trọng?

Mảng JavaScript là một trong những thành phần thiết yếu để quản lý và thao tác dữ liệu một cách hiệu quả. Bằng cách sử dụng mảng, bạn có thể lưu trữ nhiều giá trị trong một biến duy nhất và truy xuất hoặc sửa đổi chúng khi cần.

Ví dụ, mảng rất hữu ích khi lưu trữ danh sách tên người dùng, danh mục sản phẩm hoặc kết quả tính toán. Trong phát triển ứng dụng web, mảng thường được sử dụng khi xử lý dữ liệu biểu mẫu hoặc dữ liệu nhận được từ các API.

Các trường hợp sử dụng thực tế cho mảng

• Quản lý danh sách : Quản lý các mục trong giỏ hàng hoặc danh sách Todo.
• Lọc dữ liệu : Tìm kiếm người dùng và chức năng sắp xếp.
• Xử lý hoạt hình : Kiểm soát thứ tự phần tử và cập nhật động.

Bằng cách này, mảng là cấu trúc nền tảng để xử lý dữ liệu nhóm và là một chủ đề không thể thiếu khi học JavaScript.

Những gì bạn sẽ học trong bài viết này

Bài viết này giải thích một cách có hệ thống về mảng JavaScript với các chủ đề sau:

1. Cách khai báo và khởi tạo mảng
2. Thêm, xóa và truy xuất các phần tử
3. Các kỹ thuật sắp xếp và lọc
4. Các phương pháp hợp nhất và tách mảng
5. Các ví dụ ứng dụng thực tế sử dụng mảng

Nội dung được thiết kế cho cả người mới bắt đầu và người học trung cấp, cẩn thận bao phủ mọi thứ từ các thao tác cơ bản đến các kỹ thuật nâng cao.

Đối tượng mục tiêu

• Người mới bắt đầu : Những người lần đầu làm việc với mảng.
• Lập trình viên trung cấp : Những người muốn học các thao tác mảng nâng cao và hiệu quả hơn.

Với các ví dụ mã và các trường hợp sử dụng thực tế, ngay cả người mới bắt đầu cũng có thể học một cách tự tin.

Những gì bạn có thể đạt được khi học mảng

Bằng cách thành thạo mảng JavaScript, bạn sẽ có được các kỹ năng sau:

• Quản lý và thao tác dữ liệu : Dễ dàng thêm, xóa và sắp xếp dữ liệu.
• Tích hợp API : Xử lý và hiển thị dữ liệu nhận được từ các API web một cách hiệu quả.
• Phát triển ứng dụng : Xây dựng các ứng dụng đơn giản dựa trên các ví dụ thực tế.

Sử dụng kiến thức bạn thu được ở đây để xây dựng các chương trình nâng cao hơn với JavaScript.

2. Cơ bản về Mảng: Khai báo và Khởi tạo

2.1 Định nghĩa và Vai trò của Mảng

Trong JavaScript, một mảng là một đối tượng đặc biệt cho phép bạn quản lý nhiều giá trị cùng một lúc. Mỗi phần tử có một thứ tự (chỉ mục), giúp dễ dàng truy xuất và thao tác dữ liệu.

Vai trò chính của Mảng

1. Quản lý danh sách : Sắp xếp danh sách sản phẩm hoặc thông tin người dùng.
2. Thao tác dữ liệu : Xử lý hiệu quả như sắp xếp và tìm kiếm.
3. Xử lý dữ liệu động : Biến đổi và xử lý dữ liệu nhận được từ các API.

Đặc điểm của Mảng

• Chỉ mục bắt đầu từ 0.
• Các phần tử có kiểu dữ liệu khác nhau có thể cùng tồn tại trong một mảng.

  let mixedArray = [1, "hello", true];
  console.log(mixedArray[1]); // "hello"
  

2.2 Khai báo và Khởi tạo Mảng

Khai báo Mảng Cơ bản

Trong JavaScript, mảng có thể được khai báo bằng hai phương pháp sau.

1. Sử dụng literal mảng (được khuyến nghị)

   let fruits = ["apple", "banana", "grape"];
   

2. Sử dụng hàm tạo Array

   let fruits = new Array("apple", "banana", "grape");
   

Tạo một Mảng Trống

let emptyArray = [];

2.3 Khai báo Mảng Đa chiều

Mảng đa chiều lưu trữ các mảng bên trong một mảng. Nó hữu ích khi quản lý các cấu trúc dữ liệu phân cấp.

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(matrix[1][2]); // 6

2.4 Lưu ý Quan trọng Khi Khởi tạo Mảng

Trộn các Kiểu Dữ liệu

Vì mảng JavaScript có thể chứa các kiểu dữ liệu khác nhau, điều này có thể dẫn đến lỗi không mong muốn nếu không được xử lý cẩn thận.

let mixed = [1, "text", true];
console.log(typeof mixed[0]); // "number"
console.log(typeof mixed[1]); // "string"
console.log(typeof mixed[2]); // "boolean"

2.5 Các ví dụ về thao tác mảng cơ bản

let animals = ["dog", "cat", "bird"];
console.log(animals[0]); // "dog"

animals.push("rabbit");
console.log(animals); // ["dog", "cat", "bird", "rabbit"]

animals[1] = "lion";
console.log(animals); // ["dog", "lion", "bird", "rabbit"]

Tóm tắt

Trong phần này, chúng tôi đã đề cập đến các chủ đề sau liên quan đến mảng JavaScript:

1. Định nghĩa và vai trò của mảng
2. Cú pháp cơ bản để khai báo và khởi tạo
3. Mảng đa chiều và cách truy cập chỉ mục
4. Các lưu ý quan trọng và ví dụ mã thực tế

Bằng cách nắm vững những nền tảng này, bạn sẽ có thể tiến tới bước tiếp theo một cách suôn sẻ: các thao tác mảng cơ bản.

3. Các thao tác mảng cơ bản: Thêm, Xóa và Truy xuất

3.1 Cách thêm phần tử

Thêm một phần tử vào cuối – push()

let fruits = ["apple", "banana"];
fruits.push("orange");
console.log(fruits); // ["apple", "banana", "orange"]

Thêm một phần tử vào đầu – unshift()

let animals = ["cat", "dog"];
animals.unshift("rabbit");
console.log(animals); // ["rabbit", "cat", "dog"]

3.2 Cách xóa phần tử

Xóa một phần tử từ cuối – pop()

let colors = ["red", "blue", "green"];
let removed = colors.pop();
console.log(colors); // ["red", "blue"]
console.log(removed); // "green"

Xóa một phần tử từ đầu – shift()

let numbers = [1, 2, 3, 4];
let removedNumber = numbers.shift();
console.log(numbers); // [2, 3, 4]
console.log(removedNumber); // 1

Xóa các phần tử ở bất kỳ vị trí nào – splice()

let sports = ["soccer", "baseball", "basketball", "tennis"];
sports.splice(1, 2);
console.log(sports); // ["soccer", "tennis"]

3.3 Cách truy xuất phần tử

Truy xuất theo chỉ mục

let drinks = ["water", "tea", "coffee"];
console.log(drinks[0]); // "water"
console.log(drinks[2]); // "coffee"

Lấy phần tử cuối cùng trong mảng

let cities = ["Tokyo", "Osaka", "Kyoto"];
console.log(cities[cities.length - 1]); // "Kyoto"

Truy xuất phần tử thỏa mãn điều kiện – find()

let numbers = [10, 20, 30, 40];
let result = numbers.find(num => num > 25);
console.log(result); // 30

Tóm tắt

Trong phần này, chúng tôi đã đề cập đến các điểm chính sau về các thao tác mảng JavaScript:

1. Cách thêm phần tử (push() và unshift())
2. Cách xóa phần tử (pop(), shift(), và splice())
3. Cách truy xuất phần tử (truy cập theo chỉ mục, find(), và includes())

Bằng cách kết hợp các thao tác cơ bản này, bạn có thể thao tác với mảng một cách tự do và hiệu quả.

4. Sắp xếp và lọc mảng

4.1 Cách sắp xếp mảng

Sắp xếp tăng/giảm – sort()

let numbers = [40, 10, 30, 20];
numbers.sort((a, b) => a - b);
console.log(numbers); // [10, 20, 30, 40]

Đảo ngược thứ tự – reverse()

let letters = ["a", "b", "c", "d"];
letters.reverse();
console.log(letters); // ["d", "c", "b", "a"]

4.2 Cách lọc mảng

Trích xuất các phần tử thỏa mãn điều kiện – filter()

let numbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]

Lấy phần tử đầu tiên thỏa mãn điều kiện – find()

let ages = [15, 20, 25, 30];
let firstAdult = ages.find(age => age >= 20);
console.log(firstAdult); // 20

Lấy chỉ mục của phần tử đầu tiên thỏa mãn – findIndex()

let scores = [50, 70, 85, 40];
let highScoreIndex = scores.findIndex(score => score > 80);
console.log(highScoreIndex); // 2

Tóm tắt

Trong phần này, chúng tôi đã giải thích chi tiết cách sắp xếp và lọc mảng JavaScript.

1. Sắp xếp: Kiểm soát thứ tự bằng sort() và reverse().
2. Lọc: Sử dụng filter() để trích xuất chỉ các phần tử đáp ứng một điều kiện.
3. Tìm kiếm: Tìm các phần tử cụ thể bằng find() và findIndex().

5. Gộp, Tách và Chuyển đổi Mảng

5.1 Cách Gộp Mảng

Gộp Mảng – concat()

let fruits = ["apple", "banana"];
let vegetables = ["carrot", "spinach"];
let combined = fruits.concat(vegetables);
console.log(combined); // ["apple", "banana", "carrot", "spinach"]

Gộp bằng Cú pháp Spread

let fruits = ["apple", "banana"];
let vegetables = ["carrot", "spinach"];
let combined = [...fruits, ...vegetables];
console.log(combined); // ["apple", "banana", "carrot", "spinach"]

5.2 Cách Tách Mảng

Trích xuất một phần – slice()

let colors = ["red", "blue", "green", "yellow", "purple"];
let selectedColors = colors.slice(1, 4);
console.log(selectedColors); // ["blue", "green", "yellow"]

Xóa hoặc Thay thế Phần tử – splice()

let languages = ["JavaScript", "Python", "Ruby", "Java"];
languages.splice(1, 2);
console.log(languages); // ["JavaScript", "Java"]

5.3 Cách Chuyển đổi Mảng

Chuyển đổi Mảng thành Chuỗi – join()

let items = ["apple", "banana", "grape"];
let result = items.join(", ");
console.log(result); // "apple, banana, grape"

Chuyển đổi Chuỗi thành Mảng – split()

let str = "apple,banana,grape";
let arr = str.split(",");
console.log(arr); // ["apple", "banana", "grape"]

Làm phẳng Mảng Đa chiều – flat()

let numbers = [1, [2, 3], [4, [5, 6]]];
let flatNumbers = numbers.flat(2);
console.log(flatNumbers); // [1, 2, 3, 4, 5, 6]

Tóm tắt

Trong phần này, chúng ta đã khám phá các phương pháp để gộp, tách và chuyển đổi các mảng JavaScript.

1. Gộp các mảng bằng cách sử dụng concat() và cú pháp spread.
2. Tách các mảng bằng slice() và sửa đổi chúng bằng splice().
3. Chuyển đổi mảng và chuỗi bằng join() và split().
4. Làm phẳng các mảng lồng nhau bằng flat() .

6. Lặp qua Mảng và Các Kỹ thuật Nâng cao

6.1 Các Phương pháp Lặp Mảng

Lặp Cơ bản với Câu lệnh for

let fruits = ["apple", "banana", "grape"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
// Output: apple, banana, grape

Lặp Ngắn gọn với for...of

let colors = ["red", "blue", "green"];
for (let color of colors) {
  console.log(color);
}
// Output: red, blue, green

Lặp với forEach()

let animals = ["cat", "dog", "bird"];
animals.forEach((animal, index) => {
  console.log(`${index}: ${animal}`);
});
// Output: 0: cat, 1: dog, 2: bird

Tạo Mảng Mới với map()

let numbers = [1, 2, 3, 4];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

6.2 Các Kỹ thuật Nâng cao

Loại bỏ Các Phần tử Trùng lặp

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

Làm phẳng Mảng – flat()

let nested = [1, [2, 3], [4, [5, 6]]];
let flatArray = nested.flat(2);
console.log(flatArray); // [1, 2, 3, 4, 5, 6]

Tóm tắt

Trong phần này, chúng ta đã đề cập đến các kỹ thuật lặp và việc sử dụng mảng nâng cao.

1. Vòng lặp cơ bản sử dụng for và for...of.
2. Xử lý hiệu quả và tạo mảng bằng forEach() và map().
3. Các kỹ thuật nâng cao như loại bỏ trùng lặp và làm phẳng mảng.

7. Ví dụ Thực tế: Xây dựng Ứng dụng Đơn giản Sử dụng Mảng

7.1 Tạo Ứng dụng Danh sách Todo

Tổng quan Tính năng

Ứng dụng này là một danh sách Todo đơn giản với các tính năng sau:

1. Thêm nhiệm vụ mới.
2. Xóa các nhiệm vụ đã hoàn thành.
3. Hiển thị danh sách nhiệm vụ hiện tại.

Ví dụ Mã

let tasks = [];

// Function to add a new task
function addTask(task) {
  tasks.push(task);
  console.log(`Added: ${task}`);
  displayTasks();
}

javascript // Hàm để xóa một nhiệm vụ function removeTask(index) { if (index >= 0 && index < tasks.length) { let removed = tasks.splice(index, 1); console.log(Đã xóa: ${removed[0]}); displayTasks(); } else { console.log(“Chỉ số không hợp lệ”); } }

// Hàm để hiển thị các nhiệm vụ hiện tại function displayTasks() { console.log(“Các nhiệm vụ hiện tại:”); tasks.forEach((task, index) => { console.log(${index + 1}: ${task}); }); }

// Thực thi kiểm tra addTask(“Study JavaScript”); addTask(“Create a shopping list”); addTask(“Check emails”);

removeTask(1); // Xóa nhiệm vụ thứ hai

### Sample Output

Đã thêm: Học JavaScript Đã thêm: Tạo danh sách mua sắm Đã thêm: Kiểm tra email Các nhiệm vụ hiện tại: 1: Học JavaScript 2: Tạo danh sách mua sắm 3: Kiểm tra email Đã xóa: Tạo danh sách mua sắm Các nhiệm vụ hiện tại: 1: Học JavaScript 2: Kiểm tra email

### Summary



In this section, we introduced a practical application that leverages array operations.



1. **Todo List Application** : Practiced adding, removing, and displaying elements using arrays.
2. **Search and Data Aggregation** : Demonstrated flexible data handling through array manipulation.







## 8. Conclusion: Mastering Array Operations



JavaScript arrays are powerful tools for efficiently managing and manipulating data. This article comprehensively covered everything from basic operations to advanced techniques and practical examples.



### 8.1 Article Recap



#### 1. Basic Array Operations



* **Declaration and initialization** : Learned how to create arrays and work with multidimensional structures.
* **Adding, removing, and retrieving elements** : Practiced dynamic data manipulation using methods such as `push()` and `pop()` .



#### 2. Sorting and Filtering Arrays



* **Sorting** : Explained how to change element order using `sort()` and `reverse()` .
* **Filtering** : Demonstrated how to extract data that meets specific conditions using `filter()` and `find()` .



#### 3. Merging, Splitting, and Transforming Arrays



* **Merging** : Mastered flexible merging using `concat()` and the spread syntax.
* **Splitting and transforming** : Manipulated data using `slice()` , `splice()` , `join()` , and `split()` .



#### 4. Looping and Advanced Techniques



* **Looping** : Improved efficiency with `for` , `forEach()` , and `map()` .
* **Advanced techniques** : Learned duplicate removal and array flattening.



#### 5. Practical Example



* **Todo List Application** : Experienced how array operations are applied in real-world applications.
* **Search and data aggregation** : Implemented flexible searching and data processing.



### 8.2 Why Array Operations Matter



#### Why Are Array Operations Important?



Array operations are essential skills for organizing, analyzing, and displaying data. They are frequently used in the following scenarios:



1. **Data management and presentation** : Filtering API data and displaying it in tables.
2. **Form and user input handling** : Dynamically managing lists and processing inputs.
3. **Search and sorting features** : Efficiently handling large datasets.
4. **Application development fundamentals** : Building UI components such as shopping carts and task management systems.



### 8.3 Next Steps in Learning



#### 1. Further Use of Array Methods



* **Suggested challenge** : Build an application that displays and filters API data using array operations.



#### 2. Comparing and Choosing Other Data Structures



* Learn **Objects** , **Set** , and **Map** to choose the right structure for each use case.



#### 3. Practical Use in JavaScript Frameworks



* Apply these skills in frameworks such as React or Vue.js.



### 8.4 Reference Links and Resources



* **MDN Web Docs: Array Object**  <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array>
* **JavaScript.info: Arrays and Methods**  <https://javascript.info/>



### 8.5 Final Advice for Readers

JavaScript array operations are crucial for building a solid programming foundation. This article guided you through both fundamental and advanced techniques.

Lời khuyên

1. Thực hành thực tế : Write and test code to reinforce your understanding.
2. Phát triển kỹ năng giải quyết vấn đề : Translate real-world problems into code.
3. Cam kết học tập liên tục : Keep up with modern techniques and frameworks.

Tiếp tục đến Bước Tiếp Theo!

Use this article as a foundation and continue toward building more advanced applications and learning modern frameworks.

Câu hỏi thường gặp (FAQ)

Câu 1. Sự khác nhau giữa map() và forEach() là gì?

• map() : Returns a new array. It applies a transformation to each element and collects the results.
• forEach() : Does not return a new array and simply executes a function for each element.

Ví dụ:

let numbers = [1, 2, 3];

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

// forEach()
numbers.forEach(num => console.log(num * 2));
// Output: 2, 4, 6

Câu 2. Làm thế nào để sắp xếp số một cách chính xác?

The sort() method compares elements as strings by default. To sort numbers properly, you must provide a comparison function.

Ví dụ:

let numbers = [40, 100, 1, 5, 25];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 5, 25, 40, 100]

Câu 3. Làm sao để loại bỏ các phần tử trùng lặp trong một mảng?

You can easily remove duplicates by using the Set object.

Ví dụ:

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

Câu 4. Làm sao để kiểm tra một phần tử có tồn tại trong mảng không?

Use the includes() method to determine whether a specific element exists in an array.

Ví dụ:

let fruits = ["apple", "banana", "grape"];
console.log(fruits.includes("banana")); // true
console.log(fruits.includes("melon")); // false

Câu 5. Làm sao để chuyển một mảng đa chiều thành mảng một chiều?

Use the flat() method to flatten nested arrays.

Ví dụ:

let nested = [1, [2, 3], [4, [5, 6]]];
let flatArray = nested.flat(2);
console.log(flatArray); // [1, 2, 3, 4, 5, 6]