Thành thạo JavaScript slice(): Hướng dẫn toàn diện với ví dụ và các thực tiễn tốt nhất

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

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

1. Giới thiệu

JavaScript là một trong những ngôn ngữ lập trình quan trọng nhất trong phát triển web hiện đại. Trong số rất nhiều tính năng của nó, phương thức slice cung cấp chức năng vô cùng hữu ích khi làm việc với mảng và chuỗi. Bài viết này giải thích mọi thứ từ cơ bản đến nâng cao về phương thức slice, giúp cả người mới bắt đầu và người dùng trung cấp nắm vững toàn bộ.

Tại sao phương thức slice lại quan trọng?

JavaScript thường yêu cầu thao tác dữ liệu. Ví dụ, bạn có thể cần “trích xuất chỉ dữ liệu cụ thể” hoặc “xử lý chỉ một phần của mảng”.
Phương thức slice được thiết kế chính xác cho những tình huống này.
Các tính năng chính:

• Trích xuất các giá trị một phần mà không thay đổi dữ liệu gốc.
• Áp dụng không chỉ trên mảng mà còn trên chuỗi.

Mục tiêu và cấu trúc của bài viết

Bài viết sẽ giải thích các chủ đề sau theo từng bước:

1. Cách sử dụng cơ bản của phương thức slice
2. Các ví dụ thực tế cho mảng và chuỗi
3. So sánh với các phương thức khác (splice và split)
4. Các trường hợp sử dụng thực tế
5. Các lỗi thường gặp và cách khắc phục
6. Các thực tiễn tốt nhất để viết code sạch hơn

Bằng cách đào sâu dần dần, bạn sẽ có được kỹ năng thực tiễn đầy đủ.
Trong phần tiếp theo, chúng ta sẽ xem cú pháp và cách dùng cơ bản của phương thức slice.

2. Phương thức slice là gì? 【Basic Syntax and Usage】

Phương thức slice của JavaScript trích xuất các phần tử từ một mảng hoặc chuỗi trong một phạm vi xác định và trả về chúng dưới dạng một mảng hoặc chuỗi mới. Phần này giải thích chi tiết cú pháp và cách dùng cơ bản của slice.

Cú pháp cơ bản của slice

array.slice(start, end)

Mô tả các tham số:

• start (bắt buộc): Chỉ số bắt đầu trích xuất (đánh số từ 0).
• end (tùy chọn): Chỉ số kết thúc trích xuất (phần tử này không được bao gồm).

Giá trị trả về:
Một mảng hoặc chuỗi mới được trả về, và mảng/chuỗi gốc không bị thay đổi.

3. So sánh với các phương thức khác｜slice vs splice vs split

Sự khác nhau giữa slice và splice

Ví dụ: Sử dụng slice

const arr = [1, 2, 3, 4, 5];
const result = arr.slice(1, 4);

console.log(result); // [2, 3, 4]
console.log(arr);    // [1, 2, 3, 4, 5] (original array unchanged)

4. Các trường hợp sử dụng thực tế｜Ứng dụng hữu ích của slice

Sao chép một mảng

const original = [1, 2, 3, 4, 5];
const copy = original.slice();

console.log(copy);       // [1, 2, 3, 4, 5]
console.log(original);   // [1, 2, 3, 4, 5]
console.log(copy === original); // false (different objects)

Xử lý phân trang

const items = ["商品1", "商品2", "商品3", "商品4", "商品5", "商品6"];
const itemsPerPage = 2;

function getPage(pageNumber) {
  const start = (pageNumber - 1) * itemsPerPage;
  const end = start + itemsPerPage;
  return items.slice(start, end);
}

console.log(getPage(1)); // ["商品1", "商品2"]
console.log(getPage(2)); // ["商品3", "商品4"]

5. Các lỗi thường gặp và cách khắc phục 【Troubleshooting】

Lỗi 1: Chỉ định chỉ số ngoài phạm vi

const arr = [1, 2, 3, 4, 5];
const result = arr.slice(10, 15);
console.log(result); // []

Giải pháp:

const arr = [1, 2, 3, 4, 5];
const start = 10;
const end = 15;

if (start < arr.length) {
  const result = arr.slice(start, end);
  console.log(result);
} else {
  console.log([]);
}

Lỗi 2: Nhầm lẫn với chỉ số âm

const arr = [1, 2, 3, 4, 5];
console.log(arr.slice(-1, -3)); // []

Giải pháp:

const arr = [1, 2, 3, 4, 5];
const result = arr.slice(-3, -1);
console.log(result); // [3, 4]

6. Hiệu năng và các thực tiễn tốt nhất

Tải xử lý với tập dữ liệu lớn

const largeArray = Array(1000000).fill(0);
const result = largeArray.slice(0, 500000);

Các điểm chính:

• Sao chép tập dữ liệu lớn có thể tiêu tốn thời gian và bộ nhớ đáng kể.
• Hạn chế phạm vi dữ liệu tới mức tối thiểu cần thiết và giảm tần suất thực hiện thao tác.

Sao chép cấu trúc dữ liệu lồng nhau

const nestedArray = [[1, 2], [3, 4]];
const shallowCopy = nestedArray.slice();
shallowCopy[0][0] = 99;

console.log(nestedArray); // [[99, 2], [3, 4]]

Solution: Use the following method to create a deep copy:

const deepCopy = JSON.parse(JSON.stringify(nestedArray));
deepCopy[0][0] = 99;

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

Thực hành tốt nhất

Viết mã dễ đọc

const arr = [1, 2, 3, 4, 5];
const startIndex = 1;
const endIndex = 4;

const result = arr.slice(startIndex, endIndex);
console.log(result); // [2, 3, 4]

Tạo các hàm tái sử dụng

function paginate(array, pageSize, pageNumber) {
  const start = (pageNumber - 1) * pageSize;
  const end = start + pageSize;
  return array.slice(start, end);
}

const items = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(paginate(items, 3, 2)); // [4, 5, 6]

7. Tóm tắt｜Thành thạo phương thức slice

Các điểm chính của phương thức slice

1. Cú pháp cơ bản và tính năng

• Cú pháp: array.slice(start, end)
• Một phương thức không phá hủy, không làm thay đổi mảng hoặc chuỗi gốc.

1. Trường hợp sử dụng và ví dụ thực tế

• Hữu ích cho việc sao chép mảng, phân trang và trích xuất dữ liệu mới nhất.
• Hiểu sự khác biệt so với các phương thức khác giúp bạn chọn công cụ phù hợp.

1. Lưu ý quan trọng và thực hành tốt

• Tối ưu hoá các thao tác khi xử lý tập dữ liệu lớn.
• Hiểu sự khác nhau giữa sao chép nông và sao chép sâu, và lựa chọn phù hợp.
• Cải thiện khả năng đọc mã và tái sử dụng bằng cách tạo các hàm.

Bước tiếp theo

• Học các phương thức thao tác mảng khác ( map , filter , reduce ).
• Thử sử dụng slice trong các framework như React hoặc Vue.js.
• Khám phá tối ưu hoá hiệu năng cho tập dữ liệu lớn.

Đây là kết thúc phần giải thích về phương thức slice của JavaScript.
Tiếp tục luyện tập với các ví dụ mã thực tế và không ngừng nâng cao kỹ năng của bạn.