时间:2021-05-28
本文实例讲述了ES6新特性五之Set与Map的数据结构。分享给大家供大家参考,具体如下:
1. Set
① 定义:它类似于数组,但是成员的值都是唯一的,没有重复的值。Set本身是一个构造函数,用来生成Set数据结构。
var s = new Set();[2,3,5,4,5,2,2].map(x => s.add(x))console.log(s); //Set { 2, 3, 5, 4 }② 属性和方法
Set结构有以下属性。
Set.prototype.constructor:构造函数,默认就是Set函数。
Set.prototype.size:返回Set的成员总数。
Set数据结构有以下方法。
add(value):添加某个值,返回Set结构本身。
delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
has(value):返回一个布尔值,表示该值是否为Set的成员。
clear():清除所有成员,没有返回值。
③ Array.from方法可以将Set结构转为数组
var items = new Set([1, 2, 3, 4, 5]);var arr = Array.from(items);//运用: 去除数组中重复元素的方法var array = [1,2,3,2,3,4];function fun(array) { return Array.from(new Set(array));}console.log(fun(array));//[ 1, 2, 3, 4 ]④ Set结构有一个values方法,返回一个遍历器。
var s = new Set([1, 2, 3, 4, 5]);console.log(s.values());//SetIterator { 1, 2, 3, 4, 5 }//Set结构的默认遍历器就是它的values方法console.log(Set.prototype[Symbol.iterator] === Set.prototype.values)//true//所以遍历可以直接使用 for...offor (let x of s) { console.log(x);}//由于扩展运算符(...)内部使用for...of循环,将Set转化为数组。var arr = [...s];console.log(arr);//[ 1, 2, 3, 4, 5 ]⑤ Set结构的foreach方法
var set = new Set([1, 2, 3]);set.forEach(function(value,key){ console.log(value);});⑥ Set结构也有keys和entries方法,这时每个值的键名就是键值。
let set = new Set(['red', 'green', 'blue']);for ( let item of set.keys() ){ console.log(item);}// red// green// bluefor ( let [key, value] of set.entries() ){ console.log(key, value);}// red, red// green, green// blue, blue⑦ 数组的map和filter方法的运用
map(x){}: 遍历数组,对每一元素进行处理,返回处理后的数组。
filter(x){}: 遍历数组,对每一个元素进行校验,返回含有通过校验元素的数组。
2. Map
① 原因:JavaScript的对象,本质上是键值对的集合,但是只能用字符串当作键。
② 定义:它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。
③ 属性和方法
size:返回成员总数。
set(key, value):设置key所对应的键值,然后返回整个Map结构。如果key已经有值,则键值会被更新,否则就新生成该键。
get(key):读取key对应的键值,如果找不到key,返回undefined。
has(key):返回一个布尔值,表示某个键是否在Map数据结构中。
delete(key):删除某个键,返回true。如果删除失败,返回false。
clear():清除所有成员,没有返回值。
④ 与set 相同 可以接受数组参数创建map,但数组的元素是一个个代表键值对的数组构成。
var map = new Map();var map1 = new Map([["name", "张三"], ["title", "Author"]]);console.log(map1.size)//2⑤ 只有对同一个对象的引用,Map结构才将其视为同一个键,只要内存地址不一样,就视为两个键。
var map = new Map();map.set(['a'], 555);console.log(map.get(['a'])) // undefinedvar k1 = ['a'];//虽然值相同,但这是一个新的值,内存地址不一样,new 的var k2 = ['a'];map.set(k1, 111);map.set(k2, 222);⑥ 遍历
Map结构的默认遍历器接口(Symbol.iterator属性),就是entries方法。
keys():返回键名的遍历器。
values():返回键值的遍历器。
entries():返回所有成员的遍历器。
⑦Map还有一个forEach方法,进行遍历。
⑧与set相同,map可以结合数组的map方法、filter方法,可以实现Map的遍历和过滤。
希望本文所述对大家ECMAScript程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了ES6中Set和Map数据结构,Map与其它数据结构互相转换操作。分享给大家供大家参考,具体如下:ES6的Set:ES6提供了新的数据结构──Se
本文实例讲述了ES6学习笔记之Set和Map数据结构。分享给大家供大家参考,具体如下:一.SetES6提供了新的数据结构Set。类似于数组,只不过其成员值都是唯
本文实例讲述了ES6新数据结构Set与WeakSet用法。分享给大家供大家参考,具体如下:新数据结构Set与WeakSet1.SetSet类似于数据,但是成员值
前言ES5中的数据结构,主要是用Array和Object。在ES6中主要新增了Set和Map数据结构。到目前为止,常用的数据结构有四种Array、Object、
本文实例讲述了ES6使用Set数据结构实现数组的交集、并集、差集功能。分享给大家供大家参考,具体如下:Set数据结构是es6中新增的,它类似于数组,但是成员的值