Nội dung bài viết
Video học lập trình mỗi ngày
Trong javascript có nhiều cách javascript remove element from array. Có nhiều cách ta đã biết từ lâu, nhưng cũng nên học thêm những cách khác như, remove item in array javascript es6, hay remove object in array javascript, hoặc có thể remove element from array by index or value. Nếu chúng ta biết trước index or value.
Bài viết này nằm trong 40 bài viết về thủ thuật viết code javascript các bạn có thể ghé qua.
javascript remove element from array
Trước tiên chúng ta lướt qua một số method cơ bản của một array, để có thể remove item in array một cách nhanh chóng. Hỗ trợ cực mạnh, hà cớ gì tại sao lại không dùng đến. Đầu tiên chúng ta đi qua một số method cơ bản nhất khi sử dụng array. Đương nhiên bạn có thể bỏ qua phần cơ bản này, nếu như bạn là người hay sử dụng về Array().
Array.shift()
Sử dụng Array.shift() remove item đầu tiên của một array
let array = [1, 2, 3, 4];
array.shift();
// Output:
[2, 3, 4]
Array.pop()
Sử dụng Array.pop() remove item cuối của một array.
let array = [1, 2, 3, 4];
array.pop();
Output:
[1, 2, 3]
Notes: Cả hai phương thứcpop() và shift() đều return về giá trị đã bị xoá
2 - Javascript remove element from array by index
Nếu bạn sử dụng trường hợp này thì chắc chắn chúng ta đã biết index trong array hay biết position i trong một array. Splice array javascript cung cấp một method array.splice() để giải quyết việc này. và chúng ta cũng có thể hiểu index là key hoặc javascript remove element from array by key
Giả sử bạn có một array và bạn biết xoá positioni = 2
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
var removed = arr.splice(2, 1); // với i = 2 thì bạn đang xoá ở trị thứ index = 2
//Output
removed === [3] // Element đã xoá
arr === [1, 2, 4, 5, 6, 7, 8, 9, 0] //Sau khi xoá xong
or bạn có thể xoá nhiều items
//xoá ở i = 2 và tham số tuỳ chọn để xoá đến đâu
var removed = arr.splice(2, 2)
//Output
removed === [3, 4]
arr === [1, 2, 5, 6, 7, 8, 9, 0]
CHÚ Ý: Khi bạn sử dụng _arr.splice(2, 2) có nghĩa là xoá ở i = 2 và tham số tuỳ chọn để xoá đến đâu là 2. Nếu tham số thứ 2 bỏ quên thì nó sẽ xoá hết items, trừ kể từ vị trí của tham số thứ nhất. Hay xem ví dụ sau đây để hiểu rõ hơn.
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
var removed = arr.splice(2);
// Output
removed === [3, 4, 5, 6, 7, 8, 9, 0]
arr === [1, 2]
The splice() cũng có thể add thêm item nữa, chứ không đơn thuần là chỉ remove item array using splice trong javascript. Nếu đến đây là bạn phải suy nghĩa, lướt đi lướt lại tốt hơn hết tôi nghĩ bạn nên tham khảo thêm về splice(), ngoài ra còn có split(), hay slice().
Nên đọc thêm: Cách sử dụng splice, split và slice trong javascsipt, tránh sự nhầm lẫn.
3 - Javascript remove element from array by value
Trên ví dụ đó là bắt buộc chúng ta phải biết được index của một Array. Vậy nếu như không biết index mà chỉ biết value thì chúng ta phải làm như thế nào để remove một element.
Để sử dụng trường hợp này, bắt buộc bạn phải biết mình remove value nào trong array, cũng giống như mình biết được index nào trong Array().
Giả sử bạn muốn remove value = 4 trong array cho trước, như ví dụ dưới đây. Nhưng theo tôi đây là cách lâu rồi, và thời nay họ ít khi sử dụng nữa.
function removeElement(array, elem) {
var index = array.indexOf(elem);
if (index > -1) {
array.splice(index, 1);
}
}
var arr = [1, 2, 3, 4, 5]
removeElement(arr, 4);
console.log(arr);
// Output:
// [1, 2, 3, 5]
Đó là cách truyền thống, vậy cách hiện đại được triển khai như thế nào thì chúng ta sẽ sử dụng những phương thức của ES6 đã giới thiệu.
4 - Remove item in array javascript es6
Những bạn nào mà đã sử dụng ES6 một thời gian rồi thì có thể sử dụng 1 trong 10 methods array mà bất cứ lập trình viên nào cũng phải biết đó là method array.filter().
Bạn có thể xem ví dụ dưới đây rồi đối chiếu với cách truyền thống xem hiệu quả như thế nào?
remove a item in array
const items = [1, 2, 3, 4, 5]
const valueToRemove = 4
const filteredItems = items.filter(item => item !== valueToRemove)
// Output:
[1, 2, 3, 5]
Ngoài việc sử dụng array.filter() để xoá 1 phần tử trong array thì bạn có thể xoá nhiều phần tử trong array - remove multiple item in array javascript cũng sử dụng method đó.
const items = [1, 2, 3, 4, 5]
const valuesToRemove = [3, 4]
const filteredItems = items.filter(item => !valuesToRemove.includes(item))
console.log(filteredItems)
// Output:
[1, 2, 5]
Đương nhiên sẽ có nhiều cách viết gắn gọn hơn ví dụ trên, tôi cũng để cao 9 mẹo hữu ích để viết JavaScript ngắn gọn và hiệu quả hơn trong bài viết đó. Nó giúp tôi nâng cao tay nghề nhiều hơn trước khi đi vào con đường trở thành kiến trúc sư
5 - Lodash remove item in array
Nhắc đến việc sử dụng lodash thì có nhiều luồng tranh cãi, là Có lên sử dụng lodash không?Theo quan điểm của tôi, và tôi cũng đã nói lên quan điểm của mình trong bài Trường hợp nào nên sử dụng lodash. Ở đó có nhiều phân tích được đúc kết từ kinh nghiệm của tôi.
Nếu bạn nào quen sử dụng lodash để tiện cho việc lập trình thì có thể sử dụng cách sau:
remove item using lodash
var arr = [1, 2, 3, 3, 4, 5];
_.remove(arr, function(e) {
return e === 3;
});
console.log(arr);
// Output:
[ 1, 2, 4, 5 ]
Ngoài ra chúng ta cũng có thể sử dụng lodash để Xoá một phần tử trong một Object
remove item in object javascript
var people = [
{name: 'Billy', age: 22},
{name: 'Sally', age: 19},
{name: 'Timmy', age: 29},
{name: 'Tammy', age: 15}
]
_.remove(people, function(e) {
return [e.age](e.age) < 21
})
console.log(people);
// Output
// [ { name: 'Billy', age: 22 }, { name: 'Timmy', age: 29 } ]
Cũng có thể dùng es6 filter() để giải quyết remove object in array javascript
var people = [
{name: 'Billy', age: 22},
{name: 'Sally', age: 19},
{name: 'Timmy', age: 29},
{name: 'Tammy', age: 15}
]
people = people.filter(function(returnableObjects){
return [returnableObjects.age](returnableObjects.age) < 21
});
console.log(people)
// Output
// [ { name: 'Billy', age: 22 }, { name: 'Timmy', age: 29 } ]
6 - javascript remove element from array in foreach
Cũng tương tự như loop for vậy, chúng ta lại sử dụng splice() để giải quyết:
var arr = [1, 2, 3, 4, 5];
arr.forEach(function(index, value){
if(arr[index] === 4){
arr.splice(index, 1);
}
});
console.log(arr)
// Output
[1, 2, 3, 5]
Tóm lại
Trên đây là những cách mà bạn có thể javascript remove element from array khi bạn gặp phải. Và tôi khuyên bạn, nên sử dụng những gì mà javascript cung cấp, không nên lạm dụng những thư viện như lodash để remove item mà mà phải kéo về thư viện lodash chỉ để dùng cho một việc nhỏ như thế. Hy vọng có thể giúp các bạn hiểu rõ và dễ so sánh với nhau những cách trên làm sao cho hiệu quả và phù hợp với dự án của mình.
Thanks for reading
Series - Con đường trở thành kiến trúc sư
