• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > ES6新特性五:Set与Map的数据结构实例分析

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

作者:Dason_yu 字体:[增加 减小] 来源:互联网 时间:2017-05-11

Dason_yu通过本文主要向大家介绍了es6 get set,es6 new set,es6 set,es6 set的方法,es6 map等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.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 }

</div>

② 属性和方法

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

</div>

③ 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 ]

</div>

④ 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 ]

</div>

⑤ Set结构的foreach方法

var set = new Set([1, 2, 3]);
set.forEach(function(value,key){
  console.log(value);
});

</div>

⑥ 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

</div>

⑦ 数组的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}

</div>

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

</div>

⑤ 只有对同一个对象的引用,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);

</div>

⑥ 遍历

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' ] ]
</div>

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

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

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

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

相关文章

  • 2017-05-11详解nodejs express下使用redis管理session
  • 2017-05-11微信小程序 tabs选项卡效果的实现
  • 2017-05-11JS前端开发判断是否是手机端并跳转操作(小结)
  • 2017-05-11js输入框使用正则表达式校验输入内容的实例
  • 2017-05-11json数据处理及数据绑定
  • 2017-05-11React Router基础使用
  • 2017-05-11详解JavaScript RegExp对象
  • 2017-05-11利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
  • 2017-05-11jQuery实现三级联动效果
  • 2017-05-11JS实现图片放大缩小的方法

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • js JSON介绍
    • bootstrap3 dialog 更强大、更灵活的模态框
    • js实现PC端根据IP定位当前城市地理位置
    • JS实现图片放大缩小的方法
    • jQuery实现优雅的弹窗效果(6)
    • 基本DOM节点操作
    • JS实现的表头列头固定页面功能示例
    • js实现消息滚动效果
    • ES6中module模块化开发实例浅析
    • 微信小程序 实战程序简易新闻的制作

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有