硬盘|web前端 - JavaScript 中删除/过滤数组的方法总结( 二 )


//[{\"id\":2\"name\":\"mike\"{\"id\":3\"name\":\"bob\"{\"id\":4\"name\":\"sara\"

6、使用 splice 删除特定值 — 简写
“ splice() 方法通过删除或替换现有元素 , 或在适当位置添加新元素来更改数组的内容 。 ”(来源:MDN)
“indexOf() 方法返回可以在数组中找到给定元素的第一个索引 , 如果不存在 , 则返回 -1 。 ”(来源:MDN)
数组:
let arrShorthand = [1 2 3 4 5 6 7 8 9 0
;
let val = arr.indexOf(5);
arrShorthand.splice(val 1);
console.log(\"splice shorthand specific value\" arrShorthand);
//[1 2 3 4 5 6 7 8 9

对象数组:
let users6 = [
{ id: 1 name: \"ted\"
{ id: 2 name: \"mike\"
{ id: 3 name: \"bob\"
{ id: 4 name: \"sara\"

;
var removeIndex = users6.map(item => item.id).indexOf(1);
users6.splice(removeIndex 1);
【硬盘|web前端 - JavaScript 中删除/过滤数组的方法总结】console.log(\"splice shorthand specific value array of objects\" JSON.stringify(users6));
//[{\"id\":2\"name\":\"mike\"{\"id\":3\"name\":\"bob\"{\"id\":4\"name\":\"sara\"

7、Filter
“filter() 方法创建一个新数组 , 其中包含所有通过所提供函数实现的测试的元素 。 ”(来源:MDN)
数组:
let testarr = [2 1 2 5 6 7 8 9 9 10
;
let testarr2 = [2 1 2 5 6 7 8 9 9 10
;
let filtered = testarr.filter(function(value index arr) {
return value > 5;
);
let filtered2 = testarr2.filter(item => item !== 2);
console.log(\"filter example 1\" filtered);
//[6 7 8 9 9 10

console.log(\"filter example 2\" filtered2);
//[1 5 6 7 8 9 9 10

删除多个值的过滤器:
let forDeletion = [2 3 5
;
let mularr = [1 2 3 4 5 3
;
mularr = mularr.filter(item => !forDeletion.includes(item));
console.log(\"multiple value deletion with filter\" mularr);
//[1 4

对象数组:
let users7 = [
{ id: 1 name: \"ted\"
{ id: 2 name: \"mike\"
{ id: 3 name: \"bob\"
{ id: 4 name: \"sara\"

;
let filterObj = users7.filter(item => item.id !== 2);
console.log(\"filter example array of objects\" filterObj);
//[{\"id\":1\"name\":\"ted\"{\"id\":3\"name\":\"bob\"{\"id\":4\"name\":\"sara\"

8、delete operator
“JavaScript delete 操作符从对象中删除一个属性;如果不再持有对同一属性的更多引用 , 它最终会自动释放 。 ”(来源:MDN)
let ar = [2 1 2 5 6 7 8 9 9 10
;
delete ar[4
; // delete element with index 4
console.log(ar);
//[2 1 2 5 undefined 7 8 9 9 10

9、lodash remove
_remove “从数组中删除谓词返回真值的所有元素 , 并返回已删除元素的数组 。 谓词使用三个参数调用:(值、索引、数组) 。 ” (来源:lodash)
数组:
let arrlodashtest = [2 1 2 5 6 7 8 9 9 10
;
let evens = _.remove(arrlodashtest function(n) {
return n % 2 == 0;
);
console.log(\"lodash remove array\" arrlodashtest);
//[1 5 7 9 9

对象数组:
let users8 = [
{ id: 1 name: \"ted\"
{ id: 2 name: \"mike\"
{ id: 3 name: \"bob\"
{ id: 4 name: \"sara\"

;
let evensObj = _.remove(users8 function(n) {
return n.id % 2 == 0;
);
console.log(\"lodash remove array of object\" JSON.stringify(evensObj));
//[{\"id\":2\"name\":\"mike\"{\"id\":4\"name\":\"sara\"

10、对象实用程序
“Object.entries() 方法返回给定对象自己的可枚举字符串键控属性 [key value
对的数组 , 其顺序与 for...in 循环提供的顺序相同 。 ” (来源:MDN)
const object = [1 2 3 4
;
const valueToRemove = 3;
const arrObj = Object.values(
Object.fromEntries(
Object.entries(object).filter(([key val
) => val !== valueToRemove)
)
);
console.log(\"object utilites\" arrObj); // [124