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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

巴扎黑

Aug 24, 2017 pm 05:45 PM

javascriptjsチュートリアル

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 サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化：現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

javascriptの分解：それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

See all articles