发布于2021-06-20 18:25 阅读(576) 评论(0) 点赞(17) 收藏(4)
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
也是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); //删除
遍历数组可以采用下标循环,但是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);
});
Set
与Array
类似,但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/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!