React の const とは何ですか?

Nov 27, 2020 pm 04:25 PM
const react

React の

const は次のとおりです: 1. const で宣言された変数は変更できない値です; 2. const のスコープは let コマンドと同じです; 3. const コマンドで宣言された定数は昇格されません; 4. const 宣言 let のような定数は繰り返し宣言できません; 5. const は読み取り専用の定数を宣言します。

React の const とは何ですか?

このチュートリアルの動作環境: Windows7 システム、React17 バージョンこの方法は、すべてのブランドのコンピューターに適しています。 React の

const は:

1. Const は読み取り専用の定数を宣言します。定数の値は、一度宣言すると変更できません。

const PI = 3.1415;
PI // 3.1415
PI = 3;
// TypeError: Assignment to constant variable.
ログイン後にコピー

上記のコードは、定数の値を変更するとエラーが発生することを示しています。

2. const で宣言された変数は変更できない値です。これは、const 変数が宣言されたらすぐに初期化する必要があり、後で代入できるようにしておくことはできないことを意味します。

const foo;
// SyntaxError: Missing initializer in const declaration
ログイン後にコピー

上記のコードは、const の場合、値を割り当てずに宣言しただけの場合、エラーが報告されることを示しています。

3. const のスコープは let コマンドのスコープと同じで、宣言が置かれているブロックレベルのスコープ内でのみ有効です。

if (true) {
const MAX = 5;
}
MAX // Uncaught ReferenceError: MAX is not defined
ログイン後にコピー

4. const コマンドで宣言された定数は昇格されず、一時的なデッド ゾーンもあり、宣言された位置の後でのみ使用できます。

if (true) {
console.log(MAX); // ReferenceError
const MAX = 5;
}
ログイン後にコピー

上記のコードは、定数 MAX が宣言される前に呼び出され、エラーが報告されます。

5. const で宣言した定数は let のように繰り返し宣言することはできません。

var message = "Hello!";
let age = 25;
// 以下两行都会报错
const message = "Goodbye!";
const age = 30;
ログイン後にコピー

6. 複合型変数の場合、変数名はデータを指すのではなく、データが配置されているアドレスを指します。 const コマンドは、変数名が指すアドレスが変更されないことを保証するだけで、そのアドレスのデータが変更されないことは保証されないため、オブジェクトを定数として宣言する場合は十分に注意する必要があります。

const foo = {};
foo.prop = 123;
foo.prop
// 123
foo = {}; // TypeError: "foo" is read-only
ログイン後にコピー

上記のコードでは、定数 foo はオブジェクトを指すアドレスを格納します。不変なのはこのアドレスのみです。つまり、foo が別のアドレスを指すことはできませんが、オブジェクト自体は変更可能であるため、新しいプロパティをオブジェクトに追加することはできます。

これは別の例です。

const a = [];
a.push('Hello'); // 可执行
a.length = 0; // 可执行
a = ['Dave']; // 报错
ログイン後にコピー

上記のコードでは、定数 a は配列です。配列自体は書き込み可能ですが、別の配列を a に代入するとエラーが報告されます。

7. 本当にオブジェクトをフリーズしたい場合は、Object.freeze メソッドを使用する必要があります。

const foo = Object.freeze({});
// 常规模式时,下面一行不起作用;
// 严格模式时,该行会报错
foo.prop = 123;
ログイン後にコピー

上記のコードでは、定数 foo は凍結されたオブジェクトを指しているため、新しい属性の追加は機能せず、厳密モードではエラーが報告されます。

8. オブジェクト自体をフリーズするだけでなく、オブジェクトのプロパティもフリーズする必要があります。以下はオブジェクトを完全にフリーズする関数です。

var constantize = (obj) => {
Object.freeze(obj);
Object.keys(obj).forEach( (key, value) => {
if ( typeof obj[key] === 'object' ) {
constantize( obj[key] );
}
});
};
ログイン後にコピー

ES5 では、変数を宣言する方法が var コマンドと function コマンドの 2 つだけです。 let および const コマンドの追加に加えて、ES6 には変数を宣言するための 2 つの方法もあります: import コマンドと class コマンドです。したがって、ES6 には変数を宣言する方法が合計 6 つあります。

関連する無料学習の推奨事項: javascript (ビデオ)

以上がReact の const とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

ホット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ヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

React と WebSocket を使用してリアルタイム チャット アプリを構築する方法 React と WebSocket を使用してリアルタイム チャット アプリを構築する方法 Sep 26, 2023 pm 07:46 PM

React と WebSocket を使用してリアルタイム チャット アプリケーションを構築する方法 はじめに: インターネットの急速な発展に伴い、リアルタイム コミュニケーションがますます注目を集めています。ライブチャット アプリは、現代の社会生活や仕事生活に不可欠な部分になっています。この記事では、React と WebSocket を使用して簡単なリアルタイム チャット アプリケーションを構築する方法と、具体的なコード例を紹介します。 1. 技術的な準備 リアルタイム チャット アプリケーションの構築を開始する前に、次のテクノロジとツールを準備する必要があります。 React: 構築用の 1 つ

React フロントエンドとバックエンドの分離ガイド: フロントエンドとバックエンドの分離と独立したデプロイメントを実現する方法 React フロントエンドとバックエンドの分離ガイド: フロントエンドとバックエンドの分離と独立したデプロイメントを実現する方法 Sep 28, 2023 am 10:48 AM

React フロントエンドとバックエンドの分離ガイド: フロントエンドとバックエンドの分離と独立したデプロイメントを実現する方法、特定のコード例が必要です 今日の Web 開発環境では、フロントエンドとバックエンドの分離がトレンドになっています。フロントエンド コードとバックエンド コードを分離することで、開発作業がより柔軟かつ効率的になり、チームのコラボレーションが促進されます。この記事では、React を使用してフロントエンドとバックエンドの分離を実現し、それによって分離と独立したデプロイの目標を達成する方法を紹介します。まず、フロントエンドとバックエンドの分離とは何かを理解する必要があります。従来の Web 開発モデルでは、フロントエンドとバックエンドが結合されています。

React と Flask を使用してシンプルで使いやすい Web アプリケーションを構築する方法 React と Flask を使用してシンプルで使いやすい Web アプリケーションを構築する方法 Sep 27, 2023 am 11:09 AM

React と Flask を使用してシンプルで使いやすい Web アプリケーションを構築する方法 はじめに: インターネットの発展に伴い、Web アプリケーションのニーズはますます多様化および複雑化しています。使いやすさとパフォーマンスに対するユーザーの要件を満たすために、最新のテクノロジー スタックを使用してネットワーク アプリケーションを構築することがますます重要になっています。 React と Flask は、フロントエンドおよびバックエンド開発用の 2 つの非常に人気のあるフレームワークであり、うまく連携してシンプルで使いやすい Web アプリケーションを構築します。この記事では、React と Flask を活用する方法について詳しく説明します。

React と RabbitMQ を使用して信頼性の高いメッセージング アプリを構築する方法 React と RabbitMQ を使用して信頼性の高いメッセージング アプリを構築する方法 Sep 28, 2023 pm 08:24 PM

React と RabbitMQ を使用して信頼性の高いメッセージング アプリケーションを構築する方法 はじめに: 最新のアプリケーションは、リアルタイム更新やデータ同期などの機能を実現するために、信頼性の高いメッセージングをサポートする必要があります。 React はユーザー インターフェイスを構築するための人気のある JavaScript ライブラリであり、RabbitMQ は信頼性の高いメッセージング ミドルウェアです。この記事では、React と RabbitMQ を組み合わせて信頼性の高いメッセージング アプリケーションを構築する方法を紹介し、具体的なコード例を示します。 RabbitMQ の概要:

React Router ユーザーガイド: フロントエンドルーティング制御の実装方法 React Router ユーザーガイド: フロントエンドルーティング制御の実装方法 Sep 29, 2023 pm 05:45 PM

ReactRouter ユーザーガイド: フロントエンドルーティング制御の実装方法 シングルページアプリケーションの人気に伴い、フロントエンドルーティングは無視できない重要な部分になりました。 React エコシステムで最も人気のあるルーティング ライブラリとして、ReactRouter は豊富な機能と使いやすい API を提供し、フロントエンド ルーティングの実装を非常にシンプルかつ柔軟にします。この記事では、ReactRouter の使用方法と具体的なコード例を紹介します。 ReactRouter を最初にインストールするには、次のものが必要です

React と Google BigQuery を使用して高速データ分析アプリケーションを構築する方法 React と Google BigQuery を使用して高速データ分析アプリケーションを構築する方法 Sep 26, 2023 pm 06:12 PM

React と Google BigQuery を使用して高速データ分析アプリケーションを構築する方法 はじめに: 今日の情報爆発の時代において、データ分析はさまざまな業界で不可欠なリンクとなっています。中でも、高速かつ効率的なデータ分析アプリケーションを構築することは、多くの企業や個人が追求する目標となっています。この記事では、React と Google BigQuery を使用して高速データ分析アプリケーションを構築する方法を紹介し、詳細なコード例を示します。 1. 概要 React はビルドするためのツールです

React と Docker を使用してフロントエンド アプリケーションをパッケージ化してデプロイする方法 React と Docker を使用してフロントエンド アプリケーションをパッケージ化してデプロイする方法 Sep 26, 2023 pm 03:14 PM

React と Docker を使用してフロントエンド アプリケーションをパッケージ化およびデプロイする方法 フロントエンド アプリケーションのパッケージ化とデプロイは、プロジェクト開発の非常に重要な部分です。最新のフロントエンド フレームワークの急速な発展により、React は多くのフロントエンド開発者にとって最初の選択肢となっています。コンテナ化ソリューションとして、Docker はアプリケーションのデプロイメントプロセスを大幅に簡素化できます。この記事では、React と Docker を使用してフロントエンド アプリケーションをパッケージ化してデプロイする方法を紹介し、具体的なコード例を示します。 1. 準備 始める前に、インストールする必要があります

React と Apache Kafka を使用してリアルタイム データ処理アプリケーションを構築する方法 React と Apache Kafka を使用してリアルタイム データ処理アプリケーションを構築する方法 Sep 27, 2023 pm 02:25 PM

React と Apache Kafka を使用してリアルタイム データ処理アプリケーションを構築する方法 はじめに: ビッグ データとリアルタイム データ処理の台頭により、リアルタイム データ処理アプリケーションの構築が多くの開発者の追求となっています。人気のあるフロントエンド フレームワークである React と、高性能分散メッセージング システムである Apache Kafka を組み合わせることで、リアルタイム データ処理アプリケーションを構築できます。この記事では、React と Apache Kafka を使用してリアルタイム データ処理アプリケーションを構築する方法を紹介します。

See all articles