ES7 中数组去重的新方法 Set 与 Array.from 结合应用
在前端开发中,经常需要对数组进行去重处理。ES6 中提供了一种新的数据结构 Set,可以很方便地实现数组去重。而在 ES7 中,Set 和 Array.from 结合使用可以实现更高效的数组去重。
为了更好地理解 Set 和 Array.from 的应用,我们首先了解一下这两个常用的方法。
Set
Set 是 ES6 中新增的一种数据结构,它类似于数组,但是成员的值都是唯一的,不重复。它的实例有以下属性和方法:
- 属性:size(返回成员总数)
- 方法:add、delete、has(用于操作成员)
要创建一个 Set,只需在创建时传入一个数组即可:
----- --- - --- --------------------- ----------------- -- --- --- -- -- -- --
可以看到,Set 自动过滤了重复的成员。
Array.from
Array.from 是 ES6 中新增的一种方法,它用于将类似数组的对象和可迭代对象转换成真正的数组。它的语法为:
---------------------- ------- ----------
其中,arrayLike 表示要转换的类似数组的对象或可迭代对象。mapFn 是对每个成员进行处理的函数,thisArg 是 mapFn 函数中 this 的指向。
示例:
----- --- - -------- ----- --- - ---------------- ----------------- ------- ---- ---- ---- ----
上述代码中,将字符串转换成了数组。
Array.from 结合 Set 实现数组去重
有了上述知识储备,我们就可以将 Set 和 Array.from 结合使用,快速地实现数组去重了。
----- --- - ---------------- ----- --------- - -------------- ---------- ----------------------- -- --- -- -- -- --
上述代码中,先用 Set 去重,再将 Set 转换成真正的数组。
另外,可以通过定义模板函数 Array.from 操作 Set,这样就省去了创建 Set 的过程:
----- --------- - -------------- --------- ---- -- ---- - --- ----------------------- -- --- -- -- -- ---
上述代码中,通过定义 mapFn 函数将每个成员变成原来的两倍。
总结
Set 和 Array.from 是 ES6 中新增的两种方法。结合使用可以非常方便地实现数组去重,并且相比传统的去重方法,代码简洁易读,性能也更好。如果你还没有尝试过这种方法,那么不妨在实际开发中尝试一下,或许你会有意想不到的收获。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6493ad9548841e989414a90d