ES6のforとforeachの違いは何ですか
違い: 1. forEach は反復可能オブジェクト (配列セット マップ) の走査を担当する反復子ですが、for は配列のみを走査できるループ メカニズムです。 2. 一部の割り込み動作は for ループで使用されており、配列の走査と検索の最適化に適していますが、forEach は反復子であり、順番にのみ走査できるため、割り込み動作はサポートされていません。 3. forEach ループの開始点は 0 のみであり、人間の介入は不可能です。for ループとは異なり、ループの開始点は手動で制御できます。
このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。
for ループと forEach の本質的な違い
for
Loop は、js で導入されたループ メソッドです。
forEach
は ES5 によって提案されたメソッドであり、Array
Set
Map# などの反復可能なオブジェクトのプロトタイプにマウントされています。 ##。
forEach は反復子であり、反復可能なオブジェクトの走査を担当します。
traversal、iteration、iterable object とはそれぞれ何ですか。
トラバーサル: データ構造の各メンバーへの定期的および 1 回限りのアクセス動作を指します。
反復: 反復は特別な形式の再帰であり、反復子によって提供されるメソッドです。デフォルトでは、特定の順序です1 つずつデータ構造メンバーにアクセスします。反復も走査動作です。
Iterable object: iterable
型は ES6 で導入されました、
Arrayはすべて
iterableに属しており、その特徴はすべて
[Symbol を持っていることです。 .iterator]メソッドを含むオブジェクトは、反復可能な
iterableとみなされます。
forEach は実際には反復子です。これと
for ループの本質的な違いは、
forEach が役割を担うことです。 for traversing (
Array
Set
Map) Iterable オブジェクト、および
for ループはループ機構であり、 array のみを走査できます。
iteratorとは? 呼び出すとイテレータオブジェクト(Iterator Object)が生成され、.next()メソッドを持っています。呼び出しはオブジェクト
{value:value,done:Boolean} を返します。
value は、
yield の後で、
yieldEnd のときに戻り値を返します。
done は
true になり、内部値は継続的な呼び出しと連続した反復を通じてアクセスされます。
Iterator は特別なオブジェクトです。 ES6 仕様におけるそのシンボルは、返されるオブジェクトの next() メソッドであり、反復動作は
done で判断されます。イテレータは、内部表現を公開せずにトラバーサルを実装します。コード
let arr = [1, 2, 3, 4] // 可迭代对象 let iterator = arr[Symbol.iterator]() // 调用 Symbol.iterator 后生成了迭代器对象 console.log(iterator.next()); // {value: 1, done: false} 访问迭代器对象的next方法 console.log(iterator.next()); // {value: 2, done: false} console.log(iterator.next()); // {value: 3, done: false} console.log(iterator.next()); // {value: 4, done: false} console.log(iterator.next()); // {value: undefined, done: true}
Symbol.iterator を呼び出すと反復子が提供され、反復子によって返される
next メソッド (これも # ) に基づいて内部にアクセスします。 ##for..of
の実装原理。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">let arr = [1, 2, 3, 4]
for (const item of arr) {
console.log(item); // 1 2 3 4
}</pre><div class="contentsignin">ログイン後にコピー</div></div>
メソッドを呼び出してオブジェクトの value
値を返し、それを value
まで item
に保存します。 is unknown
ループから抜け出すと、すべての反復可能なオブジェクトが for...of
で使用できるようになります。他の反復可能オブジェクトを見てみましょう: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">function num(params) {
console.log(arguments); // Arguments(6) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]
let iterator = arguments[Symbol.iterator]()
console.log(iterator.next()); // {value: 1, done: false}
console.log(iterator.next()); // {value: 2, done: false}
console.log(iterator.next()); // {value: 3, done: false}
console.log(iterator.next()); // {value: 4, done: false}
console.log(iterator.next()); // {value: undefined, done: true}
}
num(1, 2, 3, 4)
let set = new Set('1234')
set.forEach(item => {
console.log(item); // 1 2 3 4
})
let iterator = set[Symbol.iterator]()
console.log(iterator.next()); // {value: 1, done: false}
console.log(iterator.next()); // {value: 2, done: false}
console.log(iterator.next()); // {value: 3, done: false}
console.log(iterator.next()); // {value: 4, done: false}
console.log(iterator.next()); // {value: undefined, done: true}</pre><div class="contentsignin">ログイン後にコピー</div></div>
したがって、反復可能オブジェクトの
プロパティは、呼び出されたときに反復子を生成でき、forEach
も生成されます。内部コールバック関数
for<span style="font-size: 20px;"></span>loopおよび
##の各要素の値を渡すイテレータ#forEach<span style="font-size: 20px;"></span>
<span style="font-size: 20px;"></span>
#各のパラメータ。
各
割り込み。
forEach 独自の要素を削除すると、インデックスをリセットできなくなります。
#for ループはループの開始点を制御できます。
forEach
-
のパラメータ forEach のパラメータの完全な内容を本当に理解していますか?おそらく次のようになります:
arr.forEach((self,index,arr) =>{},this)
ログイン後にコピー
self:
現在配列によって走査されている要素。デフォルトでは、配列要素は左から右に取得されます。
let arr = [1, 2, 3, 4]; arr.forEach(function (self, index, arr) { console.log(`当前元素为${self}索引为${index},属于数组${arr}`); }, person)
let arr1 = [1, 2, 1, 3, 1]; let arr2 = []; arr1.forEach(function (self, index, arr) { arr.indexOf(self) === index ? arr2.push(self) : null; }); console.log(arr2); // [1,2,3]
forEach
的中断
在js中有break
return
continue
对函数进行中断或跳出循环的操作,我们在 for
循环中会用到一些中断行为,对于优化数组遍历查找是很好的,但由于forEach
属于迭代器,只能按序依次遍历完成,所以不支持上述的中断行为。
let arr = [1, 2, 3, 4], i = 0, length = arr.length; for (; i < length; i++) { console.log(arr[i]); //1,2 if (arr[i] === 2) { break; }; }; arr.forEach((self,index) => { console.log(self); if (self === 2) { break; //报错 }; }); arr.forEach((self,index) => { console.log(self); if (self === 2) { continue; //报错 }; });
如果我一定要在 forEach
中跳出循环呢?其实是有办法的,借助try/catch
:
try { var arr = [1, 2, 3, 4]; arr.forEach(function (item, index) { //跳出条件 if (item === 3) { throw new Error("LoopTerminates"); } //do something console.log(item); }); } catch (e) { if (e.message !== "LoopTerminates") throw e; };
若遇到 return
并不会报错,但是不会生效
let arr = [1, 2, 3, 4]; function find(array, num) { array.forEach((self, index) => { if (self === num) { return index; }; }); }; let index = find(arr, 2);// undefined
forEach
删除自身元素,index不可被重置
在 forEach
中我们无法控制 index
的值,它只会无脑的自增直至大于数组的 length
跳出循环。所以也无法删除自身进行index
重置,先看一个简单例子:
let arr = [1,2,3,4] arr.forEach((item, index) => { console.log(item); // 1 2 3 4 index++; });
index
不会随着函数体内部对它的增减而发生变化。在实际开发中,遍历数组同时删除某项的操作十分常见,在使用forEach
删除时要注意。
for
循环可以控制循环起点
如上文提到的 forEach
的循环起点只能为0不能进行人为干预,而for
循环不同:
let arr = [1, 2, 3, 4], i = 1, length = arr.length; for (; i < length; i++) { console.log(arr[i]) // 2 3 4 };
那之前的数组遍历并删除滋生的操作就可以写成
let arr = [1, 2, 1], i = 0, length = arr.length; for (; i < length; i++) { // 删除数组中所有的1 if (arr[i] === 1) { arr.splice(i, 1); //重置i,否则i会跳一位 i--; }; }; console.log(arr); // [2] //等价于 var arr1 = arr.filter(index => index !== 1); console.log(arr1) // [2]
<span style="font-size: 18px;">for</span>
循环和<span style="font-size: 18px;">forEach</span>
的性能区别
在性能对比方面我们加入一个 map
迭代器,它与 filter
一样都是生成新数组。
对比 for
forEach
map
的性能在浏览器环境中都是什么样的:
性能比较:for > forEach > map 在chrome 62 和 Node.js v9.1.0环境下:for
循环比 forEach
快1倍,forEach
比 map
快20%左右。
原因分析for
:for循环没有额外的函数调用栈和上下文,所以它的实现最为简单。
forEach
:对于forEach来说,它的函数签名中包含了参数和上下文,所以性能会低于 for
循环。
map
:map
最慢的原因是因为 map
会返回一个新的数组,数组的创建和赋值会导致分配内存空间,因此会带来较大的性能开销。
如果将map
嵌套在一个循环中,便会带来更多不必要的内存消耗。
当大家使用迭代器遍历一个数组时,如果不需要返回一个新数组却使用 map
是违背设计初衷的。
【相关推荐:javascript视频教程、编程视频】
以上がES6のforとforeachの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック









WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

WebSocketとJavaScript:リアルタイム監視システムを実現するためのキーテクノロジー はじめに: インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

JavaScript と WebSocket を使用してリアルタイム オンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

WebSocket と JavaScript を使用してオンライン予約システムを実装する方法 今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

使用法: JavaScript では、insertBefore() メソッドを使用して、DOM ツリーに新しいノードを挿入します。このメソッドには、挿入される新しいノードと参照ノード (つまり、新しいノードが挿入されるノード) の 2 つのパラメータが必要です。

JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

JavaScript で HTTP ステータス コードを取得する方法の紹介: フロントエンド開発では、バックエンド インターフェイスとの対話を処理する必要があることが多く、HTTP ステータス コードはその非常に重要な部分です。 HTTP ステータス コードを理解して取得すると、インターフェイスから返されたデータをより適切に処理できるようになります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法と、具体的なコード例を紹介します。 1. HTTP ステータス コードとは何ですか? HTTP ステータス コードとは、ブラウザがサーバーへのリクエストを開始したときに、サービスが
