基于索引合并 JavaScript 数组而无需使用 .concat 方法

Question

我正在尝试合并两个数组，大部分答案都是将第二个数组添加到第一个数组的末尾。我需要按索引合并。

以下是示例代码：

let arr1 = ['golf', 'hockey', 'tennis'];
let arr2 = ['player1', 'player2', 'player3'];

Array.prototype.zip = function (arr) {
  return this.map(function (e, i) {
    return [ e, arr[i]];
  })
};
const arr3 = arr1.zip(arr2);
console.log(arr3);

结果应该是：

['golf', 'player1', 'hockey', 'player2', 'tennis', 'player3']

上述代码看起来应该可以工作，但事实并非如此。如果能修复它，或者更换更好的代码将是很好的。

- Mark Hayden

---

请不要改变内置对象。 - CertainPerformance

好的，只是补充一下 - 我需要的最终结果是这个 ['高尔夫', '球员1', '曲棍球', '球员2', '网球', '球员3']。 - Mark Hayden

Answer 1

你可以使用.reduce()来将两个数组进行压缩：

let arr1 = ['golf', 'hockey', 'tennis'],
    arr2 = ['player1', 'player2', 'player3'];

let zip = (a1, a2) => a1.reduce((a, c, i) => (a.push(c, a2[i]), a), []);

console.log(zip(arr1, arr2));

文档:

• Array.prototype.reduce()：用于将数组中的所有元素通过一个函数累积为单个值。
• 箭头函数：一种更简洁的函数语法，可以替代传统的函数表达式。
• 逗号运算符：可以在一条语句中执行多个操作，但只返回最后一个操作的结果。

- Mohammad Usman

---

我意识到我给出了错误的示例对象，这严重影响了结果。因此，我将这个答案称为正确答案，因为它是根据我提供的错误信息所给出的第一个有效答案。我在stackoverflow上写了一个新问题，链接在这里-https://stackoverflow.com/questions/49921853/merging-a-simple-array-with-a-more-complex-one-without-concat-for-react-app - Mark Hayden

Answer 2

你可以使用临时数组代替直接输入方法。

let arr1 = ['golf', 'hockey', 'tennis'];
let arr2 = ['player1', 'player2', 'player3']

Array.prototype.zip = function (arr) {
    this.map(function (e, i) { this.splice(i*2+1, 0, arr[i]); }, this )
};
const arr3 = arr1.zip(arr2)
console.log(arr3)

- Sergio Reis

---

哦，看起来更清爽了。谢谢。 - Sergio Reis

Answer 3

一个简单的解决方法： 只需使用简单的reduce()函数来展平您现有的内容：

let arr1 = ['golf', 'hockey', 'tennis'];
let arr2 = ['player1', 'player2', 'player3']

Array.prototype.zip = function (arr) {
      return this.map(function (e, i) {
          return [ e, arr[i]]
      }).reduce((a,b)=>a.concat(b)); // blink and you miss the change...
    };
const arr3 = arr1.zip(arr2)
console.log(arr3)

这种方法保留了您所拥有的，并且不会像额外的方法调用、临时数组等一样增加很多复杂性；这就是函数式方法的美妙之处：您只需要一个链条就可以得到所需的结果。我还会将其转换为独立的方法，而不是修改原型，但这并不是重点...

- dandavis

Answer 4

.map 将一个数组映射到另一个数组，一对一：如果原始数组中有3个元素，则 .map 只能生成另一个具有3个元素的数组。如果无法使用 concat，请改用 .reduce 代替 .map，这样您就可以在单次迭代中推送多个元素：

const arr1 = ['golf', 'hockey', 'tennis'];
const arr2 = ['player1', 'player2', 'player3']

Array.prototype.zip = function (otherArr) {
  return this.reduce((accum, item, i) => {
    accum.push(item);
    accum.push(otherArr[i]);
    return accum;
  }, []);
};
const arr3 = arr1.zip(arr2)
console.log(arr3)

当然，最好不要更改内置的Array对象。您可以通过使用独立的函数来轻松避免这种情况：

const arr1 = ['golf', 'hockey', 'tennis'];
const arr2 = ['player1', 'player2', 'player3']

function zip(arr1, arr2) {
  return arr1.reduce((accum, item, i) => {
    accum.push(item);
    accum.push(arr2[i]);
    return accum;
  }, []);
};
const arr3 = zip(arr1, arr2);
console.log(arr3);

- CertainPerformance