ES6新特性五：Set与Map的数据结构实例分析

网络编程 2025/1/12 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

本文实例讲述了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()：清除所有成员，没有返回值。

var s = new Set();
s.add(1).add(2).add(2);
// 注意2被加入了两次
console.log(s.size) // 2
console.log(s.has(1)) // true
console.log(s.has(2)) // true
console.log(s.has(3)) // false
console.log(s.delete(2));
console.log(s.has(2)) // false

③ 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...of
for (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
// blue
for ( let [key, value] of set.entries() ){
  console.log(key, value);
}
// red, red
// green, green
// blue, blue

⑦ 数组的map和filter方法的运用

map(x){}: 遍历数组，对每一元素进行处理，返回处理后的数组。
filter(x){}: 遍历数组，对每一个元素进行校验，返回含有通过校验元素的数组。

var set = new Set([1, 2, 3]);
set = new Set([...set].map(x => x * 2));
console.log(set);//返回Set结构：{2, 4, 6}
var set = new Set([1, 2, 3, 4, 5]);
set = new Set([...set].filter(x => (x % 2) == 0));
console.log(set);// 返回Set结构：{2, 4}

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'])) // undefined
var k1 = ['a'];
//虽然值相同，但这是一个新的值，内存地址不一样,new 的
var k2 = ['a'];
map.set(k1, 111);
map.set(k2, 222);

⑥ 遍历

Map结构的默认遍历器接口（Symbol.iterator属性），就是entries方法。

keys()：返回键名的遍历器。
values()：返回键值的遍历器。
entries()：返回所有成员的遍历器。

console.log(Map[Symbol.iterator] === Map.entries)//true
let map = new Map([[1, 'one'], [2, 'two'], [3, 'three']]);
console.log([...map.keys()]);//[ 1, 2, 3 ]
console.log([...map.values()]);//[ 'one', 'two', 'three' ]
console.log([...map.entries()]);//[ [ 1, 'one' ], [ 2, 'two' ], [ 3, 'three' ] ]
console.log([...map]);[ [ 1, 'one' ], [ 2, 'two' ], [ 3, 'three' ] ]

⑦Map还有一个forEach方法，进行遍历。

⑧与set相同，map可以结合数组的map方法、filter方法，可以实现Map的遍历和过滤。

希望本文所述对大家ECMAScript程序设计有所帮助。

ES6,新特性,Set,Map,数据结构

标签：

ES6,新特性,Set,Map,数据结构

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

评论“ES6新特性五：Set与Map的数据结构实例分析”

暂无ES6新特性五：Set与Map的数据结构实例分析的评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2025年01月12日

ES6新特性五：Set与Map的数据结构实例分析

ES6,新特性,Set,Map,数据结构

ES6新特性六：promise对象实例详解

webpack配置的最佳实践分享

评论“ES6新特性五：Set与Map的数据结构实例分析”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接