ES7 中数组去重的新方法 Set 与 Array.from 结合应用

ES7 中数组去重的新方法 Set 与 Array.from 结合应用

在前端开发中，经常需要对数组进行去重处理。ES6 中提供了一种新的数据结构 Set，可以很方便地实现数组去重。而在 ES7 中，Set 和 Array.from 结合使用可以实现更高效的数组去重。

为了更好地理解 Set 和 Array.from 的应用，我们首先了解一下这两个常用的方法。

Set

Set 是 ES6 中新增的一种数据结构，它类似于数组，但是成员的值都是唯一的，不重复。它的实例有以下属性和方法：

• 属性：size（返回成员总数）
• 方法：add、delete、has（用于操作成员）

要创建一个 Set，只需在创建时传入一个数组即可：

const set = new Set([1,2,3,3,4,5,5]);
console.log(set); // Set {1, 2, 3, 4, 5}

可以看到，Set 自动过滤了重复的成员。

Array.from

Array.from 是 ES6 中新增的一种方法，它用于将类似数组的对象和可迭代对象转换成真正的数组。它的语法为：

Array.from(arrayLike[, mapFn[, thisArg]])

其中，arrayLike 表示要转换的类似数组的对象或可迭代对象。mapFn 是对每个成员进行处理的函数，thisArg 是 mapFn 函数中 this 的指向。

示例：

const str = 'hello';
const arr = Array.from(str);
console.log(arr); //['h', 'e', 'l', 'l', 'o']

上述代码中，将字符串转换成了数组。

Array.from 结合 Set 实现数组去重

有了上述知识储备，我们就可以将 Set 和 Array.from 结合使用，快速地实现数组去重了。

const arr = [1,2,3,3,4,5,5];
const uniqueArr = Array.from(new Set(arr));
console.log(uniqueArr); // [1, 2, 3, 4, 5]

上述代码中，先用 Set 去重，再将 Set 转换成真正的数组。

另外，可以通过定义模板函数 Array.from 操作 Set，这样就省去了创建 Set 的过程：

const uniqueArr = Array.from(new Set(arr), item => item * 2);
console.log(uniqueArr); // [2, 4, 6, 8, 10]

上述代码中，通过定义 mapFn 函数将每个成员变成原来的两倍。

总结

Set 和 Array.from 是 ES6 中新增的两种方法。结合使用可以非常方便地实现数组去重，并且相比传统的去重方法，代码简洁易读，性能也更好。如果你还没有尝试过这种方法，那么不妨在实际开发中尝试一下，或许你会有意想不到的收获。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6493ad9548841e989414a90d