“prop：props [ i % props.length] inside a .map()”背后的逻辑是什么？

Question

我正在努力理解...

// group is an array of numbers coming from an api

const arr = group.map((el, i) => {
  return new obj({
    element: el,
    prop: props[i % props.length],
  });
});

具体

• props[i % props.length] 做什么？
• prop 将在决赛中获得什么？

Answer 1

为了简化理解

i % props.length

// 0 % 8 === 0
// 1 % 8 === 1
// 2 % 8 === 2
// 3 % 8 === 3
// 4 % 8 === 4
// 5 % 8 === 5
// 6 % 8 === 6
// 7 % 8 === 7
// 8 % 8 === 0 - never gets here.

props[0]
props[1]
props[2]
props[3]
props[4]
props[5]
props[6]
props[7]

它可能刚刚写成：

const arr = group.map((el, i) => new obj({
  element: el,
  prop: props[i]
}));

Answer 2

The % operator is JavaScript's syntax for the mathematical Remainder operator - 它通常被称为“模”运算符，但这是技术上不正确的，因为“余数”和“模”在处理负数时是不同的。

但在本例中，我们处理的是正数组索引，因此“模”和“余数”是可以互换的。

“x mod y” - 或“The Modulo of x over y”可以描述为“x 的余数除以 y”。在编程中，这用于许多事情，但在这种情况下，它是从i 获取到props 的有效索引（其中i 是到groups 的索引，而不是 @ 987654328@ - 所以i 不能直接用于索引props）。

---

i 参数在[0-groups.length] 的范围内（即不是 props.length!），而props 可能有一个小于groups.length 的props.length。

如果你有：

const groups = [ 'a', 'b', 'c', 'd', 'e', 'f' ]; // length: 6
const props  = [ 0, 1, 2 ]; // length: 3

那么输出将是：

const arr = [
    { el: 'a', prop: 0 },        // i = 0, i % 3 == 0
    { el: 'b', prop: 1 },        // i = 1, i % 3 == 1
    { el: 'c', prop: 2 },        // i = 2, i % 3 == 2
    { el: 'd', prop: 0 },        // i = 3, i % 3 == 0
    { el: 'e', prop: 1 },        // i = 4, i % 3 == 1
    { el: 'f', prop: 2 },        // i = 5, i % 3 == 2
];

---

顺便说一句，每当我看到有人在 JavaScript 中使用标识符 props 时，我都会有点死心。我知道这是 React 生态系统中的一个艺术术语，但它仍然......很糟糕。