如何使用jQuery实现对象值的存储与读取？附代码问题排查

你的代码有4个核心错误，直接导致运行异常：

• 初始定义的heightMap是普通对象，不存在push方法，且后续调用时写的是$heightMap，和初始定义的变量名不一致，属于未声明的全局变量，会污染全局作用域。
• push存储数据的逻辑写在了.each()循环外部，循环过程中每次都会覆盖$setName、$setValue两个变量，最终只会拿到最后一个遍历元素的id和高度，无法存储所有div的数据。
• 循环内的变量没有用var/let/const声明，默认会挂载到全局对象上，多次循环反复修改同一个全局变量，就会出现值重复、值错乱的问题。
• 定义完setHeightMap函数后没有主动调用，直接打印初始定义的heightMap，自然只能拿到你写死的初始值{name:'x',value:'y'}。

如果要按{name: 元素id, value: 元素高度}的格式存储所有匹配元素的数据，用下面的代码：

// 初始化为数组，用于存储多条数据，移除无意义的初始x、y值
const heightMap = [];
function setHeightMap() {
  $(".hidden").each(function() {
    // 变量在循环内部声明，每次循环生成独立的作用域，不会互相覆盖
    const setName = $(this).attr('id');
    const setValue = $(this).height();
    // 存储逻辑放到循环内部，每遍历一个元素就存入对应数据
    heightMap.push({
      name: setName,
      value: setValue
    });
  });
}
// 先执行函数生成数据，再打印结果
setHeightMap();
console.log(heightMap);

如果后续需要通过元素id快速查询对应高度，不需要遍历数组，可以直接用对象键值对结构存储，使用更方便：

const heightMap = {};
function setHeightMap() {
  $(".hidden").each(function() {
    const currentId = $(this).attr('id');
    heightMap[currentId] = $(this).height();
  });
}
setHeightMap();
console.log(heightMap);
// 取高度示例：获取id为box1的div高度，直接调用 heightMap.box1 即可

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