使用jQuery从数组中获取唯一数据的实现方法

这问题我之前处理类似批量数据时也碰到过，核心就是要过滤掉重复的建筑名称——要么提前处理数据提取唯一值，要么在遍历过程中跳过已经输出过的条目。给你几种简单好用的实现方式：

方法一：先提取唯一名称再输出 #

利用JavaScript的Set（它会自动帮我们去重）先把所有不重复的建筑名称提取出来，再遍历输出，代码清晰直观：

var data = { "data": [{ "id": 1, "building": "Big Building" }, { "id": 2, "building": "Big Building" }, { "id": 3, "building": "Small Building" }, { "id": 4, "building": "Small Building" }] };

// 提取所有building字段，通过Set去重后转成数组
const uniqueBuildings = [...new Set(data.data.map(item => item.building))];

// 遍历输出唯一的建筑名称
uniqueBuildings.forEach(building => {
    console.log(building);
});

方法二：遍历过程中跳过重复条目 #

如果不想提前处理整个数据数组，可以在遍历的时候用一个集合记录已经输出过的建筑名称，遇到重复的就直接跳过：

var data = { "data": [{ "id": 1, "building": "Big Building" }, { "id": 2, "building": "Big Building" }, { "id": 3, "building": "Small Building" }, { "id": 4, "building": "Small Building" }] };

// 用Set存储已经输出过的建筑名称
const seenBuildings = new Set();

jQuery.each(data.data, function(index, item) {
    const building = item.building;
    // 如果该建筑名还没输出过，就打印并加入Set
    if (!seenBuildings.has(building)) {
        console.log(building);
        seenBuildings.add(building);
    }
});

兼容旧环境的替代方案（不用Set） #

如果需要兼容不支持Set的旧浏览器，可以用普通对象来记录已输出的名称：

var data = { "data": [{ "id": 1, "building": "Big Building" }, { "id": 2, "building": "Big Building" }, { "id": 3, "building": "Small Building" }, { "id": 4, "building": "Small Building" }] };

const seenBuildings = {};

jQuery.each(data.data, function(index, item) {
    const building = item.building;
    if (!seenBuildings[building]) {
        console.log(building);
        seenBuildings[building] = true;
    }
});

这几种方法都能帮你得到期望的输出：

Big Building
Small Building

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