如何将localStorage中的加密货币对象转换为目标数组？

首先咱们明确需求：你现在有一个存在localStorage里的键值对形式加密货币对象，需要把它转换回包含各个币种详情的数组，结构和最初存入前的数组一致。

原存储对象结构 #

{ 
  "ethereum": { 
    "balance":"2", 
    "value":1382.4, 
    "id":"ethereum", 
    "name":"Ethereum", 
    "symbol":"ETH", 
    "rank":"2", 
    "price_usd":"691.204", 
    "24h_volume_usd":"2420600000.0", 
    "percent_change_1h":"0.02", 
    "percent_change_24h":"0.51", 
    "percent_change_7d":"0.98", 
    "percentage":14.34 
  }, 
  "bitcoin": { 
    "balance":"1", 
    "value":8255.95, 
    "id":"bitcoin", 
    "name":"Bitcoin", 
    "symbol":"BTC", 
    "rank":"1", 
    "price_usd":"8255.96", 
    "24h_volume_usd":"6128880000.0", 
    "percent_change_1h":"0.02", 
    "percent_change_24h":"0.43", 
    "percent_change_7d":"-3.49", 
    "percentage":85.66 
  } 
}

目标数组结构 #

[ 
  { 
    24h_volume_usd: "6124340000.0", 
    balance: "1", 
    id: "bitcoin", 
    name: "Bitcoin", 
    percent_change_1h: "-0.1", 
    percent_change_7d: "-3.46", 
    percent_change_24h: "0.47", 
    percentage: 85.66, 
    price_usd: "8256.98", 
    rank: "1", 
    symbol: "BTC", 
    value: 8256.98 
  }, 
  { 
    24h_volume_usd: "2420170000.0", 
    balance: "2", 
    id: "ethereum", 
    name: "Ethereum", 
    percent_change_1h: "-0.07", 
    percent_change_7d: "0.95", 
    percent_change_24h: "0.49", 
    percentage: 14.34, 
    price_usd: "691.074", 
    rank: "2", 
    symbol: "ETH", 
    value: 1382.14 
  } 
]

实现方案 #

转换逻辑非常直观，核心是提取对象的所有值组成数组，再按需排序即可：

基础转换代码

// 从localStorage读取并解析存储的对象
const savedPortfolio = JSON.parse(window.localStorage.getItem('moonPortfolio'));

// 提取对象的所有值，直接转换为数组
const restoredPortfolio = Object.values(savedPortfolio);

// 可选：按rank排序，和目标数组保持一致的顺序
restoredPortfolio.sort((a, b) => parseInt(a.rank) - parseInt(b.rank));

console.log(restoredPortfolio);

代码细节解释

1. 读取解析数据：用JSON.parse把localStorage里的字符串转回JavaScript对象，对应存入时的JSON.stringify操作。
2. 转换为数组：Object.values()方法会直接返回对象所有属性值组成的数组，正好是我们需要的单个币种详情对象的集合。
3. 排序处理：如果需要和目标数组一样按币种排名排序，用sort方法把rank转为数字后比较，确保排名靠前的币种排在数组前面。

封装成可复用函数

如果要和你之前的calculatePercentage函数对应，可以封装成一个复用函数：

export const restorePortfolio = () => {
  const savedData = window.localStorage.getItem('moonPortfolio');
  // 没有存储数据时返回空数组，避免报错
  if (!savedData) return [];

  const portfolioObj = JSON.parse(savedData);
  // 转换为数组并按rank排序
  return Object.values(portfolioObj).sort((a, b) => parseInt(a.rank) - parseInt(b.rank));
};

调用restorePortfolio()就能直接得到你需要的目标数组结构啦。

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