Giải thích hàm splice() trong mảng JavaScript: Xóa, Chèn, Thay thế (kèm ví dụ)

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

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

1. Giới thiệu: Phương thức splice là gì?

JavaScript cung cấp một phương thức tiện lợi có tên splice cho phép bạn thêm, xóa, và thay thế các phần tử trong một mảng một cách hiệu quả.

Ví dụ, bạn đã bao giờ gặp các tình huống như sau chưa?

• Bạn muốn xóa một số phần tử khỏi một mảng.
• Bạn muốn chèn các phần tử mới vào một vị trí cụ thể.
• Bạn muốn thay thế các phần tử hiện có bằng các giá trị khác.

Trong những trường hợp này, phương thức splice rất hữu ích.

Mục đích của Bài viết này

Trong bài viết này, chúng tôi sẽ giải thích chi tiết về phương thức splice của JavaScript — từ những kiến thức cơ bản đến các trường hợp sử dụng thực tế. Với nhiều ví dụ mã, bạn sẽ có thể xây dựng kiến thức thực hành, áp dụng trong thực tế.

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

• Người mới bắt đầu vừa mới học JavaScript.
• Người học trung cấp muốn nâng cao hiểu biết về thao tác mảng.
• Lập trình viên muốn viết mã hiệu quả cho công việc thực tế.

Bạn sẽ học được gì

Sau khi đọc xong bài viết này, bạn sẽ có thể:

• Hiểu cú pháp của splice và cách sử dụng các đối số của nó.
• Thực hiện các thao tác cơ bản như xóa, chèn và thay thế các phần tử.
• Hiểu rõ cách nó khác với các phương thức mảng khác và chọn công cụ phù hợp cho công việc.

Trong phần tiếp theo, chúng ta sẽ bắt đầu với khái niệm cốt lõi và cú pháp của phương thức splice.

2. Khái niệm Cốt lõi: Tổng quan và Cú pháp của splice

Trong phần này, chúng tôi sẽ giải thích chi tiết khái niệm cơ bản và cú pháp của phương thức splice trong JavaScript.

2.1 Tổng quan về Phương thức splice

Phương thức splice là một phương thức phá hủy được dùng để xóa, chèn và thay thế các phần tử trong một mảng. Phương thức phá hủy có nghĩa là nó thay đổi trực tiếp mảng gốc.

Khi quản lý dữ liệu một cách động trong JavaScript, khả năng linh hoạt thao tác các phần tử mảng là rất có giá trị — vì vậy splice thường được sử dụng.

Các khả năng chính:

1. Xóa các phần tử bắt đầu từ một vị trí xác định.
2. Chèn các phần tử mới vào bất kỳ vị trí nào.
3. Thay thế các phần tử hiện có bằng các giá trị khác.

2.2 Cú pháp của Phương thức splice

Cú pháp cơ bản như sau:

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

Chi tiết các đối số:

1. start (required)

• Xác định chỉ mục bắt đầu thay đổi mảng.
• Nếu bạn truyền một giá trị âm, nó sẽ đếm từ cuối mảng.

2. deleteCount (optional)

• Xác định số phần tử cần xóa.
• Nếu bạn đặt nó là 0, sẽ không có phần tử nào bị xóa và chỉ chèn các phần tử mới.
• Nếu bỏ qua, tất cả các phần tử từ start đến cuối mảng sẽ bị xóa.

3. item1, item2, … (optional)

• Các phần tử cần chèn vào mảng.
• Nếu bỏ qua, splice chỉ thực hiện việc xóa.

Giá trị trả về:

• Trả về một mảng mới chứa các phần tử đã bị xóa.

2.3 Ví dụ và Giải thích

1. Xóa các phần tử

   let fruits = ["apple", "banana", "cherry", "date"];
   // Remove 2 elements starting at index 1
   let removed = fruits.splice(1, 2);
   
   console.log(fruits);   // ["apple", "date"]
   console.log(removed);  // ["banana", "cherry"]
   

2. Chèn các phần tử

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

3. Thay thế các phần tử

   let numbers = [1, 2, 3, 4, 5];
   // Replace 2 elements starting at index 1
   numbers.splice(1, 2, 'a', 'b');
   
   console.log(numbers);  // [1, 'a', 'b', 4, 5]
   

2.4 Những điểm cần nhớ

• splice là phương thức phá hủy: nó thay đổi mảng gốc, vì vậy hãy sử dụng cẩn thận.
• Rất linh hoạt: một phương thức có thể xử lý việc xóa, chèn và thay thế.
• Đa năng dựa trên sự kết hợp các đối số: hỗ trợ cả các thao tác đơn giản và nâng cao.

Trong phần tiếp theo, chúng tôi sẽ giới thiệu các ví dụ sử dụng chi tiết hơn và các mẫu mã thực tế. Hãy nâng cao hiểu biết của bạn thông qua các kịch bản thực tế.

3. Ví dụ: Các thao tác splice cơ bản

Trong phần này, chúng ta sẽ đi qua các ví dụ cụ thể về việc sử dụng phương thức splice. Chúng ta sẽ đề cập đến việc xóa, chèn và thay thế với mã mẫu.

3.1 Xóa phần tử

Cách xóa các phần tử bắt đầu từ một vị trí cụ thể

Ví dụ mã:

let fruits = ["apple", "banana", "cherry", "date"];
// Remove 2 elements starting at the second index
let removed = fruits.splice(1, 2);

console.log(fruits);   // ["apple", "date"]
console.log(removed);  // ["banana", "cherry"]

Giải thích:

• Chỉ mục bắt đầu (1) : bắt đầu ở “banana” (chỉ mục 1).
• Số phần tử cần xóa (2) : xóa “banana” và “cherry”.
• Giá trị trả về : trả về các phần tử đã xóa dưới dạng một mảng mới.

Lưu ý:
Lưu ý rằng mảng gốc fruits đã bị thay đổi.

3.2 Chèn phần tử

Cách chèn các phần tử mới vào một vị trí cụ thể

Ví dụ mã:

let colors = ["red", "blue"];
// Insert 2 elements at index 1
colors.splice(1, 0, "green", "yellow");

console.log(colors);  // ["red", "green", "yellow", "blue"]

Giải thích:

• Chỉ mục bắt đầu (1) : bắt đầu chèn tại chỉ mục 1.
• Số phần tử cần xóa (0) : không xóa gì.
• Các phần tử cần chèn (“green”, “yellow”) : chèn “green” và “yellow”.

Lưu ý:
Nếu bạn muốn chèn mà không xóa, đặt deleteCount thành 0.
Bạn có thể chèn nhiều phần tử bằng cách ngăn cách chúng bằng dấu phẩy.

3.3 Thay thế phần tử

Cách thay thế các phần tử hiện có bằng các giá trị mới

Ví dụ mã:

let numbers = [10, 20, 30, 40];
// Replace 2 elements starting at index 1
numbers.splice(1, 2, 25, 35);

console.log(numbers);  // [10, 25, 35, 40]

Giải thích:

• Chỉ mục bắt đầu (1) : bắt đầu ở “20”.
• Số phần tử cần xóa (2) : xóa “20” và “30”.
• Các phần tử cần chèn (25, 35) : chèn “25” và “35”.

Lưu ý:
Bằng cách xóa và chèn trong một lần gọi, bạn có thể thay thế các phần tử.

3.4 Sử dụng chỉ mục âm

Với splice, bạn có thể sử dụng chỉ mục âm để đếm từ cuối mảng.

Ví dụ mã:

let items = ["a", "b", "c", "d"];
arr.splice(-2, 1); // Remove the second-to-last element
console.log(items);  // ["a", "b", "d"]

Giải thích:

• Chỉ mục bắt đầu (-2) : nhắm tới “c” làm vị trí bắt đầu xóa.
  Các chỉ mục âm cho phép bạn thao tác tương đối so với cuối mảng.

3.5 Chèn vào mảng rỗng

Bạn cũng có thể sử dụng splice với một mảng rỗng.

Ví dụ mã:

let empty = [];
empty.splice(0, 0, "new item");

console.log(empty);  // ["new item"]

Lưu ý:
Điều này hữu ích khi bạn muốn khởi tạo một mảng rỗng đồng thời chèn các phần tử.

3.6 Tóm tắt các ví dụ

• Xóa phần tử : chỉ định chỉ mục bắt đầu và số lượng cần xóa.
• Chèn phần tử : đặt deleteCount thành 0 và cung cấp các mục.
• Thay thế phần tử : xóa và chèn trong cùng một thao tác.
• Chỉ mục âm : chỉ định vị trí từ cuối.
• Chèn vào mảng rỗng : chèn trong khi khởi tạo.

Trong phần tiếp theo, chúng ta sẽ xem xét các cách sử dụng nâng cao hơn. Hãy học các kỹ thuật giúp trong việc thao tác dữ liệu thực tế và quy trình làm việc thực tiễn.

4. Ví dụ nâng cao: Các kịch bản thực tế

Trong phần này, chúng ta sẽ giới thiệu các ví dụ nâng cao sử dụng phương thức splice. Dựa trên các kịch bản thực tế, chúng ta sẽ giải thích cách xử lý các thao tác dữ liệu phức tạp hơn.

4.1 Xóa các phần tử trùng lặp

Kịch bản: Bạn muốn xóa các phần tử trùng lặp trong một danh sách, chỉ để lại một bản sao của mỗi phần tử.

Ví dụ mã:

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

// Remove duplicates
for (let i = 0; i < numbers.length; i++) {
  while (numbers.indexOf(numbers[i]) !== numbers.lastIndexOf(numbers[i])) {
    numbers.splice(numbers.lastIndexOf(numbers[i]), 1);
  }
}

console.log(numbers); // [1, 2, 3, 4, 5]

Giải thích:

1. Sử dụng indexOf và lastIndexOf để kiểm tra xem cùng một giá trị có xuất hiện nhiều lần hay không.
2. Nếu phát hiện trùng lặp, loại bỏ chúng bằng splice .

4.2 Chèn một phần tử vào vị trí cụ thể

Kịch bản: Bạn cần chèn một phần tử mới vào một vị trí cụ thể trong mảng.

Code example:

let tasks = ["Start", "In Progress", "Done"];
tasks.splice(1, 0, "On Hold");

console.log(tasks); // ["Start", "On Hold", "In Progress", "Done"]

Giải thích:

• Chúng tôi đã chèn “On Hold” vào chỉ mục 1 .
• Mảng gốc bị thay đổi, và các phần tử hiện có dịch sang bên phải.

4.3 Thay thế các phần tử khớp với một điều kiện

Kịch bản: Bạn muốn thay thế các phần tử khớp với một điều kiện cụ thể bằng một giá trị khác.

Code example:

let scores = [50, 60, 70, 80, 90];

// Replace scores of 70 or lower with "Fail"
for (let i = 0; i < scores.length; i++) {
  if (scores[i] <= 70) {
    scores.splice(i, 1, "Fail");
  }
}

console.log(scores); // ["Fail", "Fail", "Fail", 80, 90]

Giải thích:

1. Duyệt qua mảng và tìm các phần tử khớp với điều kiện.
2. Khi tìm thấy khớp, thay thế nó bằng splice .

4.4 Xóa nhiều phần tử khỏi một mảng

Kịch bản: Bạn muốn xóa tất cả các lần xuất hiện của một giá trị cụ thể cùng một lúc.

Code example:

let items = ["apple", "banana", "cherry", "banana", "date"];

// Remove all "banana"
for (let i = items.length - 1; i >= 0; i--) {
  if (items[i] === "banana") {
    items.splice(i, 1);
  }
}

console.log(items); // ["apple", "cherry", "date"]

Giải thích:

• Lặp ngược lại ngăn ngừa các vấn đề về dịch chỉ mục khi xóa phần tử bằng splice .

4.5 Sắp xếp lại các phần tử trong một mảng

Kịch bản: Bạn muốn sắp xếp lại các phần tử trong một mảng.

Code example:

let numbers = [10, 20, 30, 40];

// Swap positions (reorder)
numbers.splice(1, 2, 35, 25);

console.log(numbers); // [10, 35, 25, 40]

Giải thích:

• Điều này loại bỏ các phần tử hiện có và chèn các phần tử mới theo thứ tự mong muốn.
• Nó có thể được áp dụng cho việc xử lý dữ liệu phức tạp hơn và quản lý danh sách.

4.6 Tóm tắt các ví dụ nâng cao

• Xóa trùng lặp: hữu ích cho việc làm sạch dữ liệu.
• Chèn phần tử: cho phép thêm linh hoạt trong danh sách và mảng.
• Thay thế có điều kiện: hữu ích cho việc lọc và quản lý trạng thái.
• Xóa hàng loạt: dọn dẹp hiệu quả dữ liệu không mong muốn.
• Sắp xếp lại: hữu ích cho việc điều chỉnh thứ tự hiển thị và quản lý danh sách.

Trong phần tiếp theo, chúng ta sẽ so sánh splice với các phương thức mảng khác và giải thích cách chọn phương pháp phù hợp cho mỗi tình huống.

5. So sánh với các phương pháp khác

Trong phần này, chúng ta sẽ so sánh phương thức splice với các phương thức mảng khác có mục đích tương tự. Hiểu được đặc điểm của chúng giúp bạn chọn cách tiếp cận tốt nhất.

5.1 splice vs slice

splice: thay đổi phá hủy

• Thay đổi mảng gốc (phá hủy).
• Có thể xóa, chèn và thay thế các phần tử.

slice: sao chép không phá hủy

• Không thay đổi mảng gốc; trả về một mảng mới (không phá hủy).
• Chỉ trích xuất các phần tử trong một phạm vi; không thể chèn hoặc thay thế.

Bảng so sánh:

Ví dụ: splice

let arr = [1, 2, 3, 4];
arr.splice(1, 2); // Remove 2 elements starting at index 1
console.log(arr); // [1, 4]

Ví dụ: slice

let arr = [1, 2, 3, 4];
let sliced = arr.slice(1, 3); // Get elements from index 1 up to (but not including) 3
console.log(sliced); // [2, 3]
console.log(arr);    // [1, 2, 3, 4] Original array is not changed

Điểm chính:

• Nếu bạn không muốn thay đổi mảng gốc, chọn slice .
• Nếu bạn cần các sửa đổi động, ngay tại chỗ, sử dụng splice .

5.2 splice vs push/pop

push: thêm vào cuối

• Thêm một phần tử vào cuối mảng.
• Thay đổi mảng gốc.

pop: xóa khỏi cuối

• Xóa phần tử cuối cùng khỏi mảng.

• Thay đổi mảng gốc.

• Loại bỏ một phần tử ở cuối mảng.

• Thay đổi mảng gốc.

Bảng so sánh:

Ví dụ: push

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

Ví dụ: pop

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

Điểm chính:

• push/pop là lựa chọn tốt nhất cho các thao tác đơn giản ở cuối mảng.
• splice phù hợp hơn cho các thay đổi phức tạp hơn (như chỉnh sửa một vị trí cụ thể).

5.3 splice so với shift/unshift

shift: loại bỏ từ đầu

• Loại bỏ phần tử đầu tiên của mảng.
• Thay đổi mảng gốc.

unshift: thêm vào đầu

• Thêm các phần tử vào đầu mảng.
• Thay đổi mảng gốc.

Bảng so sánh:

Ví dụ: shift

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

Ví dụ: unshift

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

Điểm chính:

• shift/unshift chuyên thực hiện các thao tác ở đầu mảng.
• splice cung cấp tính linh hoạt cho các vị trí ở giữa hoặc bất kỳ vị trí nào.

5.4 Tóm tắt so sánh các phương thức

Cách lựa chọn:

• Khi bạn cần tính linh hoạt : sử dụng splice.
• Đối với các thao tác đơn giản : push/pop hoặc shift/unshift là phù hợp.
• Khi bạn muốn giữ nguyên mảng gốc : slice là tốt nhất.

Trong phần tiếp theo, chúng ta sẽ thảo luận về các lưu ý và thực hành tốt khi sử dụng splice. Hãy xem các điểm chính để viết mã an toàn và hiệu quả.

6. Lưu ý và Thực hành tốt

Trong phần này, chúng tôi sẽ giải thích các lưu ý quan trọng và thực hành tốt khi sử dụng phương thức splice của JavaScript một cách hiệu quả.

6.1 Lưu ý

1. Nó thay đổi mảng gốc (phương pháp phá hủy)
Phương thức splice thay đổi trực tiếp mảng gốc. Nếu sử dụng một cách không cẩn thận, nó có thể phá vỡ tính nhất quán của dữ liệu.

Ví dụ: mảng đã bị thay đổi

let arr = [1, 2, 3, 4];
arr.splice(1, 2); // Remove elements
console.log(arr); // [1, 4]

Giải pháp: sao chép mảng trước khi chỉnh sửa
Nếu bạn muốn giữ nguyên mảng gốc, hãy tạo một bản sao bằng cách sử dụng slice trước.

let arr = [1, 2, 3, 4];
let copy = arr.slice(); // Create a copy
copy.splice(1, 2);
console.log(arr);  // [1, 2, 3, 4] Original array is not changed
console.log(copy); // [1, 4] Only the copy is changed

2. Cẩn thận với lỗi chỉ mục
Nếu bạn chỉ định một chỉ mục không đúng, có thể gặp hành vi không mong muốn.

Ví dụ: sử dụng sai chỉ mục âm

let arr = [1, 2, 3, 4];
arr.splice(-5, 1); // No error, but may not behave as expected
console.log(arr);  // [1, 2, 3, 4]

Giải pháp: xác thực phạm vi chỉ mục trước

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

if (index >= -arr.length && index < arr.length) {
  arr.splice(index, 1);
} else {
  console.log("Index is out of range.");
}

3. Tác động đến hiệu năng
Vì splice di chuyển các phần tử sau mỗi thao tác, nó có thể chậm trên các mảng lớn.

Ví dụ: thao tác trên dữ liệu lớn

let arr = Array(1000000).fill(0);
console.time("splice");
arr.splice(500000, 1); // Remove from the middle
console.timeEnd("splice");

Giải pháp: cân nhắc chia mảng hoặc sử dụng cách tiếp cận khác

let arr = Array(1000000).fill(0);
let part1 = arr.slice(0, 500000); // First half
let part2 = arr.slice(500001);   // Second half
let result = part1.concat(part2); // Rebuild without the removed element

6.2 Thực hành tốt

1. Sử dụng nó cho quản lý trạng thái và chỉnh sửa dữ liệu động
splice hữu ích khi quản lý danh sách động hoặc các cập nhật do người dùng thực hiện.

Ví dụ: xóa một nhiệm vụ trong ứng dụng quản lý công việc

let tasks = ["Task 1", "Task 2", "Task 3"];
let index = tasks.indexOf("Task 2");
if (index !== -1) {
  tasks.splice(index, 1);
}
console.log(tasks); // ["Task 1", "Task 3"]

Lưu ý: kết hợp tìm kiếm chỉ mục và splice cho phép quản lý linh hoạt.

2. Sử dụng các phần tử đã bị loại bỏ
Vì splice trả về các phần tử đã bị loại bỏ, bạn có thể sử dụng chúng để ghi log hoặc lưu trữ tạm thời.

Ví dụ: ghi lại phần tử đã bị loại bỏ

let users = ["Alice", "Bob", "Charlie"];
let removed = users.splice(1, 1); // Remove Bob
console.log(removed[0] + " was removed."); // Bob was removed.

Điểm: giúp việc theo dõi lịch sử và các tính năng khôi phục dễ dàng hơn.

3. Đóng gói các thao tác chung trong các hàm có thể tái sử dụng
Nếu bạn thường xuyên sử dụng cùng một thao tác, hãy biến nó thành một hàm để tăng khả năng tái sử dụng và dễ đọc hơn.

Ví dụ: hàm để loại bỏ một phần tử cụ thể

function removeElement(arr, value) {
  let index = arr.indexOf(value);
  if (index !== -1) {
    arr.splice(index, 1);
  }
  return arr;
}

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

Điểm: giảm sự trùng lặp và cải thiện khả năng đọc.

6.3 Tóm tắt các Lưu ý và Thực hành Tốt nhất

• Nhớ rằng nó là phá hủy : mảng gốc bị thay đổi.
• Luôn kiểm tra phạm vi chỉ mục : cẩn thận với các chỉ mục âm và truy cập ngoài phạm vi.
• Tối ưu cho mảng lớn : cân nhắc việc chia nhỏ hoặc các phương pháp thay thế.
• Kết hợp với ghi log/khôi phục : sử dụng các phần tử đã bị loại bỏ để quản lý lịch sử.
• Sử dụng hàm để tái sử dụng : cải thiện khả năng bảo trì với các trợ giúp có thể tái sử dụng.

Trong phần tiếp theo, chúng tôi sẽ đề cập đến các câu hỏi thường gặp về splice dưới dạng FAQ để giúp bạn giải quyết những nhầm lẫn thực tế thường gặp.

7. Các Câu Hỏi Thường Gặp (FAQ)

Trong phần này, chúng tôi đã tổng hợp các câu hỏi và câu trả lời thường gặp về phương thức splice. Hãy giải đáp những nghi ngờ của bạn trước và hướng tới sự hiểu biết sâu hơn.

7.1 Danh sách FAQ

Câu hỏi 1. Phương thức splice có phá hủy không?
Trả lời. Có, splice là một phương thức phá hủy.
Vì splice thay đổi mảng gốc, bạn nên sử dụng nó một cách cẩn thận.

Ví dụ: mảng gốc đã bị thay đổi

let arr = [1, 2, 3, 4];
arr.splice(1, 2); // Remove elements
console.log(arr); // [1, 4]

Giải pháp: giữ nguyên mảng gốc
Nếu bạn muốn bảo toàn trạng thái ban đầu, hãy tạo một bản sao bằng slice.

let arr = [1, 2, 3, 4];
let copy = arr.slice();
copy.splice(1, 2);
console.log(arr);  // [1, 2, 3, 4] Original array is not changed
console.log(copy); // [1, 4] Only the copy is changed

Câu hỏi 2. Điều gì xảy ra nếu không có phần tử nào để loại bỏ bằng splice?
Trả lời. Nếu không có gì bị loại bỏ, một mảng rỗng sẽ được trả về.

Ví dụ: khi deleteCount là 0

let arr = [1, 2, 3, 4];
let removed = arr.splice(1, 0, "new");
console.log(arr);     // [1, "new", 2, 3, 4]
console.log(removed); // [] (nothing was removed)

Điểm:

• Nếu deleteCount được đặt là 0, không có việc xóa nào xảy ra và chỉ có việc chèn.

Câu hỏi 3. Tôi có thể sử dụng splice trên một mảng rỗng không?
Trả lời. Có, bạn có thể sử dụng nó ngay cả trên một mảng rỗng.

Ví dụ: chèn vào một mảng rỗng

let arr = [];
arr.splice(0, 0, "item");
console.log(arr); // ["item"]

Điểm:
Điều này hữu ích khi chèn các phần tử mới.

Câu hỏi 4. Các chỉ mục âm được xử lý như thế nào?
Trả lời. Các chỉ mục âm chỉ vị trí tính từ cuối mảng.

Ví dụ: sử dụng chỉ mục âm

let arr = [1, 2, 3, 4, 5];
arr.splice(-2, 1); // Remove the second-to-last element
console.log(arr); // [1, 2, 3, 5]

Điểm:

• Các chỉ mục âm cung cấp khả năng chỉnh sửa linh hoạt từ cuối mảng.
• Chúng hữu ích khi bạn muốn thao tác gần cuối mảng.

Câu hỏi 5. Sự khác biệt giữa splice và slice là gì?
Trả lời. Sự khác biệt chính là việc mảng gốc có bị thay đổi hay không.

Ví dụ: hành vi của splice

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

Ví dụ: hành vi của slice

let arr = [1, 2, 3, 4];
let sliced = arr.slice(1, 3);
console.log(sliced); // [2, 3]
console.log(arr);    // [1, 2, 3, 4] Original array is not changed

Q6. Tôi có thể thêm nhiều phần tử bằng splice không?
A. Có, bạn có thể thêm nhiều phần tử bằng cách liệt kê chúng cách nhau bằng dấu phẩy.

Ví dụ: chèn nhiều phần tử

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

Điểm:

• Cung cấp nhiều phần tử từ đối số thứ ba trở đi.
• Điều này hữu ích cho việc quản lý dữ liệu linh hoạt.

7.2 Tóm tắt FAQ

1. Lưu ý rằng nó phá hủy : mảng gốc bị thay đổi.
2. Không xóa không gây lỗi : nó trả về một mảng rỗng.
3. Chỉ mục âm cho phép chỉnh sửa từ cuối : một cách tiếp cận tiện lợi.
4. Lựa chọn giữa splice và slice quan trọng : sử dụng slice nếu bạn muốn giữ nguyên mảng gốc.
5. Chèn nhiều phần tử rất dễ : hữu ích cho quản lý dữ liệu thực tế.

Trong phần tiếp theo, chúng tôi sẽ tóm tắt các điểm chính của bài viết và giới thiệu các tài nguyên bổ sung để học sâu hơn.

8. Kết luận

Trong bài viết này, chúng tôi đã giải thích phương thức JavaScript splice từ cơ bản đến các ứng dụng thực tế. Hãy xem lại các điểm chính và đưa ra đề xuất cho các bước tiếp theo.

8.1 Những điểm quan trọng

1. Khả năng cốt lõi

• splice là một phương thức mạnh mẽ để xóa, chèn và thay thế các phần tử trong mảng.
• Đây là một phương thức phá hủy, có nghĩa là nó thay đổi mảng gốc.

1. Cú pháp và đối số

• Sử dụng dạng splice(start, deleteCount, item1, item2, ...) .
• Kết hợp chỉ mục bắt đầu, số lượng xóa và các mục chèn để thực hiện các thao tác linh hoạt.

1. Sử dụng cơ bản và nâng cao

• Ngoài việc xóa, chèn và thay thế cơ bản, chúng tôi đã đề cập đến các mẫu nâng cao như loại bỏ trùng lặp và thay thế có điều kiện.

1. So sánh với các phương thức khác

• splice thay đổi mảng, trong khi slice trích xuất các mảng con mà không thay đổi.
• Đối với các thao tác thêm/bớt đơn giản, push / pop và shift / unshift cũng hữu ích.

1. Cảnh báo và thực hành tốt

• Vì nó thay đổi mảng, hãy tạo một bản sao khi bạn cần an toàn.
• Hãy chú ý đến phạm vi chỉ mục và hiệu suất, và cân nhắc tối ưu khi cần.

1. Phạm vi FAQ

• Chúng tôi đã trả lời các câu hỏi thường gặp như chỉ mục âm và chèn nhiều phần tử.

8.2 Các bước tiếp theo

Mặc dù splice là thiết yếu cho việc học thao tác mảng, JavaScript cung cấp nhiều phương thức mảng hữu ích khác. Học các phương thức sau sẽ cho phép thực hiện các thao tác nâng cao hơn:

• Phương thức map : biến đổi các phần tử và trả về một mảng mới.
• Phương thức filter : trích xuất các phần tử thỏa mãn điều kiện vào một mảng mới.
• Phương thức reduce : tổng hợp các phần tử thành một kết quả duy nhất.

Thứ tự học đề xuất:

1. Thực hành chuyển đổi dữ liệu bằng map và filter .
2. Thử tổng hợp nâng cao hơn với reduce .
3. So sánh các phương thức phá hủy ( push , pop , v.v.) với các phương thức không phá hủy ( slice , concat , v.v.) và sử dụng chúng một cách phù hợp.

8.3 Tài nguyên tham khảo

Để nâng cao hiểu biết, hãy xem xét sử dụng các tài nguyên sau:

• Tài liệu chính thức MDN Web Docs – splice
• Các trang học trực tuyến
• JavaScript.info – bao phủ JavaScript từ cơ bản đến các chủ đề nâng cao.
• Codecademy – cung cấp trải nghiệm học tương tác.
• Xây dựng dự án thực tế
• CodePen – tuyệt vời để tạo và chia sẻ các demo mã.
• JSFiddle – lý tưởng để thử nghiệm và gỡ lỗi JavaScript.

8.4 Lưu ý cuối cùng

Phương thức splice là một kỹ năng then chốt để hiểu thao tác mảng trong JavaScript. Qua bài viết này, bạn đã học được mọi thứ từ cách sử dụng cơ bản đến các kỹ thuật thực tiễn.

Trong tương lai, hãy thử áp dụng những gì bạn đã học vào các dự án thực tế, và khám phá việc kết hợp splice với các phương thức mảng khác và tối ưu hiệu suất.

Tiếp tục đào sâu vào JavaScript, và xây dựng mã hiệu quả và mạnh mẽ hơn!