JavaScript: Cách Thêm Phần Tử Vào Mảng (push, unshift, splice, concat, spread) — Hướng Dẫn Từ Cơ Bản Đến Trung Cấp

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

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

1. Giới thiệu

JavaScript là một trong những ngôn ngữ lập trình thiết yếu cho phát triển web. Trong số các tính năng cốt lõi của nó, mảng đóng vai trò quan trọng trong việc quản lý và thao tác dữ liệu một cách hiệu quả.

Trong bài viết này, chúng tôi sẽ giải thích chi tiết cách thêm phần tử vào mảng trong JavaScript, bao gồm các phương pháp cụ thể và cách sử dụng chúng. Bằng cách bao quát từ các phương pháp cơ bản đến các kỹ thuật nâng cao, hướng dẫn này sẽ hữu ích cho người mới bắt đầu cho tới những người học trung cấp.

2. Khái niệm cơ bản về Mảng

Mảng là gì? — Những nền tảng của quản lý dữ liệu

Một mảng (Array) trong JavaScript là một cấu trúc dữ liệu cho phép bạn lưu trữ và quản lý nhiều giá trị cùng lúc. Nó có thể chứa các kiểu dữ liệu khác nhau dưới dạng phần tử, chẳng hạn như chuỗi, số và đối tượng.

Ví dụ:

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

Bạn có thể truy cập các phần tử của mảng bằng một chỉ mục. Vì các chỉ mục bắt đầu từ 0, phần tử đầu tiên có thể được lấy bằng fruits[0].

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

Khởi tạo Mảng và Các thao tác Cơ bản

Bạn có thể khởi tạo mảng theo các cách sau.

1. Tạo một mảng rỗng:

   let arr = [];
   

2. Tạo một mảng với các giá trị khởi tạo:

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

3. Viết một mảng trên nhiều dòng:

   let colors = [
     "red",
     "blue",
     "green"
   ];
   

Là một thao tác cơ bản trên mảng, bạn có thể sử dụng thuộc tính length để lấy số lượng phần tử.

console.log(colors.length); // 3

3. Các phương pháp Cơ bản để Thêm Phần tử vào Mảng

3.1 Thêm vào Cuối: push()

push() là gì?

Phương thức push() là cách cơ bản nhất để thêm phần tử vào cuối một mảng. Nó thay đổi (mutate) mảng gốc và trả về độ dài mới của mảng.

Cú pháp

array.push(element1, element2, ..., elementN);

Ví dụ

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

Ví dụ: Thêm Nhiều Phần tử

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

3.2 Thêm vào Đầu: unshift()

unshift() là gì?

Phương thức unshift() thêm phần tử vào đầu một mảng. Giống như push(), nó thay đổi mảng gốc và trả về độ dài mới.

Cú pháp

array.unshift(element1, element2, ..., elementN);

Ví dụ

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

3.3 Thêm ở Vị trí Bất kỳ: splice()

splice() là gì?

Phương thức splice() là một tùy chọn linh hoạt cho phép bạn thêm hoặc xóa phần tử ở bất kỳ vị trí nào trong mảng.

Cú pháp

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

Ví dụ

Chỉ thêm phần tử:

let colors = ["red", "blue", "green"];
colors.splice(1, 0, "yellow");
console.log(colors); // ["red", "yellow", "blue", "green"]

Thêm và xóa cùng lúc:

colors.splice(2, 1, "purple");
console.log(colors); // ["red", "yellow", "purple", "green"]

Tổng kết

4. Kỹ thuật Nâng cao: Gộp Mảng và Thêm Phần tử

4.1 Gộp Mảng: concat()

concat() là gì?

Phương thức concat() là một phương thức không thay đổi (non‑mutating) được dùng để gộp nhiều mảng thành một mảng mới. Các mảng gốc không bị thay đổi và một mảng mới được trả về.

Cú pháp

array1.concat(array2, array3, ...);

Ví dụ

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];

let result = array1.concat(array2);
console.log(result); // [1, 2, 3, 4, 5, 6]

4.2 Gộp Mảng bằng Spread Syntax (...)

Spread Syntax là gì?

Spread syntax (...) là một tính năng hiện đại của JavaScript cho phép mở rộng các phần tử từ mảng hoặc đối tượng. Nó cho phép bạn hợp nhất các mảng hoặc thêm các phần tử mới với mã ngắn gọn, dễ đọc.

Cú pháp

[...array1, ...array2, ...elements];

Ví dụ

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];

let result = [...array1, ...array2];
console.log(result); // [1, 2, 3, 4, 5, 6]

4.3 So sánh các tùy chọn hợp nhất mảng

Tóm tắt

Trong phần này, chúng tôi đã đề cập đến các kỹ thuật nâng cao để hợp nhất mảng.

• Phương thức concat() : Một cách hợp nhất mảng không làm thay đổi các mảng gốc.
• Spread syntax : Một cách tiếp cận hiện đại, ngắn gọn cho các thao tác mảng linh hoạt.

5. Các thực hành tốt nhất để xử lý mảng hiệu quả

5.1 Phương pháp thay đổi (mutating) vs. không thay đổi (non-mutating)

Phương pháp thay đổi là gì?

Đây là các phương pháp trực tiếp sửa đổi mảng gốc.

Phương pháp không thay đổi là gì?

Đây là các phương pháp không thay đổi mảng gốc mà thay vào đó trả về một mảng mới.

5.2 Viết mã chú ý tới hiệu năng

Tối ưu hoá vòng lặp

Vòng lặp hiệu quả:

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

Sử dụng chuỗi phương thức

let numbers = [1, 2, 3, 4, 5];
let result = numbers
  .filter(num => num > 2)
  .map(num => num * 2);

console.log(result); // [6, 8, 10]

5.3 Cải thiện khả năng đọc mã

Sử dụng tên biến rõ ràng

let userIds = [1, 2, 3];

Thêm chú thích một cách thích hợp

let evenIds = userIds.filter(id => id % 2 === 0);

Sử dụng Template Literals

let name = "Yamada";
let age = 25;
console.log(`${name} is ${age} years old.`);

Tóm tắt

Trong phần này, chúng tôi đã giới thiệu các thực hành tốt nhất cho các thao tác mảng hiệu quả.

• Lựa chọn giữa các phương pháp thay đổi và không thay đổi
• Sử dụng các vòng lặp chú ý tới hiệu năng và chuỗi phương thức
• Cải thiện khả năng đọc qua việc đặt tên và chú thích

6. Ví dụ thực tế và các trường hợp sử dụng

6.1 Quản lý dữ liệu nhập từ biểu mẫu

Kịch bản: Lưu giá trị nhập từ biểu mẫu vào một mảng

let userList = [];

function addUser(name) {
  userList.push(name);
  console.log(userList);
}

addUser("Sato");
addUser("Suzuki");
addUser("Tanaka");

Kết quả:

["Sato"]  
["Sato", "Suzuki"]  
["Sato", "Suzuki", "Tanaka"]

Xóa một phần tử cụ thể khỏi mảng

function removeUser(name) {
  userList = userList.filter(user => user !== name);
  console.log(userList);
}

removeUser("Suzuki");

Kết quả:

["Sato", "Tanaka"]

6.2 Thêm dữ liệu động trong ứng dụng quản lý công việc

Kịch bản: Thêm công việc và theo dõi hoàn thành

let tasks = [];

function addTask(name) {
  tasks.push({ name: name, completed: false });
  console.log(tasks);
}

function completeTask(index) {
  tasks[index].completed = true;
  console.log(tasks);
}

addTask("Cleaning");
addTask("Laundry");
completeTask(0);

Kết quả:

[{ name: "Cleaning", completed: true }, { name: "Laundry", completed: false }]

6.3 Xử lý cấu trúc dữ liệu phức tạp

Kịch bản: Làm việc với mảng và đối tượng lồng nhau

let users = [
  { id: 1, name: "Sato", roles: ["admin", "editor"] },
  { id: 2, name: "Suzuki", roles: ["viewer"] },
];

function addRole(userId, role) {
  let user = users.find(user => user.id === userId);
  if (user && !user.roles.includes(role)) {
    user.roles.push(role);
  }
  console.log(users);
}

addRole(2, "editor");

Kết quả:

[
  { id: 1, name: "Sato", roles: ["admin", "editor"] },
  { id: 2, name: "Suzuki", roles: ["viewer", "editor"] }
]

Tóm tắt

Trong phần này, chúng tôi đã giải thích các ứng dụng thực tế của các thao tác mảng thông qua các trường hợp sử dụng trong thực tế.

1. Quản lý dữ liệu nhập biểu mẫu – Các thao tác cơ bản để thêm và xóa mục.
2. Xây dựng ứng dụng quản lý công việc – Xử lý mảng động và cập nhật trạng thái.
3. Xử lý cấu trúc dữ liệu phức tạp – Thêm và cập nhật phần tử trong mảng và đối tượng lồng nhau.

7. Câu hỏi thường gặp (Hỏi & Đáp)

Q1. Cách dễ nhất để làm trống một mảng là gì?

Trả lời: Đặt thuộc tính length thành 0

let arr = [1, 2, 3, 4];
arr.length = 0;
console.log(arr); // []

Q2. Làm thế nào để chỉ thêm các phần tử duy nhất (không trùng lặp)?

Trả lời: Sử dụng includes() hoặc Set

Ví dụ 1: Kiểm tra trùng lặp bằng includes()

let arr = [1, 2, 3];
let value = 3;

if (!arr.includes(value)) {
  arr.push(value);
}
console.log(arr); // [1, 2, 3]

Ví dụ 2: Loại bỏ trùng lặp bằng Set

let arr = [1, 2, 3];
let values = [3, 4, 5];

arr = [...new Set([...arr, ...values])];
console.log(arr); // [1, 2, 3, 4, 5]

Q3. Làm thế nào để thêm phần tử vào một mảng lồng nhau?

Trả lời: Sử dụng push() hoặc cú pháp spread

Ví dụ 1: Thêm một mảng lồng mới

let nestedArray = [[1, 2], [3, 4]];
nestedArray.push([5, 6]);
console.log(nestedArray); // [[1, 2], [3, 4], [5, 6]]

Ví dụ 2: Thêm một phần tử vào một mảng lồng cụ thể

nestedArray[1].push(7);
console.log(nestedArray); // [[1, 2], [3, 4, 7], [5, 6]]

Tóm tắt

8. Tổng kết cuối cùng và Bảng so sánh

8.1 Tổng quan chung

Các thao tác mảng cơ bản

• Mảng là gì? Một cấu trúc quản lý nhiều giá trị, và bạn truy cập các phần tử thông qua chỉ mục.
• Khởi tạo và các thao tác cơ bản Mảng dễ tạo bằng [], và bạn có thể kiểm tra số lượng phần tử bằng length .

Các phương pháp Thêm/Xóa phần tử

• Thêm vào cuối: push() Đơn giản và phổ biến, nhưng nó thay đổi mảng gốc.
• Thêm vào đầu: unshift() Hữu ích khi thứ tự quan trọng, nhưng cần lưu ý hiệu năng.
• Thêm/xóa ở bất kỳ vị trí nào: splice() Rất linh hoạt, nhưng cú pháp có thể hơi phức tạp.

Gộp và mở rộng mảng

• concat() Cách không thay đổi, an toàn để gộp nhiều mảng.
• Cú pháp spread (...) Đơn giản, dễ đọc, và lý tưởng cho môi trường JavaScript hiện đại.

Mẹo tối ưu hiệu suất

• Phương pháp thay đổi vs. không thay đổi Chọn các phương pháp không thay đổi khi cần bảo toàn dữ liệu gốc.
• Vòng lặp tập trung vào hiệu suất Tối ưu tốc độ và hiệu quả bộ nhớ khi phù hợp.

Ví dụ và trường hợp sử dụng

• Quản lý nhập liệu biểu mẫu Lưu giá trị trong mảng và thực hiện thêm/xóa dễ dàng.
• Hệ thống quản lý công việc Thêm và xóa nhiệm vụ một cách động và theo dõi trạng thái hoàn thành.
• Các thao tác dữ liệu lồng nhau Xử lý linh hoạt các cấu trúc phức tạp với mảng và đối tượng lồng nhau.

8.2 Bảng so sánh các phương pháp mảng

Tóm tắt

Trong bài viết này, chúng tôi đã cung cấp một giải thích có cấu trúc về các thao tác mảng trong JavaScript, từ cơ bản đến các kỹ thuật nâng cao.

• Các thao tác mảng cốt lõi và các phương pháp thêm/xóa phần tử.
• Các kỹ thuật nâng cao như gộp mảng và mở rộng.
• Các trường hợp sử dụng thực tế và mẹo quản lý mảng hiệu quả.
• Các câu hỏi thường gặp và giải pháp của chúng.

Các bước tiếp theo

Tiếp tục học JavaScript và nâng cao kỹ năng của bạn bằng cách áp dụng các kỹ thuật mảng này vào các dự án thực tế!