如何使用 es6 或 lodash 在 javascript 中按索引對兩個數組進行分組？

Question

我們有相同的兩個 arrays 按索引分組主題。 兩個 arrays 長度相同，值不同，如吹。 如何通過 ES6 reduce 或 lodash 對兩個數組及其索引進行分組？

array1 = [1,2,3,4] OR [{a:1},{b:2},{c:3},{d:4}]
array2 = [5,6,7,8] OR [{e:5},{f:6},{g:7},{h:8}]

finalArray = [[1,5],[2,6],[3,7],[4,8]]

我正在嘗試不同的方式，例如在 es6 或 lodash concat 中使用 reduce 分組，但我找不到解決問題的最佳方法。

Answer 1

嘗試這個：

 let array1 = [1, 2, 3, 4]; let array2 = [5, 6, 7, 8]; let res = array1.map((value, index) => { return [value, array2[index]] }) console.log(res);

如果是objects數組

 let array1 = [{a:1},{b:2},{c:3},{d:4}]; let array2 = [{e:5},{f:6},{g:7},{h:8}]; let res = array1.map((value, index) => { return [Object.values(value)[0],Object.values(array2[index])[0]] }) console.log(res)

Answer 2

使用lodash es zip function

// _ is lodash

const array1 = [1,2,3,4]
const array2 = [5,6,7,8]

console.log(_.zip(array1, array2))

結果

[ [ 1, 5 ], [ 2, 6 ], [ 3, 7 ], [ 4, 8 ] ]

如果您正在使用對象數組。 使用Object.values獲取值並獲取第 0 個元素。

const array3 = [{a:1},{b:2},{c:3},{d:4}];
const array4 = [{e:5},{f:6},{g:7},{h:8}];

function firstval(ob){
  return Object.values(ob)[0]
}

console.log(_.zip(array3.map(firstval), array4.map(firstval)))

您也可以編寫自己的zip 。 這是一個限量版。 它只處理 2 個元素，不接受或返回生成器等。

它可以很容易地擴展為采用擴展運算符，因此可以使用任意數量的 arguments。 不過，您似乎不需要那種級別的靈活性。

function zip(a, b) {
  const num = Math.min(a.length, b.length);
  const result = [];
  for(i = 0; i < num; i++) result.push([a[i], b[i]]);
  return result;
}

Answer 3

以下代碼在這些假設下工作：

1. 所有輸入 arrays 具有相同的長度
2. 如果數組元素是 object，它只有一個屬性

function getValue(element) {
  if (typeof element === 'object') {
    return Object.values(element).pop()
  } else {
    return element
  }
}

function zipArrays(arr1, arr2) {
  return arr1.reduce((acc, elm1, index) => {
    const elm2 = arr2[index]
    const elm = [getValue(elm1), getValue(elm2)]
    acc.push(elm)
    return acc
  }, [])
}

// usage:
const array1 = [1,2,3,4] // OR [{a:1},{b:2},{c:3},{d:4}]
const array2 = [5,6,7,8] // OR [{e:5},{f:6},{g:7},{h:8}]
const finalArray = zipArrays(array1, array2)