JScript Katana

Thành thạo Mảng JavaScript: Hướng dẫn toàn diện về Tạo, Thao tác, Lọc và Ứng dụng Thực tế

Xử lý JSON
佐川 直弘 | Naohiro Sagawa
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 danh sách tên người dùng, danh sách sản phẩm hoặc kết quả tính toán. Đặc biệt trong phát triển ứng dụng web, mảng thường được dùng khi xử lý dữ liệu biểu mẫu hoặc dữ liệu lấy từ các API.

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

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

Mảng là cấu trúc nền tảng để xử lý dữ liệu nhóm và là một chủ đề quan trọng 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 có hệ thống về mảng JavaScript, bao gồm các chủ đề như:

  1. Cách khai báo và khởi tạo mảng
  2. Cách 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 sử dụng mảng

Nội dung phù hợp cho người mới bắt đầu đến trung cấp và giải thích cẩn thận mọi thứ từ cơ bản đến các kỹ thuật thực tiễn.

Đối tượng của bài viết này

  • Người mới bắt đầu : Những người lần đầu làm việc với mảng.
  • Người dùng trung cấp : Những người muốn học các thao tác nâng cao hoặc viết mã hiệu quả hơn.

Với các ví dụ mã và 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

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

  • Quản lý & thao tác dữ liệu : Dễ dàng thêm, xóa hoặc sắp xếp dữ liệu.
  • Tích hợp API : Xử lý và hiển thị dữ liệu lấy 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 bằng các ví dụ thực tế.

Hãy áp dụng những gì bạn học ở đây để xây dựng các ứng dụng JavaScript phức tạp hơn.

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

Mảng JavaScript là các đối tượng đặc biệt cho phép bạn quản lý nhiều mục dữ liệu cùng một lúc. Mỗi phần tử có một chỉ số xác định vị trí của nó, giúp việc truy xuất và thao tác dữ liệu trở nên dễ dàng.

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

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

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

  • Chỉ số phần tử bắt đầu từ 0.
  • Các giá trị của các kiểu dữ liệu khác nhau có thể được lưu trữ cùng nhau.
    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 theo hai cách:

  1. Sử dụng ký hiệu literal (được khuyến nghị)
    let fruits = ["apple", "banana", "grape"];
  1. 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à mảng chứa các mảng khác. 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 ý khi Khởi tạo

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

Mảng JavaScript có thể lưu trữ các giá trị thuộc các kiểu dữ liệu khác nhau, điều này có thể gây ra 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ận hành Cơ bản của Mảng

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

Phần này giải thích các khái niệm sau về 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 xử lý độ dài
  4. Những lưu ý quan trọng khi khởi tạo kèm ví dụ mã

Với kiến thức này, bạn sẽ sẵn sàng hơn cho bước tiếp theo: “Các thao tác cơ bản với mảng.”

3. Các thao tác cơ bản với mảng | Thêm, Xóa và Truy xuất phần tử

3.1 Phương thức thêm phần tử

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

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

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

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

3.2 Phương thức xóa phần tử

Xóa phần tử cuối cùng – pop()

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

Xóa phần tử đầu tiên – shift()

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

Xóa 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 Phương thức 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"

Truy xuất phần tử cuối cùng

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

Truy xuất phần tử đầu tiên khớp – 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 đã giải thích các thao tác mảng JavaScript sau:

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

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

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

4.1 Phương thức sắp xếp mảng

Sắp xếp tăng hoặc 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 Phương thức 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]

Truy xuất 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

Phần này giải thích cách sắp xếp và lọc mảng trong JavaScript:

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

5. Nối, tách và chuyển đổi mảng

5.1 Phương thức nối mảng

Nối mảng – concat()

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

Kết hợ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ác phương pháp 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ác phương pháp chuyển đổi mảng

Chuyển mảng thành chuỗi – join()

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

Chuyển 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

Phần này giải thích các phương pháp mảng JavaScript khác nhau để kết hợp, tách và chuyển đổi mảng:

  1. Kết hợp mảng: concat() và cú pháp spread
  2. Tách mảng: slice() để trích xuất và splice() để xóa hoặc thay thế
  3. Chuyển đổi mảng: join() và split() để chuyển đổi sang chuỗi
  4. Làm phẳng: flat() để chuyển các mảng lồng nhau thành một chiều

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 qua mảng

Lặp cơ bản với for

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

Lặp đơn giả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 phương thức 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 Kỹ thuật nâng cao

Xóa 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ột 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

Phần này giải thích các phương pháp lặp mảng và các kỹ thuật nâng cao:

  1. Vòng lặp cơ bản: Lặp hiệu quả bằng for và for...of.
  2. Vòng lặp dựa trên phương thức: Sử dụng forEach() và map() để xử lý sạch hơn và chức năng hơn.
  3. Xử lý dữ liệu nâng cao: Xóa các phần tử trùng lặp và làm phẳng các mảng lồng nhau.

7. Ví dụ thực tế | Xây dựng một ứng dụng đơn giản sử dụng mảng

7.1 Tạo ứng dụng danh sách việc cần làm

Tổng quan tính năng

Ứng dụng danh sách việc cần làm đơn giản này bao gồm 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();
}

// Function to remove a task
function removeTask(index) {
  if (index >= 0 && index < tasks.length) { let removed = tasks.splice(index, 1); console.log(`Removed: ${removed[0]}`); displayTasks(); } else { console.log("Invalid index"); } } // Function to display current tasks function displayTasks() { console.log("Current Tasks:"); tasks.forEach((task, index) => {
    console.log(`${index + 1}: ${task}`);
  });
}

// Test execution
addTask("Study JavaScript");
addTask("Create shopping list");
addTask("Check email");

removeTask(1); // Remove the second task

Ví dụ Kết quả

Added: Study JavaScript
Added: Create shopping list
Added: Check email
Current Tasks:
1: Study JavaScript
2: Create shopping list
3: Check email
Removed: Create shopping list
Current Tasks:
1: Study JavaScript
2: Check email

Tóm tắt

Phần này giới thiệu một ứng dụng thực tế sử dụng các thao tác mảng:

  1. Ứng dụng Danh sách Công việc : Thực hành thêm, xóa và hiển thị các nhiệm vụ.
  2. Tìm kiếm và Phân tích Dữ liệu : Trình bày cách triển khai tìm kiếm linh hoạt và tổng hợp dữ liệu bằng các thao tác mảng.

8. Tóm tắt | Thành thạo Các Thao tác Mảng

Mảng JavaScript là công cụ mạnh mẽ giúp tối ưu hoá việc quản lý và thao tác dữ liệu. Bài viết này đã bao phủ mọi thứ từ các thao tác cơ bản đến kỹ thuật nâng cao và các ví dụ thực tế.

8.1 Đánh giá Bài viết Này

1. Các Thao tác Cơ bản với Mảng

  • Khai báo và Khởi tạo : Học cách tạo mảng và xử lý mảng đa chiều.
  • Thêm, Xóa và Truy xuất Phần tử : Thực hành thao tác dữ liệu động bằng các phương thức như push(), pop() và các phương thức khác.

2. Sắp xếp và Lọc Mảng

  • Sắp xếp : Giải thích cách thay đổi thứ tự mảng bằng sort() và reverse().
  • Lọc : Học cách trích xuất dữ liệu bằng filter() và find().

3. Nối, Tách và Biến đổi Mảng

  • Nối : Hiểu cách hợp nhất mảng bằng concat() và cú pháp spread.
  • Tách & Biến đổi : Sử dụng slice(), splice(), join() và split() để xử lý dữ liệu linh hoạt.

4. Lặp và Kỹ thuật Nâng cao

  • Lặp : Sử dụng for, forEach() và map() để lặp hiệu quả.
  • Kỹ thuật Nâng cao : Học cách loại bỏ phần tử trùng lặp và làm phẳng các mảng lồng nhau.

5. Các Ví dụ Thực tế

  • Ứng dụng Danh sách Công việc : Áp dụng các thao tác mảng để xây dựng một ứng dụng chức năng.
  • Tìm kiếm & Tổng hợp Dữ liệu : Trình bày việc lọc và phân tích dữ liệu thực tế.

8.2 Tầm quan trọng của Các Thao tác Mảng và Các Trường hợp Sử dụng

Tại sao Các Thao tác Mảng lại Quan trọng?

Việc thao tác mảng là cần thiết để tổ chức, phân tích và hiển thị dữ liệu. Các kịch bản phổ biến bao gồm:

  1. Quản lý và Hiển thị Dữ liệu : Lọc dữ liệu API và hiển thị kết quả trong bảng.
  2. Xử lý Form và Nhập liệu Người dùng : Cập nhật danh sách một cách động hoặc xử lý các giá trị nhập vào.
  3. Chức năng Tìm kiếm và Sắp xếp : Xử lý các bộ dữ liệu lớn một cách hiệu quả.
  4. Phát triển Ứng dụng : Xây dựng các tính năng UI như giỏ hàng và quản lý công việc.

8.3 Các Bước Tiếp theo trong Việc Học

1. Sử dụng Thêm các Phương thức Mảng

  • Nhiệm vụ Đề xuất : Xây dựng một ứng dụng lấy dữ liệu API và lọc kết quả bằng các thao tác mảng.

2. So sánh và Sử dụng Các Cấu trúc Dữ liệu Khác

  • Học Object, Set, và Map để chọn cấu trúc phù hợp cho mỗi trường hợp.

3. Áp dụng Kiến thức trong Các Framework JavaScript

  • Sử dụng kỹ năng mảng trong các framework như React hoặc Vue.js cho phát triển thực tế.

8.4 Liên kết Tham khảo và Tài nguyên

8.5 Suy nghĩ Cuối cùng và Lời khuyên cho Độc giả

JavaScript array operations are essential for building a solid programming foundation. This article provided a structured approach from basics to advanced concepts.

Advice

  1. Practice by writing code : Test each method to deepen your understanding.
  2. Develop problem-solving skills : Convert real-world tasks into programs to enhance practical expertise.
  3. Continue learning : Learn new frameworks and latest technologies to improve your skill set.

Take the Next Step!

Use this article as a foundation to advance toward building more complex applications or learning modern frameworks.

FAQ | Frequently Asked Questions

Q1. What is the difference between map() and forEach()?

  • map() : Returns a new array after applying a function to each element.
  • forEach() : Executes a function for each element but does not return a new array.

Example:

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

Q2. How do I sort numbers correctly?

By default, sort() compares values as strings. To sort numbers numerically, you must pass a comparison function. Example:

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

Q3. How can I remove duplicates from an array?

Use the Set object to remove duplicates easily. Example:

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

Q4. How do I check if an element exists in an array?

Use the includes() method to determine whether the array contains a specific value. Example:

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

Q5. How do I flatten a multidimensional array?

Use the flat() method to convert a nested array into a single-level array. Example:

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