javascript - 如何避免 map 函数中的变量范围问题？

Question

我有一个解决这个问题的方法，但我正在尝试尽可能地制作一个更干净整洁的版本。我想出了另一种解决方案，它在 map 函数中使用了一个函数。不幸的是，这个版本有一些问题，我只想知道为什么第二个解决方案不起作用。我猜这是一个可变范围的问题。我期待着了解您对此的看法。

我有一个简单的函数，可以在数组中打印日历日!

所以一个问题是为什么我的代码的第一个版本得到了预期的结果，而第二个版本却打印出意想不到的结果。

我试图将 let 更改为 var 并且我还使 counter 和 startedIndexing 超出了函数范围.

解决方案 1(有效):

const currentFullMonth = {
   days_length: 31,
   first_day: "Thu",
   first_day_index: 4,
   last_day: "Sat",
   last_day_index: 6,
   month: "Aug",
   year: 2019
}

const testMonth = [
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0]
];

function printMonthCalender(month) {
    let counter = 0;
    let startedIdxing = false;
    return month.map(week => {
        return week.map((day, index) => {
            if (index === currentFullMonth.first_day_index && !startedIdxing) {
                counter++;
                startedIdxing = true;
                return counter;
            } else if (startedIdxing) {
                if (currentFullMonth.days_length === counter) {
                    counter = 0;
                }
                counter++;
                return counter;
            } else {
                return 0;
            }
        });
    });
} // end of Solution #1 <-- this works :)

解决方案 2(不起作用):

// start of Solution #2 <-- does not work :(    
// im using two functions to make it look more cleaner
//
function printMonthCalender2(month) {
    let counter = 0;
    let startedIdxing = false;
    return month.map(week => {
        return week.map((day, index) =>
            indexingMonth(counter, startedIdxing, index)
        );
    });
}
function indexingMonth(counter, startedIdxing, index) {
    if (index === currentFullMonth.first_day_index && !startedIdxing) {
        counter++;
        startedIdxing = true;
        return counter;
    } else if (startedIdxing) {
        if (currentFullMonth.days_length === counter) {
            counter = 0;
        }
        counter++;
        return counter;
    } else {
        return 0;
    }
}// end of Solution #2

console.log(printMonthCalender(testMonth));
console.log(printMonthCalender2(testMonth));

预期结果如下(第一版):

[0, 0, 0, 0, 1, 2, 3]
[4, 5, 6, 7, 8, 9, 10]
[11, 12, 13, 14, 15, 16, 17]
[18, 19, 20, 21, 22, 23, 24]
[25, 26, 27, 28, 29, 30, 31]
[1, 2, 3, 4, 5, 6, 7]

意外结果如下(第二版):

[0, 0, 0, 0, 1, 0, 0]
[0, 0, 0, 0, 1, 0, 0]
[0, 0, 0, 0, 1, 0, 0]
[0, 0, 0, 0, 1, 0, 0]
[0, 0, 0, 0, 1, 0, 0]
[0, 0, 0, 0, 1, 0, 0]

Answer 1

问题是，当您在 indexingMonth 内重新分配 startedIdxing 时，它是一个局部变量，因此它不会在调用函数内更改 ( printMonthCalender2).

一个问题是 .map 不应该有突变或重新分配作为副作用。虽然您可以调整一些东西，以便 indexingMonth 返回您检查过的东西，然后将 startedIdxing 重新分配给，但我更喜欢不同的方法:创建一个平面阵列，例如

[0, 0, 0, 0, 1, 2, ..., 30, 31, 1, 2, 3]

然后将其分成 7 block :

const currentFullMonth = {
   days_length: 31,
   first_day: "Thu",
   first_day_index: 4,
   last_day: "Sat",
   last_day_index: 6,
   month: "Aug",
   year: 2019
}

const makeZeroArr = length => new Array(length).fill(0);
const printMonthCalendar = (testMonth) => {
  // Create array: [1, 2, 3, ..., 30, 31]
  const oneMonth = Array.from(
    { length: currentFullMonth.days_length },
    (_, i) => i + 1
  );
  // Create a flat array with leading zeros and trailing last week:
  // [0, 0, 0, 0, 1, 2, 3, ..., 30, 31, 1, 2, 3, 4, 5, 6, 7]
  const flatResultArr = [
    ...makeZeroArr(currentFullMonth.first_day_index),
    ...oneMonth,
    ...oneMonth // this includes extra numbers that will be trimmed
  ].slice(0, 7 * 6); // 7 days/week * 6 weeks
  // Chunk the flat array into slices of 7:
  const resultArr = [];
  for (let i = 0; i < 7; i++) {
    resultArr.push(flatResultArr.slice(i * 7, (i + 1) * 7));
  }
  return resultArr;
};

console.log(printMonthCalendar());