ダークホース プログラマー JavaScript ビデオ リソースの共有

「

Dark Horse Programmer JavaScript Video Tutorial」では、JavaScript について詳しく紹介します。JavaScript は文字通りのスクリプト言語であり、クライアントサイドの Web 開発で広く使用されているスクリプト言語です。現在、デザインの改善、フォームの検証、ブラウザの検出、Cookie の作成などを目的として、何百万もの Web ページで使用されています。

動画再生アドレス:http://www.php.cn/course/500.html

この動画の難易度は論理能力を試す配列ループです。以下は、さまざまなループの例をまとめたものです:

配列内の要素をどのように走査するのでしょうか? 20 年前に JavaScript が初めて登場したとき、次のように配列トラバーサルを実装できました:

var arr=["one","two","three"];2 for(var i=0;i<arr.length;i++){3     document.write(arr[i]);4 }

ES5 の公式リリース以降、組み込みの forEach メソッドを使用して配列をトラバースできます:

myArray.forEach(function (value) {
     console.log(value);});实际上forEach有三个参数  分别为  值  下标  数组本身 于是我们有[].forEach(function(value, index, array) {    // ...});
对比jQuery中的$.each方法：
$.each([], function(index, value, array) {    // ...});

最初と2 番目のパラメータ これはまったく逆です。皆さんは注意して、間違って覚えないようにしてください。 $.map など、後の同様のメソッドにも同じことが当てはまります。

forEach は十分な柔軟性がありません。

arr.forEach は使用できません。 Break ステートメントを使用してループを中断することも、return ステートメントを使用して外部関数に戻ることもできません。

もちろん、for ループ構文を使用して配列要素を走査するだけでも素晴らしいでしょう。

次に、必ず for-in ループを試してください:

$.each(Array, function(i, value) {
     Array   //数组     this;      //this指向当前元素
    i;         //i表示Array当前下标
    value;     //value表示Array当前元素});
 
var arr = [ "one", "two", "three", "four"];    
$.each(arr, function(){    
   alert(this);    
});    
 
//上面这个each输出的结果分别为：one,two,three,four  
var obj = { one:1, two:2, three:3, four:4};    
$.each(obj, function(key, val) {    
   alert(obj[key]);          
});  
//这个each就有更厉害了，能循环每一个属性
//输出结果为：1   2  3  4

このコードでは、index に割り当てられる値は実際の数値ではなく、文字列「0」、「1」、「2」です。 "2" + 1 == "21" などの文字列算術計算が意図せず実行される可能性が非常に高く、エンコード プロセスに多大な不便をもたらします。

要するに、

for-inは通常のオブジェクト用に設計されており、文字列型のキーを取得するために走査できるため、配列の走査には適していません。

for...in は配列の走査には適していません

for...in はカスタム プロパティまたはプロトタイプ プロパティを走査します。インデックスは数値ではなく文字列であり、場合によっては走査さえできない場合があります。 in order

強力な for -of ループ

ES6 は、作成した JS コードを壊しません。何千もの Web サイトが for-in ループに依存しているようで、中には配列の走査に for-in ループを使用しているものもあります。 for-in ループを修正して配列トラバーサルのサポートを追加すると、さらに混乱が生じるため、標準化委員会は現在の問題を解決するために ES6 に新しいループ構文を追加しました。

for...in を使用してオブジェクトを走査するのと同じくらいシンプルで使いやすい、配列を走査するためのより便利な方法が必要です。つまり for...of

次のようにします:

arr.forEach(function(i,j,v){
    document.write("<br />数组的值"+i+
                     "<br />数组的下标"+j+","+
                     "<br />数组本身"+v+"---")
})

はい、これは実行しますループは以前の組み込みメソッドと比べて見慣れたものに見えますか?さて、for-of ループの外観の下にどのような強力な機能が隠されているかを調べていきます。ここでは、覚えておいてください:

これは、配列要素を反復処理するための最も簡潔で簡単な構文です

このメソッドは、for-in ループの落とし穴をすべて回避します

forEach() とは異なり、break、 continue、return ステートメントに正しく応答します

for-in ループは、オブジェクトのプロパティを走査するために使用されます。

for-of ループは、配列内の値などのデータを反復処理するために使用されます。

でも、それだけじゃないんです！

for-of ループは他のコレクションを走査することもできます

for-of ループは配列をサポートするだけでなく、DOM NodeList オブジェクトなどのほとんどの配列のようなオブジェクトもサポートします。

for-of ループは、文字列を走査する一連の Unicode 文字として扱う文字列トラバーサルもサポートしています。

for (var index in myArray) { // 千万别这样做  console.log(myArray[index]);
}

Map および Set オブジェクトのトラバーサルもサポートしています。

$.map(array,function)

構文分析: 配列内の各要素に対して、関数 function を呼び出して処理し、結果を返して新しい配列を取得します。

例による説明: 配列内の各要素を 2 で乗算し、新しい配列を返します。コードは次のとおりです

for (var value of myArray) {
  console.log(value);
}

追加説明: item は各要素を表しており、他の要素に置き換えることができます。

このビデオの教師は、明確な構成、層ごとの分析、連動するリンク、厳密な議論、厳密な構造を用いて、物事をシンプルでわかりやすい方法で説明し、引き寄せるために論理的な思考力を使用します。生徒の注意を引き付け、理性を使って教室での指導プロセスをコントロールします。指導スキルはウィットに富んでおり、さまざまな指導方法やテクニックが容易に利用でき、洗練された跡もなく自由かつ適切に使用できます。

以上がダークホース プログラマー JavaScript ビデオ リソースの共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。