JavaScript单for循环遍历多数组时循环次数不符合预期的问题咨询

兄弟，我一眼就瞅出问题所在了——你在for循环的条件里误用了逗号运算符，这可是个很容易踩的坑！

咱们先掰扯清楚逗号运算符的作用：它会依次执行逗号分隔的每个表达式，但只会返回最后一个表达式的结果。所以你写的循环条件k < z.length, i < x.length, j < y.length，实际上等价于只判断j < y.length这一个条件，这就是为啥循环只跑了y数组的长度（2次）；要是你把其他条件挪到最后，循环就会跟着那个最后条件的数组长度走，完全忽略前面的条件。

那该怎么改呢？分两种情况给你方案：

情况1：只要任意一个数组遍历完就停止循环 #

如果你想让循环在三个数组中最短的那个遍历完就终止，那得用**逻辑与（&&）**运算符来组合条件——只要有一个条件不满足，整个表达式就为false，循环立刻停下：

var x = [1, 2, 3, 4]; 
var z = ["1z", "2z", "3z", "4z", "5z", "6z"]; 
var y = ["1y", "2y"]; 

for (let i = 0, j = 0, k = 0; i < x.length && j < y.length && k < z.length; i++, j++, k++ ) { 
    console.log(x[i] != undefined ? x[i] : ""); 
    console.log(y[j] != undefined ? y[j] : ""); 
    console.log(z[k] != undefined ? z[k] : ""); 
}

这段代码会执行2次，正好是三个数组里最短的y数组的长度。

情况2：遍历到最长的数组结束，已遍历完的数组输出空字符串 #

要是你想把所有数组的元素都遍历完，直到最长的z数组（长度6）结束，同时对已经遍历完的数组输出空字符串，那用while循环会更灵活，而且要单独判断每个索引是否需要递增，避免越界：

var x = [1, 2, 3, 4]; 
var z = ["1z", "2z", "3z", "4z", "5z", "6z"]; 
var y = ["1y", "2y"]; 

let i = 0, j = 0, k = 0;
while (i < x.length || j < y.length || k < z.length) {
    // 用??运算符代替原来的三目运算，判断undefined/null更简洁
    console.log(x[i] ?? ""); 
    console.log(y[j] ?? "");
    console.log(z[k] ?? "");
    
    // 只有当索引还没到数组长度时才递增
    if (i < x.length) i++;
    if (j < y.length) j++;
    if (k < z.length) k++;
}

这里的??是ES2020的新特性，和你原来的x[i] != undefined ? x[i] : ""效果完全一致，但写法更清爽。

最后再给你划个重点：

• 逗号运算符不是用来组合条件判断的，别把它和逻辑运算符搞混了！
• 组合条件判断，用&&表示“所有条件都满足才继续”，用||表示“只要有一个条件满足就继续”
• 如果要遍历到最长数组的末尾，单独控制每个索引的递增会更安全，不会出现不必要的undefined

内容来源于stack exchange