在使用splice()之前和之后获取结果数组

Getting the result array before and after using splice()

本文关键字:之后 获取 结果 数组 splice      更新时间:2023-09-26

我写了一个演示,通过索引从数组中删除特定元素。

var splice_a = function (array, index) {
  array.splice(index, 1);
  return array
};
var splice_b = function (array, index) {
  return array.splice(index, 1)
};
var test = function () {
  var array = [1, 2, 3];
  
  alert(splice_a(array, 1));
  alert(splice_b(array, 1));
};
<button onclick="test()">Click me</button>

Array.prototype.splice()介绍了return value:

包含已删除元素的数组。如果只有一个元素移除后,返回一个元素的数组。如果没有元素如果移除,则返回一个空数组。

它没有提到:如果我想获得结果数组,我应该将其与关键字return组合吗?

这应该是一个案例,因为我得到了两个不同的结果:

1,3

3

我的问题是:在这种情况下,return array.splice(index, 1)会发生什么?

以下是正在发生的事情的抽象示例:

// a function that removes the last element from an array, and returns 1
Array.prototype.foo = function() {
  this.pop()
  return 1
}
// a function that removes the last element from an array, and returns the array
Array.prototype.bar = function() {
  this.pop()
  return this
}

如果要调用arr.foo()arr.bar()arr也会发生同样的情况,但是要调用的函数的返回值不同。并不是每个Array.prototype方法都返回数组。例如splice不返回原始数组。这类似于你正在尝试做的事情:

function foo_a(arr) {
  // call foo, removes element from arr.
  arr.foo() // We do not return here so the fact that foo returns 1 is not used.
  return arr
}
function foo_b(arr) {
  // call foo, removes element from arr.
  return arr.foo()  // We return the return value of foo here, which is 1
}
var arr = [1, 2, 3, 4];
foo_a(arr) // [1, 2, 3]
foo_b(arr) // 1

tl;drreturn arr.foo()基本上是在说"返回foo的返回值",不管它对数组做了什么,它总是1。

生成的数组是您自己的数组。不需要归还。所以它只是:

var splice_a = function (array, index) {
  array.splice(index, 1);
  return array
};
var array = [1, 2, 3, 4];
splice_a(array, 1);
alert(array) //will show 1,3,4;
splice_a(array, 1);
alert(array) //will show 1,4;

Array.prototype.splice将从数组的m索引中删除n数据,并将删除的值作为数组返回:

var m = 2,
  n = 3;
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var removedValues = arr.splice(m, n);
console.log(arr, removedValues);

所以在您的情况下,它将从数组中移除一个元素(索引处的值),并在新数组中返回该元素。

我修改了您的函数以显示返回值的差异。它们将以相同的方式更改传入的数组。唯一改变的是返回值。这可能是你感到困惑的地方。请注意,在运行splice_b之前,splice_a更改了array变量。

var splice_a = function (array, index) {
  var removed = array.splice(index, 1);
  console.log(`  Removed = ${removed}`);
  console.log(`  Array = ${array}`);
  
  return array;
};
var splice_b = function (array, index) {
  var removed =  array.splice(index, 1)
  console.log(`  Removed = ${removed}`);
  console.log(`  Array = ${array}`);
  
  return removed;
};
var array = [1, 2, 3];
console.log(`Array before splice_a: ${array}`);
splice_a(array, 1);
console.log(`Array before splice_b: ${array}`);
splice_b(array, 1);
console.log(`Final value of array: ${array}`);

至于如果值正在更改,为什么要返回该值。这主要是为了方便链接命令。只考虑第一个函数:

var splice_a1 = function (array, index) {
  var removed = array.splice(index, 1);
  return array;
};
var splice_a2 = function (array, index) {
  var removed = array.splice(index, 1);
};
var array = [1, 2, 3];
// This will run, because splice_a1 returns an array
splice_a1(array, 1).forEach( _ => console.log(_) )
// This will throw an error, because <undefined> does not have a forEach()
splice_a2(array, 1).forEach( _ => console.log(_) )