如何在JavaScript中遍历嵌套对象内的对象数组？

你调用getTotalYield({crops})时，函数接收的plants参数是一个包含crops数组的对象。要访问数组里的第一个对象并操作其属性，按以下方式处理：

核心操作逻辑 #

你可以通过链式访问或者分步取值两种方式操作目标属性：

方式1：链式直接访问

直接通过层级索引一步获取目标属性：

const getTotalYield = plants => {
    // 获取第一个作物的名称
    const firstCropName = plants.crops[0].crop.name;
    // 获取第一个作物的单产
    const firstCropYield = plants.crops[0].crop.yield;
    // 获取第一个作物的种植数量
    const firstCropCount = plants.crops[0].numCrops;
    // 计算该作物总产量
    const firstCropTotal = firstCropYield * firstCropCount;

    console.log("第一个作物：", firstCropName);
    console.log("该作物总产量：", firstCropTotal);
}

方式2：分步取值（更清晰）

拆分步骤获取对象，便于调试和维护：

const getTotalYield = plants => {
    // 取出crops数组
    const cropsList = plants.crops;
    // 获取数组第一个元素
    const firstCropEntry = cropsList[0];
    // 访问嵌套的作物对象和属性
    const targetCrop = firstCropEntry.crop;
    
    console.log("作物名称：", targetCrop.name);
    console.log("单产：", targetCrop.yield);
    console.log("种植数量：", firstCropEntry.numCrops);
}

关于控制台[Object]的说明 #

之前输出里的[Object]是控制台对嵌套对象的默认折叠显示，若要查看完整结构，可以用格式化打印：

console.log(JSON.stringify(plants, null, 2));

或者在浏览器/Node.js控制台中点击对象前的展开箭头，查看详细内容。

内容的提问来源于stack exchange，提问作者Arjan van der Laan