Cách xóa phần tử khỏi mảng JavaScript và mã sạch thủ công
Bạn sẽ thường xuyên gặp Mảng khi viết mã JavaScript. Làm cách nào bạn có thể xóa một phần tử khỏi Mảng trong JavaScript?
Trong JavaScript, Mảng là một loại đối tượng toàn cục mà bạn có thể sử dụng để lưu trữ dữ liệu. Một mảng trong JavaScript có thể chứa một danh sách chứa 0 hoặc nhiều loại dữ liệu hoặc một bộ sưu tập có thứ tự. Để truy cập các mục cụ thể từ Mảng, chúng tôi sử dụng các chỉ số được đánh số bắt đầu từ 0.
Trong bài viết này, tôi sẽ mô tả cú pháp tạo Mảng trong JavaScript, tại sao người ta nên xóa một phần tử khỏi một mảng trong JavaScript và các cách tiếp cận khác nhau để xóa các phần tử khỏi Mảng trong JavaScript bằng cách thay đổi hoặc không thay đổi mảng ban đầu.
Mục lục
Cú pháp cho một mảng JavaScript
Mảng cho phép chúng ta lưu trữ nhiều giá trị trong một biến duy nhất. Ví dụ: nếu chúng ta muốn thể hiện bảy lục địa bằng JavaScript, chúng ta có thể có mã này:
const continent1 = "Asia"; const continent2 = "Africa"; const continent3 = "North America"; const continent4 = "South America"; const continent5 = "Antarctica"; const continent6 = "Europe"; const continent7 = "Australia"
Tuy nhiên, chúng ta có thể cô đọng mã này và biểu diễn nó trong một mảng như sau;
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
Thay vì có 7 biến, chúng ta chỉ có một biến và chúng ta sử dụng dấu ngoặc vuông để biểu thị các đối tượng của mình.
Nếu bạn muốn truy cập lục địa đầu tiên trong danh sách của chúng tôi, bạn có thể chạy lệnh này; console.log(lục địa[0])
Bạn có thể sử dụng miễn phí của chúng tôi trình biên dịch JavaScript trực tuyến để kiểm tra mã của bạn.
Đây là những gì bạn nhận được:
Nếu bạn muốn truy cập mục cuối cùng trong mảng của chúng tôi, bạn sẽ chạy lệnh này; console.log(lục địa[6]).
Xin lưu ý rằng việc đánh số trong JavaScript bắt đầu từ 0.
Tại sao loại bỏ một phần tử khỏi mảng JavaScript?
Bạn có thể sử dụng mảng JavaScript với chuỗi, số và các cấu trúc dữ liệu khác nhau. Tuy nhiên, có những trường hợp bạn có thể cần xóa một hoặc nhiều phần tử khỏi một mảng. Đây là một số tình huống:
- Xử lý dữ liệu động: Bạn có thể lưu trữ các bộ dữ liệu động trong mảng. Bạn có thể cần xóa một phần tử/phần tử khỏi mảng dựa trên các yêu cầu thay đổi.
- Duy trì tính toàn vẹn dữ liệu: Bạn có thể xóa/xóa thông tin lỗi thời khỏi mảng của mình để đảm bảo rằng cấu trúc dữ liệu của bạn được cập nhật.
- Quản lý bộ nhớ: Kích thước mã của bạn ảnh hưởng đến hiệu suất của ứng dụng. Bạn có thể xóa thông tin không cần thiết khỏi mảng và tối ưu hóa mã của mình.
Xóa các phần tử mà không làm thay đổi mảng gốc
Khi bạn muốn xóa một phần tử mà không làm thay đổi mảng ban đầu, cách tốt nhất là tạo một mảng mới không có phần tử bạn muốn xóa. Cách tiếp cận như vậy phù hợp với một mảng giống như một tham số hàm. Bạn có thể sử dụng các phương pháp sau:
#1. Xóa phần tử bằng slice()
Chúng ta có thể xóa lục địa đầu tiên khỏi danh sách bằng phương thức slice().
Đây là mã ban đầu của chúng tôi:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
Chúng ta sẽ tạo một mảng mới như sau:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia']; // Remove the first element using slice let newContinents = continents.slice(1); If you now run: console.log(newContinents);
Bạn sẽ nhận được điều này làm đầu ra của mình:
[ 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia' ]
#2. Xóa phần tử đầu tiên khỏi Mảng bằng filter()
Phương thức lọc tạo một mảng mới trong đó các phần tử phải đáp ứng một điều kiện nhất định. Tôi có thể tạo một điều kiện loại trừ phần tử đầu tiên khỏi mảng của chúng tôi. Đây là cách tôi có thể đạt được điều đó:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia']; // Remove the first element using filter() method let newContinents = continents.filter((continent, index) => index !== 0); console.log(newContinents);
Nếu tôi chạy mã, đây là những gì tôi sẽ nhận được:
[ 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia' ]
#3. Sử dụng slice() cùng với concat() để xóa một phần tử khỏi bất kỳ vị trí nào
Ví dụ đầu tiên của chúng tôi loại bỏ phần tử đầu tiên khỏi danh sách của chúng tôi. Điều gì sẽ xảy ra nếu chúng ta muốn loại bỏ phần tử thứ ba hoặc thứ tư khỏi mảng của mình? Chúng ta cần kết hợp các phương thức slice() với concat() để điều này xảy ra. Trong ví dụ sau tôi sẽ loại bỏ phần tử thứ tư như sau:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia']; // Remove the fourth element using slice and concat let continentsWithoutFourth = continents.slice(0, 3).concat(continents.slice(4)); console.log(continentsWithoutFourth);
Nếu tôi chạy mã, chúng tôi sẽ nhận được kết quả này:
[ 'Asia', 'Africa', 'North America', 'Antarctica', 'Europe', 'Australia' ]
Phương thức slice() tạo ra hai lát cắt mới. Sau đó, chúng tôi sử dụng phương thức concat() để kết hợp hai lát cắt nhưng bỏ qua phần tử thứ tư. Bạn có thể sử dụng phương pháp này với bất kỳ phần tử nào trên mảng.
#4. Xóa một phần tử bằng vòng lặp for cùng với push()
Chúng ta có thể bỏ qua phần tử thứ năm khỏi danh sách bằng phương thức vòng lặp for và push(). Kiểm tra mã này:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
// Remove the fifth element using a for loop and push
let continentsWithoutFifth = [];
for (let i = 0; i < continents.length; i++) {
if (i !== 4) {
continentsWithoutFifth.push(continents[i]);
}
}
console.log(continentsWithoutFifth);
Vòng lặp for lặp qua từng phần tử trong mảng lục địa của chúng ta. Chúng ta sử dụng câu lệnh if để kiểm tra xem chỉ số hiện tại có bằng 4 hay không. Nếu điều kiện đúng, các phần tử sẽ được đẩy vào một mảng mới.
Đây là những gì chúng tôi nhận được khi bạn chạy mã:
[ 'Asia', 'Africa', 'North America', 'South America', 'Europe', 'Australia' ]
Loại bỏ các phần tử bằng cách thay đổi mảng gốc
Bạn có thể thay đổi hoặc thay đổi cấu trúc của mảng ban đầu bằng cách xóa một phần tử. Đây là một số cách tiếp cận:
#1. Xóa một phần tử khỏi mảng bằng pop()
Bạn có thể sử dụng phương thức pop() để xóa phần tử cuối cùng khỏi mảng lục địa của chúng tôi. Mã ban đầu của chúng tôi là
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
Chúng ta có thể có mã này để loại bỏ phần tử cuối cùng:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia']; // Remove the last element using pop let lastContinent = continents.pop();
Nếu bạn chạy:
console.log("Updated Continents Array:", continents);
Danh sách cập nhật sẽ là:
Updated Continents Array: [ 'Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe' ]
Bạn cũng có thể kiểm tra phần tử đã xóa bằng mã này:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
// Remove the last element using pop
let lastContinent = continents.pop();
console.log("Removed Continent:", lastContinent);
#2. Loại bỏ một phần tử khỏi mảng bằng hàm splice()
Phương thức splice() cho phép bạn loại bỏ các phần tử khỏi một chỉ mục cụ thể trong mảng của mình. Tôi có thể xóa một phần tử khỏi chỉ mục 2 bằng mã này:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
// Remove the element at index 2 using splice
let removedElement = continents.splice(2, 1);
console.log("Removed Element:", removedElement);
console.log("Updated Continents Array:", continents);
Mã này làm thay đổi mảng ban đầu và sau đó trả về một mảng mới. Mã này cũng có hai câu lệnh console.log kiểm tra ‘Các phần tử đã xóa’ và ‘Mảng lục địa đã cập nhật’.
Khi chúng tôi chạy toàn bộ mã, đây sẽ là kết quả:
Removed Element: [ 'North America' ] Updated Continents Array: [ 'Asia', 'Africa', 'South America', 'Antarctica', 'Europe', 'Australia' ]
#3. Xóa phần tử đầu tiên khỏi mảng bằng shift()
Phương thức shift() loại bỏ phần tử đầu tiên khỏi mảng JavaScript. Phương thức này sửa đổi/hủy mảng ban đầu và cũng trả về phần tử đã bị xóa. Chúng ta vẫn có thể sử dụng mảng lục địa cho phần minh họa này.
Chúng ta có thể loại bỏ phần tử đầu tiên như sau:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
// Remove the first element using shift
let removedContinent = continents.shift();
console.log("Removed Continent:", removedContinent);
console.log("Updated Continents Array:", continents);
Chúng tôi có hai câu lệnh console.log, trong đó một câu trả về `Lục địa đã xóa’ trong khi câu lệnh thứ hai trả về ‘Lục địa đã cập nhật’.
Nếu chúng tôi chạy mã, chúng tôi nhận được kết quả này:
Removed Continent: Asia Updated Continents Array: [ 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia' ]
Thêm phần tử vào mảng trong JavaScript
Cho đến nay chúng ta đã thảo luận về cách loại bỏ một phần tử khỏi một mảng. Tuy nhiên, có những trường hợp bạn có thể muốn thêm phần tử mới vào mảng. Đây là một số cách tiếp cận để sử dụng:
#1. Phương thức đẩy()
Chúng tôi sẽ sử dụng mã này cho các ví dụ sau:
let colors = ['red', 'blue', 'green', 'yellow', 'purple'];
Chúng ta có thể thêm màu mới vào cuối mảng bằng phương thức push().
let colors = ['red', 'blue', 'green', 'yellow', 'purple'];
// Add a new color to the array
colors.push('orange');
Mảng của chúng ta bây giờ sẽ có sáu màu.
#2. Phương thức unshift()
Bạn có thể thêm phần tử mới vào đầu mảng bằng phương thức unshift(). Chúng ta vẫn có thể sử dụng mảng màu sắc.
let colors = ['red', 'blue', 'green', 'yellow', 'purple'];
// Add a new color to the array
colors.unshift('orange');
console.log(colors);
Như bạn có thể thấy trong ảnh chụp màn hình sau, màu cam hiện là màu đầu tiên trên mảng của chúng tôi:
Phần kết luận
Bây giờ bạn đã hiểu cách loại bỏ một phần tử trong mảng JavaScript và tạo ra mã hiệu quả. Việc lựa chọn phương pháp tiếp cận sẽ phụ thuộc vào mục tiêu cuối cùng, kỹ năng và sở thích của bạn.
Phương thức slice() là một lựa chọn hoàn hảo khi bạn đang tìm kiếm một cách tiếp cận đơn giản và không muốn thay đổi mảng ban đầu. Mặt khác, tôi thấy sự kết hợp giữa các phương thức slice() và concat() là một lựa chọn hoàn hảo nếu bạn muốn loại bỏ bất kỳ phần tử nào.
Hãy xem bài viết của chúng tôi về bảng cheat JavaScript dành cho nhà phát triển.
