set,map,array,object(一)
发布日期:2021-08-22 02:44:38 浏览次数:1 分类:技术文章

本文共 3831 字,大约阅读时间需要 12 分钟。

ES6又新增了两个数据类型,set,map.既然新增了,就会有可取之处,或者是说为了解决什么问题而新增。1.set的出现就解决了array里面有重复数据的情况2.map的出现就可以解决object的属性只能为字符串的问题复制代码

对于set和map的学习,我建议分别对应着array,object一起学习。

Array

数组就是类似于列表的高级对象。

对于数组的方法,我先上一张我所收集的图:

这张图包含了数组的大部分方法:

1.every 和 some

every 和 some 不完全属于数组操作方法

every (找到false就返回)和 some(找到true就返回)

都是判断条件直接返回整个数组Boolean类型的方法.every速度会比some快很多.

2.unshift 和 shift

unshift在数组的开头插入一个或多个元素,并返回数组的新长度

shift删除数组的第一个元素,并返回这个元素

3.reduce 和 reduceRight

reduce数组中的每个值(从左到右)开始合并,最终为一个值.元素想加

reduceRight使用同上,与reduce()的执行方向相反

4.push 和 pop

push添加一个或多个元素到数组的末尾,并返回数组新的长度

pop删除一个数组中的最后一个元素,并且返回这个元素

5.splice

splice 在任意的位置给数组添加或删除任意个元素(拼接),返回被删除的元素组成的数组,没有则返回空数组

** 让我想起了前面遇到的一个vue问题,数组不能被监听。是因为在利用一个索引去设置数组时,就无法监听得到。解决方案: 就是使用数组的splice方法。 或者 this.$set(arr,index,newVal)

复制代码

6.join

将数组中的所有元素连接成一个字符串(默认用逗号作为分隔符,如果separator是一个空字符串,那么数组中的所有元素将被直接连接)如果元素是undefined或者null,则会转化成空字符串

####小插曲一般将数组转化为字符串,就用join(',')  this.urls = arr.join(',')将字符串转化为数组,就用splice   fileUrl = this.urls.split(',')复制代码

7.reverse

前后颠倒数组中元素的位置,第一个元素会成为最后一个

8.sort

对数组的元素做原地的排序,并返回这个数组。sort可能不稳定,默认按照字符串的unicode码位点排序.
var arr = [1,2,5,10];    arr.sort() // [1,10,2,5]        sort是将数值转为字符串进行比较,所以很不稳定。        解决方法: 带上函数参数        let numberArray = [1,2,3,10,5]                function compare(value1, value2){            //function1 (更简洁)            // return  a - b;                //function2            if(value1 > value2) {                return -1            } else if (value1 < value2) {                return 1            } else if (value1 == value2){                return 0            }        }           console.log('numberArray:' + numberArray.join());       console.log('Sorted without a compare function:'+ numberArray.sort());       console.log('Sorted with compareNumbers224764:'+ numberArray.sort(compare));    复制代码

9.indexOf 与 lastIndexOf

indexOf 返回指定元素能在数组中找到的第一个索引值,否则返回-1

fromIndex可以为负,表示从倒数第n个开始(此时仍然从前向后查询数组)使用“严格相等”(===)进行匹配

lastIndexOf返回指定元素在数组中的最后一个的索引,如果不存在则返回-1, 从数组的后面向前查找

**还有一个查找数组里面是否有该元素的方法就是:find()arr.find( (val) => {    if (val == '0') return true})复制代码

10.slice 与 concat

slice把数组中一部分的浅复制(shallow copy)存入一个新的数组对象中,并返回这个新的数组.不修改原数组,只会返回一个包含了原数组中提取的部分元素的一个新数组

具体拷贝规则同concat函数 concat将传入的数组或非数组值与原数组合并,组成一个新的数组并返回

**拷贝数组: 还可以用...  (...arr)复制代码

11.filter

使用指定的函数测试所有元素,并创建一个包含所有测试通过的元素的新数组

补充:

12. Array.isArray

判断传递的值是不是数组,返回布尔值
Array.isArray()            ///    const arr = [1,2,3]    Array.isArray(arr) // true复制代码

其中能改变数组本身的方法: 1.array.pop() 2.array.push() 3. array.reverse() 4.arr.sort() 5.array.splice() 剩下的均不改变数组本身

介绍完数组,就开始介绍set了。

Set

set类似于数组,他的值是唯一的,没有重复的值。

set的方法:    1.add(value) 添加某个值    2.delete(value): 删除某个值    3.has(value): 是否有某个值,返回boolean类型    4.clear(): 清除所有成员,没有返回指。        size:用来看set的长度复制代码

通过set去实现去重

1.const set = new Set();[1,2,3,4,4].forEach( item => s.add(item))for (let i of s) console.log(i) //  1 2 3 4/2.let arr = [1,2,2,3]arr = [... new Set(arr)]3.去除重复字符var str = 'aabbs'str = [... new Set(str)].join('')复制代码

set 怎样去转化为数组:

1.Array.form()let set = new Set([1,2,3])let arr = Array.form(new Set(array))...(扩展运算符)2.let arr = [...set]复制代码

遍历操作:

keys():返回键名的遍历器    values():返回键值的遍历器    entries():返回键值对的遍历器    forEach():使用回调函数遍历每个成员复制代码

实例:

let set = new Set(['red', 'green', 'blue']);for (let item of set.keys()) {  console.log(item);}// red// green// bluefor (let item of set.values()) {  console.log(item);}// red// green// bluefor (let item of set.entries()) {  console.log(item);}// ["red", "red"]// ["green", "green"]// ["blue", "blue"]复制代码

以及使用set可以更好的去是实现并集(Union)、交集(Intersect)和差集(Difference)。

let a = new Set([1, 2, 3]);let b = new Set([4, 3, 2]);// 并集let union = new Set([...a, ...b]);// Set {1, 2, 3, 4}// 交集let intersect = new Set([...a].filter(x => b.has(x)));// set {2, 3}// 差集let difference = new Set([...a].filter(x => !b.has(x)));// Set {1}复制代码

先到这里object和map 下篇再讲~

转载于:https://juejin.im/post/5c773dd26fb9a049a7127f52

转载地址:https://blog.csdn.net/weixin_33734785/article/details/91427382 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:如何更好的限流解决突发问题
下一篇:一只脚踏入 Three.js

发表评论

最新留言

哈哈,博客排版真的漂亮呢~
[***.90.31.176]2024年03月08日 18时35分52秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

linux软件中心无法安装软件,linux中软件的安装 2021-06-24
linux下安装共享软件,Linux 系统下各种包的安装方法分享 2021-06-24
centos linux 包管理,CentOS程序包管理、上 2021-06-24
linux6的关机快捷键是,LINUX关机快捷键是什么? 2021-06-24
linux下apache安装ssl,linux下apache安装ssl步骤 2019-04-21
c语言编写烟花程序,C语言烟花程序 2019-04-21
android sudio连接服务器教程,Android Studio连接手机设备教程 2019-04-21
android 二选一的按钮,选择框 RadioButton/Check - Android 入门教程 2019-04-21
浮窗 动画特效 android,悬浮窗能实现自定Animation动画效果吗? 2019-04-21
html是描述型语言,JavaScript_JavaScript基础教程——入门必看篇,JavaScript他是一种描述性语言, - phpStudy... 2019-04-21
android控件缩放后居中,三大布局的基本摆放属性总结,以及imageVIew图片摆放的缩放问题... 2019-04-21
html怎么定义音乐参数,AudioParam - 表示与音频相关的参数 2019-04-21
html空间图片,html+js实现图片预览 2019-04-21
python gtk页面布局_【python】GTK 例子 2019-04-21
介词for和with 和of的用法_【英语中的for,to,at,of,in,on,with的用法】作业帮 2019-04-21
cv2 画多边形不填充_opencv 画图 2019-04-21
人员梯度培养_人才梯队培养计划方案 2019-04-21
linux mmu的实现的讲解_从 Linux 内核访问用户空间内存(mmu) 2019-04-21
centos6安装报错黑屏_Linux安装elasticsearch+kibana运行环境 2019-04-21
iar 堆栈设置_浅析Cortex-M系统堆栈机制 2019-04-21