如何利用变量dayName动态解构API返回的嵌套数据对象？

这问题我之前对接类似API时也碰到过，ES6的解构语法其实支持动态属性名，刚好能完美解决你这个场景！

核心问题分析 #

你之前尝试的{ data : {dayName} }写法之所以不生效，是因为这里的dayName被当作了字面量键名（也就是要找data里名为"dayName"的字段），而不是你定义的变量dayName对应的字符串值。要实现动态解构，必须用方括号[]包裹变量来表示动态键。

两种实现方式 #

方式1：嵌套动态解构（一步到位）

可以在解构axios返回的响应时，直接嵌套动态解构逻辑，一步拿到目标数据：

const { data: { [dayName]: daySchedule } } = await axios.get(`${url}/schedule/${dayName}`);

这里的[dayName]告诉JS：我们要提取data对象中，键名等于变量dayName值的那个属性，然后把它赋值给daySchedule（你可以改成任意你喜欢的变量名）。

方式2：先取data再动态解构（更直观）

如果觉得嵌套解构有点绕，也可以分两步来，先拿到完整的data对象，再动态解构出目标属性：

const { data } = await axios.get(`${url}/schedule/${dayName}`);
const { [dayName]: daySchedule } = data;

或者更简单的属性访问（不需要解构）：

const { data } = await axios.get(`${url}/schedule/${dayName}`);
const daySchedule = data[dayName];

修改后的完整代码示例 #

结合你的函数，调整后的代码如下：

export const apiDataDay = async () => {
  try {
    const days = ["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"];
    const date = new Date();
    const dayName = days[date.getDay() - 1];
    
    console.log("Today's Day is", dayName);
    console.log("Today's DayNumber is", date.getDay() - 1);

    // 一步到位的动态解构，拿到对应星期的日程数据
    const { data: { [dayName]: daySchedule } } = await axios.get(`${url}/schedule/${dayName}`);
    
    console.log(daySchedule);
    return daySchedule; // 返回目标数据，而非整个data对象
  } catch (error) {
    console.error(error); // 用console.error输出错误更规范
  }
};

额外建议 #

• 可以给解构加默认值，避免API返回异常或字段不存在时出错：

  const { data: { [dayName]: daySchedule = {} } } = await axios.get(`${url}/schedule/${dayName}`);
  

• 如果需要兼容旧环境，属性访问的方式data[dayName]兼容性更好，但解构写法更符合现代JS风格。

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