JavaScript二维数组去重的多种实现方式和示例代码

JavaScript二维数组去重的多种实现方式和示例代码 第一张

JavaScript中的二维数组指的是数组的数组,也就是数组中的每个元素都是一个数组,有时我们需要去除二维数组中重复的元素,以获得一个新的数组。下面介绍几种实现去重的方法:

1. 使用Set对象

Set对象是ES6提供的新数据结构,它类似于数组,但是里面的元素都是唯一的,可以很方便的用来去重。

var arr = [
    [1, 2, 3],
    [4, 5, 6],
    [1, 2, 3],
    [7, 8, 9]
];

var result = Array.from(new Set(arr.map(JSON.stringify))).map(JSON.parse);
console.log(result);
// [[1, 2, 3], [4, 5, 6], [7, 8, 9]]

上面代码中,我们将二维数组的每个元素转换成字符串,再放入Set对象,就可以过滤掉重复的元素,再将Set对象转换回数组,就得到了去重后的新数组。

2. 使用indexOf方法

indexOf方法是Array对象提供的方法,它可以搜索某个元素在数组中的位置,如果搜索不到,就返回-1。我们可以利用这个特性来实现去重。

var arr = [
    [1, 2, 3],
    [4, 5, 6],
    [1, 2, 3],
    [7, 8, 9]
];

var result = [];
for (var i = 0; i < arr.length; i++) {
    if (result.indexOf(arr[i]) === -1) {
        result.push(arr[i]);
    }
}
console.log(result);
// [[1, 2, 3], [4, 5, 6], [7, 8, 9]]

上面代码中,我们使用for循环遍历原数组,每次循环都检查当前元素在新数组中是否存在,如果不存在,就将其放入新数组,就可以得到去重后的新数组。

3. 使用includes方法

includes方法也是Array对象提供的方法,它可以搜索某个元素是否存在于数组中,如果存在就返回true,如果不存在就返回false。我们也可以利用这个特性来实现去重。

var arr = [
    [1, 2, 3],
    [4, 5, 6],
    [1, 2, 3],
    [7, 8, 9]
];

var result = [];
for (var i = 0; i < arr.length; i++) {
    if (!result.includes(arr[i])) {
        result.push(arr[i]);
    }
}
console.log(result);
// [[1, 2, 3], [4, 5, 6], [7, 8, 9]]

上面代码中,我们也是使用for循环遍历原数组,每次循环都检查当前元素在新数组中是否存在,如果不存在,就将其放入新数组,就可以得到去重后的新数组。

4. 使用for…of循环和includes方法

for…of循环是ES6提供的新的循环方式,它可以遍历数组,我们也可以利用它和includes方法来实现去重。

var arr = [
    [1, 2, 3],
    [4, 5, 6],
    [1, 2, 3],
    [7, 8, 9]
];

var result = [];
for (var item of arr) {
    if (!result.includes(item)) {
        result.push(item);
    }
}
console.log(result);
// [[1, 2, 3], [4, 5, 6], [7, 8, 9]]

上面代码中,我们使用for…of循环遍历原数组,每次循环都检查当前元素在新数组中是否存在,如果不存在,就将其放入新数组,就可以得到去重后的新数组。

5. 使用filter方法和indexOf方法

filter方法也是Array对象提供的方法,它可以对数组中的每个元素进行过滤,我们可以利用它和indexOf方法来实现去重。

var arr = [
[1, 2, 3],
[4, 5, 6],
[1, 2, 3],
[7, 8, 9]
];

var result = arr.filter(function(

© 版权声明
THE END
分享