微信|web前端 - JavaScript 中删除/过滤数组的方法总结


微信|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\"
;
【微信|web前端 - JavaScript 中删除/过滤数组的方法总结】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));
//[{\"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);