如何将两个数组按相同的索引位置缩减为单个值？

Question

我有一个使用D3编写的程序，它正在构建一条折线图，其中有两条线路。我想确定这些线路相交的坐标。D3是否有此功能？这些数组往往长度不同并且是动态生成的，但始终会在同一索引处具有两个值相等的位置。

例如：

   var line1 = [0,1,2,3,4];
   var line2 = [4,3,2,1,0];

答案是索引2，在这种情况下。如果没有D3函数，使用ES6及以上的最佳方法是什么？

- jon

Answer 1

D3有一个很少人知道的方法，名为d3.zip，我们可以使用它来合并数组并查找其中所有元素都相等的任何内部数组：

var line1 = [0, 1, 2, 3, 4];
var line2 = [4, 3, 2, 1, 0];
var zip = d3.zip(line1, line2).reduce(function(a, c, i) {
  if (c[0] === c[1]) a.push(i);
  return a;
}, []);

console.log(zip)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

d3.zip 的好处在于它可以与多个数组一起使用，并且还会保留最短数组的长度。因此，在更复杂的情况下（索引 6 和 9 处的值相等）：

var line1 = [0, 1, 2, 3, 9, 9, 1, 4, 7, 6, 5, 4];
var line2 = [4, 3, 2, 1, 0, 8, 1, 2, 3, 6, 1];
var line3 = [9, 9, 9, 9, 4, 1, 1, 1, 1, 6, 1, 1, 1, 1, 1, 1];
var zip = d3.zip(line1, line2, line3).reduce(function(a, c, i) {
  const every = c.every(function(e) {
    return e === c[0]
  })
  if (every) a.push(i);
  return a;
}, []);

console.log(zip)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

- Gerardo Furtado

Answer 2

const [longer, shorter] = line1.length > line2.length ? [line1, line2] : [line2, line1];

const crossIndex = shorter.reduce((crossIndex, value, index) => {
  if (crossIndex !== null) {
    // already found it! just return
    return crossIndex;
  }

  // find it! return
  if (value === longer[index]) return index;

  // no found, continue searching
  return crossIndex;
}, null)

如果您不介意搜索运行几个额外的无用迭代，那么我们找出哪一行更长或更短的第一步实际上是不必要的。您可以在line1或line2上调用.reduce()，然后再次与另一个进行比较，仍然会得到相同的结果。

- hackape