如何在jQuery中获取多数组中的唯一值？

问题描述 #

这是我的数组对应的截图：

我希望从中提取shape对应的唯一值，得到类似 ['round', 'marquees', 'princess', 'oval'] 的结果。

当前使用的代码如下：

var array = [];

$.each(storeKeyValue, function (index, diamond) {
    if (index == "shape") {
        // console.log(diamond)
        array.push(diamond);
        $(".shapes").append('<option value="' + diamond + '">' + diamond + "</option>");
    } else if (index == "color") {
        // console.log(diamond)
        $(".colors").append('<option value="' + diamond + '">' + diamond + "</option>");
    } else if (index == "quality") {
        // console.log(diamond)
        $(".quality").append('<option value="' + diamond + '">' + diamond + "</option>");
    }
});

console.log(array);

$(document).ready(function () {
    $(document).on("change", ".shapes", function (e) {
        var shape = $(this).val();
        if (storeKeyValue.shape === shape) {
            $.each(storeKeyValue, function (index, size) {
                if (index == "size") {
                    $(this).siblings(".size_diamond").empty();
                    $(".size").append('<option value="' + size + '">' + size + "</option>");
                }
            });
        }
    });
});

解决方案 #

方法1：用ES6 Set自动去重 #

利用Set数据结构自动去重的特性，收集shape值后转成数组即可：

var uniqueShapes = new Set();

$.each(storeKeyValue, function (index, diamond) {
    if (index == "shape") {
        uniqueShapes.add(diamond);
        $(".shapes").append('<option value="' + diamond + '">' + diamond + "</option>");
    } else if (index == "color") {
        $(".colors").append('<option value="' + diamond + '">' + diamond + "</option>");
    } else if (index == "quality") {
        $(".quality").append('<option value="' + diamond + '">' + diamond + "</option>");
    }
});

// 将Set转为数组
var array = Array.from(uniqueShapes);
console.log(array);

方法2：手动判断去重（兼容旧环境） #

如果需要兼容ES6之前的运行环境，可以在添加元素前检查是否已存在：

var array = [];

$.each(storeKeyValue, function (index, diamond) {
    if (index == "shape") {
        // 检查值是否已在数组中，不存在再添加
        if (!array.includes(diamond)) {
            array.push(diamond);
            $(".shapes").append('<option value="' + diamond + '">' + diamond + "</option>");
        }
    } else if (index == "color") {
        $(".colors").append('<option value="' + diamond + '">' + diamond + "</option>");
    } else if (index == "quality") {
        $(".quality").append('<option value="' + diamond + '">' + diamond + "</option>");
    }
});

console.log(array);

额外优化说明 #

两种方法都能避免重复生成相同的<option>标签，减少DOM操作，提升页面性能。

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