JavaScript 解构理解的问题

Question

我希望从下面的 JavaScript 我会得到 [1,2,3,4] 但我得到 undefined.

const {
  speakers: {
    datalist: { xxx },
  },
} = {
  speakers: {
    datalist: [1, 2, 3, 4],
  },
};
console.log(xxx);

Answer 1

当你这样做时

datalist: { xxx },

你告诉 JS 将 datalist 的 xxx 属性放入一个名为 xxx 的独立变量中。但是 [1, 2, 3, 4] 数组中不存在 xxx 属性。

如果代码像这样就可以了：

const {
  speakers: {
    datalist: { xxx },
  },
} = {
  speakers: {
    datalist: {
      xxx: [1, 2, 3, 4],
    }
  },
};
console.log(xxx);

或：

const {
  speakers: {
    datalist
  },
} = {
  speakers: {
    datalist: [1, 2, 3, 4],
  },
};
console.log(datalist);

但是这种嵌套的解构非常难读。考虑避免它，以免出现这些问题：

const obj ={
  speakers: {
    datalist: [1, 2, 3, 4],
  },
};
const { datalist } = obj.speakers;
console.log(datalist);

Problem with JavaScript destructuring understanding