es6删除数组某一项_什么时候用集合,什么时候用数组?一文帮你清晰界定
全文共3313字,预计学习时长10分钟
图源:Unsplash
Set(集合)对象类型于2015年在ECMAScript*规范中提出,可以在 Node.js和大部分浏览器中使用。
*ECMA是EuropeanComputer Manufacturers Association的缩写。
即欧洲计算机制造商协会,是制定信息传输与通讯的国际化标准组织。
ECMAScript是ECMA制定的标准化脚本语言。
集合和数组很像,但是还是存在一定差别。
本文旨在探讨这些差异,以及区别两者的不同用法。下面正式开始。
新概念,集合
集合是ES6中非常特殊的对象类型。创建一个如下的空集合:
const characters =new Set()
可以在集合的构造函数里传递iterable来填充它。iterable就是一种可以循环访问的对象,比如 Array(数组)或 String(字符串)。
const characters =new Set(['Rod', 'Todd', 'Sherri', 'Terri'])
值得信赖的主力,数组
数组是大多数JavaScript应用程序的主要板块,不论新旧。如果你以前编写过JavaScript,应该会对此比较熟悉。你可以写出类似的数组:
const characters =['Rod', 'Todd', 'Sherri', 'Terri']
所以重点是?
图源:Unsplash
这两种数据类型是相似的,但是要做的事情却略有不同。集合表示一组唯一的项,而数组的应用更为广泛。
有个很好的例子来表示集合,就像大学生的在一个学期的课程。他们可以修一门或多门课程,但是同一学期同一门课他们只能修一次。
const courses = newSet(['English', 'Science', 'Lego Robotics'])
const cards = [
'Machop',
'Diglett',
'Charmeleon',
'Machop',
'Squirtle'
]
另一方面,一组宝可梦卡牌就不是用于形容集合的好例子,因为这里面有重复。这种情况,用数组可以更好的表示数据。
const cards = [
'Machop',
'Diglett',
'Charmeleon',
'Machop',
'Squirtle'
]
重复的部分可以传输到集合中,但是他们不会被存入。将下面的代码复制到你的浏览器控制台,自己看看:
new Set([
'Machop',
'Diglett',
'Charmeleon',
'Machop',
'Squirtle'
])// Set(4) {"Machop", "Diglett", "Charmeleon","Squirtle"}
传递到集合的数组包括两个Machop,但是集合里只保留一份副本。这种行为非常微妙,但是很有用。
这有什么用?
假设你正在开发一个博客,想要添加一个功能,允许访问者搜索符合一个或多个类别匹配的文章。每个类别只使用一次。
如果你使用数组来代表活动类别列表,你就需要注意避免重复。这可以通过检查没添加类别的列表来实现。
类函数indexOf或includes可以应用于此:
// If our list doesnot include the category
if (!list.includes(category)) {
// Then add the new category to thelist
list.push(category)
}
我曾经发现自己一直在编写这类的代码,但是集合可以自动处理这些问题。你可以直接用类函数add,集合将始终独一无二。
// Just add thecategory to the list
// No need to perform any checks in advance!
list.add(category)
将集合转变回数组
我们已经知道,通过将数组传递到集合的构造函数中,数组可以转化为集合,但是集合是如何转化为数组的呢?
一种方法是静态地使用类函数from
const set = newSet(['Casablanca', 'The Wizard of Oz', 'Jaws'])
const arr = Array.from(set)
console.log(arr)// (3) ["Casablanca", "The Wizard of Oz","Jaws"]
ES6延展操作符是另一个选择:
const set = newSet(['Casablanca', 'The Wizard of Oz', 'Jaws'])
const arr = [...set]
console.log(arr)// (3) ["Casablanca", "The Wizard of Oz","Jaws"]
集合不支持诸如map,filter和reduce这些函数式编程方法,因此,将他们转换成数组更方便。
使用集合从数组中删除重复
即使更倾向于在数组中保存数据,集合依旧很有用。从数组中删除重复项的一个简便方法,就是将它转化为集合后再重新转化成数组。
const cards = [
'Machop',
'Diglett',
'Charmeleon',
'Machop',
'Squirtle'
]
const uniqueCards = [...new Set(cards)]
console.log(uniqueCards)// (4) ["Machop", "Diglett","Charmeleon", "Squirtle"]
如何辨别哪些值是唯一的?
图源:Unsplash
目前为止,已经知道集合如何只保留唯一的值,但这些唯一的值是怎么确定的呢?下面来讨论一下。
首先,让3这个值在集合里出现两次:
new Set([1, 2, 3, 4,3])// Set(4) {1, 2, 3, 4}
第二个3消失了。这和我们目前学到的内容是一致的,但是如果把3作为字符串添加会是什么样的呢?
new Set([1, 2, 3, 4,'3'])// Set(5) {1, 2, 3, 4, "3"}
有趣了。认为3和“3”是不同的。如果我们将匹配的数组加入集合会怎么样呢?
new Set([['JessePinkman'], ['Jesse Pinkman']])// Set(4) {['Jesse Pinkman'], ['Jesse Pinkman']}
在这种情况下,集合保留两个具有相同内容的数组。那么对象呢?
new Set([{name: 'RonBurgundy'}, {name: 'Ron Burgundy'}])// Set(2) {{name: 'Ron Burgundy'}, {name:'Ron Burgundy'}}
有匹配键和值的对象字面值,也被认为是不同的......
这该如何解释?
集合使用绝对相等strictequality (===)来确定哪些值是唯一的。这解释了为什么集合同时保留3(数字)和“3”(字符串)的副本。
这同样解释了,为什么数组和对象字面值相同,却被认为是唯一的。JavaScript通过他们的引用来比较对象,而不是他们的内容,而数组至少有特殊类型的对象。
总结
图源:Unsplash
集合为JavaScript开发者提供了新方法表示数据。数组仍然是JavaScript应用程序中通用的主力,集合则主要为了表示唯一的值的集合。
集合和数组之间的转换很容易。你可以使用集合来确保数据保持唯一,然后将其转化为数组,以便使用map、filter和reduce等函数。
集合使用绝对相等来比较值,并确定什么是唯一的。 因为JavaScript通过引用比较对象,数组和对象字面值即使内容相同,也会被认为是唯一的。
本文重点讨论有关集合的概念。现在你应该知道了什么时候该用集合,什么时候用数组更好了吧?
留言点赞关注
我们一起分享AI学习与发展的干货
如转载,请后台留言,遵守转载规范
es6删除数组某一项_什么时候用集合,什么时候用数组?一文帮你清晰界定相关推荐
- es6删除数组某一项_精学手撕系列——数组扁平化
参考文章:面试官连环追问:数组拍平(扁平化) flat 方法实现 编者荐语: 在前端面试中,手写flat是非常基础的面试题,通常出现在笔试或者第一轮面试中,主要考察面试者基本的手写代码能力和JavaS ...
- es6删除数组某一项_「JavaScript 从入门到精通」10.数组
往期回顾 「JavaScript 从入门到精通」1.语法和数据类型 「JavaScript 从入门到精通」2.流程控制和错误处理 「JavaScript 从入门到精通」3.循环和迭代 「JavaScr ...
- 下标要求数组或指针类型_算法一看就懂之「 数组与链表 」
数据结构是我们软件开发中最基础的部分了,它体现着我们编程的内功.大多数人在正儿八经学习数据结构的时候估计是在大学计算机课上,而在实际项目开发中,反而感觉到用得不多. 其实也不是真的用得少,只不过我们在 ...
- 数组越界怎么判断_算法连载之求解两个有序数组的中位数
问题 给定两个大小为 m 和 n 的有序数组 nums1 和 nums2.找出这两个有序数组的中位数.假设 nums1 和 nums2 不会同时为空. 示例 1: nums1 = [1, 3] num ...
- 树状数组求逆序对_区间和的个数(树状数组)
327. 区间和的个数 给定一个整数数组 nums,返回区间和在 [lower, upper] 之间的个数,包含 lower 和 upper. 区间和 S(i, j) 表示在 nums 中,位置从 i ...
- ios 监听数组个数的变化_【iOS】KVO方式监听数组的变化动态刷新tableView
写作本文来由: iOS默认不支持对数组的KVO,因为普通方式监听的对象的地址的变化,而数组地址不变,而是里面的值发生了改变 整个过程需要三个步骤 (与普通监听一致) /* *第一步建立观察者及观察 ...
- java中数组的下标比较_【Java】 剑指offer(53-3) 数组中数值和下标相等的元素
本文参考自<剑指offer>一书,代码采用Java语言. 题目 假设一个单调递增的数组里的每个元素都是整数并且是唯一的.请编程实现一个函数找出数组中任意一个数值等于其下标的元素.例如,在数 ...
- 微信小程序修改数组中的元素_微信小程序——this.setData()动态修改数组中的某一值...
微信小程序--this.setData()动态修改数组中的某一值S8v编程技术_踩坑日志_进阶指南_无知人生 大家是不是都觉得微信小程序的开发方式和 vue react 这种框架的开发方式很像?S8v ...
- 怎样在数组末尾添加数据_如何利用C++实现可变长的数组?
应该执行什么功能? 假设我们要实现一个将自动扩展的数组类,是否需要实现函数?让我们从下面主要功能使用的功能开始,看看我们需要实现哪些功能. 输出结果: 0 1 2 3 4 0 1 2 100 4 您需 ...
最新文章
- 《STM32库开发实战指南:基于STM32F103(第2版)》——2.1节仿真器简介
- 开发日记-20190528 关键词 读书笔记《鸟哥的Linux私房菜-基础学习篇》.desktop创建
- Scrum敏捷开发沉思录
- CSS篇 《图解CSS3》笔记 Flex
- 开源图形化SFTP客户端winscp入门
- Collection中list集合的应用常见的方法
- 基于seq2seq模型的chatbot对话系统的tensorflow实现
- UDP和TCP 简单 区别
- Gantt - attachEvent事件监听
- 2022年网络规划设计师最新考纲变化
- 慧荣SM2246XT主控的固态硬盘修复开卡不识别怎么短接方法
- 孤儿进程/僵尸进程/守护进程
- ZigBee组网实验:多终端节点向协调器发送数据amp;协调器给终端节点发送数据
- 修改计算机名无法共享打印机,打印机设置共享以及共享时无法连接,报错0X00000006解决方法...
- Mybatis| Bug合集
- 笔记本cpu和台式cpu有什么区别
- html怎样设置图片的圆角矩形,css怎么画圆角矩形?
- 【行业云说直播间】-云数底座赋能基层治理现代化正式上线
- Delphi中,如何读取资源文件?
- php面试 猴子大王,php猴子选大王问题解决方法,猴子大王_PHP教程
热门文章
- 竞品分析----夸克:我离百度还有多少步?
- 网易云音乐部门技术面
- MLY -- 8.Establish a single-number evaluation metric for your team to optimize
- Java学习之JavaFX安装
- 用python绘制玫瑰花
- 天下无敌宇文拓,一肩担尽古今愁
- Unity 旋转人物在设定的角度看向镜头(平滑转动)
- 相亲交友app开发的系统功能
- 北京某牧场管理企业——牧场智慧管理项目
- Ubuntu 22.04 LTS (Jammy Jellyfish) Daily Build安装镜像PC ARM Raspberry Pi