比較javascript配列トラバーサル方法

序文

、これらのシーンで異なるリサイクル方法を使用して起動し、高速実行、下に比較することは、開発の種々貫通JavaScriptのループの方法は、異なるトラバーサル方法のアレイを開発しました。

配列トラバーサルの様々な方法

`for` 声明

コード：

var arr = [1,2,4,6] for(var i = 0, len = arr.length; i < len; i++){ console.log(arr[i]) } 复制代码

これは、文の文言のための標準的なサイクルは、最も伝統的ですが、また、サポート、文字列、私がアクセスの場所を追跡するための指標として定義された変数、lenが配列の長さで、条件は私がlen超えることができないということです。

`forEach` 声明

forEachCALLBACK設けられ、アレイのforeach方法は、配列の各要素に関数を適用するために使用することができるされると、関数法は、配列の各要素に対して行われるforEachコールバック関数の実装のためには、各アレイ素子アレイでのみ使用可能です。配列の各要素は、一つのことを行うにように、それらは、（等、Deleteメソッドを使用して）削除または初期化されていないアイテムがスキップされる。アレイを横断する（例えば、スパースアレイ）（ただし、値のこれらの項目を除く不定） ;マップとは異なり、（）または（減らす）、それは常に未定義値を返し、チェーンを呼び出すことはできません。典型的なユースケースは、エフェクトの連鎖の最後に行われます。

コード：

var arr = [1,5,8,9] arr.forEach(function(item) { console.log(item); }) 复制代码

`for-in` 声明

一般的に使用しfor-in、オブジェクトのプロパティを横断するが、プロパティが必要enumerableに読み取ることが。for-inループのみ列挙属性を横断することができます。一般名とも横断することができるプロトタイプチェーンのそれ以上の非整数継承プロパティのタイプを含むオブジェクトをトラバースするために使用されます。アレイと非可算のObject.prototypeとString.prototypeからプロパティを継承ビルトイン作成したオブジェクトを使用して、オブジェクトのコンストラクタのように横断することはできません。

コード：

var obj = {
    name: 'test',
    color: 'red', day: 'sunday', number: 5 } for (var key in obj) { console.log(obj[key]) } 复制代码

`for-of` ステートメント（ES 6）

for-of繰り返し文では（アレイ、地図、セット、文字列を含むオブジェクトを作成 TypedArray、引数のカスタム反復フックを呼び出し、ループの繰り返しオブジェクトなど）、および文の値は、それぞれ異なる属性のために実行されます。長い反復可能なオブジェクトとして、あなたはBYができるようにfor-of反復。

コード：

var arr = [{name:'bb'},5,'test'] for (item of arr) { console.log(item) } 复制代码

`for-of`そして、`for-in`の間の差

for-in原稿挿入オーダー列挙プロパティに繰り返し文オブジェクト。for-in再びチェーンを横断するオブジェクトのプロパティを継承します、それはより多くの時間がかかります。

for-of データのみオブジェクトを介して繰り返し文をすることができます。

その他のリサイクル方法

`map` （元の配列を変更せずに）方法

mapメソッドは、コールバック関数を呼び出すために、アレイ内の各要素のオリジナルを与えます。新しいアレイを形成するために結合（未定義を含む）実行後の各コールバックの戻り値。コールバック関数は、指数に呼び出される値を有し、インデックスを削除するには、delete値または使用を割り当てられたことがなかった人たちは呼び出されません。、配列は新しい配列をほのめかして、いくつかの計算で新しい配列を作成してみましょう

コード：

var arr = [1,2,3]
var firearr = arr.map(current => current * 5) 复制代码

`reduce` 方法

、配列内の先行詞との項目がいくつかの計算と、最終的な累積値をやってみましょう

コード：

var wallets = [4,7.8,3]
var totalMoney = wallets.reduce( function (countedMoney, wallet) { return countedMoney + wallet.money; }, 0) 复制代码

`filter` （元の配列を変更せずに）方法

filterコールバック関数は、配列の各要素のために一度呼び出され、そのようなコールバックの使用は、新しいアレイを作成するために、すべての真の値の要素に真または同等返します。コールバックは、インデックスが削除されたか、と呼ばれることはありません、インデックスが割り当てされたことがない人のために、割り当てられているだけに呼び出されます。コールバックによってテストされていないこれらの要素がスキップされ、新しい配列には含まれません。新しいアレイを形成するために、資格エントリの配列をフィルタリングするためにスクリーニング。

コード：

var arr = [2,3,4,5,6] var morearr = arr.filter(function (number) { return number > 3 }) 复制代码

`every` 方法

メソッドがコールバック返し偽（表現は、ブール値FALSEに変換することができる）を求めるようになるまで各要素は、コールバック関数を実行するすべての配列要素。あなたがそのような要素を見つけた場合は、すべてのメソッドはただちにfalseを返します。それ以外の場合、コールバックは、すべてがtrueを返しますが、すべての要素に対してtrueを返します。そうでない場合はfalse、配列をループ操作コールバックのようなビットを返し、アレイ内の各エントリは、適格性を検出するため、及びその各々が条件を満たしていれば、それがtrueを返します。のみ割り当てられているインデックスを求めます。これらのインデックスは削除されたか、割り当てられていなかったのは呼び出しません。

コード：

var arr = [1,2,3,4,5] var result = arr.every(function (item, index) { return item > 0 }) 复制代码

`some` 方法

配列要素それぞれの一部は、コールバックが「真値」を返すまで（値は真のブール値に変換することができる）ようにコールバック関数を実行します。あなたは、このようなA値を見つけた場合、いくつかは、すぐにtrueを返します。それ以外の場合は、いくつかはfalseを返します。コールバックは、これらのインデックスが削除されたり割り当てされていない上で呼び出すことはありません、「値を持っている」だけがインデックスに呼び出されます。それ以外の場合はビット配列や操作を通じてのような、偽を返すtrueを返しますが存在する場合、いくつかの項目は、配列のシンボルの条件チェックであります。

コード：

var arr = [1,2,3,4,5] var result = arr.some(function (item,index) { return item > 3 }) 复制代码

コントラストトラバーススピード

ここで私は、比較に使用jsPerfプラットフォームをテストするため。

JavaScritpループ比較

私は、2つの配列を比較する作成アレイの異なる種類のメモリアドレス形式に格納されているJavaScriptのため、なぜこの差は、それは、作るないべきアレイ場合、例えば、配列要素タイプの長さを計算する際に留意エディタを横断するときに、同じではありません数クラスの全てである、循環が速く内部よりも数値、文字列、オブジェクトのハイブリッド配列を含有し、それは二つの配列、完全未定義の配列を作成し、それがハイブリッド配列です。

// 一个是空数组
var nullarr = new Array(10000) // [undefined,undefined,...undefined] // 另一个带不同类型的数据的数组 var dataarr = [] for(var i = 0; i < 10000; i++){ if (i % 2 ===0) { dataarr[i] = i.toString() } else { dataarr[i = i } } dataarr // [1,'2',3...,10000] 复制代码

少し奇妙な取得し、直接空の配列は、まだ遅くデータ配列よりも、なぜ一貫性の比較サイクルのために？この奇妙であるだろうことを見出したテストの後、私はデータのみを持つ配列の中から選択dataarrテストのため。

その後、我々は比較for for len forEach for-in for-of map filter循環のスピードを

あなたが見ることができfor、続いてサイクルの速度は最速で、最も古いサイクリングですが、また最高を最適化するために、for-of新しいサイクルES6を使用することは非常に簡単だったで、最も遅いですfor-in我々はいくつかの高速ソートを行うことができます

for> for-of> forEach> filter> map>for-in

今回は古い使用するデータのサイクルを処理したり、多数あることは明らかであるforサイクル効率は最高ですが、使用しないではありませんfor-in、実際には、多くの場合、実際の場面で、ベースとする必要があるfor-in複数のオブジェクトのプロパティの上に横に使用し、for-inだけでなく、トラバーサルのプロセスで継承チェーンを横断します、それでは、なぜそれが効率が比較的遅い、などされていることをmap率が高くありませんが、配列は便利ES6を使用することは非常に簡単に上記の機能を実現するために処理し、簡単に新しい配列を作成するほのめかし。または、例えば、使用イテレータのプロパティもラインである、あらゆるので、サイクルは場所を使用する権利を持っています。

`every`および`some`アレイの一部を動作させるための不完全な方法

everyそしてsome、アレイ全体が条件ブール型を決定。に直接返されるeveryよりもスピードsomeもはるかに高速。

ドライ

図に示すJavaScriptのアレイ法

遂に

最後に、私は少し違いがあるだろうと信じて別のブラウザカーネルは、興味のある友人はどんな質問がブロガーにメッセージを残してください持って、テストに行くことができます。

テストアタッチアドレスを

深い読み

イテレータ（反復子）住所
いくつかの方法JSの配列トラバーサルのパフォーマンス分析との比較アドレス
どのようにJavaScriptマップのイメージとの違いを説明するために、foreachの、減らしますか？アドレス
FOR-各JavaScriptで配列を超える？地址
サイクル性能比較のためのJavaScript アドレス

著者：ClarenceC
リンクします。https：//juejin.im/post/5a3a59e7518825698e72376b
出典：ナゲッツの
著者によって予約の著作権。著者は認可商業転載してください接触、非商用の転載は、ソースを明記してください。