JS技巧---Set数组去重

2023-11-02

在 ES6 中,引入了一个新的数据结构类型:Set。而 Set 与 Array 的结构是很类似的,且 Set 和 Array 可以相互进行转换。

数组去重,也算是一个比较常见的前端面试题了,方法有很多种,这里不多赘述。下面我们看看用 Set 和 …(拓展运算符)可以很简单的进行数组去重。

const removeDuplicateItems = arr => [...new Set(arr)];
removeDuplicateItems([42, 'foo', 42, 'foo', true, true]);
//=> [42, "foo", true]


附:

Set

Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用。

new Set([iterable]);

iterable
如果传递一个可迭代对象,它的所有元素将被添加到新的 Set中。如果不指定此参数或其值为null,则新的 Set为空。

一个新的Set对象。

Set对象是值的集合,你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次,即 Set 中的元素是唯一的。

因为 Set 中的值总是唯一的,所以需要判断两个值是否相等。在ECMAScript规范的早期版本中,这不是基于和===操作符中使用的算法相同的算法。具体来说,对于 Set s, +0 (+0 严格相等于-0)和-0是不同的值。然而,在 ECMAScript 2015规范中这点已被更改。有关详细信息,请参阅浏览器兼容性 表中的“value equality for -0 and 0”。

另外,NaN和undefined都可以被存储在Set 中, NaN之间被视为相同的值(尽管 NaN !== NaN)。

  • Set.length
    length属性的值为0。
  • get Set[@@species]
    构造函数用来创建派生对象.
  • Set.prototype
    表示Set构造器的原型,允许向所有Set对象添加新的属性。
  • Link to sectionSet实例
    所有Set实例继承自 Set.prototype。
  • Set.prototype.constructor
    返回实例的构造函数。默认情况下是Set。

  • Set.prototype.size
    返回Set对象的值的个数。

  • Link to section方法

  • Set.prototype.add(value)

  • Set.prototype.clear()
    移除Set对象内的所有元素。

  • Set.prototype.delete(value)

  • Set.prototype.entries()
    返回一个新的迭代器对象,该对象包含Set对象中的按插入顺序排列的所有元素的值的[value, value]数组。为了使这个方法和Map对象保持相似, 每个值的键和值相等。

  • Set.prototype.forEach(callbackFn[, thisArg])

  • Set.prototype.has(value)
    返回一个布尔值,表示该值在Set中存在与否。

  • Set.prototype.keys()

  • Set.prototype.values()
    返回一个新的迭代器对象,该对象包含Set对象中的按插入顺序排列的所有元素的值。

  • Set.prototype@@iterator
    返回一个新的迭代器对象,该对象包含Set对象中的按插入顺序排列的所有元素的值。

let mySet = new Set();

mySet.add(1); // Set(1) {1}
mySet.add(5); // Set(2) {1, 5}
mySet.add(5); // Set { 1, 5 }
mySet.add("some text"); // Set(3) {1, 5, "some text"}
var o = {a: 1, b: 2};
mySet.add(o);

mySet.add({a: 1, b: 2}); // o 指向的是不同的对象,所以没问题

mySet.has(1); // true
mySet.has(3); // false
mySet.has(5);              // true
mySet.has(Math.sqrt(25));  // true
mySet.has("Some Text".toLowerCase()); // true
mySet.has(o); // true

mySet.size; // 5

mySet.delete(5);  // true,  从set中移除5
mySet.has(5);     // false, 5已经被移除

mySet.size; // 4, 刚刚移除一个值
console.log(mySet); // Set {1, "some text", Object {a: 1, b: 2}, Object {a: 1, b: 2}}
// 迭代整个set
// 按顺序输出:1, "some text" 
for (let item of mySet) console.log(item);

// 按顺序输出:1, "some text" 
for (let item of mySet.keys()) console.log(item);

// 按顺序输出:1, "some text" 
for (let item of mySet.values()) console.log(item);

// 按顺序输出:1, "some text" 
//(键与值相等)
for (let [key, value] of mySet.entries()) console.log(key);

// 转换Set为Array (with Array comprehensions)
var myArr = [v for (v of mySet)]; // [1, "some text"]
// 替代方案(with Array.from)
var myArr = Array.from(mySet); // [1, "some text"]

// 如果在HTML文档中工作,也可以:
mySet.add(document.body);
mySet.has(document.querySelector("body")); // true

// Set 和 Array互换
mySet2 = new Set([1,2,3,4]);
mySet2.size; // 4
[...mySet2]; // [1,2,3,4]

// intersect can be simulated via 
var intersection = new Set([...set1].filter(x => set2.has(x)));

// difference can be simulated via
var difference = new Set([...set1].filter(x => !set2.has(x)));

// 用forEach迭代
mySet.forEach(function(value) {
  console.log(value);
});

// 1
// 2
// 3
// 4
function isSuperset(set, subset) {
    for (var elem of subset) {
        if (!set.has(elem)) {
            return false;
        }
    }
    return true;
}

function union(setA, setB) {
    var _union = new Set(setA);
    for (var elem of setB) {
        _union.add(elem);
    }
    return _union;
}

function intersection(setA, setB) {
    var _intersection = new Set();
    for (var elem of setB) {
        if (setA.has(elem)) {
            _intersection.add(elem);
        }
    }
    return _intersection;
}

function difference(setA, setB) {
    var _difference = new Set(setA);
    for (var elem of setB) {
        _difference.delete(elem);
    }
    return _difference;
}

//Examples
var setA = new Set([1, 2, 3, 4]),
    setB = new Set([2, 3]),
    setC = new Set([3, 4, 5, 6]);

isSuperset(setA, setB); // => true
union(setA, setC); // => Set [1, 2, 3, 4, 5, 6]
intersection(setA, setC); // => Set [3, 4]
difference(setA, setC); // => Set [1, 2]
Link to section Array 相关
var myArray = ["value1", "value2", "value3"];

// 用Set构造器将Array转换为Set
var mySet = new Set(myArray);

mySet.has("value1"); // returns true

// 用...(展开操作符)操作符将Set转换为Array
console.log([...mySet]); // 与myArray完全一致
var text = 'Indiana';

var mySet = new Set(text);  // Set {'I', 'n', 'd', 'i', 'a'}
mySet.size;  // 5

规范 状态 备注
ECMAScript 2015 (6th Edition, ECMA-262)
Set Standard 初始定义
ECMAScript Latest Draft (ECMA-262)
Set Draft
Link to section浏览器兼容
新的兼容性表格正在测试中

                                                                                        笔记用(侵删)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JS技巧---Set数组去重 的相关文章

  • a标签设置下载设置文件名,并且设置无效的解决方法

    设置 a 标签的 download属性 可以重置 文件名 如下代码 文件名重置为 file xlsx a href http 192 168 1 1 abcd xlsx 下载 a 这种写法有个前提 href 的下载地址 和 当前网站地址 必
  • 如何正确理解JavaScript中的函数和方法

    你真的了解JavaScript的函数和方法吗 你知道它们有什么区别吗 你知道它们是如何定义和调用的吗 你知道它们是如何影响this值的吗 如果你对这些问题感到迷茫 那么本文就是为你准备的 本文将从基础开始 详细解释函数和方法的概念 特点 用
  • html中使用js实现体彩11选5随机选号

    体彩11选5随机选号 页面预览 代码实现
  • Html如何引用公用的JS和CSS

    1 问题原因 项目开发几乎每个Html都会引用JS和CSS 那么就会有一些常用JS或者CSS 我们不希望每个Html文件都引用一堆文件 而是只引用公用的JS和CSS就可以了 2 解决办法 2 1定义commonJs js添加公用的JS文件引
  • JS中的发布-订阅

    发布订阅模式 什么是发布 订阅模式 发布 订阅模式的实现 发布 订阅实现思路 总结 优点 缺点 Vue 中的实现 观察者模式和发布订阅的区别 观察者模式 发布订阅模式 什么是发布 订阅模式 发布 订阅模式其实是一种对象间一对多的依赖关系 当
  • Python 使用execjs调用网页js 进行数据加密

    最近做一个数据采集项目的时候需要自动采集网站的招投标数据 随便打开一个网站 打开开发者模式 输入关键词 点击搜索 获得以下内容 可以看到请求链接和请求类型 请求类型Content Type 是application x www form u
  • 微信小程序自动检测版本并提示更新新版本

    微信小程序自动检测版本并提示更新新版本 微信小程序开发过程中 我们在版本更新迭代后 微信小程序客户端并不能触发自动更新 需要用户手动清理小程序后重新搜索进入后才能获取到最新的小程序版本 但是这个是用户所不能感知到的操作 也很麻烦 故需要提醒
  • $emit传递参数

    emit传递一个参数时 子组件代码 let data name 王五 age 50 this emit change data 父组件代码
  • js给json对象增加、删除、修改属性

  • JavaScript重写Symbol(Symbol.iterator)实现迭代器(1)

    iterator迭代 做的跟java集合迭代差不多就行了 示例图 h1 对象遍历重写iterator接口1 h1
  • IntelliJ IDEA 15款 神级超级牛逼插件推荐(自用,真的超级牛逼)

    来源 http suo im 5X5Rql 满满的都是干货 所有插件都是在 ctrl alt s 里的plugins 里进行搜索安装 1 CodeGlance 代码迷你缩放图插件 2 Codota 代码提示工具 扫描你的代码后 根据你的敲击
  • js 本地存储和获取

    localStorage setItem temp orderAr 存入 参数 1 调用的值 2 所要存入的数据 console log localStorage getItem temp 输出
  • Eclipse 安装阿里巴巴代码规范插件的步骤

    2017年10月14日杭州云栖大会 Java代码规约扫描插件全球首发仪式正式启动 规范正式以插件形式公开走向业界 引领Java语言的规范之路 目前 插件已在云效公有云产品中集成 立即体验 云效 gt 公有云 gt 设置 gt 测试服务 gt
  • js获取时间戳的四种方法

  • JS混淆加密的代码如何解密

    科普简介 混淆是指将 JavaScript 代码变得难以理解的过程 这可以通过更改变量名 函数名和类名 以及将代码压缩到一行来实现 混淆的主要目的是使代码难以被盗用 并保护代码的知识产权 功能作用与常用的解决方案 混淆后的代码很难阅读 但是
  • Vue.observable的理解

    一 Observable 是什么 Observable 翻译过来我们可以理解成可观察的 先来看其在Vue中的定义 Vue observable 让一个对象变成响应式数据 Vue 内部会用它来处理 data 函数返回的对象 返回的对象可以直接
  • React class组件、react-hook函数组件分别实现五子棋

    react class类组件 react hook函数组件分别实现五子棋 前言 使用create react app脚手架简单搭建 不用安装其他依赖 纯 js css实现 这里就只是简单的说明目录结构和思路 具体的代码实现请转到 Githu
  • 6.js--布尔值和null

    提示 文章写完后 目录可以自动生成 如何生成可参考右边的帮助文档 文章目录 目录 1 布尔数据 boolean 2 null 3 null和undefined的意义 1 布尔数据 boolean var a true var b false
  • 大数相乘,限制:不可用 BigInt

    大数相乘 限制 不可用 BigInt 大数相乘 限制 不可用 BigInt 例如 输入 a 11111111111111111111 b 22222222222222222222 返回 246913580246913580241975308
  • 30天精通Nodejs--第二十二天:express-认证和授权

    目录 引言 理解JWT及其工作原理 安装与引入JWT库 生成JWT令牌 验证JWT令牌 注意事项与最佳实践 结语 引言 在现代Web应用开发中 JSON Web Tokens JWT 作为一种轻量级 自包含且安全的标准 已被广泛用于实现用户

随机推荐

  • 大数据学习——Zookeeper集群搭建

    一 Zookeeper入门 1 概述 Zookeeper是一个开源的分布式的 为分布式框架提供协调服务的Apache项目 2 特点 1 Zookeeper 一个领导者 Leader 多个跟随者 Follower 组成的集群 2 集群中只要有
  • typescript开发electron程序的环境搭建过程

    1 安装nodejs 2 安装vs2013 或者vs2015 下载对应的typescript插件 3 创建项目 4 npm install g tsd 5 tsd install react global save tsd install
  • 模拟双色球系统-判断中奖情况

    package Java project 1 import java util Random import java util Scanner public class Java project 1 public static void m
  • argparser中的参数解释以及required参数在pycharm中的运行方式

    在argparser包时 其中add argumenet 函数有很多参数 name or flags 一个命名或者一个选项字符串的列表 例如 foo 或 f foo action 当参数在命令行中出现时使用的动作基本类型 nargs 命令行
  • Python 入门之控制结构 - 顺序与选择结构——第1关:顺序结构

    Python 入门之控制结构 顺序与选择结构 第1关 顺序结构 任务描述 程序最基本的结构就是顺序结构 顺序结构就是程序按照语句顺序 从上到下依次执行各条语句 本关要求学习者理解顺序结构 并对输入的三个数changeone changetw
  • 智能家居 (6) ——语音识别线程控制

    目录 语音识别线程控制代码 inputCommand h mainPro c voiceControl c 代码测试 往期文章 语音识别线程控制代码 inputCommand h include
  • fwrite函数的用法

    fwrite函数就是写文件的函数 它的函数原型如下 fwrite const void buffer size t size size t count FILE stream 可以看到这个函数的参数有四个 buffer 数据存储的地址 si
  • 点云高度归一化处理(附 python 代码)

    gt 由于不同地物之间存在着高程的差异 为了去除地形起伏对点云数据高程值的影响 所以需要根据提取出的地面点进行点云归一化处理 这一步是很多算法的基础 可以提高后续点云分类或分割的准确度等 如下图所示 gt 归一化的过程其实相对简单 遍历每一
  • 贪心算法力扣刷题练习(含思路与题解)

    贪心算法 保证每次操作都是局部最优 使得最终结果也是全局最优的 需要找到贪心的策略 使得每次的最优能保证全局最优 通常需要排序 根据排序需求 自定义比较函数 sort a begin a end vector
  • protobuf c++编程笔记

    文章目录 字段内容的定义 修饰符 字段类型 引用方式 不同字段的方法 1 optional修饰的基本类型 2 optional修饰的对象类型 3 repeated修饰的基本类型 4 repeated修饰的对象类型 序列化 反序列化 字段内容
  • Vue + 高德地图 + 三维模型

    一 创建高德的kek和密钥 根据需求选择服务平台 我选择的是web端 JS API 二 在vue中引入高德地图 在public文件下找到index html文件引入你的key值 参考 https lbs amap com demo jsap
  • Could not resolve com.android.tools.build:gradle:4.0.0.

    打开别人发过来的项目的时候gradle一直下载不下来 然后报错 尝试了很多办法 最后在用户变量种添加 Android SDK ROOT 自己的Android SDK路径 gradle 下载成功 可能遇到的具体错误问题不一样仅供参考
  • CentOS8基础篇15:防火墙命令配置

    一 防火墙服务 1 启动 关闭 重启防火墙服务 systemctl start firewalld service systemctl stop firewalld service systemctl restart firewalld s
  • ES 查询不稳定现象及解决方案

    问题描述 对于相同的查询语句 ES 查询返回不同的检索内容 示例 1 filter match content 宝骏510 order score size 10 在上面的示例中可以看到推荐句子的第二句和第三句的顺序发生了变化 产生原因 官
  • spring事务的隔离级别。如何避免脏读或者幻读

    事务隔离级别为四个等级 默认是数据库的隔离级别 需要去数据库查询一下隔离级别 1 查看当前会话隔离级别 select tx isolation 2 查看系统当前隔离级别 select global tx isolation 隔离级别 Iso
  • unity MeshCollider组件

    在应用MeshCollider组件中的一个属性 Convex 这个功能很好用 但是他也是有一个坑在里面 他的好处 当你点击之后他会自动根据模型自动生成一个碰撞器 这个是不规则的碰撞器 他的坏处 没有点击 Convex 时候 比如当你有一个物
  • Commond:命令模式

    命令模式即将请求封装为对象Commond 执行者可以执行多个操作 即执行者才是操作真正的实现者 设其为操作0 9 每个操作都封装了一个对应的Commond类 当该Commond被调用时 Commond会令执行者执行其对应的操作 用户需要执行
  • 文化:测试团队建设--读书会

    如何做管理 曾经很迷茫 一路跌跌撞撞 慢慢的发现了 想要做好管理 团队文化和团队建设也是管理的重要环节 其实在一个大的测试团队里 有很多测试同学相互之间是没有交集的 如何让大家熟悉团结起来 团队建设是其中一个方法 下面和大家分享 团队建设
  • Linux进程通信——消息队列

    Linux进程通信 消息队列 消息队列概述 消息队列发送端 消息队列接收端 补充key值作用 消息队列互相发送接收 消息队列概述 消息队列是存在Linux内核中 以链表形式来存消息 一个消息队列由一个标识符 即队列ID 来标识 用户进程可以
  • JS技巧---Set数组去重

    在 ES6 中 引入了一个新的数据结构类型 Set 而 Set 与 Array 的结构是很类似的 且 Set 和 Array 可以相互进行转换 数组去重 也算是一个比较常见的前端面试题了 方法有很多种 这里不多赘述 下面我们看看用 Set