ホームページ  >  記事  >  ウェブフロントエンド  >  es6 で変数を宣言するにはいくつかの方法があります

es6 で変数を宣言するにはいくつかの方法があります

青灯夜游
青灯夜游オリジナル
2022-03-07 17:21:064522ブラウズ

es6 変数を宣言するには 6 つの方法があります: 1. キーワード var を使用して変数を宣言する; 2. キーワード function を使用して変数を宣言する; 3. キーワード const を使用して変数を宣言する; 4. キーワードを使用するlet で変数を宣言します; 5. キーワード class を使用して変数を宣言します; 6. キーワード import を使用して変数を宣言します。

es6 で変数を宣言するにはいくつかの方法があります

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

ES5 では、変数を宣言する方法が var コマンドと function コマンドの 2 つだけです。

ES6 let および const コマンドの追加に加えて、変数を宣言するには、import コマンドと class コマンドの 2 つの方法があります。

つまり、ES6 には変数を宣言する方法が合計 6 つあります。

1. キーワード var を使用して変数を宣言します。

var a ;  //undefined
var b = 1;
  • var で定義された変数は変更できます。初期化されていない場合は、 # # 出力されます。 #unknown, エラーは報告されません
  • var で宣言された変数はウィンドウ上にあります。変数を宣言するには let または const を使用してください。この変数はウィンドウ上には配置されません.
  • 多くの言語にはブロック レベルのスコープがありますが、JS にはありません。変数を宣言するために var を使用し、スコープを分割するために関数を使用します。中括弧 "{}" は var のスコープを制限できません。したがって、var で宣言された変数には
  • 変数プロモーションEffect
  • var で宣言された変数のスコープはグローバルまたは関数レベルです

2. キーワード function を使用して変数を宣言します

function add(a) {
  var sum = a + 1;
  return sum;
}
    add という名前の新しい変数を宣言し、それに関数定義を割り当てます。
  • {} の間の内容add に割り当てられます
  • 関数内のコードは実行されませんが、将来の使用のために変数に保存されるだけです

3. 変数を宣言しますキーワード const を使用

const a;     //报错,必须初始化
const b = 1;
    #const で定義された変数は変更できないため、初期化する必要があります
  • 変数はグローバル変数、またはグローバル変数内のグローバル変数です。 module
  • 変数の場合、宣言時に一度だけ割り当てられ、コードの他の行で再割り当てされることはありません。その場合は const を使用する必要がありますが、変数の初期値は将来調整される可能性があります (定数変数)
  • 読み取り専用の定数を作成します。この定数は、別のブラウザでは変更できないように見えます。宣言後に変更しないことをお勧めします。スコープはブロック レベルです。
  • const
  • constant値を表しますindex、つまり、メモリ内の変数名の ポインタは変更できません しかし、この変数を指す 値は変更される可能性があります
  • const で定義された変数は変更できません。通常、モジュールが必要な場合に使用または定義されます。
  • グローバル定数
  • 定数はグローバルで宣言できます。スコープまたは関数内にありますが、

    必ず初期化する必要があります定数

  • 定数は、そのスコープ内の他の変数または関数と同じ名前を持つことはできません

4. キーワード let を使用します。変数の宣言#

let a;  //undefined
let b = 1; 
function add(b) {
  let sum = b + 1;
  return sum;
}
let c = add(b);
    には "javascript strict モード":
  • 'use strict'; が必要です。 #変数のプロモーションはありません
  • 重複した宣言は許可されません
  • let によって宣言された変数のスコープはブロックレベルのドメイン内にあります。let が定義された後は、関数の内部では、関数の外部には影響しません (
  • ブロックレベルのスコープ
  • )宣言時に変数に値を割り当てることができます。デフォルト値は未定義です。スクリプトの後半で変数に値を割り当てることもできます。存続前には使用できません (一時的なデッド ゾーン)

5. キーワード class を使用して変数を宣言します

# 授業については、後ほど詳しく別記事に書きますので、簡単に紹介します。 まず、ES5 のコンストラクターを見て、次に ES6 クラスを使用してそれを実装します:

// ES5写法 :
  function fun ( x, y ){
    this.x = x;
    this.y = y;
  };
  fun.prototype.GetHair = function(){
    return `${this.x}掉了两根头发,${this.y}说俺也一样!`;
  };
  let setHair = new fun('小明','老王');
  console.log(setHair.GetHair()); // 小明掉了两根头发,老王说俺也一样!

ES6 クラスがどのように記述されるかを見てみましょう:

 class Interest {
    constructor( x, y, e, z ){
      this.x = x;
      this.y = y;
      this.e = e;
      this.z = z;
    }
    MyInterest(){
      let arr = [];
      console.log(`我会${[...arr,this.x,this.y,this.e,this.z]}!`);
    }
  }
  let GetInterest = new Interest('唱','跳','rap','篮球');
  console.log(GetInterest.MyInterest());  //我会唱,跳,rap,篮球!

ES6 クラスは単なる構文シュガーとみなすことができます, その機能のほとんどは ES5 で実現できます。新しいクラスの記述方法は、オブジェクト プロトタイプの記述方法をより明確にし、オブジェクト指向プログラミングの構文に近づけるだけです。コンストラクター メソッドは構築メソッドであり、this キーワードはインスタンスを表します物体。 。つまり、ES5 のコンストラクタ Point は、ES6 の Point クラスのコンストラクタ メソッドに対応します。

6. キーワード import を使用して変数を宣言します

import

はファイルをロードするために使用されます。中括弧は 1 つ以上の変数名です。これらの変数名は、インポートする変数名と同じである必要があります。

举个栗子:你想要导入action.js文件中的某一个变量,这个变量里保存了一段代码块,所以你要写成:import { Button } from 'action',这个时候,你就从action.js中获取到了一个叫 Button 的变量,既然获取到了,你就可以对Button里的代码猥琐欲为了

如果想为输入的变量重新取一个名字,import命令要使用as关键字,将输入的变量重命名,比如:

import { NewButton as Button } from 'action.js';

上面的代码表示从action.js文件中,获取一个变量名称叫做Button的代码段,然后你又声明了一个变量 NewButton ,将 Button 保存在 NewButton

【相关推荐:javascript视频教程web前端

以上がes6 で変数を宣言するにはいくつかの方法がありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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