JAvascript配列/オブジェクトの遍歴

2877 ワード

forループループ
 let array1 = ['a','b','c']; 
 for (let i = 0;i < array1.length;i++){  
    console.log(array1[i]); 
 }
 // a  b  c 

foreach()とmap()
Array.forEach(function(value , index , array){ 
//value        ,index     ,array        `
//do something
},this) 
//this       this 
Array.map(function(currentValue,index,arr){
//value        ,index     ,array        `
//do something
}, thisValue)

異なる点: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]           

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 TypedArray
let array2 = ['a','b','c']
for(variable  of array2){ 
//variable    value
console.log(variable )  //'a','b','c'
}
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
 }