ES6中按条件向数组push数据异常：最后一行结果不符合预期

看起来你遇到的问题是最后一条数据的isVisible没有正确设为false，咱们来一步步排查和解决：

问题根源分析 #

先看你给出的代码：

let i = 0; 
bankData.push({ 
  "flxLine": i < data.length - 1 ? {isVisible:true} : {isVisible:false}, 
});

这里你只执行了一次push操作，而且i的值固定为0。只有当data.length等于1的时候，i < data.length -1才会是0 < 0（结果为false），此时flxLine才会是{isVisible:false}。如果data.length大于1，那这唯一一次push的结果必然是isVisible:true，自然不符合你“最后一行设为false”的预期。

正确的实现方式 #

你应该是想遍历data数组，给每一项对应生成bankData的元素，对吧？这里提供两种符合ES6风格的实现方式：

方法1：for循环（直观易读） #

const bankData = [];
for (let i = 0; i < data.length; i++) {
  bankData.push({
    flxLine: { isVisible: i < data.length - 1 }
    // 这里可以简化判断逻辑，因为i < data.length-1本身就是布尔值
  });
}

循环遍历data的每一个索引，每一次循环都根据当前索引是否是最后一项来设置isVisible的值。

方法2：数组map方法（更简洁的ES6写法） #

如果bankData是完全基于data的每一项生成的，用map方法会更优雅：

const bankData = data.map((_, index) => ({
  flxLine: { isVisible: index < data.length - 1 }
}));

map方法会自动遍历data的每个元素，第二个参数index就是当前元素的索引，直接用这个索引判断是否为最后一项即可。

补充说明 #

你的代码不生效的核心原因：

• 仅执行了一次push，没有遍历整个data数组
• i的值固定为0，没有随着遍历递增，所以永远只会判断第一个索引的条件

调整后，bankData的最后一项的flxLine.isVisible就会正确设为false了。

内容的提问来源于stack exchange，提问作者mr ukta