如何覆盖修改JSON对象的键值？实现点击按钮切换favorite字段布尔值功能

原代码核心问题 #

• 存储结构误用：localStorage中取出的allPlaces本身是数组，每个数组元素才是包含favourite字段的场所对象，原代码额外包了一层{allPlaces}对象，导致存储结构被破坏
• 字段访问路径错误：直接访问allPlaces["favourite"]是无效的，需要先通过索引placeIndex取出对应场所对象，再修改它的favourite属性
• 赋值逻辑错误：places.favourite[placeIndex]的访问路径完全不符合实际数据结构，会触发未定义报错

修复后的完整代码 #

function favourite(element) {
    // 从localStorage取出并解析场所数组
    const allPlaces = JSON.parse(localStorage.getItem("allPlaces"));
    // 获取当前点击场所的索引
    const placeIndex = element.getAttribute("data");
    // 取出当前要修改的场所对象
    const currentPlace = allPlaces[placeIndex];
    
    // 直接切换收藏布尔值，无需额外判断
    currentPlace.favourite = !currentPlace.favourite;

    // 根据最新状态更新图标样式
    const icon = element.querySelector('ion-icon');
    if (currentPlace.favourite) {
        element.style.color = '#FFE234';
        icon.setAttribute('name', 'star');
    } else {
        element.style.color = ''; // 取消收藏时恢复默认颜色，可按需调整
        icon.setAttribute('name', 'star-outline');
    }

    // 把修改后的原数组直接存回localStorage，不要额外包对象
    localStorage.setItem("allPlaces", JSON.stringify(allPlaces));
}

注意事项 #

• 确保按钮上的data属性存储的是对应场所在allPlaces数组里的正确索引，数值类型要和数组下标匹配
• 若需要兼容异常场景，可补充allPlaces存在性判断、currentPlace存在性判断，避免空值报错

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