JavaScript如何从数组嵌套对象中获取shape对应的属性值

针对给定的数组结构，要取出Key为shape对应的Value值circle，有两种常用实现方式：

方式1：字段匹配查找（推荐） #

不依赖数组固定顺序，容错性更高，取值逻辑如下：

var data = 
[
    {
        "Category": "Color",
        "Options": [
            {
                "Key": "color",
                "Value": "red"
            }
        ]
    },
    {
        "Category": "Shape",
        "Options": [
            {
                "Key": "shape",
                "Value": "circle"
            }
        ]
    }
];

var shape = data.find(categoryItem => categoryItem.Category === 'Shape')
  ?.Options.find(optionItem => optionItem.Key === 'shape')
  ?.Value;

逻辑说明：

• 第一步用find遍历外层数组，匹配Category值为Shape的分类对象
• 第二步在匹配到的分类对象下，遍历Options数组，匹配Key值为shape的选项对象
• 最后取该选项对象的Value属性，可选链?.可以避免中间某层不存在时抛出报错

方式2：固定索引直接取值 #

如果可以100%确定数组结构、顺序永远不会变动，可以直接按索引路径取值，写法最简洁：

var shape = data[1].Options[0].Value;

两种写法的差异：

• 字段匹配写法：适配性强，数组顺序调整、同分类下新增其他选项都不会影响取值结果，适合绝大多数业务场景
• 固定索引写法：代码量最少，执行效率最高，一旦数组顺序、嵌套层级变化就会取值失败甚至报错，仅适合临时调试、结构完全固定的场景

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