"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

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

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

“x mod y” - 或“x 对 y 的 Modulo”可以描述为“x 除以 y 的余数”。在编程中，这用于很多事情，但在这种情况下，它是从 i 获取 props 的有效索引（其中 i 是 groups 的索引，并且 not props - 所以 i 不能直接用于索引 props).

i参数在[0-groups.length]的范围内（即不是props.length！），而props大概有一个 props.length 小于 groups.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 生态系统中的一个艺术术语，但它仍然......太可怕了。

Answer 2

为了简化理解

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]
}));

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

What is the logic behind "prop: props[ i % props.length] inside a .map()"?

javascript

arrays

ecmascript-6

array.prototype.map

具体