程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

Map、Set以及inerable类型

发布于2021-06-20 18:25     阅读(576)     评论(0)     点赞(17)     收藏(4)


Map:

js默认对象表示方式是{ },即一组键值对。但是js的对象有个小问题,就是键必须是字符串。但是实际上Number或其他数据类型作为键也是很合理的,为了解决这一问题,最新的ES6规范引入了新的数据类型:Map

优点:

Map是一组键值对的结构,具有极快的查找速度。

举个例子:假如要根据同学的名字查找对应的成绩,如果用Array,就需要两个数据:

var names = ['liming', 'danni', 'bob'];
var scores = [90, 98, 75];

给定一个名字,要查找对应的成绩,就要先在names里面找到对应的位置,再从scores取出对应的成绩,数组越长,耗时越长。
如果用Map实现,只需要一个‘名字’-‘成绩’的对照表,直接根据名字查找成绩,无论这个表多大,查找速度都不会慢,用JavaScript写一个Map如下:

var m = new Map([['liming',90], ['danni', 98], ['bob', 75]]);
m.get('liming');  //95

初始化Map:
初始化Map需要一个二维数组,或直接初始化一个空Map。

var m = new Map([['liming',90], ['danni', 98], ['bob', 75]]);
var m = new Map();  //空Map

Map使用方法:

m.set('zhangsun',77);  //添加新的键值对key-value,也可以的修改key原来的值
m.has('zhangsun');     //检查是否存在key ‘zhangsun’,返回true
m.get('liming');       //90  查找获取键对应的值,如果这个键不存在,则返回undefined
m.delete('zhangsun');     //删除key“zhangsun”

由于一个key只能对应一个值,所以多次对一个key放入value,后面的值会把前面的值覆盖:

var m = new Map();
m.set('xiaoniao', 91);
m.set('xiaoniao', 88);
m.get('xiaoniao');     //88

Set:

也是ES6规范引入的新的数据类型

优点:

可以对数组进行去重(Set和Map类似,也是一组key的集合,但是不能存储value。由于key不可以重复,所以,在Set中,没有重复的key)

创建Set:
要创建Set,需要提供一组数组作为输入(Set可以把数组转化为Set),或者直接创建一个空的Set:

var s1 = new Set([1, 2, 3, 4]);    //含1, 2, 3,4
var s2 = new Set();   // 空Set

重复的元素在Set中自动被过滤:

var s = new Set([1, 2, 3, 4, 3, '4']);
s;   //Set {1, 2, 3, 4, '4'}

把Set转化为数组:

var s_array = Array.from(s);    //[1, 2, 3, 4, '4']

Set 的添加和删除元素,可以重复添加,但是不会有效果:
添加add(key):

s.add(6);      //添加

删除delete(key):

s.delete(3);       //删除

iterable类型:

遍历数组可以采用下标循环,但是Map和Set就无法使用下标遍历。为了统一集合类型,ES6标准引入了新的iterable类型,Array、Map、Set都属于iterable类型。
具有iterable类型的集合可以通过新的for…of循环遍历。

for…of循环是ES6引入的新的语法。
用for…of循环遍历集合:

var a = ['a', 'b', 'c'];
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
var s = new Set(['a', 'b', 'c']);
for (var x of a) {               //遍历数组a
     console.log(x);
}
for (var x of m) {               //遍历Map
     console.log(x[0] + '=' + x[1]);
}
for (var x of s) {                //遍历Set
     console.log(x);
}

for…of循环和for…in循环的区别?
for…in循环遍历的是对象的属性名称。一个数组实际上也是一个对象,他的每个元素的索引被视为一个属性。

当我们手动给Array对象添加了额外的属性后,for … in循环将带来意想不到的意外效果:

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
    console.log(x); // '0', '1', '2', 'name'
}

for … in循环将把name包括在内,但Array的length属性却不包括在内。
for … of循环则完全修复了这些问题,它只循环集合本身的元素:

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x of a) {
    console.log(x); // 'A', 'B', 'C'
}

这就是为什么要引入新的for … of循环。

然而,更好的方式是直接使用iterable内置的forEach方法,它接收一个函数,每次迭代就自动回调该函数。
Array为例:

var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
    // element: 指向当前元素的值
    // index: 指向当前索引
    // array: 指向Array对象本身
    console.log(element + ', index = ' + index);
});

SetArray类似,但Set没有索引,因此回调函数的前两个参数都是元素本身:

var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
    console.log(element);
});

Map的回调函数参数依次为value、key和map本身:

var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
    console.log(value);
});

如果对某些参数不感兴趣,由于JavaScript的函数调用不要求参数必须一致,因此可以忽略它们。

例如,只需要获得Array的element:

var a = ['A', 'B', 'C'];
a.forEach(function (element) {
    console.log(element);
});

原文链接:https://blog.csdn.net/weixin_43799980/article/details/117673460




所属网站分类: 技术文章 > 博客

作者:哦八戒八戒

链接:http://www.qianduanheidong.com/blog/article/135953/c7c112d1f3eca7f53833/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

17 0
收藏该文
已收藏

评论内容:(最多支持255个字符)