删除|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);
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);
【删除|web前端 - JavaScript 中删除/过滤数组的方法总结】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
- javascript|Web前端培训:什么是 MEAN Stack?
- 删除|一个24小时就会自毁的网站,在网友的接力下存活了两年
- 删除|换成鸿蒙系统后特别费电,四个小时充一次,还是不怎么用的情况下
- 想要玩转 Web3.0,读懂智能合约是关键
- 删除|爱了爱了!华为旗舰新机曝光,6400mAh+超级全面屏
- Web3.0时代,数字人如何突破规模落地三大难点?百度李士岩:两
- Web 3,能解决互联网最核心的悖论吗?
- Web3.0时代,数字人如何突破规模落地三大难点?
- 国际热核聚变实验堆|web前端 - JS中的4个for循环
- 泰捷 WEBOX T1S 投影仪评测:千元售价真1080P,还支持梯形校正