删除|web前端 - JavaScript 中删除/过滤数组的方法总结
我们可能总是会遇到根据一个属性或多个属性值从数组或对象数组中删除项目的时候 , 今天让我们看看根据属性值从数组中删除或过滤项目有哪些不同的方法 。
1、POP
“pop() 方法从数组中删除最后一个元素并返回该元素 。 这个方法改变了数组的长度 。 ” (来源:MDN)
数组:
let arraypoptest = [2 1 2 5 6 7 8 9 9 10
;
let testpop = arraypoptest.pop();
console.log(\"array pop\" testpop\"-\" arraypoptest);
//10 - [2 1 2 5 6 7 8 9 9
;
对象数组:
let users1 = [
{ id: 1 name: \"ted\"
{ id: 2 name: \"mike\"
{ id: 3 name: \"bob\"
{ id: 4 name: \"sara\"
;
let testpop1 = users1.pop();
console.log(
\"array of objects pop\"
JSON.stringify(testpop1)\"-\"
JSON.stringify(users1)
);
//{\"id\":4\"name\":\"sara\" - [{\"id\":1\"name\":\"ted\"{\"id\":2\"name\":\"mike\"{\"id\":3\"name\":\"bob\"
2、Shift()
“shift() 方法从数组中移除第一个元素并返回移除的元素 。 这个方法改变了数组的长度 。 ” (来源:MDN)
数组:
let arrayshifttest = [2 1 2 5 6 7 8 9 9 10
;
let testshift = arrayshifttest.shift();
console.log(\"array shift\" testshift\"-\" arrayshifttest);
//2 - [1 2 5 6 7 8 9 9 10
对象数组:
let users2 = [
{ id: 1 name: \"ted\"
{ id: 2 name: \"mike\"
{ id: 3 name: \"bob\"
{ id: 4 name: \"sara\"
;
let testshift1 = users2.shift();
console.log(\"array of objects shift\" JSON.stringify(testshift1)\"-\" JSON.stringify(users2));
//{\"id\":1\"name\":\"ted\" - [{\"id\":2\"name\":\"mike\"{\"id\":3\"name\":\"bob\"{\"id\":4\"name\":\"sara\"
3、slice
“slice() 方法将数组的一部分的浅拷贝返回到从开始到结束(不包括结束)选择的新数组对象中 , 其中开始和结束表示该数组中项目的索引 。 不会修改原始数组 。 ” (来源:MDN)
数组:
let arrayslicetest = [2 1 2 5 6 7 8 9 9 10
;
let testslice = arrayslicetest.slice(0 3);console.log(\"array slice\" testslice arrayslicetest);
//not changed original array//[2 1 2
- [2 1 2 5 6 7 8 9 9 10
对象数组:
let users3 = [
{ id: 1 name: \"ted\"
{ id: 2 name: \"mike\"
{ id: 3 name: \"bob\"
{ id: 4 name: \"sara\"
;
let testslice1 = users3.slice(0 3);
console.log(\"array of objects slice\" JSON.stringify(testslice1));
//not changed original array
//[{\"id\":1\"name\":\"ted\"{\"id\":2\"name\":\"mike\"{\"id\":3\"name\":\"bob\"
4、splice
“ splice() 方法通过删除或替换现有元素和/或在适当位置添加新元素来更改数组的内容 。 ” (来源:MDN)
数组:
let arraysplicetest = [2 1 2 5 6 7 8 9 9 10
;
let testsplice = arrayslicetest.splice(0 3);
对象数组:
let users4 = [
{ id: 1 name: \"ted\"
{ id: 2 name: \"mike\"
{ id: 3 name: \"bob\"
{ id: 4 name: \"sara\"
;
let testspice1 = users3.splice(0 3);console.log(\"array of objects splice\" JSON.stringify(testsplice));
//[{\"id\":1\"name\":\"ted\"{\"id\":2\"name\":\"mike\"{\"id\":3\"name\":\"bob\"
5、使用 splice 删除特定值
数组:
let arr = [2 1 2 5 6 7 8 9 9 10
;
for (var i = 0; i < arr.length; i++) {
if (arr[i
=== 5) {
arr.splice(i 1);
console.log(\"splice with specific value\" arr);
//[2 1 2 6 7 8 9 9 10
对象数组:
let users5 = [
{ id: 1 name: \"ted\"
{ id: 2 name: \"mike\"
{ id: 3 name: \"bob\"
{ id: 4 name: \"sara\"
;
for (var i = 0; i < users5.length; i++) {
if (users5[i
.name === \"ted\") {
users5.splice(i 1);
console.log(\"splice with specific value array of objects\"JSON.stringify( users5));
- javascript|Web前端培训:什么是 MEAN Stack?
- 删除|一个24小时就会自毁的网站,在网友的接力下存活了两年
- 删除|换成鸿蒙系统后特别费电,四个小时充一次,还是不怎么用的情况下
- 想要玩转 Web3.0,读懂智能合约是关键
- 删除|爱了爱了!华为旗舰新机曝光,6400mAh+超级全面屏
- Web3.0时代,数字人如何突破规模落地三大难点?百度李士岩:两
- Web 3,能解决互联网最核心的悖论吗?
- Web3.0时代,数字人如何突破规模落地三大难点?
- 国际热核聚变实验堆|web前端 - JS中的4个for循环
- 泰捷 WEBOX T1S 投影仪评测:千元售价真1080P,还支持梯形校正