es6 で変数を宣言するにはいくつかの方法があります-フロントエンドQ&A-php.cn

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

青灯夜游

リリース： 2022-10-28 19:23:09

オリジナル

4548 人が閲覧しました

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, エラーは報告されません
多くの言語にはブロックレベルのスコープがありますが、JS にはありません。変数を宣言するために var を使用し、スコープを分割するために関数を使用します。中括弧 "{}" は var のスコープを制限できません。したがって、var で宣言された変数には
変数プロモーションEffect

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

function add(a) {
　　var sum = a + 1;
　　return sum;
}

ログイン後にコピー

{} の間の内容add に割り当てられます
関数内のコードは実行されませんが、将来の使用のために変数に保存されるだけです

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

const a;     //报错，必须初始化
const b = 1;

ログイン後にコピー

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

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

let a;　　//undefined
let b = 1; 
function add(b) {
　　let sum = b + 1;
　　return sum;
}
let c = add(b);

ログイン後にコピー

'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(&#39;小明&#39;,&#39;老王&#39;);
  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(&#39;唱&#39;,&#39;跳&#39;,&#39;rap&#39;,&#39;篮球&#39;);
  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 &#39;action.js&#39;;

ログイン後にコピー

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

【相关推荐：javascript视频教程、web前端】

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