JavaScript 上級プログラミング学習① 完全な JavaScript には何が含まれますか? var、let、const の用途、類似点、相違点は何ですか? for ループで let in を使用する方が良いのはなぜですか? 未定義、Null、NaN とはそれぞれ何ですか?

1. 完全な JavaScript には何が含まれますか? どういう意味でしょうか？

1.1 完全な JavaScript には 3 つの部分が含まれています

コア ECMAScript、ドキュメントオブジェクトモデル DOM、ブラウザオブジェクトモデル BOM

1.2 JavaScript の 3 つの部分の意味

1.2.1 ECMAスクリプト

ECMA-262 は、言語の構文、型、ステートメント、キーワード、予約語、演算子、およびグローバルオブジェクトを定義します。ECMA-262 は多くのバージョンを繰り返してきました。たとえば、ECMA-262 の第 6 版は一般に ES6 として知られています。

ECMAScript は ECMA-262 で定義された言語であり、この仕様で説明されているすべての側面を実装する言語に与えられた名前です。

JavaScript は ECMAScript を実装します。

1.2.2 DOM ドキュメントオブジェクトモデル

ドキュメントオブジェクトモデル (DOM) は、HTML で拡張 XML を使用するためのアプリケーションプログラミングインターフェイスです。

DOM は、ページ全体を一連の階層ノードに抽象化します。

<html>
	<head> 
		<title>Page Title</title>
	</head>
	<body>
		<p>Hello World</p>
	</body>
</html>

コードは、DOM を介して階層ノードのセットとして表現できます。

1.2.3 BOM ブラウザのオブジェクトモデル

ブラウザオブジェクトモデル (BOM)。ブラウザのウィンドウへのアクセスと操作をサポートするために使用されます。BOM を使用すると、開発者はブラウザに表示される内容以外のページの部分を制御できます。BOM の中核は、ブラウザのインスタンスを表す Window オブジェクトです。

2. var、let、const の用途、類似点、相違点は何ですか?

2.1 var、let、const の類似点と相違点の概要

	宣言可能な変数	範囲	変数昇進	冗長なステートメント	変数を初期化する必要がある	不変
だった	いろんなタイプ	関数スコープ	✔	✔	×	×
させて	いろんなタイプ	ブロックスコープ	×	×	×	×
定数	いろんなタイプ	ブロックスコープ	×	×	✔	✔

2.2 var、let、constの類似点、相違点および使用法の詳細と使用法

2.2.1 範囲

var のスコープは関数スコープです。つまり、関数内で宣言すると、関数全体で使用できます。

let と const のスコープはブロックスコープです。つまり、let が {} 内で定義されている場合、{} の外からはアクセスできません。

以下に var、let、const スコープの例を示します var で宣言された変数の場合、ブロック内で宣言されていても関数全体にアクセスできることがわかりますもちろんスコープは現在の関数内に限定されますtest() の間。

function test() {
    if (true) {
        var a = "HelloWorld"
        console.log("块内声明：" + a)
    }
    console.log("块外：" + a)
}
test()
console.log("函数作用域外：" + a)

let および const によって宣言された変数の場合、現在のブロック内でのみアクセスでき、現在の関数スコープ内または関数スコープ外ではアクセスできません。

function test() {
    if (true) {
      //const a = "HelloWorld"
        let a = "HelloWorld"
        console.log("块内声明：" + a)
    }
    console.log("块外：" + a)
}
test()
console.log("函数作用域外：" + a)

2.2.2 変数プロモーション

var には変数の昇格があります。つまり、var を使用すると、var で定義された変数が関数スコープの先頭に自動的に昇格します。

let と const には変数の昇格はありません。

var、let、const 変数のプロモーションの例を以下に示します。Var 変数の昇格とは、このキーワードを使用して宣言された変数が関数スコープの先頭に自動的に昇格され、エラーは報告されませんが、未定義が表示されることを意味します。

console.log(a)
var a = "HelloWorld"
console.log(a)

つまり、上記のコード行は次のコードと同等です。

var a
console.log(a)
var a = "HelloWorld"

let と const には変数のプロモーションはありません。この変数を使用する前に定義されていない場合は、エラーが直接報告されます。

console.log(a)
let a = "HelloWorld"
// const a = "HelloWorld"

2.2.3 冗長な宣言

var は重複して宣言できますが、let と const は重複して宣言できません。

冗長な宣言とは、同じ変数を複数回繰り返して宣言することを指し、var では冗長な宣言が許可されます。

var a = "1"
var a = "2"
var a = "3"
console.log(a)

let と const は冗長な宣言を許可せず、エラーを直接報告します。

let a = "1"
let a = "2"
//const a = "1"
//const a = "2"
console.log(a)

2.2.4 変数の初期化と変更

const 変数を宣言する場合は、変数を初期化する必要があり、const 値を変更することはできません。

const a

const a = 1;
	  a += 2;

3. for ループでは const または var の代わりに let を使用する方が良いのはなぜですか?

3.1 varに変数貫通があり、タイマーを使用すると変なエラーが発生します。

3.1.1 可変透過率

いわゆる変数の浸透は、var のスコープが関数スコープ全体であり、var で定義された i が関数全体で定義されるためです。このループ本体で単に定義されるのではなく。

for (var i = 0; i < 3; i++) {

}
console.log(i);

3.1.2 タイマー「エラー」

同時に、ループにタイマーが追加され、i の値を操作する必要がある場合、ループの最後に至る i の値のみを取得できます。

for (var i = 0; i < 3; i++) {
    setTimeout(() => { console.log(i) }, 0)
}

3.2 Const は定義上変更を許可しておらず、ループカウントの i として使用するとエラーが直接報告されます。

for (const i = 0; i < 3; i++) {
}

3.3 let を使用すると、上記 3 つの問題を完全に回避できるため、for ループ内で let を使用するのが最善です。

for ループで i を定義するために let を使用すると、タイマー内の関数によって参照される変数は、最後に i の値を直接出力するのではなく、反復ごとに JavaScript エンジンによって宣言された新しい変数になります。変数の貫通は発生しません。関数の外では動作しません。

for (let i = 0; i < 3; i++) {
    setTimeout(() => { console.log(i) }, 0)
}
console.log(i)

4. 未定義、Null、NaN とはそれぞれ何ですか?

4.1 未定義

変数が var または let を使用して宣言されているが初期化されていない場合、それは変数に未定義の値を代入することと同じです。

let a
var b
console.log(a)
console.log(b)

4.2 ヌル

null 値は null オブジェクトポインタを表します。null オブジェクトを返すには typeof を使用します。

console.log(typeof(null))

ECMA-262 では、これらは表面的に等しい、つまり、null==unknown は true を返すと定義されていますが、もちろん、完全に等しいわけではありません。

console.log(undefined == null)
console.log(undefined === null)

4.3 NaN

NaN (非数値) は、値を返すはずだった操作が失敗したことを示すために使用される特別な値です。0、+0、または -0 による除算は NaN を返します

たとえば、0/0 は NaN を返し、3/0 は Infinity を返します。

console.log(0/0)
console.log(3/0)

NaN は、サイズを比較するときに奇妙な状況でも表示されます。

console.log(NaN > 3);
console.log(NaN <= 3);
console.log(NaN == NaN);
console.log(NaN === NaN);
console.log(NaN != NaN);

NaN は 3 より大きくも 3 に等しくもなく、それ自体に等しくもなく、それ自体に完全に等しいわけでもありません。

5. 関係演算子、なぜ 3 > 23 が表示されるのですか?

これら 4 行のコードが実行されると、1 行は false を返します。つまり、奇妙な「23 < 3」が表示されます。

console.log("23" > "3");
console.log(23 > "3");
console.log("23" > 3);
console.log(23 > 3);

「23」と「3」がともに文字列の場合、文字コードを段階的に比較し、「2」のコード50が「3」のコード51より小さいため、falseを返します。

それ以外の場合、数値が含まれている場合は、文字列を数値に変換して比較します。