JavaScript | 基本構文（書き方、データ型、配列、関数、オブジェクト）

リンク

1. JavaScript の初めての紹介

JavaScript (略して JS) は、
世界で最も人気のあるプログラミング言語の 1 つで、
インタプリタを介して実行されるスクリプト言語です。

jsは主にフロントエンドページの開発に利用されますが、実はサーバー開発・クライアントプログラム開発にも利用できます。

JavaScript は元々、単純なフォーム検証 (データの正当性の検証) を完了するために使用されていましたが、その後偶然にも普及し、
現在では JavaScript はユニバーサル プログラミング言語となっています。

JavaScript でできること:

• Web 開発 (より複雑な特殊効果とユーザー インタラクション)
• ウェブゲーム開発
• サーバー開発（node.js）
• デスクトップ プログラム開発 (これが Electron と VSCode の由来です)
• モバイルアプリ開発

ブレンダン・アイヒ、JavaScriptの父

元ブランドン：

JavaScript を発明したブランドン氏は次のように述べています。

1995 年、 JS の設計を完了するのに10 日かかりました (設計時間が短すぎて、言語の一部の詳細が十分に厳密に考慮されていなかったため、長い間 Javascript で書かれた混沌としたプログラムができました)。当時Netscape がLiveScript JavaScript と名付けた理由は、当時最も人気のある
プログラミング言語が Java であり、「Java」という名前がこの新しい言語の普及に貢献したためであると一般に考えられています。実際、Java と JavaScript の構文スタイルは大きく異なります。

JavaScript 開発の歴史については、Ruan Yifeng のブログ
http://www.ruanyifeng.com/blog/2011/06/birth_of_javascript.htmlを参照してください。

JavaScrip：

• HTML：Webページの構造（骨）
• CSS：Webページのパフォーマンス（非表示）
• JavaScript：Webページの振る舞い（魂）

フロントエンド開発JSは唯一のもの

挑戦者:

1. Dart（Google社製、次世代モバイル開発プラットフォームに付属するプログラミング言語）
2. ウェブアセンブリ．「アセンブリ言語」と同様に、一連の基本命令はブラウザ上で定義され、他の主流のプログラミング言語はいくつかのサードパーティ ツールを通じて WebAssembly に変換できます。現時点では、C++、Java、Python... はすべてこのメソッドを使用してページを開発できます...
3. TypeScript (最も有望な挑戦者) も、非常に急速な進歩を遂げている一般的な言語です。JS
   と TS の関係は、C と C++ の関係に似ています。「互換性のある」
   TS は、JS の現在の構文を完全にサポートし、いくつかの新しい構文を導入しています. 文法規則により、プログラマーはより快適に書くことができます。TS の魅力は、既存のフロントエンド開発プログラマーにとって依然として非常に大きなものです [引き抜き]. しかし、それにもかかわらず、TS は完全に JS に取って代わることはできません。フロントエンド界では
   、 JS は依然として主要なツールです

JavaScript 実行プロセス:

• 書かれたコードはファイルに保存されます。つまり、ハードディスク（外部メモリ）に保存されます。
• .htmlファイル ブラウザ (アプリケーション) をダブルクリックしてファイルを読み取り、ファイルの内容をメモリにロードします (データ フローの方向: ハードディスク => メモリ)
• ブラウザはユーザーが書いたコードを解析し、そのコードをコンピュータが認識できるバイナリ命令に変換します（インタープリタの仕事）。
• 取得されたバイナリ命令はCPU によってロードされ実行されます(データ フローの方向: メモリ => CPU)。

ブラウザはレンダリング エンジン + JS エンジンに分かれています。

• レンダリング エンジン: HTML + CSS を解析します。一般に「カーネル」として知られています。
• JS エンジン: つまり、JS インタープリター。通常は Chrome に組み込まれている V8 です。
• JS エンジンは、JS コードのコンテンツを 1 行ずつ読み取り、それをバイナリ命令に解析して実行します。

Node.js：

JS を使用すると、表示される Web ページは実際には Web アプリと同等になります (通常のクライアント プログラムと何ら変わりません)。JS は以前の
HTML/CSS に似ており、ブラウザ上で実行され、
ブラウズされます。ブラウザには JS が組み込まれています。その中でもChromeブラウザにはJSエンジンが組み込まれており、これもGoogle自身が開発したエンジン
と呼ばれる非常に有名なエンジンであり、大きなおい、この V8 エンジンをブラウザから取り出して再パッケージすると、Node.js になるV8

JS は プログラミング言語 です。JS を実行するには、JS 実行エンジン
Node.jsが必要です。これは、JS 実行プラットフォーム (ブラウザをターゲットとしています) です。ブラウザはクライアント上で実行され、Node.js はクライアント上で実行できます。サーバー上で実行することもできます(別の実行プログラム)。これにより、JS にクライアント開発/サーバー開発の機能を与えることができます。

vue.js はブラウザ上で動作する JS ベースのライブラリ/フレームワークです。

JavaScript は次のもので構成されます。

ブラウザ上で実行されるJSの場合、3つの部分に分けて考えることができます。

• ECMAScript (略して ES): JavaScript 構文
• DOM API :ページ要素を操作するためにブラウザによって提供される一連の API 。ページ ドキュメント オブジェクト モデルは、ページ内の要素を操作します。
• BOM API : ブラウザ オブジェクト モデル。ブラウザ ウィンドウを操作するためにブラウザによって提供される APIのセット

Node.js 上で実行される JS は、次の 2 つの部分に分かれています。

1. JSコア構文
2. Node js によって提供される API (この API は DOM / BOM とは関係ありません) は、ファイル操作、ネットワーク操作、システムレベルの操作など、その他の機能を提供します。

JS 構文だけでは、いくつかの基本的な論理処理しか記述できません

ただし、より複雑なタスクを完了し、ブラウザやページと対話したい場合は、DOM API と BOM API が必要です。
これは主にブラウザ側で実行される JSを指します。サーバー側で実行される JS の場合は、ノードを使用する必要があります.js API では、
DOM や BOM を意識する必要はありません。

重要な概念: ECMAScript は
一連の「標準」です。JS エンジンの種類に関係なく、実装するにはこの標準に準拠する必要があります。標準とは何ですか
? 車は同じトラックで動作し、本は同じテキストで動作します。秦始皇帝の最大の貢献の 1 つは、一連の標準を開発したことです。
三流企業が製品を作り、一流企業が標準を作ります。

---

2. 最初のプログラム

1、スクリプト

• ブラウザ上で動作する JS は HTML と切り離せないものであり、通常はHTML に埋め込んで記述する必要があります。

• 多くのプログラミング言語をスクリプトに配置できますが、現在は JS がデフォルトのオプションです。

• JSの文の後に続くものは;必須ではなく、書いても書かなくても構いませんが、書くことを推奨します。

• 注: JS の文字列定数は一重引用符または二重引用符で表すことができます。HTML では二重引用符を使用し、JS では一重引用符を使用することをお勧めします。

<script>
	alert('hello');
</script>

---

2.JavaScript記述フォーム

埋め込み：

scriptタグにJSを記述する

<button onclick="alert('hello')">这是一个按钮</button>

列をなして：

HTML要素内にJSを記述する

外部式：

JS を別の .js ファイルに書き込み、 HTML のスクリプトを通じて導入します。

alert('hello app.js');

<script src="app.js"></script>

注: この場合、script タグの途中にコードを記述することはできません。空にする必要があります (コードが記述されても実行されません)。これは、コードが大量にある状況に適しています。

<script src="app.js">
    alert('hello');
</script>

この方法では、ポップアップ ウィンドウは 1 つだけになり、内部の hello は存在しないため、別途記述する必要があります。

---

3. コメント

• JS コメント: //、複数行のコメント /* */ はネストできません

• CSS に関する注意事項:/**/

• HTML コメント:<!---->

---

4. 入力と出力

実際には、JS がユーザーと対話する方法はたくさんあります。

入力: プロンプトが
入力ボックスをポップアップ表示します

警告ポップアップ ボックス、ひどい経験

// 弹出一个输入框
prompt("请输入您的姓名:");

出力:alert は
警告ダイアログ ボックスをポップアップ表示し、結果を出力します。

// 弹出一个输出框
alert("hello");

出力: console.log は
コンソールにログを出力します (プログラマが確認できるように) – ログはプログラマがプログラムをデバッグするための重要な手段です

重要な概念:
console は js の「オブジェクト」です
。オブジェクト内の特定の属性またはメソッドを取得することを意味します。「the」として直感的に理解できます。 console.log は次のように理解できます
: 「console」オブジェクトの「ログ」を使用する方法

// 向控制台输出日志
console.log("这是一条日志");

開発において、最も一般的に使用される
出力方法は、システムのブラック ボックスではなく、ブラウザ自体のコンソール (開発者ツールで確認できます) にログを出力します。(F12) => [コンソール] タブ ページで結果を確認します。

js コードに構文エラーまたは実行時エラーがある場合、それらはコンソールにも表示されます: 定義なし、行 13

---

3. JavaScriptの基本構文

1. タイプ

1.1. 変数

変数を定義します。

var 変数名 = 初期値;

<script>
    var num = 10; // 数字类型的变量
    var s = 'hello';
    var arr = []; // 数组类型的变量       
</script>

このキーワードは変数の型に関係なくvar統一的に表現するために使用され、変数の具体的な型については初期化された値とその型によって異なります。

JS は整数と浮動小数点型を区別しません

初期化する必要はありません。初期化されていない場合、変数の値は特別な値 ``未定義'' になりますが、初期化されていない値を作成して、それが文字列型であることを指定することはできません。

実際、この書き方はより主流であり (より多くのプログラミング言語がこのように設定されています)、C++ や Go などの言語も含まれており、これらの言語でも上記と同様の書き方がサポートされています。

ダイナミックタイプ:

変数を変更する場合、小さな問題があります。
a が元々数値型である場合、値を割り当てるときに、それに数値型、文字列型、または任意の型を割り当てることができます。このとき、変数aの型もそれに応じて変化します。

<script>
    var a = 10;
    a = 'hello'
    console.log(a);       
</script>

変数の型は、実行時の割り当てによって変更される可能性があります。この動作は「動的型付け」 (実行時) と呼ばれます
Python、PHP、Ruby...

Java などの言語は、このような実行時の型の変更をサポートしていません。この動作は「静的型付け」と呼ばれます
。C、C++、Java、Go、Rust…

Python は「敵に降伏する」兆候をいくつか開発しました
a = 10
a:int = 10

2022 年の観点から見ると、静的型陣営が完全な勝利を収めています!!!
現在、業界は基本的にコンセンサスに達しています: 静的型の方が動的型よりも優れていると考えられています。静的型を使用すると、
コンパイラはより多くのことができるようになります開発ツール (IDE) は、タイプに基づいてさらに多くの分析を実行し、より豊富なサポートを提供できるようになりました。

動的型付けには独自の利点もあります。関数を作成することで、複数の異なる型パラメーターを同時にサポートできます (「オーバーロード」/「ジェネリック」構文はまったく必要ありません)。ただし、この利点にもかかわらず、全体としては、デメリットもありますが
、利益以上です

させて：

最近では、var の代わりに let を使用する傾向があります。Var
は古いバージョン (初期の設計) であり、多くの場所で、実際には直感に反しています。実際、let は var よりも直感的です。

<script>
	{
    
    
        var num = 10;
        let num2 = 10;
	}
	console.log(num); // 运行没有问题
    console.log(num2);
</script>

---

1.2. 基本的なデータ型

JS に組み込まれたいくつかの型:

• number: 数値。整数と小数は区別されません。
• ブール値: true、false。
• 文字列: 文字列型。
• unknown：一意の値のみが存在する unknown 値が未定義であることを示します。
• null: 唯一の値 null。null値を表します。

日常生活で 2 進数を使用する場合、2 進数を表すために 8 進数と 16 進数がよく使用されます。

var a = 07; // 八进制整数, 以 0 开头
var b = 0xa; // 十六进制整数, 以 0x 开头
var c = 0b10; // 二进制整数, 以 0b 开头

特殊な数値:

• Infinity: 無限大、どの数値よりも大きい、JS で表現できる範囲を超えた数値であることを意味します。
• Infinity: 負の無限大、どの数値よりも小さい、JS で表現できる範囲を超えた数値であることを意味します。
• NaN: 現在の結果が数値ではないことを示します。数値ではありません。

知らせ：

1. 負の無限大と無限小は同じものではありません。無限とは限りなく 0 に近いことを意味し、その値は 1 / 無限大です

2. 'hehe' + 10 は NaN を取得しませんが、'hehe10' を取得します。これは暗黙的に数値を文字列に変換し、文字列を連結します。

3. isNaN 関数を使用すると、非数値かどうかを判断できます。

var max = Number.MAX_VALUE;
// 得到 Infinity
console.log(max * 2);
// 得到 -Infinity
console.log(-max * 2);

// 如果运算结果，得到的不是数字的值，就会出现 NaN
console.log('hehe' - 10);

// 和 Java 类似，如果把字符串和数字相加，那么就会得到一个 "字符串拼接" 的效果
console.log('hello' + 10);

console.log(isNaN(10)); // false
console.log(isNaN('hehe' - 10)); // true

---

1.3. string 文字列型

• 一重引用符と二重引用符の両方を使用できます

• 文字列自体に引用符が含まれている場合は、この時点で一重引用符と二重引用符を柔軟に照合して、エスケープ文字の使用を避けることができます。

console.log('my name is "zhangsan"'); // my name is "zhangsan"

長さを求めます。

String の長さプロパティを使用するだけです。ここでの長さ、単位は「文字」です

let s = 'hello world';
console.log(s.length); // 11
s = '你好';
console.log(s.length); // 2

文字列の連結:

追加した変数が文字列であるか数値であるかを確認する必要があることに注意してください。

console.log(100 + 100); // 200
console.log('100' + 100); // 100100

---

1.4. boolean ブール型

JS のブール型は 1 および 0 として扱われます(Java のブール型はブール型であり、数値と混同されることはありません)。

let a = true;
console.log(1 + a); // 2

この設定方法、実は非科学的だと思うんです!! 「暗黙の型変換」

プログラミング言語が暗黙的な型変換をサポートする場合、その型はより弱いとみなされます(C、JS、および PHP は、弱い型指定のプログラミング言語とみなされます)。
プログラミング言語が暗黙的な型変換をサポートしない場合、その型はより強いとみなされます( Java、Go、Python は、厳密に型指定されたプログラミング言語とみなされます)

強い型付けとは、型間の違いがより大きく、境界がより明確であることを意味し、
弱い型付けとは、型間の違いが大きくなく、境界がより曖昧であることを意味します。

静的型付け/動的型付けと強い型付け/弱い型付けは無関係な概念です (直交)

---

1.5. 未定義 未定義データ型

• 未定義型には、値が 1 つだけあります。

• 変数が初期化されていない場合、結果は unknown となり、タイプは unknown になります。

let num;
console.log(num); // undefined

未定義の状況(不正な状況)
将来的には、JS は変数を初期化せずに直接コンパイルしてエラーを報告するように設定される可能性があります
が、現在の JS の要件はそれほど厳密ではないため、これを表すために未定義のような特別な値が作成されます。

実際の開発では、undefine を積極的に使用するべきではなく、また、unknown に依存するべきではありません。

let num2 = null;
console.log(num2); // null

null は、現在の値が「値なし」であることを意味します。この概念は
正当です。
実際の開発では、null を使用してもまったく問題ありません。

---

2. オペレーター

2.1. 算術演算子

JS の除算/では、整数と小数は区別されず、両方とも数値です。

console.log(1 / 2); // 0.5

ほとんどのプログラミング言語 - 1/2 => 0
ただし、いくつかの例外: JS、Python3 (Python2 は除く) - Dart の結果は 0.5

---

2.2. 比較演算子

JS には 2 つのスタイルの比較等価性があります。

== !=(暗黙的な型変換が行われます): 2 つの変数の値のみが比較され、2 つの変数の型は比較されません。暗黙的な型変換によって 2 つの変数が同じ値に変換できる場合、それらは一致します。現時点では等しいとみなされます。

= !(暗黙的な型変換は行われません): 変数の値と型の両方を比較する必要があり、型が同じでない場合は、直接不等とみなされます。

let a = 10;
let b = '10';
console.log(a == b); // true
console.log(a === b); // false

2 つのオブジェクトを比較する場合、比較には 3 つの側面があります。

1. ID を比較する (同じオブジェクトかどうか)
2. 比較値（オブジェクトに格納されているデータが同一かどうか）
3. タイプの比較 (2 つのオブジェクトが同じタイプかどうか)

Java == 比較アイデンティティ
等しいはオーバーライドできます。オーバーライドしない場合、デフォルトはアイデンティティを比較することです。オーバーライドすることで、比較タイプの比較値インスタンスに設定できます。

---

3. 論理と論理和

&& || は Java とは大きく異なります。Java
の && および || の動作は非常に単純です。つまり、true または false を返します。JS
の && および || はいずれかの式を返します。

• c = a || b
  a の値が true (0 でない) の場合、このときの c の値が式 a の値となり、
  a の値が false (0) の場合、そのときの c の値が式 a の値になります。今回は式 b の値

• C = a && b
  a の値が false の場合、このときの c の値が式 a の値となり、
  a の値が true の場合、このときの c の値が式 b の値になります。

JS のイディオムから派生し、変数が「null 値」であるかどうかを判断し、null 値の場合はデフォルト値を割り当てます。

---

4. 条件文

Case : 数値が奇数か偶数かを判断する

let num = 10;
if (num % 2 == 0) {
    
    
    console.log('num 是偶数');
} else {
    
    
    console.log('num 是奇数');
}

注! num % 2 == 1 のように書くことはできません。これは奇数であり、負の奇数 % 2 の結果は -1 になる可能性があります。

---

5. アレイ

5.1. 配列の作成

この書き方は Java でオブジェクトを作成することに似ています (めったに使用されません)。

let arr = new Array();

リテラルメソッドで作成【よく使われる】

let arr = [];
let arr2 = [1, 2, 3];

これは Java とは大きく異なります。ここで Java が配列を定義するときは、int[] 型が使用されます。Java は配列の初期化に {} を使用しますが、
JS は [] を使用します。

注: JS 配列では、要素が同じ型である必要はありません。これは、C、C++、Java などの静的型付け言語とは大きく異なりますが、Python や PHP などの動的型付け言語にも同じことが当てはまります。

Java では、int[] は整数配列であり、String[] は文字列配列です。JS では、配列と呼ばれる配列は 1 種類のみです。

let arr = [10, 'hello', true, undefined, null, []];

---

5.2. 配列を印刷する:

JS では、console.log を通じて配列の内容を直接出力できます。

let arr = [10, 'hello', true, undefined, null, []];
console.log(arr);

---

5.3. 配列要素の取得

添字による要素の取得: 添字も 0 から計算されます

知らせ：

1. 以前の理解によると、Java では配列の添字が 0 -> 長さ - 1 の範囲にある必要があります。範囲を超えると、JS で例外がスローされます。これは当てはまりません
。範囲を超えた場合、結果は未定義となり、例外は発生しません。

let arr = [1, 2, 3];
arr[100] = 10;
console.log(arr);

長さが 101 になり、配列の内容になります。最初の 3 つの要素は 1、2、3 のままです。添字 100 の要素は 10 ですが、中央の空の属性 * 96 は、これらの中央の要素がまだ未定義です

2、arr[-1] = 10;

現時点では、-1 は添え字というよりは「属性」であり、配列の長さには影響しません。

3、arr['hello'] = 10;

• JS の配列は本格的な配列ではありません。
• 配列の処理に加えて、マップの処理 (キーと値のペアを表す) も処理できます =>ここでは、配列はマップであると言われていますが、より正確には「オブジェクト」です。
• JS では、実行時にオブジェクトに属性を追加できます。
• arr['hello'] は、arr オブジェクトに新しい属性を追加しています。属性の名前は hello で、属性の値は 10 です。

let arr = [1, 2, 3];
arr.hello = 30;
console.log(arr);
console.log(arr['hello']); // 1
console.log(arr.hello); // 2

これらの構文は JS に特有のものではなく、すべての動的型付け言語はこの方法で設定されます (PHP は JS とほぼ同じ方法で設定されますが、Python は若干異なりますが、本質は同じです)。コードはすべて「静的
」「タイプ」対「動的タイプ」である 2 つの学校間の衝突

---

5.4. 配列の長さを取得する

• .lengthあなたはそれを乗り越えることができます
• JSではlength属性を変更できる

let arr = [1, 2, 3];
arr.length = 5;
console.log(arr.length);
console.log(arr);

実行結果：5
test.html:32 (5) [1、2、3、空×2]

---

5.5. 要素を配列に追加する

最も一般的な挿入操作: Push メソッド。配列の末尾に要素を追加できます(Java ArrayList の add 操作)。

let arr = [];
for (let i = 0; i < 10; i++) {
    
    
    arr.push(i);
}
console.log(arr);

---

5.6. 配列内の要素を削除する

spliceこのメソッドは配列内の特定の間隔を置き換え、要素の削除または挿入に使用できます。

let arr = [1, 2, 3, 4, 5, 6];
arr.splice(2, 3); // 从下标为 2 的位置，删除 3 个元素
console.log(arr); // [1, 2, 6]

let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
console.log(fruits); // ['Banana', 'Orange', 'Lemon', 'Kiwi', 'Apple', 'Mango']

---

6. 機能

6.1. 文法形式

機能、方法、同じもの、異なるベスト

通常、これら 2 つの概念の違いは考慮されませんが、考慮する必要がある場合は、次のように理解できます。

• 機能: 「オブジェクト」から独立したコードです。
• メソッド:オブジェクトに依存するコード片ですメソッド => メンバ関数
  Java では、このようなコード片はクラスやオブジェクトに依存するため、Java ではすべて「メソッド」になります。

JSの関数パラメータリストの場合、仮パラメータの型や戻り値の型を記述する必要はありません。

// 创建函数/函数声明/函数定义
function 函数名(形参列表) {
    
    
	函数体
	return 返回值;
}
// 函数调用
函数名(实参列表) // 不考虑返回值
返回值 = 函数名(实参列表) // 考虑返回值

関数定義では、関数本体の内容は実行されません。関数定義は、実行前に呼び出す必要があります。呼び出された後、数回実行されます。

function hello() {
    
    
console.log("hello");
}
// 如果不调用函数, 则没有执行打印语句
hello();

---

6.2. パラメータの数について

実パラメータと仮パラメータの数は一致する必要はありませんが、実際の開発では一般に仮パラメータと実パラメータの数が一致している必要があります。

function add(x, y) {
    
    
    return x + y;
}

let result = add(10, 20);
console.log(result); // 30

result = add('hello', 'world');
console.log(result); // helloworld

result = add('hello', 10);
console.log(result); // hello10

• 関数のパラメータを指定する場合、パラメータの型を記述する必要はありません。関数の内部ロジックをサポートできる限り、渡される実際のパラメータの型は任意です(たとえば、2 つのパラメータを追加する必要があります)ここ）
• この機能により、JS では当然「ジェネリック」/「オーバーロード」などの構文が必要なくなります。

一般に、コードを記述するときは、呼び出し時に渡される実際のパラメータが必要であり、その数値は仮パラメータと一致します。しかし実際には、JS にはそのような文法上の制限はなく、
実引数と仮引数の数が異なっていても不可能ではありません!!!
上記の add メソッドのように、任意の数の数値を追加したい場合は、、実際、複数のバージョンのコードを記述する必要はありません。

最大 7 つのパラメータの追加をサポートできます。

function add(a, b, c, d, e, f, g) {
    
    
    return a + b + c + d + e + f + g;
}

console.log(add(10, 20)); // NaN
console.log(add(10, 20, 30)); // NaN
console.log(add(1, 2, 3, 4, 5, 6, 7)); // 28

パラメータとして渡されない仮パラメータは未定義です。

コードで数値の追加と文字列の追加の両方をサポートしたい場合は、最初
のパラメーターが文字列であるか数値 (JS、typeof) であるかを決定することが重要です。後続のパラメータの値 (0 または "")。
仮パラメータよりも実パラメータの方が多い場合、余分な実パラメータは消滅するのと同じです(関数内で取得することはできません)。
ここでのパラメータは変数番号の演算です。 「動的型」の一般的な属性ではなく、JS の独自の属性です。
これを行う目的は、コードをより「柔軟」にすることですが、ほとんどの場合、「柔軟」には軽蔑的な意味合いがあります。

---

6.3. 関数式

JS では、関数は「第一級市民」関数であり、通常の変数と同じように、他の変数に代入したり、別の関数のパラメータとして使用したり、別の関数の戻り値として使用したりできます。 function... (関数 通常の変数と本質的な違いはありませんが、関数などの変数には通常の変数よりも 1 つ多くの機能があります:呼び出し可能)。いわゆる関数式は、実際には関数を変数に代入します。

function hello() {
    
    
    console.log('hello');
}
let f = hello;

hello は関数名であり、hello の後に () がありません。これは、この操作が関数呼び出しではなく、単なる単純な関数の割り当てであることを示します。f
は関数型の変数です。

console.log(typeof(hello)); // function
console.log(typeof hello); // function

上記の hello 関数は、f を通じて呼び出すこともできます。

function hello() {
    
    
    console.log('hello');
}
let f = hello;
f(); // hello

2 つの操作を 1 つの操作に組み合わせることができます。これにより、hello 関数が定義されるだけでなく、hello が f に割り当てられます。

let f = function() {
    
    
    console.log('hello');
}

さらに一歩進んで、hello を省略することもできますが、このとき関数の検索は f に完全に依存します。

let f = function() {
    
    
    console.log('hello');
}

名前のない関数を定義し、この関数を変数 f に割り当てます。後で f に基づいてこの関数を呼び出すことができます。

「匿名関数」とも呼ばれる名前のない関数には、ラムダ式という別の名前があります。

---

7. 範囲

コード内の識別子の有効なスコープ。ES6 標準以前は、スコープは主に 2 つに分割されていました。

• グローバル スコープ: スクリプト タグ全体または別の js ファイルで有効になります。
• ローカルスコープ/関数スコープ: 関数内で有効になります。

ES6:
ES6 は実際には JS のバージョンです。JSは以前は ECMAScript として知られており、ES とも呼ばれます。JS のバージョンは
ES 番号で表される
JS の最新バージョンです。ES から 10 年以上経過しています。 ES6 のステータスは、 Java のステータスでは Java 8 と同等です。

Java の類似バージョン: Java 8. => Java 18

ES6 より前には、ブロック レベルのスコープはありませんでした
。ES6 以降、let が導入され、ブロック レベルのスコープがありました。{} 内で定義された変数には、 {} からアクセスできません
。注意: JS では、{} 内のコードは {} の外側の変数にアクセスできます。

let num = 10;

function hello() {
    
    
    console.log(num); // 10
}

hello(); // 10

let num = 10;

function hello2() {
    
    
    function hello() {
    
    
        console.log(num);
    }

    hello(); // 10
}

hello2();

JS のスコープは「レベルアップ」検索をサポートしています。

スコープチェーン: 内部関数は、チェーン検索メソッドを使用して、内側から外側へ検索して、外部関数の変数にアクセスできます。

現在 hello 関数で num を出力しようとしましたが、hello には num 変数がありませんので、
上位を検索して hello2 を見つけましたが、hello2 には num がなかったので、さらに
上位を検索してグローバル スコープを見つけました。 num が見つかった場合、
最後のグローバル スコープが見つからなかった場合は、エラーが報告されます —

スコープ チェーンの異なるノードに同じ名前の変数が複数ある場合はどうなるでしょうか?
内側から外側まで探して、最初に見つけた人が勝者になります

let num = 10;

function hello2() {
    
    
    let num = 20;
    function hello() {
    
    
        console.log(num);
    }

    hello(); // 20
}

hello2();

---

JSをベースにした二分探索の実装

	function binarySearch(arr, key) {
    
    
            let left = 0;
            let right = arr.length - 1;
            while (left <= right) {
    
    
                // JS 除法 向上取整
                let mid =  Math.ceil((left + right) / 2);
                if (arr[mid] > key) {
    
    
                    right = mid - 1;
                } else if (arr[mid] < key) {
    
    
                    left = mid + 1;
                } else {
    
    
                    return mid;
                }
            }
            return -1;
        }

        let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        let key = 3;
        let ans = binarySearch(arr, key);
        if (ans != -1) {
    
    
            console.log(key + ' 的下标是：' + ans); // 3 的下标是：2
        } else {
    
    
            throw new Error('没有此数');
        }
    </script>

---

バブルソート

	<script>
        function bubbleSort(nums) {
    
    
            for (let i = 0; i < nums.length - 1; i++) {
    
    
                let flg = true;
                for (let j = 0; j < nums.length - 1 - i; j++) {
    
    
                    if (nums[j] > nums[j + 1]) {
    
    
                        let tmp = nums[j];
                        nums[j] = nums[j + 1];
                        nums[j + 1] = tmp;
                        flg = false;
                    }
                }
                if (flg) {
    
    
                    break;
                }
            }
        }

        let nums = [2, 3, 15, 11, 21 ,7, 1];
        bubbleSort(nums);
        console.log(nums);
    </script>

---

クイックソート

<script>
	function quickSort(array) {
    
    
            quick(array, 0, array.length - 1);
        }

        function quick(array, left, right) {
    
    
            if (left >= right) {
    
    
                return;
            }
            let pivot = partition(array, left, right);
            quick(array, left, pivot - 1);
            quick(array, pivot + 1, right);
        }

        function partition(array, left, right) {
    
    
            let tmp = array[left];
            while (left < right) {
    
    
                while (left < right && array[right] >= tmp) {
    
    
                    right--;
                }
                array[left] = array[right];
                while (left < right && array[left] <= tmp) {
    
    
                    left++;
                }
                array[right] = array[left];
            }
            array[left] = tmp; // left right 相遇 就是基准
            return left;
        }

        let array = [2, 3, 15, 11, 21, 7, 1];
        quickSort(array);
        console.log(array);
</script>

---

4. オブジェクト

1. リテラルを使用してオブジェクトを作成する [一般的に使用される]

• オブジェクトはプロパティとメソッドのコレクションです
• Java では、オブジェクトは最初にクラスを持つ必要があり、その後、クラスのインスタンス化に基づいてオブジェクトが生成されます。Java では、
  クラスはカスタム タイプ (Cat クラスと Dog クラスの 2 つの異なるタイプ) と見なすことができます。
• JS では、オブジェクトはクラスに依存しません。JS のすべてのオブジェクトは .object 型です。

JS では、{} を通じてオブジェクトを直接作成できます。

let a = {
    
    }; // 创建了一个空的对象

let student = {
    
    
    name: '张三',
    age: 20,
    height: 180,
    weight: 120,

     sing: function() {
    
    
         console.log('sing()');
     },

     jump: function() {
    
    
         console.log('jump()');
     }
}

• { } を使用してオブジェクトを作成します
• プロパティとメソッドはキーと値のペアを使用して編成されます
• キーと値のペアの間で分割を使用します,。最後の属性の後の属性はオプションです。
• キーと値の間で:分割を使用する
• メソッドの値は匿名関数です

後で、student.property 名のメソッドに従ってアクセスできます。

// 1. 使用 . 成员访问运算符来访问属性 `.` 可以理解成 "的"
console.log(student.name);
// 2. 使用 [ ] 访问属性, 此时属性需要加上引号
console.log(student['height']);
// 3. 调用方法, 别忘记加上 ()
student.sayHello();

---

2. new Object を使用してオブジェクトを作成します

student.name = "...";{} を使用して作成されたオブジェクトでも、このメソッドを使用して、いつでも新しい属性を追加できることに注意してください。

var student = new Object(); // 和创建数组类似

// JS 中一个对象中有哪些成员，也都是动态可以改变的
student.name = "zhangsan";
student.height = 175;
student['weight'] = 170;
student.sayHello = function () {
    
    
	console.log("hello");
}

console.log(student.name);
console.log(student['weight']);
student.sayHello();

---

3. コンストラクターを使用してオブジェクトを作成する

オブジェクトを作成する以前の方法では 1 つのオブジェクトしか作成できませんでしたが、コンストラクターを使用すると、複数のオブジェクトを簡単に作成できます (
例: 複数の猫オブジェクトを作成する)。

var mimi = {
    
    
	name: "咪咪",
	type: "中华田园喵",
	miao: function () {
    
    
		console.log("喵");
	}
};

var xiaohei = {
    
    
	name: "小黑",
	type: "波斯喵",
	miao: function () {
    
    
		console.log("猫呜");
	}
}

var ciqiu = {
    
    
	name: "刺球",
	type: "金渐层",
	miao: function () {
    
    
		console.log("咕噜噜");
	}
}

このとき書くのは面倒ですが、コンストラクタを使用すると同じプロパティやメソッドの作成を抽出できるため、開発プロセスが簡略化されます。

基本的な構文:

私たちが現在話しているコンストラクターは、実際には、類似したオブジェクトのグループをバッチで作成する特別な関数です。

function 构造函数名(形参) {
    
    
	this.属性 = 值;
	this.方法 = function...
}

var obj = new 构造函数名(实参);

関数内を調べて this を通じて属性を作成すると、その関数はコンストラクターである可能性が高くなります。

new の後の名前はコンストラクターの名前であり、「クラス」の名前ではありません。

知らせ：

• コンストラクター内で this キーワードを使用して、現在構築中のオブジェクトを示します
• 通常、コンストラクターの関数名の最初の文字は大文字になります。
• コンストラクターの関数名には名詞を使用できます
• コンストラクターは返す必要がありません
• オブジェクトを作成するときは new キーワードを使用する必要があります

コンストラクターを使用して cat オブジェクトを再作成します。

function Cat(name, type, sound) {
    
    
	this.name = name;
	this.type = type;
	this.miao = function () {
    
    
		console.log(sound); // 别忘了作用域的链式访问规则
	}
}

var mimi = new Cat('咪咪', '中华田园喵', '喵');
var xiaohei = new Cat('小黑', '波斯喵', '猫呜');
var ciqiu = new Cat('刺球', '金渐层', '咕噜噜');

console.log(mimi);
mimi.miao();

---

4. JavaScript オブジェクトと Java オブジェクトの違い

実際、JS 自体は、JS でオブジェクトを作成する後 2 つの方法が非常にぎこちないと感じています。主に最初の書き方が使用されます。JS には
クラスの概念がありません。ES6 までは適用されます。ES6 以降は
、class キーワードが使用されます。オブジェクトの定義を可能にする も導入され、Java に近づきましたが、この方法はまだ最初の方法ほど単純ではなく、オブジェクト定義を
記述する最初の方法は後に普及し、サークルから外れました。 JS だけでなく、他のさまざまな言語でも使用され、すべてのシナリオで .JSON (データ編成形式) が使用されます。

したがって、JS には配列など、本質的に オブジェクト と見なすことができる既製のオブジェクトがいくつかあります。JS には
オブジェクトがありますが、JS はオブジェクト指向プログラミング言語とみなされますか? 私たちは通常、それは重要ではないと考えています!!
JS には、カプセル化、継承、ポリモーフィズム、その他の典型的なオブジェクト指向機能はありません。

JS にはネイティブの継承メカニズムはありません
が、曲線で国を保存する方法があります。「プロトタイプ」です。プロトタイプ メカニズムに基づいて、継承と同様の効果をシミュレートできます。オブジェクトのすべてのプロパティが自動的に追加されます。新しいオブジェクトに...

---