详谈js遍历集合(Array,Map,Set)

Array可以使用下标，Map和Set不能使用下标，ES6引入了iterable类型，Array,Map,Set都属于iterable类型，它们可以使用for...of循环来遍历：

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Array
  alert(x);
}
for (var x of s) { // 遍历Set
  alert(x);
}
for (var x of m) { // 遍历Map
  alert(x[0] + '=' + x[1]);
}

>for...of与for...in的区别：for ... in循环由于历史遗留问题，它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象，它的每个元素的索引被视为一个属性。

当我们手动给Array对象添加了额外的属性后，for ... in循环将带来意想不到的意外效果：

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
  alert(x); // '0', '1', '2', 'name'
}

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x of a) {
  alert(x); // 'A', 'B', 'C'
}

>更好的方式：iterable内置的forEach方法：

var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
  // element: 指向当前元素的值
  // index: 指向当前索引
  // array: 指向Array对象本身
  alert(element);//'A','B','C'
});

var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
  alert("参数1="+element+",参数2="+sameElement);
});
//参数1=A,参数2=A
//参数1=B,参数2=B
//参数1=C,参数2=C

var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
  alert("参数1="+value+",参数2="+key);
});
//参数1=x,参数2=1
//参数1=y,参数2=2
//参数1=z,参数2=3

以上这篇详谈js遍历集合(Array,Map,Set)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解Java中list,set,map的遍历与增强for循环

    详解Java中list,set,map的遍历与增强for循环 Java集合类可分为三大块,分别是从Collection接口延伸出的List.Set和以键值对形式作存储的Map类型集合. 关于增强for循环,需要注意的是,使用增强for循环无法访问数组下标值,对于集合的遍历其内部采用的也是Iterator的相关方法.如果只做简单遍历读取,增强for循环确实减轻不少的代码量. 集合概念: 1.作用:用于存放对象 2.相当于一个容器,里面包含着一组对象,其中的每个对象作为集合的一个元素出现 3.jav

  • Map集合的四种遍历方式代码示例

    很久以前写的代码,和上一个做比较吧!便于以后查看. import java.util.HashMap; import java.util.Iterator; import java.util.Map; public class TestMap { public static void main(String[] args) { Map<Integer, String> map = new HashMap<Integer, String>(); map.put(1, "a&

  • jstl之map,list访问遍历以及el表达式map取值的实现

    场景: request域里的数据为Map<Role, Map<String, List<Menu>>>,Role为枚举类型,为用户的Role那么访问遍历如下: <c:set var="user" value="${session_usr_key}" /> <c:forEach items="${roleMenuMap[user.role]}" var="entry">

  • vector, list, map在遍历时删除符合条件的元素实现方法

    直接看源码,内有详细解释 /* 测试vector, list, map遍历时删除符合条件的元素 本代码测试环境: ubuntu12 + win7_x64 */ #include <iostream> #include <vector> #include <list> #include <map> #include <iterator> using namespace std; void Remove1(vector<int> &

  • Java遍历Map键、值和获取Map大小的方法示例

    Map读取键值对,Java遍历Map的两种实现方法 第一种方法是根据map的keyset()方法来获取key的set集合,然后遍历map取得value的值 import java.util.HashMap; import java.util.Iterator; import java.util.Set; public class HashMapTest2 { public static void main(String[] args) { HashMap map = new HashMap();

  • Go语言字典(map)用法实例分析【创建,填充,遍历,查找,修改,删除】

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

  • 详谈js遍历集合(Array,Map,Set)

    Array可以使用下标,Map和Set不能使用下标,ES6引入了iterable类型,Array,Map,Set都属于iterable类型,它们可以使用for...of循环来遍历: var a = ['A', 'B', 'C']; var s = new Set(['A', 'B', 'C']); var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]); for (var x of a) { // 遍历Array alert(x); } for (var

  • 详谈js中数组(array)和对象(object)的区别

    •object 类型: ◦ 创建方式: /*new 操作符后面Object构造函数*/ var person = new Object(); person.name = "lpove"; person.age = 21; /*或者用对象字面量的方法*/ var person = { name: "lpove"; age : 21; } •array类型 ◦ 创建方式: `var colors = new Array("red","blu

  • js遍历map javaScript遍历map的简单实现

    js遍历map javaScript遍历map的简单实现 var map = { "name" : "华仔", "realname":"刘德华" }; for (var key in map) { console.log("map["+key+"]"+map[key]); } 这样会把map给遍历掉,显示在浏览器上的控制器里. 以上这篇js遍历map javaScript遍历map的简单

  • Js遍历键值对形式对象或Map形式的方法

    最近在项目中使用ajax返回的是一个map对象,怎么遍历这个map对象?去网上查了好多,真正有用很少,终于让我想起自己以前一个需要遍历key=Value形式的对象,想了想这种方式,应该也对于map适用吧.所以试了下,成功了!记录下来以备后用. 在JS中如何遍历key=value键值对,对象的数据(也可以是map形式). for ( var key in changes) { //通过遍历对象属性的方法,遍历键值对,获得key,然后通过 对象[key]获得对应的值 name = key; valu

  • js遍历详解(forEach, map, for, for...in, for...of)

    forEach es5出来的方法,这是我在react中用的最多的遍历方法之一,用法如下: models.forEach(model => app.model(model)); dva里面经常这么写. 写法很简单,经常用于通过这个数组内的数据创造新的结构,但是forEach的问题在于它不能跳出循环. map 也是用的最多的方法之一,用法如下 {data.map(d => ( <div className="balance-row"> <div classNa

  • 详谈JS中数组的迭代方法和归并方法

    数组的迭代方法 ES5中为数组定义了5个迭代方法.每个方法都要接收两个参数:要在每一项上面运行的函数和(可选的)运行该函数的作用域对象---影响this的值. 传入方法中的函数会介绍三个参数:1.数组项的值 2. 该项在数组的中位值 3. 数组对象本身: every()和some()方法 every():对数组中的每一项运行给定函数,如果每一项都返回true,则返回true,否则false: some():对数组中的每一项运行给定函数,如果至少有一项返回true,则返回true,否则false:

  • js 自带的 map() 方法全面了解

    1. 方法概述 map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组. 2. 例子 2.1 在字符串中使用map 在一个 String  上使用 map 方法获取字符串中每个字符所对应的 ASCII 码组成的数组: var map = Array.prototype.map var a = map.call("Hello World", function(x) { return x.charCodeAt(0); }) // a的值为[72, 101, 10

  • 详谈js中标准for循环与foreach(for in)的区别

    js中遍历数组的有两种方式 var array=['a'] //标准的for循环 for(var i=1;i<array.length;i++){ alert(array[i]) } //foreach循环 for(var i in array){ alert(array[i]) } 正常情况下上面两种遍历数组的方式结果一样.首先说两者的第一个区别 标准的for循环中的i是number类型,表示的是数组的下标,但是foreach循环中的i表示的是数组的key是string类型,因为js中一切皆为

  • JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】

    JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】

    本文实例讲述了JS实现集合的交集.补集.差集.去重运算.分享给大家供大家参考,具体如下: ES5写法: ///集合取交集 Array.intersect = function () { var result = new Array(); var obj = {}; for (var i = 0; i < arguments.length; i++) { for (var j = 0; j < arguments[i].length; j++) { var str = arguments[i][

  • 你应该了解的JavaScript Array.map()五种用途小结

    前言 从经典的 for 循环到 forEach() 方法,用于迭代数据集合的各种技术和方法比比皆是.但是现在比较流行的方法是 .map() 方法. .map() 通过指定函数调用一个数组中每一项元素,来创建一个新数组. .map() 是一种 non-mutating(非变异) 方法,它创建一个新数组,而不是只对调用数组进行更改的 mutating(变异) 方法.这可能很难记住. 语法: array.map(function(currentValue,index,arr), thisValue)

随机推荐