JavaScriptオブジェクトの遍歴-まとめ

オリジナルJavaScript遍歴
1、forループ

1 let array1 = ['a','b','c'];
2 
3 for (let i = 0;i < array1.length;i++){
4   console.log(array1[i]);  // a  b  c 
5 }

2、JavaScriptはforeach()map()の2つのArrayオブジェクトを遍歴する方法を提供する
forEachはmapと同様に、配列の各要素に遍歴することができ、パラメータが一致しています.  　

Array.forEach(function(value , index , array){ //value        ，index     ，array        
  //do something
},thisArg)      //thisArg       this 

相違点:
forEach()メソッドは、配列の各要素に対して1回の関数を実行します.常にundefinedを返します.
map()メソッドは、新しい配列を作成します.その結果、その配列の各要素が提供された関数を呼び出した後に返される結果です.戻り値は新しい配列です.
例は次のとおりです.

    var array1 = [1,2,3,4,5];

    var x = array1.forEach(function(value,index){

        console.log(value);   //          

        return value + 10
    });
    console.log(x);   //undefined        ，   undefined

    var y = array1.map(function(value,index){

        console.log(value);   //          

        return value + 10
    });
    console.log(y);   //[11, 12, 13, 14, 15]           

　　
類似配列の構造では、まず配列に変換してから遍歴することができます.
　　

let divList = document.querySelectorAll('div');   //divList    ，  nodeList

//        
[].slice.call(divList).forEach(function(element,index){
  element.classList.add('test')
})


Array.prototype.slice.call(divList).forEach(function(element,index){
  element.classList.remove('test')
})

[...divList].forEach(function(element,index){   //ES6  
  //do something
})

 
　　3、 for ··· in ···    /      for ··· of ··· for...in文は、1つのオブジェクトの列挙可能な属性を任意の順序で巡回する.文は、異なるプロパティごとに実行されます.反復するたびに、属性名が割り当てられます.
補足:反復の順序は実行環境に依存するため、配列遍歴は必ずしも要素に順番にアクセスする必要はありません.したがって、アクセス順序の重要なarraysが反復されると、forサイクルが整数インデックスで実行される(または、Array.prototype.forEach()またはfor...ofサイクルが使用される).

let array2 = ['a','b','c']
let obj1 = {
  name : 'lei',
  age : '16'
}

for(variable  in array2){   //variable    index
  console.log(variable )   //0 1 2
}

for(variable  in obj1){   //variable     
  console.log(variable)   //name age
}

　　
ES 6は、異なるデータ構造に統一的なアクセスメカニズムを提供する遍歴器(Iterator)メカニズムを追加した.Iteratorが配備されているデータ構造であれば、for・・・of・・を使用して遍歴操作を完了できます(Iterator詳細:http://es6.ruanyifeng.com/#docs/iterator)、反復ごとに属性値が割り当てられます.
元のIteratorインタフェースを備えたデータ構造は以下の通りである.
Array Map Set String Type-dArray関数のargumentsオブジェクトNodeListオブジェクト

let array2 = ['a','b','c']
let obj1 = {
  name : 'lei',
  age : '16'
}

for(variable  of array2){   //variable    value
  console.log(variable )   //'a','b','c'
}

for(variable  of obj1){  //         
  console.log(variable)   //    ： main.js:11Uncaught TypeError: obj1[Symbol.iterator] is not a function
}

let divList = document.querySelectorAll('div');

for(element of divlist){  //      div  
　　//do something 
}

一般オブジェクトをfor ofで遍歴させるにはどうすればいいですか?  http://es6.ruanyifeng.com/#docs/iterator一書に詳しく説明されています!
 
反復時に割り当てられる属性名と属性値に加えて、for inとfor ofには他の違いがあります(MDNドキュメント:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of)
　　　　for...Inループは、objectのすべての列挙可能な属性を巡回します.
　　　   for...of iteratorインタフェースを持つデータ構造を巡るfor...in(現在のオブジェクトとそのプロトタイプの)各プロパティ名を巡回し、for...of （ ） 　　

Object.prototype.objCustom = function () {}; 
Array.prototype.arrCustom = function () {};

let iterable = [3, 5, 7];
iterable.foo = "hello";

for (let i in iterable) {
  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i of iterable) {
  console.log(i); // logs 3, 5, 7
}

 
　　　　
　　
転載先:https://www.cnblogs.com/shapeY/p/7600460.html