如何优化sportSelection结构并实现按activity获取对应icon？

首先修正代码语法错误 #

你当前的代码存在语法问题：sportSelection被定义为对象（{}），但对象内部无法直接放置多个未命名的子对象，正确写法应该是数组（用[]包裹）：

var sportSelection = [
  {
    'activity': 'Walking',
    'icon': 'assets/images/walker.png',
  },
  {
    'activity': 'Running',
    'icon': 'assets/images/runner.png',
  },
  {
    'activity': 'Weight',
    'icon': 'assets/images/weight.png',
  }
];

为什么sportSelection['activity']会失败 #

这是因为sportSelection是数组，不是单个对象。数组中的每个元素才是包含activity字段的对象，所以直接通过数组访问activity字段是无效的。

无需循环的最优方案：改用键值映射结构 #

要实现「输入activity直接返回对应icon」的需求，最高效的方式是把数据结构改成以activity名称为键的对象，查找和添加操作的时间复杂度都是O(1)，完全不需要循环：

修改后的结构 #

var sportSelection = {
  'Walking': 'assets/images/walker.png',
  'Running': 'assets/images/runner.png',
  'Weight': 'assets/images/weight.png'
};

读取icon #

直接通过键名访问即可：

// 两种写法都支持
var walkingIcon = sportSelection['Walking'];
var runningIcon = sportSelection.Running;

添加新项 #

直接给对象赋值新的键值对：

// 添加游泳项示例
sportSelection['Swimming'] = 'assets/images/swimmer.png';

若需保留原对象结构（支持更多字段） #

如果以后需要给每个运动项添加更多字段（比如描述、类型），可以先保留数组，再通过reduce方法生成映射对象：

// 原始数组结构（可扩展更多字段）
var sportSelectionArr = [
  { activity: 'Walking', icon: 'assets/images/walker.png', desc: '日常步行' },
  { activity: 'Running', icon: 'assets/images/runner.png', desc: '快跑训练' },
  { activity: 'Weight', icon: 'assets/images/weight.png', desc: '力量训练' }
];

// 生成activity到icon的映射
var sportIconMap = sportSelectionArr.reduce((map, item) => {
  map[item.activity] = item.icon;
  return map;
}, {});

// 使用：直接获取对应icon
var weightIcon = sportIconMap['Weight'];

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