JavaScript中为input类型字段添加循环式nextFieldFocus属性问题

环境 #

项目已安装lodash，使用JavaScript开发。

输入 #

给定如下fields对象：

const fields = {
  accountBalance: {
    id: 1,
    field: 'input',
  },
  totalTrades: {
    id: 2,
    field: 'input',
  },
  winRate: {
    id: 3,
    field: 'slider'
  },
  reward: {
    id: 4,
    field: 'input',
  },
  risk: {
    id: 5,
    field: 'slider',
  }
}

需求 #

为每个field属性为input的子对象添加nextFieldFocus属性，其值为对象键列表中后续第一个field为input的键；若后续无符合条件的键，则从列表开头查找第一个符合条件的键。

正确实现代码 #

原生JavaScript版本 #

const fields = {
  accountBalance: { id: 1, field: 'input' },
  totalTrades: { id: 2, field: 'input' },
  winRate: { id: 3, field: 'slider' },
  reward: { id: 4, field: 'input' },
  risk: { id: 5, field: 'slider' },
};

// 提取所有field为input的键，保持原顺序
const inputKeys = Object.keys(fields).filter(key => fields[key].field === 'input');

// 遍历每个input字段，设置nextFieldFocus
inputKeys.forEach((key, index) => {
  // 计算下一个索引，循环取模实现首尾衔接
  const nextIndex = (index + 1) % inputKeys.length;
  fields[key].nextFieldFocus = inputKeys[nextIndex];
});

console.log(fields);

Lodash版本（利用lodash工具简化逻辑） #

const _ = require('lodash');

const fields = {
  accountBalance: { id: 1, field: 'input' },
  totalTrades: { id: 2, field: 'input' },
  winRate: { id: 3, field: 'slider' },
  reward: { id: 4, field: 'input' },
  risk: { id: 5, field: 'slider' },
};

// 筛选出input类型的键，保持原顺序
const inputKeys = _.filter(Object.keys(fields), key => _.get(fields, `${key}.field`) === 'input');

// 循环设置nextFieldFocus
_.forEach(inputKeys, (key, index) => {
  const nextIndex = (index + 1) % inputKeys.length;
  _.set(fields, `${key}.nextFieldFocus`, inputKeys[nextIndex]);
});

console.log(fields);

原代码问题分析 #

1. 循环变量被非法修改：在while循环中使用++i修改了外层for循环的变量i，导致后续的键遍历逻辑混乱，无法正确处理所有字段。
2. 查找逻辑错误：当i+1超出数组长度时，nextKey为undefined，此时进入循环后++i会让i越界，取模操作也无法正确回到数组开头查找符合条件的键。

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