系列文章 -- ES6笔记系列

搞ES6的人也是够无聊,把JS弄得越来越像Java、C++,连Iterator迭代器、Set集合、Map结构都出来了,不知道说什么好...

一、简单使用

1. iterator

学过C++的人应该知道这是个迭代器对象,拥有一个指针,指向数据结构中的某个成员

JS中的iterator也有类似的功能,JS内部为一些数据结构实现了iterator迭代器的接口,让我们可以方便的使用

var [a, b, ...c] = [1, 2, 3, 4];

c // [3, 4]

如上,解构赋值以及扩展运算符的便利,多亏了内部实现的默认iterator迭代器接口,可以使用其Symbol.iterator属性获得,如

var arr = [1, 2, 3];

var it = arr[Symbol.iterator]();

it.next() // {done: false, value: 1}
it.next() // {done: false, value: 2}
it.next() // {done: false, value: 3}
it.next() // {done: true, value: undefined}

上述的iterator接口表现形式过于隐秘,在generator生成器函数中,我们可以看看比较显示的iterator接口调用:

function* showNumbers() {
yield 1;
yield 2;
yield 3;
} var show = showNumbers(); show.next(); // {done: false, value: 1}
show.next(); // {done: false, value: 2
show.next(); // {done: true, value: 3}

通过调用next方法,实现iterator迭代器的遍历

可见结果输出是一个对象,该对象拥有done这个迭代器是否遍历完成的状态,以及当前指向项的值

看到这里,结合上述两个例子,应该知道可以通过Symbol.iterator与generator的结合,创建出一个iterator迭代器,比如:

var obj = {};

obj[Symbol.iterator] = function* () {
yield 1;
yield 2;
yield 3;
}; [...obj] // [1, 2, 3]

既然只有done与value两个属性,实现起来应该不是太难,我们可以尝试实现一个基本的iterator

function myIterator(arr) {
var nextIndex = 0; return {
next: function() {
return nextIndex < arr.length
? {
value: arr[nextIndex++],
done: false
}
: {
value: undefined,
done: true
}
}
}
} var it = myIterator(['one', 'two']); it.next() // {done: false, value: "one"}
it.next() // {done: true, value: "two"}
it.next() // {done: true, value: undefined}

2. Set

Set是ES6中新引入的数据结构,它类似于数组,但是成员的值都是唯一的,没有重复的值。

可以通过实例化其构造函数,用来生成Set数据结构,通过.add()方法插入值,通过for...of循环遍历相应值

var s = new Set();

var arr = [1, 2, 2, 3];

arr.forEach(function(item) {
s.add(item);
}); for (var item of s) {
console.log(item) // 1 2 3
}

可见Set自动去除了重复的值,只插入了一个2,由此在去除数组重复值的时候,可以更方便:

var arr = [1, 2, 2, 3];

function unique(arr) {
return [...new Set(arr)];
} unique(arr) // [1, 2, 3]

不过,要注意的是,Set判断是否重复,是使用到了全等===条件,即类型及值完全相等才摈除,不过NaN是例外

var arr = [1, 0, '', 3, false, 3, NaN, NaN];

function unique(arr) {
return [...new Set(arr)];
} unique(arr) // [1, 0, '', 3, false, NaN]

set有一些属性和方法:

  • Set.prototype.constructor:构造函数,默认就是Set函数。
  • Set.prototype.size:返回Set实例的成员总数。
  • add(value):添加某个值,返回Set结构本身。
  • delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
  • has(value):返回一个布尔值,表示该值是否为Set的成员。
  • clear():清除所有成员,没有返回值。
var s = new Set();

s.add(1).add(2).add(2);

s.size //

s.has(1) // true
s.has(2) // true
s.has(3) // false s.delete(2);
s.has(2) // false s.clear()
s.has(1) // false

set的一些遍历操作:

  • keys():返回键名的遍历器
  • values():返回键值的遍历器
  • entries():返回键值对的遍历器
  • forEach():使用回调函数遍历每个成员

keys()、values()、entries()的使用

let set = new Set(['red', 'green', 'blue']);

for (let item of set.keys()) {
console.log(item);
}
// red
// green
// blue for (let item of set.values()) {
console.log(item);
}
// red
// green
// blue for (let item of set.entries()) {
console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]

forEach的使用

let set = new Set([1, 2, 3]);
set.forEach((value, key) => console.log(value * 2) )
//
//
//

set与数组的转换

数组转换成set结构只需要将数组加入到set构造函数参数中实例化即可

set集合转换成数组,可简单的使用扩展运算符...,也可使用Array.from()的新方法

var items = new Set([1, 2, 3, 4, 5]);
var array1 = Array.from(items); var array2 = [...items] array1 // [1, 2, 3, 4, 5]
array2 // [1, 2, 3, 4, 5]

3. Map

Map也是ES6中新引入的数据结构,它类似于Hash结构,属于键=>值对的结构,每一项值可用key=>value来表示

通过实例化构造函数生成一个map对象,再通过.set方法设置相关项的键值对,通过.get方法获取相应的键值对

var m = new Map();
var obj = {str: 'str'}; m.set(obj, 'content');
m.get(obj) // "content"

也可以直接在构造函数中加入一个数组参数,直接实例化出map对象

var map = new Map([
['name', '张三'],
['title', 'Author']
]); map.size //
map.has('name') // true
map.get('name') // '张三''
map.has('title') // true
map.get('title') // 'Author'

类似Set,Map也有一些常见的属性和方法

  • size属性 返回Map结构的成员总数。
  • set(key, value) 设置key所对应的键值,然后返回整个Map结构。如果key已经有值,则键值会被更新,否则就新生成该键
  • get(key) 读取key对应的键值,如果找不到key,返回undefined
  • has(key) 返回一个布尔值,表示某个键是否在Map数据结构中
  • delete(key) 删除某个键,返回true。如果删除失败,返回false
  • clear() 清除所有成员,没有返回值。

类似Set,Map也有一些常见的遍历方法

  • keys():返回键名的遍历器。
  • values():返回键值的遍历器。
  • entries():返回所有成员的遍历器。
  • forEach():遍历Map的所有成员
let map = new Map([
['F', 'no'],
['T', 'yes'],
]); for (let key of map.keys()) {
console.log(key);
}
// "F"
// "T" for (let value of map.values()) {
console.log(value);
}
// "no"
// "yes" for (let item of map.entries()) {
console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes" // 或者
for (let [key, value] of map.entries()) {
console.log(key, value);
} // 等同于使用map.entries()
for (let [key, value] of map) {
console.log(key, value);
}

Map与数组的转换

与Set一样,Map和数组直接也可以相互转换

使用扩展运算符...可以将Map转换为数组

let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
[...myMap]
// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]

实例化Map构造函数时传入参数可将数组转换为Map对象

new Map([[true, 7], [{foo: 3}, ['abc']]])
// Map {true => 7, Object {foo: 3} => ['abc']}

4. WeakSet

...

5. WeakMap

...

后记:

ES6的内容实在是太多了,打算阅读相关新特性文档后做个笔记,蓦然发现经常会不耐烦

文章不知从何写起,不知如何布局文章内容结构,写完之后又觉得不够全面或者理解还未到位,每每想不再继续

写到这篇set和map,已经没啥耐心写下去了

还是好好看看其他人的总结吧,全面许多

ES6笔记(6)-- Set、Map结构和Iterator迭代器的更多相关文章

  1. ES6笔记03-Set和Map数据结构

    ES6提供了新的数据结构Set.它类似于数组,但是成员的值都是唯一的,没有重复的值.Set本身是一个构造函数,用来生成Set数据结构. var s = new Set(); [2, 3, 5, 4, ...

  2. ES6笔记系列

    ES6,即ECMAScript 6.0,ES6的第一个版本是在2015年发布的,所以又称作ECMAScript 2015 如今距ES6发布已经一年多的时间,这时候才去学,作为一个JSer,羞愧羞愧,还 ...

  3. ES6的新特性(14)——Iterator 和 for...of 循环

    Iterator 和 for...of 循环 Iterator(遍历器)的概念 JavaScript 原有的表示“集合”的数据结构,主要是数组(Array)和对象(Object),ES6 又添加了Ma ...

  4. es6笔记5^_^set、map、iterator

    一.set 1.基本用法 数据结构Set类似于数组,但是成员的值都是唯一的,没有重复的值. let s = new Set(); [2,3,5,4,5,2,2].map(x => s.add(x ...

  5. es6学习笔记-set和map数据结构

    ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. const s = new Set(); [2, 3 ...

  6. ES6学习:Map结构的目的和基本用法

    Map结构的目的和基本用法 JavaScript的对象(Object)本质上是键值对的集合(Hash结构),但是只能用字符串作为键.这给它的使用带来了很大的限制.   1 2 3 4 5 6 7 8 ...

  7. js-ES6学习笔记-Set结构和Map结构

    http://www.cnblogs.com/lonhon/ 1.ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set ...

  8. JavaScript(ES6)学习笔记-Set和Map数据结构(一)

    一.Set 1.ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. , , , , ']); s; // ...

  9. es6笔记(6) Iterator 和 for...of循环

    概要 js中的数组.对象,加上ES6中增加的Map.Set四种数据集合. Iterator提供了一种机制,为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署Iterator接口,就可以完成遍 ...

随机推荐

  1. Oracle中的Temporary tablespace的作用

    临时表空间主要用途是在数据库进行排序运算[如创建索引.order by及group by.distinct.union/intersect/minus/.sort-merge及join.analyze ...

  2. 每周一书-《Bootstrap基础教程》

    首先说明,本周活动有效时间为8月15日到21日.本周为大家送出的书是有电子工业出版,贺臣/陈鹏编著的<Bootsrap基础教程>,为前端入门必读书籍. 下面是从书中摘录的内容. “ Boo ...

  3. 使用Location对象查询字符串参数

    location是BOM中最有用的对象之一: 1.它提供了与当前窗口中加载的文档有关的信息: 2.他还提供了一些导航功能. location对象的属性有: hash, host, hostname, ...

  4. 更改Photoshop 语言为英语(无需语言包)

    因为有时看国外教程时,手头上的PS是中文的而教程里的界面是英文的,而且中英菜单顺序在某些地方是不一样的,所以很不方便. 终于找到一个非常完美的方法可以把界面换成英文,而且不需任何语言包. 并且试了在最 ...

  5. 翻译-DevOps究竟是什么?

    原文地址:http://www.drdobbs.com/architecture-and-design/what-exactly-is-devops/240009147 作者:Neil Garnich ...

  6. 青蛙的约会 java版

    参考http://blog.csdn.net/polossk/article/details/9799735 package acm; public class FrogDate { public s ...

  7. Node.js入门:异步IO

    异步IO     在操作系统中,程序运行的空间分为内核空间和用户空间.我们常常提起的异步I/O,其实质是用户空间中的程序不用依赖内核空间中的I/O操作实际完成,即可进行后续任务. 同步IO的并行模式 ...

  8. [Redis]Redis 概述及基本使用规范.

    1 nosql的简介 1.1 nosql简介 随着互联网Web2.0网站的兴起,传统的关系数据库在应付Web2.0网站,特别是超大规模和高并发的SNS类型的Web2.0纯动态网站已经显得力不从心,暴露 ...

  9. Atian inputmethod 输入法解决方案 方言与多语言多文字支持 英语汉字汉语阿拉伯文的支持 (au

    Atian inputmethod 输入法解决方案 方言与多语言多文字支持 英语汉字汉语阿拉伯文的支持 (au 1.1. Overview概论 支持母语优先的战略性产品,主要是针对不想以及不愿使用普通 ...

  10. WPF仿Win7便笺

    最近用WPF写了个仿WIN7下面的便笺小工具,还算是比较华丽的,相似度99%以上吧,在集成了便笺原有的功能以外,当然也做了略微的修改,比如加了关于作者版本信息和修改了原有删除便笺的系统弹出框.软件开机 ...