JS基礎五(ES六新文法)

ES六新構文

ES 6概要

letコマンド

letとvarの比較

変数リフト

は存在しない.

繰り返し宣言は許可されていません

constコマンド

ES 6宣言変数の6つの方法

classコマンド

解構賦値

正規表現

ES 6の概要
ECMAScript 6(ES 6)は、2015年6月に正式に発表されたJavaScript言語の標準であり、正式にはECMAScript 2015(ES 2015)と呼ばれている.JavaScript言語を複雑な大規模なアプリケーションを作成し、エンタープライズ開発言語にすることを目標としている.また、ES 6はES 2015以降の新規特性を指す場合もあるが、以降のバージョンはES 7、ES 8などと呼ぶべきである.
基本構文
letコマンド
letとvarの比較
ES 6には、変数を宣言するためのletコマンドが追加されました.varと同様に使用されますが、letで宣言された変数は、そのコードブロック内でのみ有効です.たとえば

{
    let m=1
    var n=2
}
console.log(m)//  .html:55 Uncaught ReferenceError: m is not defined
console.log(n)//2

以上のように、1つのコードブロック内でそれぞれletとvarで変数が宣言され、コードブロック外呼び出し時にvarで宣言された変数は正しい値を返し、letで宣言された変数は間違って報告され、let宣言された変数がそのコードブロック内でのみ有効であることを示している.forループのカウンタは、letコマンドカウンタiを使用してforループ内でのみ有効であり、ループ体外で参照するとエラーが報告されるのに適しています.次のコードはvarを使用すると、最後に出力されるのは10です.変数iはvarコマンドで宣言するため、グローバル範囲で有効であり、ループごとに変数iの値が変化し、ループ内に配列aの関数内部のconsole eが付与.log(i)は,中のiがグローバルなiを指す.すなわち,すべての配列aのメンバ内のiは,同じiを指しており,実行時に出力されるのは最終ラウンドのiの値,すなわち10である.letを使用すると、宣言された変数はブロックレベルの役割ドメイン内でのみ有効であり、最後に出力されるのは6です.変数iはletで宣言されているため、現在のiは本サイクルでのみ有効であるため、各サイクルのiは実際には新しい変数であるため、最後に出力されるのは6である.JavaScriptエンジンの内部には前回のループの値が記憶されているので、本輪の変数iを初期化すると、前回のループに基づいて計算されます.

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10
 
var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

letは、同じ役割ドメイン内で同じ変数を繰り返し宣言することは許されず、関数内の同じモジュール範囲でパラメータを再宣言することはできません.

let a = 10;//      var a = 10;      
let a = 1;//   
 
function func(arg) {
  let arg; //            
}
 
function func(arg) {
  {
    let arg; //    ，      arg       
  }
}

forループにはもう1つの特別な点があります.ループ変数を設定する部分は個別の親ドメインであり、ループ内部は子ドメインです.

let i = 123;
console.log(i);
for (let i = 0; i < 2; i++,console.log(i)) {
  let i = 'abc';
  console.log(i);
}
// 123
// abc
// 1
// abc
// 2

変数リフトは存在しません
varコマンドでは、宣言前に変数をundefinedの値で使用できる「変数の昇格」現象が発生します.この現象が多少少ないのはおかしいが、一般的な論理では、変数は文を宣言してから使用できるはずだ.
この現象を修正するためにletコマンドは文法行為を変更し、宣言された変数は必ず宣言後に使用しなければならない.そうしないと、エラーが発生する.

// var    
console.log(foo); //   undefined
var foo = 2;

// let    
console.log(bar); //   ReferenceError
let bar = 2;

繰り返し宣言は許可されていません
letは、同じ役割ドメイン内で同じ変数を繰り返し宣言することを許さない.

function func() {
  let a = 10;
  var a = 1;
}            //   

function func() {
  let a = 10;
  let a = 1;
}            //   

したがって、関数内でパラメータを再宣言することはできません.

function func(arg) {
  let arg;
}
func() //   

function func(arg) {
  {
    let arg;
  }
}
func() //    

constコマンドconstは読み取り専用の定数を宣言し、宣言すると値は変更されません.

const a=1
a=2  //  .html:52 Uncaught TypeError: Assignment to constant variable.

上記のコードは、定数の値を変更するとエラーが発生することを示しています.
const宣言の変数は値を変更してはならない.これは、constが変数を宣言すると、すぐに初期化しなければならず、後で値を割り当てることはできないことを意味する.constの役割ドメインはletコマンドと同じです.宣言されたブロックレベルの役割ドメイン内でのみ有効です.
const宣言の定数は、letと同様に繰り返し宣言できません.

var m = "Hello!";
let n = 25;

//         
const m = "Goodbye!";
const n = 30;

ES 6宣言変数の6つの方法
ES 5には、varコマンドとfunctionコマンドの2つの宣言変数しかありません.ES 6はletコマンドとconstコマンドを追加するほか、importコマンドとclassコマンドの2つの変数を宣言する方法についても後述します.したがって,ES 6には変数を宣言する方法が6つある.
classコマンド
ES 6は従来の言語に近い書き方を提供し,Class(クラス)という概念(クラスのデータ型は関数であり,クラス自体は構造関数を指す)を導入し,オブジェクトのテンプレートとした.クラスキーでクラスを定義できます.classはただ1つの文法糖と見なすことができて、そのほとんどの機能、ES 5はすべてやり遂げることができて、新しいclassの書き方はただ対象の原型の書き方をもっとはっきりさせて、更に対象に向かってプログラミングする文法に似ています:

function Point(x, y) {
  this.x = x;
  this.y = y;
}
Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};
 
//        ，   ES6 Class  
 
class Point {
  constructor(x, y) {  //     ，this         
    this.x = x;
    this.y = y;
  }
  toString() { //      ，           ，     
    return '(' + this.x + ', ' + this.y + ')';
  }
}

かいぞうわりあて
ES 6は、一定のパターンに従って配列およびオブジェクトから値を抽出し、変数に値を付与することを可能にし、これをDestructuring(Destructuring)と呼ぶ.本質的に、この書き方は「パターンマッチング」に属し、等号の両側のパターンが同じであれば、左側の変数に対応する値が与えられる.

let a = 1;
let b = 2;
let c = 3;
//    
let [a, b, c] = [1, 2, 3];
 
let [ , third] = ["foo", "bar", "baz"];
third // "bar"
 
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
 
let [x, y, ...z] = ['a'];
x // "a"
y //        ，   undefined
z //        ，   []

解体は配列だけでなく、オブジェクトにも使用できます.オブジェクトの解体は配列と重要な違いがあります.配列の要素は順番に配列され、変数の値はその位置によって決定される.オブジェクトのプロパティには順序がありません.変数はプロパティと同じ名前でなければ、正しい値を取得できません.

let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
 
let { abc } = { foo: "aaa", bar: "bbb" };
abc // undefined
 
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
 
const node = {
  loc: {
    start: {
      line: 1,
      column: 5
    }
  }
};
let { loc, loc: { start }, loc: { start: { line }} } = node;
line // 1
loc  // Object {start: Object}
start // Object {line: 1, column: 5}

正規表現
ES 5ではRegExpコンストラクタのパラメータには2つのケースがある.1つ目は、パラメータが文字列である場合であり、2つ目のパラメータは正規表現の修飾子(flag)を表す.2つ目は、パラメータが正規表現である場合、元の正規表現のコピーが返されます.ただし、ES 5では、この時点で2番目のパラメータを使用して修飾子を追加することは許されません.そうしないと、エラーが発生します.ES 6はこの挙動を変えた.RegExpコンストラクタの最初のパラメータが正規オブジェクトである場合、2番目のパラメータを使用して修飾子を指定できます.また、返される正規表現は、既存の正規表現の修飾子を無視し、新しく指定した修飾子のみを使用します.ES 6は、正規表現にu修飾子を追加し、「Unicodeモード」を意味し、uFFFFFFより大きいUnicode文字を正しく処理する.すなわち、4バイトのUTF-16符号化が正しく処理される.これにより、文字列の長さを正しく返す関数を書くことができます.

function codePointLength(text) {
  var result = text.match(/[\s\S]/gu);
  return result ? result.length : 0;
}
var s = '';
s.length // 4
codePointLength(s) // 2