详解JS删除数组元素的三个方法：splice(),pop(),shift()
作者:admin 时间:2022-5-23 20:7:18 浏览:在JavaScript中，当我们要删除数组的元素时，我们可以通过多种方法来实现。JavaScript内置了三个方法，让我们很轻松地删除数组的元素：splice()、pop()、shift()。但这三个方法无论从语法还是功能方面，都非常不同，在本文中，我将详细介绍这三种方法的用法及注意事项。
使用splice()方法删除数组元素
要使用splice()删除数组中的元素，需将两个参数传递给splice()方法，如下所示：
Array.splice(position,num);
position是指定要删除项目的第一个位置，num参数确定要删除的元素数。
splice()方法更改原始数组并返回一个包含已删除元素的数组。
让我们看一下下面的例子。
假设你有一个数组scores，其中包含从 1 到 5 的五个数字。
let scores = [1, 2, 3, 4, 5];
以下语句scores从第一个元素开始删除数组的三个元素。
let deletedScores = scores.splice(0, 3);
scores数组现在包含两个元素。
console.log(scores); // [4, 5]
而deletedScores数组包含三个元素。
console.log(deletedScores); // [1, 2, 3]
查找元素并用splice方法将其删除
在实际使用中，我们更多是要先找出要删除的元素，然后将其删除。
实例
var arrNames = ['小明','小张','小李'];
function nameRemove(name){
const nIndex = arrNames.indexOf(name);
if(nIndex > -1){
arrNames.splice(nIndex,1);
}
}
nameRemove("小张")
console.log(arrNames);
输出
['小明', '小李']
该实例中，先查找元素（item）的索引位置，即是splice()的position值，然后再套用splice()语法将其删除。
使用pop()方法删除数组元素
JavaScript的pop()方法也可以删除数组元素，但与splice()不同，pop()只能删除数组的最后一个元素。
以下示例使用pop()方法删除numbers数组的最后一个元素：
const numbers = [10, 20, 30];
const last = numbers.pop();
console.log(last); // 30
console.log(numbers.length); // 2
输出：
30
2
在此示例中，pop()方法从数组numbers中删除数字30。此外，它会将数组的属性length值减小到2。
对空数组使用pop()方法
下面的示例中，在一个空数组上调用pop()方法。在这种情况下，pop()方法返回undefined，并且数组的长度length值为零：
const numbers = [];
const last = numbers.pop();
console.log(last);
console.log(numbers.length);
输出：
undefined
0
对类数组对象使用pop()方法
pop()方法是通用的。因此，可以使用call()或apply()来调用类数组对象上的pop()方法。在内部，pop()使用类数组对象的length属性来确定要删除的最后一个元素。
请参见以下示例：
let greetings = {
0: 'Hi',
1: 'Hello',
2: 'Howdy',
length: 2,
removeLast() {
return [].pop.call(this);
},
};
let greting = greetings.removeLast();
console.log(greting);
console.log(greetings);输出：
'Howdy'
{
'0': 'Hi',
'1': 'Hello',
length: 2,
removeLast: [Function: removeLast]
}
代码解释
首先，定义greetings具有以下内容的对象：
- 四个属性： 0、1、2 和length。
- 一个
removeLast()函数：使用数组的call()方法来调用pop()方法。
二、调用greetings对象的removeLast()方法
let greting = greetings.removeLast();
第三，将移除的元素（greeting）和greetings对象输出到控制台
console.log(greting);
console.log(greetings);
概括
- 使用
pop()方法删除数组的最后一个元素。 - 使用
call()或apply()调用类数组对象的pop()方法。
使用shift()方法删除数组元素
除了splice()和pop()，我们还可以用shift()方法删除数组元素。但与pop()刚好相反，shift()方法是删除数组的第一个元素。
语法
array.shift()
示例1
const numbers = [10, 20, 30];
let number = numbers.shift();
console.log({ number });
console.log({ numbers });
console.log({ length: numbers.length });
输出：
{ number: 10 }
{ numbers: [ 20, 30 ] }
{ length: 2 }
代码解释
首先，定义包含三个元素的numbers数组：
const numbers = [10, 20, 30];
其次，从numbers数组中删除第一个元素并将删除的元素分配给number变量。
let number = numbers.shift();
第三，将移除的元素、数组和数组的长度输出到控制台：
console.log({ number });
console.log({ numbers });
console.log({ length: numbers.length });示例2
下面的例子展示了如何使用shift()方法删除数组的所有元素：
const numbers = [10, 20, 30];
let number;
while ((number = numbers.shift()) != undefined) {
console.log(number);
}
输出：
10
20
30
示例3
shift()方法是通用的。因此，可以将它与类似数组的对象一起使用。要将shift()方法与类似数组的对象一起使用，请使用call()或apply()方法。
下面示例展示了如何使用shift()方法删除类数组对象的元素：
let greetings = {
0: 'Hi',
1: 'Hello',
2: 'Howdy',
length: 3,
removeFirst() {
return [].shift.call(this);
},
};
const greeting = greetings.removeFirst();
console.log(greeting);
console.log(greetings);输出：
Hi
{
'0': 'Hello',
'1': 'Howdy',
length: 2,
removeFirst: [Function: removeFirst]
}
代码解释
首先，定义greetings对象：
let greetings = {
0: 'Hi',
1: 'Hello',
2: 'Howdy',
length: 3,
removeFirst() {
return [].shift.call(this);
},
};greetings对象具有由属性0、1和2表示的三个元素。此外，它还具有存储对象元素数量的length属性。
removeFirst()方法使用call()方法来调用数组的shift()方法，该数组使用this引用greetings对象。
其次，调用removeFirst()方法并将移除的元素分配给greeting变量：
const greeting = greetings.removeFirst();
第三，将greeting和greetings输出到控制台：
console.log(greeting);
console.log(greetings);
输出显示length减少了 1，带有索引 0 的属性被移除，其他属性的索引也相应调整。
概括
- 使用该
shift()方法从数组中删除第一个元素并返回该元素。 - 通过
call()或apply()方法将shift()方法与类似数组的对象一起使用。
总结
本文详细介绍了JS删除数组元素的三个方法：splice()、pop()和shift()，这三种方法使用起来非常方便，但它们有不同的作用和用法。
您可能对以下文章也感兴趣
- 站长推荐
