如何使用ES6解构含数组的嵌套对象以获取d的值？

嘿，这问题我太熟了！要从这个嵌套得有点深的对象里揪出d的值，用ES6解构完全可以一步到位，也可以拆成几步来，咱们两种都说说：

一步到位直接解构 #

如果想一次性完成解构，直接按照对象的嵌套层级来写就行，代码是这样的：

// 先假设你的完整对象是这样的
const obj = { result: { "a": [{ "b": { "c": 1, "d": 2, "e": 3 }, "f": 0 }] } };

// 一层一层解构出d
const { result: { a: [{ b: { d } }] } } = obj;

console.log(d); // 输出 2

说白了就是顺着层级拆：

• 先拿到外层的result属性
• 再从result里取出数组a
• 用[{ ... }]匹配数组的第一个元素（因为a里只有一个元素）
• 接着从这个数组元素里拿到b对象，最后直接取出b里的d

分步解构（可读性更强） #

要是觉得一步到位的代码看着有点绕，也可以拆成几步来，每一步都清晰明了：

const obj = { result: { "a": [{ "b": { "c": 1, "d": 2, "e": 3 }, "f": 0 }] } };

// 第一步：先取出result里的a数组
const { result: { a } } = obj;
// 第二步：从a数组的第一个元素里解构出b对象的d
const { b: { d } } = a[0];

console.log(d); // 同样输出 2

加个保险：处理空数组/缺失属性的情况 #

如果怕a是空数组，或者数组里的元素没有b属性导致报错，可以给解构加默认值，这样就不会抛出错误了：

const obj = { result: { "a": [{ "b": { "c": 1, "d": 2, "e": 3 }, "f": 0 }] } };

const { result: { a: [{ b: { d } = {} } = {}] = [] } } = obj;
console.log(d); // 正常输出2；如果a为空，d会是undefined

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