从 JavaScript 数组的末尾删除元素
通过将 length 属性设置为小于当前值的值,可以从数组的末尾删除 JavaScript 数组元素。任何索引大于或等于新长度的元素都将被删除。
var ar = [1, 2, 3, 4, 5, 6];
ar.length = 4; // set length to remove elements
console.log( ar ); // [1, 2, 3, 4]
pop 方法删除数组的最后一个元素,返回该元素,并更新长度属性。pop 方法修改了调用它的数组,这意味着与使用 delete 不同,最后一个元素被完全删除并减少了数组长度。
var ar = [1, 2, 3, 4, 5, 6];
ar.pop(); // returns 6
console.log( ar ); // [1, 2, 3, 4, 5]
从 JavaScript 数组的开头删除元素
如何删除 JavaScript 数组的第一个元素?
shift 方法的工作方式与 pop 方法非常相似,只是它删除了 JavaScript 数组的第一个元素而不是最后一个元素。
没有参数,因为 shift 方法只删除了第一个数组元素。当元素被移除时,剩余的元素被向下移动。
var ar = ['zero', 'one', 'two', 'three'];
ar.shift(); // returns "zero"
console.log( ar ); // ["one", "two", "three"]
shift 方法返回已被移除的元素,更新剩余元素的索引,并更新 length 属性。它修改调用它的数组。
如果没有元素,或者数组长度为 0,则该方法返回 undefined。
在 JavaScript 中使用 Splice 删除数组元素
splice 方法可用于在数组中添加或删除元素。第一个参数指定开始添加或删除元素的位置。第二个参数指定要删除的元素数。第三个和后续参数是可选的;它们指定要添加到数组中的元素。
这里我们使用 splice 方法从位置 3 开始移除两个元素(从零开始的索引):
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
var removed = arr.splice(2,2);
splice 方法返回一个包含已移除元素的数组。您可以看到删除的数组包含 [3, 4] 并且原始数组包含剩余的值。
splice 方法也可用于从数组中删除一系列元素。
var list = ["bar", "baz", "foo", "qux"];
list.splice(0, 2);
// Starting at index position 0, remove two elements ["bar", "baz"] and retains ["foo", "qux"].
使用 Splice 按值删除数组项
如果您知道要从数组中删除的值,则可以使用 splice 方法。首先,您必须确定目标项目的索引。然后,您使用索引作为开始元素并仅删除一个元素。
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
for( var i = 0; i < arr.length; i++){
if ( arr[i] === 5) {
arr.splice(i, 1);
}
}
//=> [1, 2, 3, 4, 6, 7, 8, 9, 0]
这是一个简单的例子,其中元素是整数。如果您有一组对象,则需要更复杂的例程。
如果您只想删除单个项目,则此方法有效。如果您想删除多个符合您的条件的项目,则会出现故障。
当从数组中删除项目时,索引仍会增加,并且匹配值之后的下一个项目将被跳过。
简单的解决方案是修改上面的示例以减少索引变量,这样它就不会跳过数组中的下一项。
var arr = [1, 2, 3, 4, 5, 5, 6, 7, 8, 5, 9, 0];
for( var i = 0; i < arr.length; i++){
if ( arr[i] === 5) {
arr.splice(i, 1);
i--;
}
}
//=> [1, 2, 3, 4, 6, 7, 8, 9, 0]
在修改后的示例中,我向数组添加了 2 个额外的 5 个值。我还添加了“i–;” 在拼接调用之后。
现在,当您执行循环时,它将删除每个匹配项。
感谢 Kristian Sletten 指出循环跳过以下项目的问题。
使用数组过滤方法按值删除项目
与 splice 方法不同,filter 创建一个新数组。filter() 不会改变调用它的数组,而是返回一个新数组。
filter() 有一个参数,一个回调方法。当过滤器方法遍历数组元素时触发回调。它将向回调传递三个值:当前值或元素、当前数组索引和完整数组。
回调方法应返回 true 或 false。您有责任测试值(元素)以查看它是否符合您的标准。如果是这样,您可以返回 true。返回 true 的元素将添加到新的过滤数组中。
var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
var filtered = array.filter(function(value, index, arr){
return value > 5;
});
//filtered => [6, 7, 8, 9]
//array => [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
您应该注意返回一个包含匹配值的新数组。原始数组保持不变。我发现这很有用,因为我经常想保留原始数据源,但要根据不同的逻辑集检索子集。
Lodash 数组删除方法
有时实用程序库是解决更复杂问题的最佳方式。Lodash 提供了一组丰富的数组操作方法,其中一个是 remove。
Lodash remove 方法的工作方式很像数组过滤器方法,但有点相反。它不保存原始数组值,而是删除匹配的元素。它将匹配的元素作为新数组返回。
var array = [1, 2, 3, 4];var evens = _.remove(array, function(n) { return n % 2 === 0;});console.log(array);// => [1, 3]console.log(evens);// => [2, 4]
制作删除方法
正如我之前提到的,没有原生的 Array.remove 方法。Lodash 方法确实解决了这个问题,但您可能并不总是想使用 Lodash。这并不意味着您不能创建实用程序方法。John Resig 为我们提供了一个模型,但他扩展了 Array 原型,这是一个坏主意。
相反,我创建了一个可以添加到帮助程序或实用程序库中的 Array 删除实用程序方法。与 Lodash remove 方法一样,第一个参数是目标数组。它使用 Array.filter 返回不匹配值的元素。
function arrayRemove(arr, value) {
return arr.filter(function(ele){
return ele != value;
});
}
var result = arrayRemove(array, 6);
// result = [1, 2, 3, 4, 5, 7, 8, 9, 0]
这个方法很简单,它假设简单的值,比如数字或字符串。您可以修改此方法以使用 customcomparison 方法,但我认为直接使用 filter 方法会更容易。
使用 Delete 运算符显式删除数组元素
您可以使用删除运算符删除特定的数组元素:
var ar = [1, 2, 3, 4, 5, 6];
delete ar[4]; // delete element with index 4
console.log( ar );
// [1, 2, 3, 4, undefined, 6]
alert( ar );
// 1,2,3,4,,6
使用删除运算符不会影响长度属性。也不影响后续元素的索引。数组变得稀疏,这是一种奇特的说法,即删除的项目没有被删除但变得未定义。将使用 delete 与下面描述的拼接方法进行比较。
删除运算符旨在从 JavaScript 对象中删除属性,其中数组是对象。
实际上没有从数组中删除元素的原因是删除操作符更多的是释放内存而不是删除元素。当不再引用该值时,将释放内存。
清除或重置 JavaScript 数组
如果您想清空整个数组并转储所有元素怎么办?
您可以使用几种技术来创建空数组或新数组。
最简单和最快的技术是将数组变量设置为空数组:
var ar = [1, 2, 3, 4, 5, 6];
//do stuffar = [];
//a new, empty array!
这可能产生的问题是当您引用变量时。对该变量的引用不会改变,它们仍将保留原始数组的值。这当然会产生错误🐛。
这是此场景的一个过度简化的示例:
var arr1 = [1, 2, 3, 4, 5, 6];
var arr2 = arr1;
// Reference arr1 by another variable arr1 = [];
console.log(arr2);
// Output [1, 2, 3, 4, 5, 6]
清除数组的一个简单技巧是将其长度属性设置为 0。
var ar = [1, 2, 3, 4, 5, 6];
console.log(ar);
// Output [1, 2, 3, 4, 5, 6]
ar.length = 0;
console.log(ar);
// Output []
另一种不自然的技术是使用 splice 方法,将数组长度作为第二个参数传递。这将返回原始元素的副本,这可能对您的场景很方便。
var ar = [1, 2, 3, 4, 5, 6];
console.log(ar);
// Output [1, 2, 3, 4, 5, 6]
ar.splice(0, ar.length);
console.log(ar);
// Output []
最后两种技术不会创建新数组,而是更改数组的元素。这意味着引用也应该更新。
还有另一种方法,使用 while 循环。我觉得有点奇怪,但同时看起来很花哨,所以它可能会给一些朋友留下深刻的印象!
var ar = [1, 2, 3, 4, 5, 6];
console.log(ar);
// Output [1, 2, 3, 4, 5, 6]
while (ar.length) {
ar.pop();
}
console.log(ar);
// Output []