如何用JavaScript从数组提取cll字段生成逗号分隔列表？

原始数据 #

[
    {
        "cmm": "erl",
        "pk": {
            "from": "",
            "to": "",
            "dt": "ZF"
        },
        "status": true,
        "mk": false,
        "rps": {
            "cll": "B90BD"
        }
    },
    {
        "cmm": "erl",
        "pk": {
            "from": "",
            "to": "",
            "dt": "7E"
        },
        "status": true,
        "mk": false,
        "rps": {
            "cll": "2E147FA3"
        }
    },
    {
        "cmm": "erl",
        "pk": {
            "from": "",
            "to": "",
            "dt": "7E"
        },
        "status": true,
        "mk": false,
        "rps": {
            "cll": "2E147FA3"
        }
    }
]

需求说明 #

提取所有对象中rps.cll字段的值，生成逗号分隔的字符串，示例结果：B90BD,2E147FA3,2E147FA3

现有代码问题分析 #

报错代码问题 #

function list(data) {
    const dtt = JSON.parse(data);
    console.log(dtt);
    const addrs = dtt.filter(function (item) {
        return item.rps;}).join(",");
    console.log(addrs);
    console.log(addrs);
}

filter返回的是包含原对象的数组，直接调用join会把对象转为[object Object]字符串，无法提取cll值，这是报错和结果不符合预期的原因。

仅获取第一个元素的代码问题 #

function createTable(data) {
    const dtt = JSON.parse(data);
    const mm = dtt[0].rps;
    var myAr = mm.ccl;
    console.log(myAr);
}

这段代码只访问了数组第一个元素（dtt[0]），且字段名写错（ccl应为cll），因此只能拿到单个值甚至返回undefined。

正确解决方案 #

使用map提取目标值，配合filter做安全校验，最后用join拼接成字符串：

function getCllList(data) {
    const dtt = JSON.parse(data);
    // 筛选出存在rps和cll的元素，提取cll值
    const cllValues = dtt
        .filter(item => item.rps && item.rps.cll)
        .map(item => item.rps.cll);
    // 拼接成逗号分隔的字符串
    const result = cllValues.join(",");
    console.log(result);
    return result;
}

代码说明 #

1. JSON.parse(data)：将传入的JSON字符串解析为JS数组。
2. filter(item => item.rps && item.rps.cll)：过滤掉没有rps或rps.cll的元素，避免访问不存在的属性报错。
3. map(item => item.rps.cll)：将每个有效元素转换为对应的cll值，得到纯值数组。
4. join(",")：将数组元素用逗号连接成目标字符串。

如果能确保所有元素都有rps.cll，可简化为：

function getCllList(data) {
    const dtt = JSON.parse(data);
    const result = dtt.map(item => item.rps.cll).join(",");
    console.log(result);
    return result;
}

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