JavaScript如何用HashMap存储JSON 提取shrtcode API的full_short_link值

现有代码问题 #

你当前的代码把接口响应用response.text()解析成了纯文本字符串，没办法直接读取JSON里的字段，首先要改成response.json()把响应转成JavaScript可操作的对象。

JS中哈希结构（HashMap）存储JSON数据的方法 #

JavaScript原生没有命名为HashMap的类型，日常开发用两种结构实现哈希键值对存储即可：

• 普通对象（Object）：适合键名是字符串/符号、固定结构的存储场景，写法简单
• ES6 新增的Map类型：标准哈希映射实现，支持任意类型作为键，频繁增删键值对时性能更优

提取并存储full_short_link字段的完整实现 #

// 初始化存储容器，二选一即可
// 选项1：普通对象作为存储
const shortLinkMap = {};
// 选项2：ES6 Map作为存储
// const shortLinkMap = new Map();

const requestOptions = {
  method: 'GET',
  redirect: 'follow'
};

fetch("https://api.shrtco.de/v2/shorten?url=www.google.com", requestOptions)
  .then(response => {
    if (!response.ok) throw new Error('网络请求失败');
    // 解析响应为JSON对象
    return response.json();
  })
  .then(resData => {
    // 校验接口业务状态
    if (!resData.ok) throw new Error('短链生成失败');

    // 提取目标字段
    const targetShortLink = resData.result.full_short_link;
    const originalLink = resData.result.original_link;

    // 存入哈希结构，对应初始化的容器二选一
    // 普通对象存值写法
    shortLinkMap[originalLink] = targetShortLink;
    // Map存值写法
    // shortLinkMap.set(originalLink, targetShortLink);

    // 打印字段值
    console.log('提取到的完整短链：', targetShortLink);
    // 打印全量存储内容
    console.log('存储的短链映射：', shortLinkMap);
  })
  .catch(err => console.log('异常：', err));

补充说明 #

• 如果需要页面刷新后数据不丢失，可以把存储的内容转成JSON字符串后存入localStorage，使用时再读取解析即可
• 从Map中读取存好的短链，调用shortLinkMap.get(原始链接地址)即可取值；普通对象直接用shortLinkMap[原始链接地址]取值

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