concat和push的区别？

Question

为什么

push

方法的返回会导致

未捕获类型错误：acc.push 不是函数

但是返回

concat

会得到正确的解决方案吗？

[1, 2, 3, 4].reduce(function name(acc, curr) {
  if (even(curr)) {
    return acc.push(curr);
  }
  return acc;
}, []);


function even(number) {
  if (number % 2 === 0) {
    return true;
  }
  return false;
}

[1, 2, 3, 4].reduce(function name(acc, curr) {
  if (even(curr)) {
    return acc.concat(curr);
  }
  return acc;
}, []);


function even(number) {
  if (number % 2 === 0) {
    return true;
  }
  return false;
}

Answer 1

push()

将元素添加到数组末尾并返回数组的新长度。因此您在这里的退货是无效的。

concat()

方法用于合并数组。 Concat 不会更改现有数组，而是返回一个新数组。

如果你想要一个像这样的新数组，最好进行过滤：

var arr = [1, 2, 3, 4];
var filtered = arr.filter(function(element, index, array) {
  return (index % 2 === 0);
});

请注意，假设数组 arr 完整且没有间隙 - 所有索引值都是偶数。如果您需要每个人，请使用

element

而不是

index

var arr = [1, 2, 3, 4];
var filtered = arr.filter(function(element, index, array) {
  return (element% 2 === 0);
});

Answer 2

根据MDN文档说：

• push()

  方法：将一个或多个元素添加到数组末尾并返回数组的新长度。

const count = ['pigs', 'goats'].push('cows');
console.log(count); // expected output: 3

• concat()

  方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新的数组y

console.log(['a'].concat(['b']));// expected output: Array ["a", "b"]

并且与最后的

Array#reduce

的参数结合起来就是数组初始化

[])

，这意味着你想要返回一个数组结果。

==> 这就是为什么你使用

concat

效果很好的原因。

---

重构代码

1. 如果您还想使用

   Array#reduce

   和

   Array#push

const even = (number) => number%2 === 0;
const result = [1, 2, 3, 4].reduce(function name(acc, curr) {
  if(even(curr)) acc.push(curr); // Just add one more item instead of return
  return acc;
}, []);

console.log(result);

2. 更简单的方法是使用

   Array#filter

const even = (number) => number%2 === 0;
console.log([1, 2, 3, 4].filter(even));

Answer 3

acc

不应该是一个数组。查看文档。它可以是一个，但是..

数组到数组的

reduce

根本没有任何意义。你想要的是

filter

。我的意思是，

reduce

使用数组作为累加器并

concat

将每个元素添加到它在技术上确实可行，但这不是正确的方法。

var res = [1, 2, 3, 4].filter(even);
console.log(res);


function even(number) {
  return (number % 2 === 0);
}

Answer 4

https://dev.to/uilicious/javascript-array-push-is-945x-faster-than-array-concat-1oki Concat 比 Push 慢 945 倍，只是因为它必须创建一个新数组。

Answer 5

concat()

通过将调用该方法的数组与所有参数展平（1 层深）的数组合并到一个数组中来创建一个新数组。

push()

只是将元素添加到现有数组中。

由于

concat()

创建了一个新数组，如果您使用重复性任务（例如用另一个数组中的值填充一个数组），请避免使用它，它的速度非常慢：

` Chrome/117
-----------------------------------------------------------------------
create new array by push       1.0x  |  x10000  510  518  525  541  546
create new array by concat   109.8x  |    x100  560  565  572  582  590
-----------------------------------------------------------------------
https://github.com/silentmantra/benchmark `

let people = [
  { name: "John", age: [30, 40], city: "New York" },
  { name: "Alice", age: [30, 40], city: "Los Angeles" },
  { name: "Bob", age: [30, 40], city: "Chicago" },
  { name: "Eva", age: [30, 60], city: "San Francisco" },
  { name: "David", age: [30, 50], city: "Miami" }
];

const COUNT = 3000;

// @benchmark create new array by push
{
let count = COUNT, result = [];
while(count--) result.push(...people);
result;
}

// @benchmark create new array by concat
{
let count = COUNT, result = [];
while(count--) result = result.concat(people);
}

/*@end*/eval(atob('e2xldCBlPWRvY3VtZW50LmJvZHkucXVlcnlTZWxlY3Rvcigic2NyaXB0Iik7aWYoIWUubWF0Y2hlcygiW2JlbmNobWFya10iKSl7bGV0IHQ9ZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgic2NyaXB0Iik7dC5zcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9naC9zaWxlbnRtYW50cmEvYmVuY2htYXJrL2xvYWRlci5qcyIsdC5kZWZlcj0hMCxkb2N1bWVudC5oZWFkLmFwcGVuZENoaWxkKHQpfX0='));