JavaScript从数组集合生成值字符串出现undefined问题求解

问题根因 #

dlArray的索引计算逻辑错误，出现负数索引导致数组取值越界。

具体分析 #

循环变量i的取值范围是[numberOfInputs, numberOfInputs + dlArray.length)：

• 取elArray时用的索引i - numberOfInputs的取值范围是[0, dlArray.length - 1]，属于数组的合法正索引，所以键的取值完全正常。
• 取dlArray时用的索引numberOfInputs - i，第一次循环i = numberOfInputs时得到索引0，取值正常；从第二次循环开始，i大于numberOfInputs，计算得到的索引为-1、-2、-3……，普通JS数组的负数索引不会对应正常存储的元素，所以返回undefined。

修复方案 #

将dlArray的索引修改为和elArray一致的i - numberOfInputs即可，修正后的代码如下：

for (let i = numberOfInputs; i < dlArray.length+numberOfInputs; i++) {
    answer += elArray[i-numberOfInputs];
    console.log(answer)
    answer += ':';
    answer += dlArray[i-numberOfInputs];
    console.log(answer)
    answer  += ' '
}

如果业务逻辑需要倒序取dlArray的值，则索引改为dlArray.length - 1 - (i - numberOfInputs)即可。

内容的提问来源于stack exchange，提问作者Evan Gertis