検索
ホームページウェブフロントエンドフロントエンドQ&AJavaScriptで変数を宣言するためのキーワードは何ですか

JavaScriptで変数を宣言するためのキーワードは何ですか

Jun 09, 2021 pm 03:58 PM
javascriptキーワード変数を宣言する

JavaScript で変数を宣言するためのキーワードは、var、let、const です。 var で宣言された変数は、あらゆるタイプの値を保存するために使用できます。宣言のスコープは関数スコープであり、let 宣言のスコープはブロック スコープです。const で変数を宣言する場合、変数は同時に初期化する必要があります時間であり、初期化後に値を変更することはできません。

JavaScriptで変数を宣言するためのキーワードは何ですか

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

変数キーワード var、let、const を宣言します。

ECMAScript 変数は、大まかに型指定されます。つまり、変数を使用して、任意の型の変数を保存できます。 data では、各変数は、任意の値を保持するために使用される名前付き プレースホルダーにすぎません。

1.var キーワード

var で宣言された変数は、

任意の 型の値を保存するために使用できます (特別な場合を除く)。値 unknown は初期化中に保存されます。他の言語と同様、JavaScript も定義中に変数に値を割り当てることができます。変数は save として定義されます。割り当てられた値の変数JavaScript は 動的言語 であるため、変数を初期化するときに、変数は割り当てられたデータ型として識別されず、単純な割り当てにすぎません。次に、保存された値を変更できるだけでなく、値の型も変更できます。

var message = "hi";
	message = 100;

1.1.var 宣言スコープ

var 演算子を使用します。 定義された変数は、それを含む関数に対してローカルになります。たとえば、関数内で var を使用して変数を定義すると、関数の終了時に変数が破棄されることになります。これが

ガベージ コレクション と呼ばれるものだと思います:

function test( ) {
		vart message = "hi";	//局部变量
	}
test( );
console.log(message);	//报错!

関数の後にcall 変数はランダムに破棄されるため、最後の行でエラーが報告されます。ただし、関数で変数を定義するときに var 演算子を省略すると、

グローバル変数 を作成できます。

function test( )  {
	message = "hi";	//全局变量
}
test( );
console.log(message);	//"hi"

関数 test() が 1 回呼び出される限り、グローバル変数メッセージが定義され、関数の外部アクセスが可能になります。ただし、ローカル スコープで定義されたグローバル変数は保守が難しいため、一般的には推奨されません。

1.2. Var 宣言の昇格

var キーワードを使用して宣言された変数は、

関数スコープの先頭に自動的に昇格されます、いわゆる「巻き上げ」 (ホイスト)、つまりすべての変数宣言を関数スコープの先頭にプルします:

function fool( ) {
	console.log(age);
	var age = 28;
}
fool( );	//undefined

ここではエラーは報告されませんが、 ECMAScript 実行時は、

function fool( ) {
	var age;
	console.log(age);
	age = 28;
}
fool( );	//undefined

2.let ステートメント

のコードと同等とみなされます。 let と var の機能はほとんど同じですが、非常に重要な違いがあります。最も明らかな違いは、let 宣言のスコープが

block スコープ であるのに対し、var 宣言のスコープは関数スコープであることです。

if (true) {
	let age = 26;
	console.log(age);	//26
}
console.log(age);	//ReferceError:age没有定义

age 変数のスコープは次のように制限されます。ブロックの内側にあるため、if ブロックの外側から参照することはできません。ブロック スコープは関数スコープのサブセットであるため、var に適用されるのと同じスコープ制限が let にも適用されます。

Let では、同じスコープ内に冗長な宣言を出現させることもできません (var can):

var name;
var name;
let age;
let age;	//SyntaxError;标识符age已经声明过了

さらに、冗長な宣言エラーは、var と let を混合しても影響を受けません。これら 2 つのキーワードは、異なる型の変数を宣言するものではなく、関連するスコープ内で変数がどのように存在するかを示すだけです。

2.1. 一時的なデッドゾーン

let と var のもう 1 つの重要な違いは、let で宣言された変数

が使用されないことです。ドメイン内でプロモートされます:

//name会提升
console.log(name);	//undefined
var name = 'matt';

//name不会提升
console.log(name);	//ReferenceError:name没有定义
let name = 'matt';

2.2. グローバル宣言

var とは異なり、let 変数を使用してグローバル スコープで宣言されます。ウィンドウ オブジェクトの属性にはなりません (var で宣言された変数は変わります):

var name = 'matt';
console.log(window.name);	//'matt'

let name = 'matt';
console.log(window.name);	//undefined

ただし、宣言は依然としてグローバル スコープ内で行われ、対応する変数はページの宣言サイクル内で保持されます。

2.3. 条件宣言

let のスコープはブロックなので、同じ名前の変数が存在するかどうかを確認することはできません。 let を使用して事前に宣言されていると同時に、それを宣言せずに宣言することもできません。 try/catch または typeof 演算子を使用しても、条件ブロック内の let 宣言の範囲がそのブロックに制限されているため、この問題を解決することはできません。このため、新しい ES6 宣言キーワード let は条件付き宣言パターンに依存できません。

2.4. for ループでの let 宣言

var を使用する場合、最も一般的な問題は、反復変数の奇妙な宣言と宣言です。

for(var i = 0; i < 5; ++i) {
	setTimeout( () => console.log(i) ,0)
}
//你可能以为会输出0、1、2、3、4
//实际上输出的是5、5、5、5、5

ループを終了すると、反復変数にはループを終了する原因となった値 5 が格納されます。

setTimeout タイムアウト ロジックが後で実行されるとき、i は 同じ 変数であるため、最終出力は同じ値になります。

    使用let声明迭代变量时,JavaScript引擎在后台会为每个迭代循环声明一个新的迭代变量,每个setTimeout引用的都是不同的变量实例:

for(let i = 0; i < 5; ++i) {
	setTimeout( () => console.log(i) ,0)
}
//会输出0、1、2、3、4

【相关推荐:javascript学习教程

3.const声明

    const的行为与let基本相同,唯一一个重要区别是它声明变量时必须同时初始化变量,且尝试修改const声明的变量会导致运行错误。

    const声明的限制只适用于它指向的变量的引用。如果const变量引用的是一个对象,那么修改这个对象内部的属性并不违反const的限制:

const person = { };
person.name = &#39;matt&#39;;

4.使用建议

let和const是ES6中新增的,从客观上为JavaScript更精确地声明作用域和语义提供更好的支持。

4.1.不使用var

    限制自己只使用let和const有助于提升代码质量,因为变量有了明确的作用域、声明位置,以及不变的值。

4.2.const优先,let次之

    使用const声明可以让浏览器运行时强制保持变量不变,也可以让静态代码分析工具提前发现不合法的赋值操作。因此,我们应该优先使用const来声明变量,只有在提前知道未来会有修改时再使用let。

更多编程相关知识,请访问:编程入门!!

以上がJavaScriptで変数を宣言するためのキーワードは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
React:現代のフロントエンド開発の基礎React:現代のフロントエンド開発の基礎Apr 19, 2025 am 12:23 AM

Reactは、最新のフロントエンドアプリケーションを構築するためのJavaScriptライブラリです。 1.パフォーマンスを最適化するために、コンポーネントおよび仮想DOMを使用します。 2。コンポーネントJSXを使用して、データを管理するために定義、状態、および属性を定義します。 3.フックはライフサイクル管理を簡素化します。 4. Contextapiを使用して、グローバルステータスを管理します。 5.一般的なエラーには、デバッグステータスの更新とライフサイクルが必要です。 6。最適化手法には、メモ、コード分割、仮想スクロールが含まれます。

Reactの未来:Web開発におけるトレンドと革新Reactの未来:Web開発におけるトレンドと革新Apr 19, 2025 am 12:22 AM

Reactの未来は、究極のコンポーネント開発、パフォーマンスの最適化、および他のテクノロジースタックとの深い統合に焦点を当てます。 1)Reactは、コンポーネントの作成と管理をさらに簡素化し、究極のコンポーネント開発を促進します。 2)特に大規模なアプリケーションでは、パフォーマンスの最適化が焦点になります。 3)Reactは、開発エクスペリエンスを改善するために、GraphQLやTypeScriptなどのテクノロジーと深く統合されます。

React:UIコンポーネントを構築するための強力なツールReact:UIコンポーネントを構築するための強力なツールApr 19, 2025 am 12:22 AM

Reactは、ユーザーインターフェイスを構築するためのJavaScriptライブラリです。その核となるアイデアは、コンポーネントを通じてUIを構築することです。 1.コンポーネントは、UIロジックとスタイルをカプセル化する反応の基本単位です。 2。仮想DOMと状態管理はコンポーネントの作業の鍵であり、状態はSetStateから更新されます。 3.ライフサイクルには、マウント、更新、アンインストールの3つのステージが含まれます。パフォーマンスは、合理的に使用して最適化できます。 4. UseStateとContextapiを使用して、状態を管理し、コンポーネントの再利用性とグローバルな州管理を改善します。 5.一般的なエラーには、不適切なステータスの更新とパフォーマンスの問題が含まれます。これは、ReactDevtoolsを介してデバッグできます。 6.パフォーマンス最適化の提案には、メモの使用、不必要な再レンダリングの回避、および私たちの使用が含まれます

HTMLとのReactを使用:コンポーネントとデータのレンダリングHTMLとのReactを使用:コンポーネントとデータのレンダリングApr 19, 2025 am 12:19 AM

HTMLを使用してReactでコンポーネントとデータをレンダリングすることは、次の手順を通じて達成できます。JSX構文の使用:JSX構文を使用してHTML構造をJavaScriptコードに埋め込み、コンパイル後にDOMを操作します。コンポーネントはHTMLと組み合わされます。Reactコンポーネントはプロップを介してデータを渡し、などのHTMLコンテンツを動的に生成します。データフロー管理:Reactのデータフローは、親コンポーネントから子コンポーネントに渡される一方通行であり、アプリコンポーネントが名前を挨拶に渡すなど、データフローが制御可能であることを保証します。基本的な使用例:マップ関数を使用してリストをレンダリングするには、フルーツリストのレンダリングなどのキー属性を追加する必要があります。高度な使用例:UseStateフックを使用して状態を管理し、ダイナミクスを実装する

Reactの目的:シングルページアプリケーションの構築(SPA)Reactの目的:シングルページアプリケーションの構築(SPA)Apr 19, 2025 am 12:06 AM

Reactは、ユーザーインターフェイスを構築するための効率的で柔軟な方法を提供するため、シングルページアプリケーション(SPA)を構築するための好ましいツールです。 1)コンポーネント開発:複雑なUIを独立した再利用可能な部分に分割して、保守性と再利用性を向上させます。 2)仮想DOM:仮想DOMと実際のDOMの違いを比較することにより、レンダリングパフォーマンスを最適化します。 3)状態管理:状態および属性を介したデータフローを管理して、データの一貫性と予測可能性を確保します。

React:Web開発のためのJavaScriptライブラリの力React:Web開発のためのJavaScriptライブラリの力Apr 18, 2025 am 12:25 AM

Reactは、メタがユーザーインターフェイスを構築するために開発したJavaScriptライブラリであり、そのコアはコンポーネント開発と仮想DOMテクノロジーです。 1。コンポーネントと状態管理:Reactは、コンポーネント(関数またはクラス)とフック(UseStateなど)を介して状態を管理し、コードの再利用性とメンテナンスを改善します。 2。仮想DOMとパフォーマンスの最適化:仮想DOMを介して、実際のDOMを効率的に更新してパフォーマンスを向上させます。 3.ライフサイクルとフック:フック(使用効果など)は、関数コンポーネントがライフサイクルを管理し、副作用操作を実行できるようにします。 4。使用例:基本的なHelloworldコンポーネントから高度なグローバル州管理(USECONTEXTおよび

Reactのエコシステム:ライブラリ、ツール、およびベストプラクティスReactのエコシステム:ライブラリ、ツール、およびベストプラクティスApr 18, 2025 am 12:23 AM

Reactエコシステムには、状態管理ライブラリ(Reduxなど)、ルーティングライブラリ(Reactrouterなど)、UIコンポーネントライブラリ(材料-UIなど)、テストツール(JESTなど)、およびビルディングツール(Webpackなど)が含まれます。これらのツールは、開発者がアプリケーションを効率的に開発および維持し、コードの品質と開発効率を向上させるのを支援するために協力します。

反応とフロントエンドの開発:包括的な概要反応とフロントエンドの開発:包括的な概要Apr 18, 2025 am 12:23 AM

Reactは、ユーザーインターフェイスを構築するためにFacebookが開発したJavaScriptライブラリです。 1. UI開発の効率とパフォーマンスを改善するために、コンポーネントおよび仮想DOMテクノロジーを採用しています。 2。Reactのコア概念には、コンポーネント化、状態管理(UseStateやUseEffectなど)、および仮想DOMの作業原則が含まれます。 3。実際のアプリケーションでは、基本的なコンポーネントレンダリングから高度な非同期データ処理へのReactサポートがサポートされます。 4.主要な属性の追加や誤ったステータスの更新を忘れるなどの一般的なエラーは、ReactDevtoolsとログを介してデバッグできます。 5.パフォーマンスの最適化とベストプラクティスには、React.Memo、コードセグメンテーション、コードの読み取り可能な状態を維持し、信頼性を維持することが含まれます

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)