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


Posted in Javascript onApril 21, 2017

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
IE本地存储userdata的一个bug说明
Jul 01 Javascript
javascript模拟订火车票和退票示例
Apr 24 Javascript
JS实现图片放大镜效果的方法
Feb 27 Javascript
JavaScript数据类型之基本类型和引用类型的值
Apr 01 Javascript
javascript等号运算符使用详解
Apr 16 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
May 12 Javascript
JavaScript中数组Array方法详解
Feb 27 Javascript
Angular 2.x学习教程之结构指令详解
May 25 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
微信小程序实现留言板功能
Nov 02 Javascript
vue  directive定义全局和局部指令及指令简写
Nov 20 Javascript
webpack配置的最佳实践分享
Apr 21 #Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 #Javascript
ES6新特性四:变量的解构赋值实例
Apr 21 #Javascript
jQuery+pjax简单示例汇总
Apr 21 #jQuery
利用n工具轻松管理Node.js的版本
Apr 21 #Javascript
基于jQuery实现文字打印动态效果
Apr 21 #jQuery
ES6新特性三: Generator(生成器)函数详解
Apr 21 #Javascript
You might like
PHP函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
PHP实现把数字ID转字母ID
2013/08/12 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
JQuery 学习笔记 选择器之三
2009/07/23 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
jquery json 实例代码
2010/12/02 Javascript
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
利用JS进行图片的切换即特效展示图片
2013/12/03 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
js电话号码验证方法
2015/09/28 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
webpack4的迁移的使用方法
2018/05/25 Javascript
Vue.js 利用v-for中的index值实现隔行变色
2018/08/01 Javascript
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
[02:52]2014DOTA2西雅图国际邀请赛 CIS战队巡礼
2014/07/07 DOTA
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
python单链表实现代码实例
2013/11/21 Python
python线程锁(thread)学习示例
2013/12/04 Python
Python高级特性切片(Slice)操作详解
2018/09/27 Python
python psutil模块使用方法解析
2019/08/01 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
美国一家专业的太阳镜网上零售商:Solstice太阳镜
2016/07/25 全球购物
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
日常奢侈品,轻松购物:Verishop
2019/08/20 全球购物
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
世界上最大的艺术社区:SAA
2020/12/30 全球购物
年度考核自我评价
2014/01/25 职场文书
亮剑精神演讲稿
2014/05/23 职场文书
品酒会策划方案
2014/05/26 职场文书
法学院毕业生求职信
2014/06/25 职场文书
研究生个人学年总结
2015/02/14 职场文书
电脑关机速度很慢怎么办 提升电脑关机速度设置教程
2022/04/08 数码科技