Phương pháp xóa phần tử trong mảng (Array) javascript

Chắc chắn mọi người làm việc với các ngôn ngữ lập trình khác cũng có những trải nghiệm thú vị, nhưng với Javascript, cá nhân tôi cảm thấy nó thực sự tuyệt vời. Đặc biệt là khi thao tác với mảng (Array) và Object.

Mảng là một trong những kiểu dữ liệu phổ biến nhất, có thể thêm mới (push), lấy một phần tử (get), clone array, và nhiều thao tác khác. Tuy nhiên, có lẽ bạn đã thắc mắc tại sao trong Javascript lại không có hàm để xóa phần tử trong mảng, ví dụ như Array.remove()? Điều này có vẻ lạ, đúng không?

Dĩ nhiên, Javascript không phải là ngôn ngữ kém cỏi như vậy. Chỉ là chúng ta chưa khám phá hết thôi.

Có nhiều cách để xóa một phần tử trong mảng. Bạn có thể xóa phần tử cuối cùng của mảng bằng hàm pop(), xóa phần tử đầu mảng bằng hàm shift(), hoặc sử dụng hàm filter() để xóa những phần tử theo điều kiện cụ thể. Trong bài viết này, tôi sẽ chia sẻ về một số cách cơ bản và nâng cao để xóa các phần tử trong mảng Javascript.

Xóa phần tử ở cuối mảng

Đơn giản nhất là sử dụng hàm pop() để loại bỏ phần tử cuối cùng trong mảng. Hàm này sẽ chỉnh sửa trực tiếp mảng mà bạn gọi, chứ nó không copy ra mảng mới.

Hàm pop() sẽ làm thay đổi độ dài của mảng.

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

Xóa phần tử ở đầu mảng

Khác với phương thức pop(), phương thức shift() trong JavaScript được sử dụng để loại bỏ phần tử ở đầu mảng. Một điểm đặc biệt là nó thực hiện xóa phần tử đầu tiên mà không yêu cầu tham số. Tương tự như pop(), shift() chỉ có một nhiệm vụ duy nhất là loại bỏ phần tử đầu tiên của mảng. Sau khi hoạt động này được thực hiện, các phần tử khác trong mảng sẽ tự động thay đổi giá trị chỉ mục của chúng.

• let array = [‘zero’, ‘one’, ‘two’, ‘three’];
• array.shift();
• console.log(array); // [“one”, “two”, “three”]

Xóa một phần tử bất kỳ

Trong trường hợp bạn muốn xóa một phần tử ở một ví trí bất kỳ hoặc bạn chỉ biết giá trị của phần tử cần xóa thì phải làm sao?

Cách 1: sử dụng hàm splice

Về cơ bản thì chúng ta cần phải tìm bằng được index của phần tử đó trong mảng, sau đó sử dụng hàm splice() để xóa.

• // Bạn có một mảng các object các hãng điện thoại. Bạn muốn xóa hãng HTC khỏi mảng
• const companies = [“Apple”, “Samsung”, “Nokia”, “HTC”, “Xiaomi”];
• // Tìm index của phần tử có giá trị “HTC”
• const removeIndex = companies.findIndex((item) => item === “HTC”);
• // Xóa phần tử HTC
• companies.splice(removeIndex, 1);
• console.log(companies); // [“Apple”, “Samsung”, “Nokia”, “Xiaomi”]

Cách 2: sử dụng hàm filter

Hàm filter() sẽ lọc và giữ những phần tử thỏa mãn điều kiện.

• const companies = [“Apple”, “Samsung”, “Nokia”, “HTC”, “Xiaomi”];
• const newCompanies = companies.filter(item => item !== “HTC”)
• console.log(companies); // [“Apple”, “Samsung”, “Nokia”, “Xiaomi”]

Xóa phần tử trong mảng các objects

Ở các giải pháp trên, chúng ta mới thao tác trên các mảng có các phần tử có giá trị kiểu nguyên thủy. Trong trường hợp mảng chứa các phần tử là Objects thì sao?

• // Danh sách các website hàng đầu về công nghệ. Yêu cầu xóa website của Apple khi biêt id của đối tượng cần xóa là 40
• const websites = [
• { id: 34, name: ‘VNTALKING.COM’, owner: ‘SonDuong’ },
• { id: 40, name: ‘APPLE.COM’, owner: ‘Apple’ },
• { id: 37, name: ‘GOOGLE.COM’, owner: ‘Alphabet’ },
• ];
• // tìm index của phần tử cần xóa
• const removeIndex = websites.findIndex( item => item.id === 40 );
• // xóa phần từ
• websites.splice( removeIndex, 1 );
• console.log(websites)

Hoặc sử dụng hàm map() để tìm index của phần tử cần xóa:

• // Danh sách các website hàng đầu về công nghệ. Yêu cầu xóa website của Apple (id=40)
• const websites = [
• { id: 34, name: ‘VNTALKING.COM’, owner: ‘SonDuong’ },
• { id: 40, name: ‘APPLE.COM’, owner: ‘Apple’ },
• { id: 37, name: ‘GOOGLE.COM’, owner: ‘Alphabet’ },
• ];
• var removeIndex = websites.map(item => item.id).indexOf(40);
• // xóa phần từ
• websites.splice(removeIndex, 1);
• console.log(websites)

Lọc các phần tử duplicate trong mảng

Phần cuối trong bài chia sẻ này, chúng ta sẽ tìm hiểu cách lọc các phần tử trùng lặp từ một mảng bằng cách sử dụng các hàm tìm kiếm và loại bỏ phần tử.

• function uniqueArray (orinalArray) {
• return orinalArray.filter((elem, position, arr) => {
• return arr.indexOf(elem) == position;
• });
• }
• var fruits = [‘Apple’,’Banana’,’Orange’,’Mango ‘, ‘Orange’, ‘Apple’];
• console.log(uniqueArray(fruits)); //[“Apple”, “Banana”, “Orange”, “Mango “]

Cách viết khác, sử dụng cú pháp ES6

• const uniqueArray = array => […new Set(array.map(o => JSON.stringify(o)))].map(s => JSON.parse(s))
• var fruits = [‘Apple’,’Banana’,’Orange’,’Mango ‘, ‘Orange’, ‘Apple’];
• console.log(uniqueArray(fruits)); //[“Apple”, “Banana”, “Orange”, “Mango “]

Trong trường hợp bạn muốn lọc các phần tử là các objects thì sao?

• let cachedObject = {};
• // Mảng cần lọc phần tử trùng lặp
• let arr = [
• { id: 0, name: ‘Apple’ },
• { id: 1, name: ‘Banana’ },
• { id: 2, name: ‘Orange’ },
• { id: 1, name: ‘Banana’ },
• { id: 0, name: ‘Apple’ },
• ];
• arr.map((item) => (cachedObject[item.id] = item));
• arr = Object.values(cachedObject);
• console.log(arr); // [{ id: 0, name: ‘Apple’ },{ id: 1, name: ‘Banana’ }, { id: 2, name: ‘Orange’ } ]

Tạm kết

Trong quá trình làm việc với mảng, việc xóa các phần tử cũng đồng thời quan trọng như việc thêm mới. Trong bài viết này, mình đã chia sẻ một số phương pháp giúp bạn thực hiện thao tác xóa một cách dễ dàng.

Nếu bạn có bất kỳ cách xóa nào khác mà bạn thấy hiệu quả hơn, đừng ngần ngại chia sẻ thông tin bằng cách để lại bình luận bên dưới. Hãy thả tim nếu bạn thấy bài viết hữu ích!