JavaScript の基本機能強化ビデオチュートリアルとソースコードの推奨事項-jsチュートリアル-php.cn

JavaScript の基本機能強化ビデオチュートリアルとソースコードの推奨事項

巴扎黑

リリース： 2017-08-24 17:45:17

オリジナル

1410 人が閲覧しました

JavaScript はリテラルのスクリプト言語であり、型のサポートが組み込まれた、動的に型付けされた弱い型付けのプロトタイプベースの言語です。そのインタプリタは JavaScript エンジンと呼ばれ、ブラウザの一部であり、クライアント側のスクリプト言語で広く使用されています。これは、HTML Web ページに動的機能を追加するために HTML (標準ユニバーサルマークアップ言語に基づくアプリケーション) で最初に使用されました。。

「JavaScript の基礎強化ビデオチュートリアル」では、主に変数、データ型、型変換、フロー制御ステートメント、配列、単純型と複合型の違い、およびオブジェクト導入、事例を通じて基本文法を強化します。この一連のビデオは、JavaScript の素晴らしい世界にあなたを導きます。

JavaScript の基本機能強化ビデオチュートリアルとソースコードの推奨事項

動画再生アドレス:http://www.php.cn/course/543.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 など、後の同様のメソッドにも同じことが当てはまります。

$.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

ログイン後にコピー

例:

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

ログイン後にコピー

このコードはより簡潔に見えますが、このメソッドには小さな欠陥もあります:

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

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

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

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

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

ログイン後にコピー

このコードでは、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

次のようにします:

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

ログイン後にコピー

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

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

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

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

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

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

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

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

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

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

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

ログイン後にコピー

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

$.map(array,function)

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

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

<html>
<head>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
var arr = [2,3,6];
var arr2 = $.map(arr,function(item){return item*2;});
for(var i=0,len=arr2.length;i<len;i++){
 document.write(arr2[i]+"<br />");//结果为 4 6 12
}
</script>
</head>
</html>

ログイン後にコピー

追加説明: item は各要素を表し、これは仮パラメータであり、他のものに置き換えることができます。

このビデオの教師は生き生きとしており、教室の雰囲気は非常に活発で、教室での学習に対する生徒の熱意を最大限に引き出すことができます。講義では細部にまで気を配り、小さな知識ポイントを漏れなく丁寧に解説します。

コースウェアのソースコード: http://www.php.cn/xiazai/code/1812

以上がJavaScript の基本機能強化ビデオチュートリアルとソースコードの推奨事項の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。