使用jQuery从JSON数组向Select插入Option时对key/value的困惑

我完全懂你对$.each里key参数的困惑——刚接触这类遍历函数时，确实容易被参数名搞混，咱们一步步拆解清楚：

1. $.each里的key和value到底指代什么？ #

$.each是jQuery用来遍历数组或键值对对象的工具函数，它的两个参数key和value的含义，完全取决于你遍历的数据源类型：

• 如果data.visibilities是数组（比如["公开", "私有", "内部"]）：
  • key就是数组的索引值（从0开始的数字：0、1、2）
  • value就是数组对应索引的元素内容（"公开"、"私有"、"内部"）
• 如果data.visibilities是键值对对象（比如{"public": "公开", "private": "私有", "internal": "内部"}）：
  • key就是对象的属性名（"public"、"private"、"internal"）
  • value就是对象属性对应的属性值（"公开"、"私有"、"内部"）

2. 你的代码为什么能正常运行？ #

你写的这段代码：

$.each(data.visibilities, function(key, value) { 
  $('#dataVisibilitySelect') 
    .append($("<option></option>") 
    .attr("value",key) 
    .text(value)); 
});

能成功加载3个选项，说明data.visibilities要么是长度为3的数组，要么是包含3个键值对的对象。你把key设为option的value属性、value设为option显示文本的逻辑是通顺的，但这里有个小细节要注意：

• 如果是数组场景，option的value会是0、1、2这类数字索引，提交表单时后台拿到的是数字；
• 如果是对象场景，option的value会是"public"这类语义化字符串，后台拿到的是更易读的业务标识，通常这种场景更推荐，因为数字索引的含义远不如字符串清晰。

3. 要不要调整key的使用方式？ #

如果你希望option的value是更有业务意义的值（比如权限编码），那得先确认data.visibilities的结构：
比如如果数组里的元素是对象（[{code:"public", name:"公开"}, {code:"private", name:"私有"}]），那你应该把参数换成更清晰的命名，同时取对象里的业务字段：

$.each(data.visibilities, function(index, item) { 
  $('#dataVisibilitySelect') 
    .append($("<option></option>") 
    .attr("value", item.code) 
    .text(item.name)); 
});

这里把参数名改成index和item，避免和对象的key/value混淆，代码可读性会好很多。

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