Khi bạn lần đầu tiên học JavaScript, có thể khó biết được sự khác biệt giữa slice() và splice() các phương thức mảng.
Trong bài viết này, tôi sẽ hướng dẫn các bạn cách sử dụng slice() và splice() các phương thức mảng bằng cách sử dụng các ví dụ mã.
Cách sử dụng phương thức mảng JavaScript slice()
Các slice() có thể được sử dụng để tạo một bản sao của một mảng hoặc trả về một phần của một mảng. Điều quan trọng cần lưu ý là slice() phương thức không làm thay đổi mảng ban đầu mà thay vào đó tạo ra một bản sao nông.
Đây là cú pháp cơ bản:
slice(optional start parameter, optional end parameter)Chúng ta hãy xem xét một số ví dụ để hiểu rõ hơn về cách slice() phương pháp hoạt động.
Cách sử dụng phương thức JavaScript slice() không có tham số bắt đầu và kết thúc
Trong ví dụ đầu tiên này, tôi đã tạo một danh sách các thành phố từ khắp nơi trên thế giới.
const cities = ["Tokyo","Cairo","Los Angeles","Paris","Seattle"];tôi có thể sử dụng slice() để tạo một bản sao nông của mảng đó.
cities.slice()Khi tôi console.log kết quả, sau đó tôi sẽ thấy tất cả các phần tử từ cities mảng được sao chép vào mảng mới này.
Cách sử dụng phương thức JavaScript slice() sử dụng tham số bắt đầu
Bạn có thể sử dụng tham số bắt đầu tùy chọn để đặt vị trí bắt đầu để chọn các phần tử từ mảng. Điều quan trọng cần nhớ là các mảng được lập chỉ mục dựa trên số không.
Trong ví dụ này, chúng tôi sẽ đặt vị trí bắt đầu tại chỉ mục 2, vị trí này sẽ chọn ba thành phố cuối cùng trong mảng và trả về chúng trong một mảng mới.
const newCityArr = cities.slice(2);
console.log(newCityArr)
Mảng ban đầu không bị sửa đổi như chúng ta có thể thấy ở đây trong ví dụ này.
const cities = ["Tokyo","Cairo","Los Angeles","Paris","Seattle"];
const newCityArr = cities.slice(2);
console.log("Original: ", cities)
console.log("New: ", newCityArr)
Bạn cũng có thể sử dụng các chỉ mục phủ định sẽ bắt đầu trích xuất các phần tử từ cuối mảng.
Trong ví dụ này, chúng ta sẽ đặt vị trí bắt đầu là -2, vị trí này sẽ chọn hai thành phố cuối cùng trong mảng và trả về chúng trong một mảng mới.
const newCityArr = cities.slice(-2);
Nếu tham số bắt đầu lớn hơn chỉ số cuối cùng của mảng, thì một mảng trống sẽ được trả về.
const newCityArr = cities.slice(5);
Cách sử dụng phương thức JavaScript slice() sử dụng tham số bắt đầu và kết thúc
Nếu một vị trí kết thúc được chỉ định, thì slice() phương thức sẽ trích xuất các phần tử từ vị trí bắt đầu cho đến vị trí kết thúc. Vị trí kết thúc sẽ không được bao gồm trong các phần tử được trích xuất cho mảng mới.
Trong ví dụ này, chúng tôi đã chỉ định chỉ mục bắt đầu là 2 và chỉ mục kết thúc là 4. Mảng mới được trả về sẽ chỉ bao gồm các thành phố ở chỉ mục 2 và 3 vì vị trí kết thúc không được bao gồm trong các phần tử được trích xuất.
const cities = ["Tokyo","Cairo","Los Angeles","Paris","Seattle"];
const newCityArr = cities.slice(2,4);
Cách sử dụng phương thức mảng JavaScript splice()
không giống như slice() phương pháp, các splice() phương thức sẽ thay đổi nội dung của mảng ban đầu. Các splice() phương thức được sử dụng để thêm hoặc xóa các phần tử của một mảng hiện có và giá trị trả về sẽ là các phần tử đã xóa khỏi mảng.
Nếu không có gì bị xóa khỏi mảng, thì giá trị trả về sẽ chỉ là một mảng trống.
Đây là cú pháp cơ bản.
splice(start, optional delete count, optional items to add)Trong ví dụ này, chúng ta có một mảng các mặt hàng thực phẩm.
const food = ['pizza', 'cake', 'salad', 'cookie'];Nếu chúng ta muốn thêm một mặt hàng thực phẩm khác vào mảng ở chỉ số 1, thì chúng ta có thể sử dụng đoạn mã sau:
food.splice(1,0,"burrito")Số đầu tiên là chỉ mục bắt đầu và số thứ hai là số lần xóa. Vì chúng tôi không xóa bất kỳ mục nào nên số lần xóa của chúng tôi bằng không.
Đây là kết quả sẽ trông như thế nào trong bảng điều khiển.
const food = ['pizza', 'cake', 'salad', 'cookie'];
food.splice(1,0,"burrito")
console.log(food)
Nếu chúng ta console.log(food.splice(1,0,"burrito"))thì chúng tôi sẽ lấy lại một mảng trống vì không có gì bị xóa khỏi mảng của chúng tôi.
Trong ví dụ tiếp theo này, chúng tôi muốn xóa “salad” khỏi mảng. Chúng ta có thể sử dụng các tham số bắt đầu và xóa để thực hiện việc này.
food.splice(2,1)Số 2 là vị trí bắt đầu và số 1 đại diện cho số lần xóa. Vì salad ở chỉ số 2 nên nó sẽ bị xóa khỏi mảng.
Đây là những gì mảng của chúng tôi trông giống như bây giờ:
const food = ['pizza', 'cake', 'salad', 'cookie'];
food.splice(2,1)
console.log(food)
Phần kết luận
Các slice và splice các phương thức mảng có vẻ giống nhau, nhưng có một số điểm khác biệt chính.
Các slice() có thể được sử dụng để tạo một bản sao của một mảng hoặc trả về một phần của một mảng. Điều quan trọng cần lưu ý là slice() phương thức không làm thay đổi mảng ban đầu mà thay vào đó tạo ra một bản sao nông.
Đây là cú pháp cơ bản:
slice(optional start parameter, optional end parameter)không giống như slice() phương pháp, các splice() phương thức sẽ thay đổi nội dung của mảng ban đầu. Các splice() phương thức được sử dụng để thêm hoặc xóa các phần tử của một mảng hiện có và giá trị trả về sẽ là các phần tử đã xóa khỏi mảng.
Nếu không có gì bị xóa khỏi mảng, thì giá trị trả về sẽ chỉ là một mảng trống.
Đây là cú pháp cơ bản:
splice(start, optional delete count, optional items to add)Tôi hy vọng bạn thích bài viết JavaScript này và chúc bạn may mắn trên hành trình phát triển của mình.
