ES6教程之for循环和Map,Set用法分析

本文实例讲述了ES6教程之for循环和Map,Set用法。分享给大家供大家参考，具体如下：

现在大家先想一想，如果要你遍历一个数组的元素，你会选择如何去做呢？一般都会想起for循环：

for (var index = 0; index < myArray.length; index++) {
 console.log(myArray[index]);
}

可惜我得告诉你，这个方法是二十年的人才应该使用的方法，在ES5中已经提出了更为简便的forEach方法，代码如下：

myArray.forEach(function (value) {
 console.log(value);
});

虽然forEach方法简短一点，但是它也有它的缺点，就是不能够break来中途退出循环，也不能通过return来退出循环。

那么不是还有for-in方法吗：

for (var index in myArray) {
 console.log(myArray[index]);
}

可是for-in方法实际上是为存储key的键值对型对象准备的，而不是为数组准备的，它的下标为字符串“1”，“2”……相信大家都知道“1”+“2”会怎么样吧？

for-of循环

ES6为了不影响以前的代码，为了满足很多人已经养成的习惯，只能推出一种新的循环语法for-of：

for (var value of myArray) {
 console.log(value);
}

对比for-in和for-of：

var a = ["a","b","c","d","e"];
for (var idx in a) {
  console.log( idx );
  }// 0 1 2 3 4
for (var val of a) {
  console.log( val );
  }// "a" "b" "c" "d" "e"

for-of不仅仅可以用于数组，还可以用在dom对象上，同样作用于Map和Set对象。

下面介绍一下Map和Set对象

Map,Set

JavaScript的默认对象表示方式是{}，但是JavaScript的对象有个小问题，就是键必须是字符串。但实际上Number或者其他数据类型作为键也是非常合理的。

为了解决这个问题，最新的ES6规范引入了新的数据类型Map。

Map是具有极快查找速度的键值对结构。

我们看看Map的使用示例：

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined

上面的has方法比indexOf速度快。

Set和Map类似，也是存在key的列表，只不过Set中的元素不能够重复。

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}

可以看到，再次添加的重复数据会被过滤掉。

那么这两种对象的运用场景有哪些呢？

Map可以用来存储键值对，比如姓名和年龄，而Set可以用来存储不能重复的目标，比如学号列表。

for-of用于对象

好啦，介绍完了两种类型的新对象，让我们看看for-of如何作用于Set对象上的：

var uniqueWords = new Set(words);
for (var word of uniqueWords) {
 console.log(word);
}

遍历Map对象则不同，因为Map是以键值对存储的，所以我们需要分开两个单独的变量来遍历：

for (var [key, value] of phoneBookMap) {
 console.log(key + "'s phone number is: " + value);
}

但是需要注意一点。for-of并不是用来遍历普通的对象的属性的，如果我们一定要这么做，可以使用for-in或者如下方法：

for (var key of Object.keys(someObject)) {
 console.log(key + ": " + someObject[key]);
}

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

赞 (0)

相关推荐

  • ES6学习笔记之Set和Map数据结构详解

    本文实例讲述了ES6学习笔记之Set和Map数据结构.分享给大家供大家参考,具体如下: 一.Set ES6提供了新的数据结构Set.类似于数组,只不过其成员值都是唯一的,没有重复的值. Set本身是一个构造函数,用来生成Set数据结构. 1 . Set函数可以接受一个数组(或类似数组的对象)作为参数,用来初始化. var s = new Set(); var set = new Set([1, 2, 3, 4, 4]); [...set] // [1, 2, 3, 4] var items =

  • JS ES6中setTimeout函数的执行上下文示例

    本文介绍的是setTimeout函数,延迟执行函数里的执行上下文,分享给大家供大家参考学习,来看看详细的内容: (1)ES5中,setTimeout里面的函数的执行上下文为全局上下文,举例来说: function log(){ setTimeout(function(){console.log(this.id)},100) } var id=42 log.call({id:21}) //输出的结果为42 我们可以看到setTimeout,被延迟执行的函数,里面的this,指向的是全局作用域,也就

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

    本文实例讲述了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:构造函数

  • ES6新增数据结构WeakSet的用法详解

    WeakSet和Set类似,同样是元素不重复的集合,它们的区别是WeakSet内的元素必须是对象,不能是其它类型. 特性: 1.元素必须是对象. 添加一个number类型的元素. const ws = new WeakSet() ws.add(1) 结果是报类型错误. TypeError: Invalid value used in weak set 添加一个对象. const ws = new WeakSet() var a = {p1:'1', p2:'2'} ws.add(a) conso

  • ES6使用Set数据结构实现数组的交集、并集、差集功能示例

    本文实例讲述了ES6使用Set数据结构实现数组的交集.并集.差集功能.分享给大家供大家参考,具体如下: Set数据结构是es6中新增的,它类似于数组,但是成员的值唯一,没有重复值. Set本身是一个数据结构,用来生成Set数据节后 Set数据结构的实例有4种遍历方法: keys():返回一个键名的遍历器 values():返回一个键值便利器 entries():返回一个键值对便利器 forEach():使用回调函数遍历每个成员 由于Set数据结构没有键名,只有键值(或者说键名和键值是同一个值),

  • Javascript ES6中对象类型Sets的介绍与使用详解

    介绍 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. Sets 是ES6(ES2015)中一个新的对象类型,用来创建一系列唯一值的集合.集合中的值可以是简单的原始类型如字符串(strings)或整数(integers),也可以是更复杂的对象类型如对象字面量或者数组. 基本方法 下面是基本的set及其方法(add, size, has, forEach, delete, clear

  • ES6中如何使用Set和WeakSet

    ES6中提供了两新数据结构-Set和WeakSet.Set是类似于数组,但是成员变量的值都是唯一的,没有重复的值.WeakSet也是不重复的值的集合,但是只能用来存放对象. 一.Set使用 (1)Set本身提供了一个构造函数,用来生成Set数据结构. var s = new Set(); [2,2,2,5,8,16,2,1].map(x => s.add(x)) for(i of s){console.log(i)} //2,5,8,16,1 (2)Set()函数可以接受一个数组,作为构造参数,

  • ES6 javascript中class类的get与set用法实例分析

    本文实例讲述了ES6 javascript中class类的get与set用法.分享给大家供大家参考,具体如下: 与 ES5 一样, 在 Class 内部可以使用get和set关键字, 对某个属性设置存值函数和取值函数, 拦截该属性的存取行为. class MyClass { constructor() { // ... } get prop() { return 'getter'; } set prop(value) { console.log('setter: ' + value); } }

  • ES6新数据结构Set与WeakSet用法分析

    本文实例讲述了ES6新数据结构Set与WeakSet用法.分享给大家供大家参考,具体如下: 新数据结构Set与WeakSet 1. Set Set类似于数据,但是成员值都是唯一的.生成Set的方式如下. var s = new Set(); [1,1,3,3,5,5].map( x => s.add(x) ); console.log(s); //Set {1, 3, 5} 没有重复值哟,如果面试官再让你编写数组去重的函数是不是简单多了.或者你可以这样写. var set = new Set(

  • ES6教程之for循环和Map,Set用法分析

    本文实例讲述了ES6教程之for循环和Map,Set用法.分享给大家供大家参考,具体如下: 现在大家先想一想,如果要你遍历一个数组的元素,你会选择如何去做呢?一般都会想起for循环: for (var index = 0; index < myArray.length; index++) { console.log(myArray[index]); } 可惜我得告诉你,这个方法是二十年的人才应该使用的方法,在ES5中已经提出了更为简便的forEach方法,代码如下: myArray.forEac

  • python基础教程之while循环

    前言 今天来说下python中的循环.循环的意思是什么,以环形.回路或轨道运行;沿曲折的路线运行;特指运行一周而回到原处.这是百度给出的循环的意思.在python中,就是重复执行你给的指令,直至结束.我们现在看下,在python中,循环就是:while:它有它的规则结构,就是while + 条件(冒号,这个别忘记了.): 意思是,当条件不成立时,不循环.举个例子说明一下: 我们先来说下这个例子的意思,首先,while+条件: 这个已经带入到了代码中,这个代码的意思是当循环10次1的时候 ,跳出循

  • ES6(ECMAScript 6)新特性之模板字符串用法分析

    本文实例讲述了ES6(ECMAScript 6)新特性之模板字符串用法.分享给大家供大家参考,具体如下: ES6引入了一种新型的字符串字面量语法,我们称之为模板字符串(template strings).除了使用反撇号字符 ` 代替普通字符串的引号 ' 或 " 外,它们看起来与普通字符串并无二致.在最简单的情况下,它们与普通字符串的表现一致: context.fillText(`Ceci n'est pas une cha?ne.`, x, y); 但我们不能说:"原来只是被反撇号括起

  • GO语言映射（Map）用法分析

    本文实例讲述了GO语言映射(Map)用法.分享给大家供大家参考.具体如下: 映射是一种内置的数据结构,用来保存键值对的无序集合. (1)映射的创建 make ( map [KeyType] ValueType, initialCapacity ) make ( map [KeyType] ValueType ) map [KeyType ] ValueType {} map [KeyType ] ValueType { key1 : value1, key2: value2, ... , key

  • C#多线程之Thread中Thread.Join()函数用法分析

    本文实例讲述了C#多线程之Thread中Thread.Join()函数用法.分享给大家供大家参考.具体分析如下: Thread.Join()在MSDN中的解释:Blocks the calling thread until a thread terminates 当NewThread调用Join方法的时候,MainThread就被停止执行, 直到NewThread线程执行完毕. Thread oThread = new Thread(new ThreadStart(oAlpha.Beta));

  • C#多线程之Thread中Thread.IsAlive属性用法分析

    本文实例讲述了C#多线程之Thread中Thread.IsAlive属性用法.分享给大家供大家参考.具体如下: Thread.IsAlive属性 ,表示该线程当前是否为可用状态 如果线程已经启动,并且当前没有任何异常的话,则是true,否则为false Start()后,线程不一定能马上启动起来,也许CPU正在忙其他的事情,但迟早是会启动起来的! Thread oThread = new Thread(new ThreadStart(Back.Start)); oThread.Start();

  • C语言菜鸟基础教程之for循环

    C语言菜鸟基础教程之for循环

    先看程序: #include <stdio.h> int main() { for(int i = 0; i < 5; i++) { printf("i = %d\n", i); } printf("Loop ended!\n"); return 0; } 运行结果: i = 0 i = 1 i = 2 i = 3 i = 4 Loop ended! for循环的语句结构为: for(表达式1; 表达式2; 表达式3) {     语句; } 其执

  • Javascript基础教程之for循环

    如果您希望一遍又一遍地运行相同的代码,并且每次的值都不同,那么使用循环是很方便的. 复制代码 代码如下: document.write(cars[0] + "<br>"); document.write(cars[1] + "<br>"); document.write(cars[2] + "<br>"); document.write(cars[3] + "<br>"); do

  • Java for循环的几种用法分析

    J2SE 1.5提供了另一种形式的for循环.借助这种形式的for循环,可以用更简单地方式来遍历数组和Collection等类型的对象.本文介绍使用这种循环的具体方式,说明如何自行定义能被这样遍历的类,并解释和这一机制的一些常见问题. 在Java程序中,要"逐一处理"――或者说,"遍历"――某一个数组或Collection中的元素的时候,一般会使用一个for循环来实现(当然,用其它种类的循环也不是不可以,只是不知道是因为for这个词的长度比较短,还是因为for这个词

  • WordPress中查询文章的循环Loop结构及用法分析

    WordPress 上获取文章最重要的就是循环(Loop),事实上循环就是去数据库查询到相应的文章,然后暂时储存到全局变量里边,需要的时候一篇一篇的输出出来,WordPress 的循环设计的非常好,完成一次循环需要执行 2000 多行代码,而你在使用循环的时候看到的只是一个简单 while 循环加上几个函数,初学者也很好理解. <?php if( have_posts() ): while( have_posts() ): the_post(); endwhile; endif; ?> 上边就

随机推荐