JS共通配列遍歴

最近、フロントエンドコードがcodereviewの时、同僚の配列がmapの方法を使っていることに気づいた.これは私には分からなかった.なぜなら、私はこのような書き方を知らなかったからだ.私は以前J 2 EEを书いて最もよく使うのは普通のfor循环でしょう、短い数年の前にJSはまた多く配列の反復の方法を遍歴しました.すでにforループがある以上、なぜ他の配列遍歴方法が現れるのでしょうか.原因は3時だと思います.性能は普通のforサイクルより効率が高い.2.もっと優雅で、簡単に書く.3:作用シーンが異なる.以上、より効率的で優雅なコードを書くには、よく理解しなければなりません.

一.よく使われる配列の遍歴

1.通常forサイクル

	var txt = ""
	var array = [1,2,3,4,5]
	for(var j=0;j'
	}
	document.getElementById('app').innerHTML = txt

簡単な説明:最も簡単な1種は、使用頻度が最も高い1種で、性能は弱くないが、依然として最適化の空間がある.
2.最適化版forループ

	var txt = ""
	var array = [1,2,3,4,5]
	for(var j=0,len=array.length;j'
	}
	document.getElementById('app').innerHTML = txt

簡単な説明:一時変数を用いて長さをキャッシュし、配列の長さを繰り返し取得することを避け、配列が大きい場合に最適化効果が明らかになる.この方法は基本的にすべての循環遍歴方法の中で最も性能の高いものである.
3.foreachサイクル

	var txt = ""
	var array = [1,2,3,4,5]
	array.forEach(function(element,index){
	   txt = txt + element + '      ' + index + '
'
	});
	document.getElementById('app').innerHTML = txt

簡単な説明:配列が持つ循環は、主な機能は配列を遍歴し、実際の性能はfor循環よりも弱い.forEachこの方法にも小さな欠陥があります.break文を使用してループを中断することはできません.return文を使用して外層関数に戻ることはできません.
4.mapサイクル
4.1戻り値なし

	var txt = ""
	var array = [1,2,3,4,5]
	array.map(function(element,index){
	   txt = txt + element + '      ' + index + '
'
	});
	document.getElementById('app').innerHTML = txt

4.2戻り値あり

	var txt = ""
	var array = [1,2,3,4,5]
	var temp = array.map(function(element,index){
	   return txt = txt + element*2 + '
'
	});
	document.getElementById('app').innerHTML = txt

	var content = ""
	temp.map(function(element,index){
		content =  element
	})
	document.getElementById('app1').innerHTML = content

簡単な説明:mapは“マッピング”の意味の使い方がforEachと似ていて、map遍歴はreturn文を使うことを支持して、returnの戻り値を支持します;mapメソッドは、各配列要素に関数を実行することによって新しい配列を作成します.mapメソッドは値のない配列要素に対して関数を実行しません.mapメソッドは元の配列を変更しません.
5.filterサイクル

	var txt = ""
	var array = [1,2,3,4,5]
	var temp = array.filter(function(element,index){
		if(element%2===0){
			console.log('    ,  2  ')
			return txt = txt + element + '
'
		}
	});
	document.getElementById('app').innerHTML = txt

	var content = ""
	temp.map(function(element,index){
		content =  content + element + '
'
	})
	document.getElementById('app1').innerHTML = content

簡単な説明:条件の要素を濾過して新しい配列を構成し、元の配列は変わらない.
6.for-ofサイクル

	var txt = ""
	var array = [1,2,3,4,5]
	for(element of array){
		txt = txt + element + '
'
	}
	document.getElementById('app').innerHTML = txt

簡単な説明:for-ofこの方法はfor-inサイクルのすべての欠陥を避けた.foreachとは異なり、break、continue、return文に正しく応答できます.for-ofループは配列だけでなく、文字列遍歴もサポートします.

二.補足:オブジェクトの遍歴

1.for-inサイクル

	var txt = ""
	var obj = {"name": "xiaowu","age": 18,"sex": " "}
	for(attribute in obj){
		txt = txt + obj[attribute] + '
'
	}
	document.getElementById('app').innerHTML = txt

簡単な説明:for-inはオブジェクトを遍歴するために設計され、遍歴配列には適用されません.遍歴配列の欠点:配列の下付きindex値は数字であり、for-in遍歴のindex値は「0」、「1」、「2」などは文字列である.