es6 の新しい宣言方法は何ですか?

新しい宣言方法: 1. let、変数の宣言に使用される構文「let 変数名=値」; 2. const、定数の宣言に使用される構文「const 定数名=値」; 3. class 、クラスの宣言に使用され、構文は "class class name {...}" です; 4. import、静的にロードされた入力変数の宣言に使用されます。

#この記事の動作環境: Windows 10 システム、Vue バージョン 2.9.6、DELL G3 コンピューター。

es6 の新しい宣言メソッドとは

ES5 より前には 2 種類の変数宣言がありました。1 つ目は、変数と定数を宣言するための「var」でした。 2 つ目は、関数の「関数」を宣言することです。 ES6 では、変数の宣言方法が 6 通りに拡張されており、その概要は次のとおりです。

変数または定数の宣言: var、let (ES6 の新機能)、const (ES6 の新機能);

関数変数の宣言: function;

クラスの宣言: class (ES6 の新機能);

「静的読み込み」入力変数の宣言: import (ES6 の新機能);

これらの新しいメソッドを学ぶ前に、ES6 のいくつかの新しく定義された概念についても知っておく必要があります:

1、let および const

Definition:

let: ES6 では、変数を宣言するための新しい let コマンドが追加されています。その使用法は var と似ていますが、宣言された変数は let コマンドが配置されているブロックレベルのスコープ内でのみ有効です。

const: ES6 では、読み取り専用定数を宣言するための新しい const コマンドが追加されています。定数の値は、一度宣言すると変更できません。 let のように宣言された変数は、ブロック レベルのスコープ内でのみ有効です;

機能の違い:

同じ: 変数の昇格がないため、宣言後にのみ使用できます。宣言されていない場合は、エラーが報告されます。;

## にはすべて一時デッド領域 (TDZ) があり、変数なしで使用されてエラーが報告される理由も説明されています。

## はステートメントを繰り返すことができません;

相違点: const で宣言された変数は「不変」変数であるため、変数の宣言時に直接割り当てる必要があります。定数の代入後に値を変更することはできません。変更しないとエラーが報告されます。

注: 上で述べたのは、const で宣言された変数は変更できないということですが、「定数」については、文字列、数値、ブール値などの「基本的なデータ型」であると理解しています。すべてのデータ型を参照するわけではなく、constで宣言した変数が参照データ型の場合は値を変更することができます。

ここでは、const によって保存される内容の本当の意味について説明します。const が実際に保証しているのは、変数の値が変更できないことではなく、変数が指すメモリ アドレスに格納されているデータが変更できないことです。変えられない。単純なタイプのデータ (数値、文字列、ブール値) の場合、値は変数が指すメモリ アドレスに格納されるため、定数と同等です。

しかし、複合型データ (主にオブジェクトと配列) の場合、変数が指すメモリ アドレスには、実際のデータへのポインタが格納されるだけです。const は、このポインタが固定されていることを保証することしかできません (つまり、常に固定されています)。別の固定アドレスを指します)、それが指すデータ構造が可変であるかどうかについては、完全に制御できません。したがって、オブジェクトを定数として宣言するときは細心の注意を払う必要があります。

使用法:

// let 用法
let a = '123';
 
// const 用法
const b = '456'

2、クラス

定義: ES6 クラスは、その機能のほとんどを備えた単なる構文糖衣と見なすことができ、ES5 では次のことが可能です。新しいクラスの記述方法は、オブジェクト プロトタイプの記述方法をより明確にし、オブジェクト指向プログラミングの構文に近づけるだけです。

(class はクラスを定義します。これは実際には非常に重要な知識です。ここでは最も基本的な使い方を簡単に学び、導入の役割も果たします。詳細な学習は後で記録します)

使用法:

// 基本方法定义一个类
class Point{
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
 
    toString(){
        return '( '+ this.x +','+ this.y +')';
    }
}
 
var point = new Point(2,3)
point.toString(); // (2,3)
 
 
// 表达式的方法定义一个类
let person = new class {
  constructor(name) {
    this.name = name;
  }
 
  sayName() {
    console.log(this.name);
  }
}('张三');
 
person.sayName(); // "张三"

3. import

使用法:

export コマンドを使用してモジュールの外部インターフェイスを定義した後、その他の JS ファイル このモジュールは、import コマンドを通じてロードできます。

// main.js
import { firstName, lastName, year } from './profile.js';
 
function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

上記のコードのインポート コマンドは、profile.js ファイルをロードし、そこから変数を入力するために使用されます。 import コマンドは、他のモジュールからインポートする変数名を指定する一対の中括弧を受け入れます。中括弧内の変数名は、インポートされたモジュール (profile.js) の外部インターフェイスの名前と同じである必要があります。入力変数の名前を変更する場合は、インポート コマンドで as キーワードを使用して入力変数の名前を変更します。

import { lastName as surname } from './profile.js';

[関連する推奨事項:「

vue.js チュートリアル

」]

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