[Javascript] Các cách xóa phần tử trong mảng (Array)

Bởi

Không biết các bạn làm việc với ngôn ngữ lập trình khác thấy thế nào, chứ với Javascript mình thấy sướng vô cùng. Đặc biệt là khi thao tác với mảng (Array) và Object.

Array là một trong những kiểu dữ liệu thường xuyên nhất, nào là thêm mới (push), lấy một phẩn tử (get), clone array.v.v… Tuyệt nhiên bạn lại không hề thấy hàm xóa phần tử trong mảng, kiểu Array.remove(). Lạ nhỉ? Đây là một trong nhưng thao tác phổ thông mà, tại sao Javascript lại kg có sẵn?

Tất nhiên, Javascript không tệ như vậy. Chẳng qua mình chưa khám phá hết thôi.

Có rất nhiều cách để xóa một phần tử trong mảng. Bạn có thể xóa một phẩn tử ở cuối 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 yêu cầu.v.v…

Bài viết này, mình sẽ chia sẻ một số cách cơ bản và nâng cao để xóa các phần tử trong Array Javascript

Nội dung chính của bài viết

Xóa phần tử ở cuối mảng
Xóa phần tử ở đầu mảng
Xóa một phần tử bất kỳ
Xóa phần tử trong mảng các objects
Lọc các phần tử duplicate trong mảng
Tạm kết

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

Ngược với pop() là shift(). Tức là nó sẽ xóa phần tử đầu tiên trong mảng. Tương tự như hàm pop(), hàm shift() không cần truyền tham số vì nó chỉ thực hiện duy nhất một nhiệm vụ là xóa phần tử đầu tiên, sau khi thực hiện xong thì các phần từ khác sẽ tự động thay đổi giá trị index.

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

Cuối cùng trong phần chia sẻ này, đó là cách để bạn có thể lọc các phần tử bị trùng lặp trong một mảng. bằng cách kết hợp các hàm tìm kiếm và xóa 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 các thao tác với mảng thì xóa phần tử nó cũng quan trọng không kém thao tác thêm mới. Qua bài viết này, mình đã chia sẻ một số phương pháp để bạn có thể thực hiện xóa dễ dàng.

Ngoài những cách trên thì bạn có cách nào khác hay ho hơn thì đừng ngại để lại bình luận bên dưới nhé. Thả tim nào 😊

💦 Đọc thêm về Javascript:

Download-Java-Advanced-Features-and-Programming-Techniques

Nhận sách Java Advanced Features

Java là ngôn ngữ lập trình phổ biến nhất thế giới, là hình mẫu của tư tưởng OOP. Nếu bạn muốn bắt đầu với Java thì đây là cuốn sách không thể bỏ qua. Với 63 ví dụ thực hành, cùng với cách viết ngắn gọn dễ hiểu sẽ giúp bạn hiểu rõ bản chất của Java.

Hiện Amazon đang bán với giá 16$, nhưng với VNTALKING thì miễn phí cho bạn. Còn chờ gì nữa?