1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < meta charset ="utf-8 ">
5+ </ head >
6+ < body >
7+ < script type ="text/javascript ">
8+ // Array可以使用下标，Map和Set不能使用下标，ES6引入了iterable类型，Array,Map,Set都属于iterable类型，它们可以使用for...of循环来遍历：
9+ var a = [ 'A' , 'B' , 'C' ] ;
10+ var s = new Set ( [ 'A' , 'B' , 'C' ] ) ;
11+ var m = new Map ( [ [ 1 , 'x' ] , [ 2 , 'y' ] , [ 3 , 'z' ] ] ) ;
12+ for ( var x of a ) { // 遍历Array
13+ console . log ( x ) ;
14+ }
15+ for ( var x of s ) { // 遍历Set
16+ console . log ( x ) ;
17+ }
18+ for ( var x of m ) { // 遍历Map
19+ console . log ( x [ 0 ] + '=' + x [ 1 ] ) ;
20+ }
21+
22+ // 【 for...of 与 for...in 的区别 】
23+ // for ... in循环由于历史遗留问题，它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象，它的每个元素的索引被视为一个属性。当手动给Array对象添加了额外的属性后，for ... in 循环将带来意想不到的意外效果
24+ var a = [ 'A' , 'B' , 'C' ] ;
25+ a . name = 'Hello' ;
26+ for ( var x in a ) {
27+ console . log ( x ) ; // '0', '1', '2', 'name'
28+ }
29+
30+ var a = [ 'A' , 'B' , 'C' ] ;
31+ a . name = 'Hello' ;
32+ for ( var x of a ) {
33+ console . log ( x ) ; // 'A', 'B', 'C'
34+ }
35+
36+ // 更好的方式：iterable内置的forEach方法：
37+ var a = [ 'A' , 'B' , 'C' ] ;
38+ a . name = 'Hello' ;
39+ a . forEach ( function ( element , index , array ) {
40+ // element: 指向当前元素的值
41+ // index: 指向当前索引
42+ // array: 指向Array对象本身
43+ console . log ( element ) ; //'A','B','C'
44+ } ) ;
45+
46+ var s = new Set ( [ 'A' , 'B' , 'C' ] ) ;
47+ s . forEach ( function ( element , sameElement , set ) {
48+ console . log ( "参数1=" + element + ",参数2=" + sameElement ) ;
49+ } ) ;
50+ //参数1=A,参数2=A
51+ //参数1=B,参数2=B
52+ //参数1=C,参数2=C
53+
54+ var m = new Map ( [ [ 1 , 'x' ] , [ 2 , 'y' ] , [ 3 , 'z' ] ] ) ;
55+ m . forEach ( function ( value , key , map ) {
56+ console . log ( "参数1=" + value + ",参数2=" + key ) ;
57+ } ) ;
58+ //参数1=x,参数2=1
59+ //参数1=y,参数2=2
60+ //参数1=z,参数2=3
61+
62+ </ script >
63+ </ body >
0 commit comments