1. ECMAcript6 の概要

ECMAScript6 は 2015 年 6 月にリリースされた js 言語の生成標準です。ここでは ES6 の概念とトランスコーダ babel の使い方について紹介します。

1.1 ECMAScript6の概念

ECMAScript と JavaScript の関係は、前者は後者の仕様、後者は前者の実装です。

ES6 と ECMAScript 2015 の関係: ES6 は歴史用語であると同時に一般用語でもあり、バージョン 5.1 以降の JS の次世代標準を意味し、ES2015、ES2016、ES2017 などをカバーしますが、具体的には ES2015 が正式名称です。言語標準の正式版が発行された年を指します。この章で説明する ES6 は、一般に ES2015 標準を指します。

1.2 ES6 トランスコーダバベルの使用

Babel は、古いブラウザで実行できるように ES6 コードを ES5 コードに変換する、広く使用されている ES6 トランスコーダです。構成手順は ~~~ にあります。

2.letコマンドとconstコマンド

2.1 letコマンド

変数を宣言するために使用されます。使い方は var と似ていますが、宣言する変数は let コマンドが配置されているコードブロック内でのみ有効です。

構文: let 変数名;

let コマンドのスコープは現在のコードブロックに制限されます
let コマンドを使用して宣言された変数スコープは転送されません
同じスコープ内で同じ変数を宣言することはできません

2.2 constコマンド

const コマンドは、読み取り専用の定数を宣言するために使用されます。定数の値は、一度宣言すると変更できません。

構文: const 変数名。

const コマンドで定数を宣言したら、すぐに初期化する必要があり、後で代入できるようにしておくことはできません。それ以外の場合は、エラーが報告されます。

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

const コマンドで宣言された定数はプロモーションをサポートしていないため、let コマンドと同様に宣言後にのみ使用できます。

同様に、let などの const で宣言された定数は繰り返し宣言できません。

実際、const コマンドが保証しているのは、定数の値が変更できないことではなく、定数が指すメモリアドレスが変更できないことです。単純なタイプのデータ (数値、文字列、ブール値) の場合、値は定数が指すメモリアドレスに格納されるため、定数と同等です。ただし、参照データ型 (オブジェクトなど) の場合、定数が指すメモリアドレスにはオブジェクトのアドレスが格納されるだけであり、const はオブジェクトのアドレスが変更できないことを保証するだけです。それは完全に制御不能です。

3. 代入を解析する

代入の構造化は、代入演算子の拡張です。ES6 では、特定のパターンに従って配列やオブジェクトから値を抽出し、変数に値を代入することができます。これは「分割」と呼ばれます。コードの記述に関しては、代入を分割する記述方法の方が簡潔で理解しやすく、言語もより明瞭です。

3.1 配列の分割代入

3.1.1 基本的な使い方

let [a,b,c]=[1,2,3];
console.log(a,b,c);//1,2,3

上記のコードは、配列から値を抽出し、対応する位置に応じて変数に割り当てることができることを示しています。この書き方は、本質的には「パターンマッチング」に属します。等号の両側のパターンが一致している限り、この書き方は、同様に、左側の変数には対応する値が割り当てられます。基本的な使用法に加えて、配列の構造化では次の構造化代入形式もサポートされています。

3.1.2 入れ子になった配列の構造化

配列には配列を含めることができます。これはネストされた配列と呼ばれます。次のコードでは、変数 array に配列が含まれています。マッチングプロセス中に、変数には対応する位置に従って値が割り当てられます。つまり、変数 a には値 1 が割り当てられ、変数 b には値 2 が割り当てられ、変数 c には値 3 が割り当てられます。

let [a,[[b],c]]=[1,[[2],3]];
console.log(a,b,c);//1,2,3

3.1.3 不完全な分解

通常の分割代入プロセス中ですが、変数配列が割り当てられた配列の一部と一致する場合でも、分割は成功する可能性があり、このとき、最初に一致した値が変数に代入され、冗長な値が代入されます。無視されました。

以下のコード 1 では、変数 a と b が受け入れられると、配列値の 1 と 2 のみが一致し、3 は正常に一致しません。コード 2 では、変数 a の値は 1、変数 b は入れ子配列の最初の値 (2) と一致し、変数 c の値は 4 です。

左側と右側の配列に変数または値が欠けている場合、それらは正常に構造化できます。分解が失敗した場合、変数の値は未定義になります。次のコード 3 では、変数 a の値は 1、変数 b の値は 3 になります。

//代码1
let [a,b]=[1,2,3];
console.log(a,b);//1,2
//代码2
let [a,[b],c]=[1,[2,3],4];
console.log(a,b,c);//1,2,4
//代码3
let [a,,b]=[1,2,3];
console.log(a,b);//1,3

3.1.4 剰余演算子

構造化代入において、変数値の数が分からない場合、パターンマッチングに残余演算子(...)を使用できます。通常、次のコードに示すように、剰余演算子は変数配列の最後に配置されます。一致する場合、変数 a は 1 と一致し、変数 b は剰余演算子を使用します。その後、配列値 2 と 3 が変数 b に格納され、返される結果 b は配列となり、出力 b には [2,3] が表示されます。

let [a,...b]=[1,2,3];
console.log(a,b);//1,[2,3]

3.1.5 デフォルト値の構造化

代入を分割すると、デフォルト値を指定できます。照合処理中に照合が成功しなかった場合、変数の値は事前に設定されたデフォルト値になります。次のコードでは、変数 y がデフォルト値「b」に設定されます。分解時に、一致する新しい値がない場合、出力には変数 y の値が「b」であることが示されます。

let [x,y="b"]=["a"];
console.log(x,y);//"a","b"

3.2 オブジェクト分割代入

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

//对象解构赋值的基本用法
let {a,b}={b:"y",a:"x"};
console.log(a,b);//x,y
let {abc}={def:"ghj"};
console.log(abc);//undefined
/*a,b两个变量的次序，与等号右边两个同名属性的次序不一致，但是对取值完全没有影响。
变量abc则没有对应的同名属性，导致取不到值，最后等于undefined*/

//为了解决对象解构赋值中变量名与属性名不一致的问题，
let {foo:x,bar:y}={foo:"ES6",bar:"hello"};
console.log(x,y);//ES6,hello
/**foo与bar是匹配的模式，x和y才是变量。真正被赋值的是变量x和y，而不是模式foo与bar。
 * 通过这种写法即可解决变量名和属性名不一致的问题，对象解构赋值和数组解构赋值相同，
 * 除基础用法外，支持如嵌套，不完全解构等形式，二者使用方法一致。*/

//解构嵌套对象
let obj={p:["hello",{c:"woeld"}]};
let {p:[z,{c}]}=obj;
console.log(z,c);//hello,world

//不完全解构
let obje={a,b,...rest}={a:10,b:20,c:30,d:40};
console.log(a,b,rest);//10,20,{c:30,d:40}

//解构默认值
let {q=10,m=5}={q:3};
console.log(q,m);//3,5
let {a:aa=10,b:bb=5}={a:3};
console.log(aa,bb)//3,5

3.3 文字列の分割代入

文字列の分割代入は、文字列を配列のようなオブジェクトに変換することです。

let [a,b,c,d,e]="hello";
console.log(a,b,c,d,e);//h,e,l,l,o

3.4 関数パラメータの分割代入

function add([x,y]){
    console.log(x+y);//3
}
add([1,2]);

add()関数の引数は表面上は配列ですが、引数の値を渡した瞬間に配列の引数が変数xとyに分解されます。関数内のコードの場合、結果として得られるパラメーターは x と y です。

4. 機能拡張

4.1 関数パラメータのデフォルト値

function foo(x,y){
    y=y || "world";
    console.log(x,y);
}
foo("hello");//hello world
foo("hello","");//hello world

foo() 関数には、x と y という 2 つのパラメータが含まれます。パラメータ y にはデフォルト値が設定され、y が割り当てられていない場合は y の値が設定されます。y の値のデフォルトは「World」です。

ES6の方法で関数パラメータのデフォルト値を設定します。

function foo(x,y="world"){
    console.log(x,y);
}
foo("hello");//hello world
foo("Hello","");//Hello

関数パラメータのデフォルト値にも、次のような制限があります。

パラメーター変数はデフォルトで宣言され、let または const コマンドで再度宣言することはできません。
パラメータのデフォルトを使用する場合、関数は同じ名前のパラメータを持つことができません。
パラメータのデフォルト値はパラメータの最後に配置する必要があります。

4.2 残りパラメータと名前属性

REST パラメータは冗長パラメータを取得するために使用され、name 属性は関数名を取得するために使用されます。

4.3 アロー関数

構文: (パラメータ1,,,パラメータN) => {関数宣言}

通常の関数との違い:

このオブジェクトをバインドしません
引数オブジェクトをバインドしません

5. 組み込みオブジェクトの拡張

5.1 文字列の展開

5.1.2 テンプレート文字列

let name="Bob",time="today";
document.write(`Hello ${name},how are you ${time}?`);

通常の文字列では二重引用符や一重引用符の代わりにバックティック (``) を使用します。これは通常の文字列として使用でき、複数行の文字列の定義にも使用できます。同時に、テンプレート文字列を使用して変数を埋め込んだり、文字列を埋め込んだり、関数を呼び出したりすることもできます。

5.1.3 新しい文字列操作メソッド

ES6 で追加された一般的な文字列操作メソッド
方法	説明する
include(文字列):ブール値	パラメータ文字列が見つかったかどうかを示します
で始まる(文字列):ブール値	参加しているデジタル文字列が元の文字列の先頭にあるかどうかを示します
endWith(文字列):ブール値	パラメータ文字列が元の文字列の末尾にあるかどうかを示します
繰り返し(数値):文字列	新しい文字列を返します。これは、元の文字列を n 回繰り返すことを意味します。
パッド開始(数値,文字列):文字列	ヘッダー補完用
PadEnd(数値,文字列):文字列	テール完成用
トリムスタート():文字列	文字列の先頭にあるエアバスを削除します
トリムエンド():文字列	末尾のスペースを削除する

let str = "hello ECMAScript";
console.log(str.includes("h"));//true
console.log(str.startsWith("h"));//true
console.log(str.endsWith("t"))//true
console.log(str.repeat(3))//hello ECMAScripthello ECMAScripthello ECMAScript
console.log(str.padStart(18,"a"));//aahello ECMAScript
console.log(str.padEnd(18,"z"));//hello ECMAScriptzz
console.log(str.trimStart());//消除字符串头部的空格
console.log(str.trimEnd());//消除字符串尾部的空格

5.2 配列の拡張

5.2.1 スプレッド演算子

3 つのドット (...) で表されるスプレッド演算子は、配列をカンマ区切りのシーケンスに変換します。

構文: ...配列

5.2.2 Array.from() メソッド

from() メソッドは、配列オブジェクトまたはトラバース可能なオブジェクトを実数の配列に変換するために使用されます。このうち、配列状のオブジェクトには length プロパティが必要です。length 属性がない場合は、空の配列が変換されます。

構文: let list=Array.from(array-like);

5.2.3 配列トラバーサル法

ES6 は配列をトラバースするメソッドを追加します
方法	説明する
キー():イテレータ	キーの反復処理
値():イテレータ	キー値の反復処理
エントリ():イテレータ	キーと値のペアの反復処理

for(let [i,v] of ["张三","李四"].entries()){
    console.log(i,v);
}

5.3 オブジェクトの拡張

5.3.1 属性の簡潔な表記法

let name="小明";
let birth="2023/5/19";
const Person={
    name,
    birth,
    getInfo(){
        console.log(`我的名字是：${this.name},我出生时间是：${this.birth}`);
    }
}
Person.getInfo();//我的名字是：小明,我出生时间是：2023/5/19

5.3.2 オブジェクト追加メソッド

1. Object.is() メソッド

console.log(Object.is(NaN,NaN));//true
console.log(Object.is({},{}));//false
console.log(Object.is(+0,-0));//false

2.Object.assign()方法

構文: Object.assign(target,source_1,...);

このメソッドの最初のパラメータはターゲットオブジェクトで、次のパラメータはソースオブジェクトです。ソースオブジェクトには複数のソースオブジェクトを含めることも、ターゲットオブジェクトを受け取る新しいオブジェクトを定義することもできます。

5.3.3 オブジェクトの走査方法

ES6 オブジェクトトラバーサルメソッド
方法	説明する
キー():イテレータ	パラメーターオブジェクト自体のすべての通過可能なプロパティのキー名を元に戻します。
値():イテレータ	パラメータオブジェクト自体のすべての走査可能なプロパティのキー値を返します。
エントリ():イテレータ	パラメーターオブジェクト自体のすべての走査可能なプロパティのキーと値のペアの配列を返します。

6. オブジェクトの設定とマッピング

6.1 オブジェクトの設定

Set オブジェクトのデータ構造は配列に似ていますが、メンバーの値はすべて一意であり、繰り返される値はありません。

Set オブジェクトの共通のプロパティとメソッド
分類	名前	説明する
属性	サイズ	Set インスタンスのメンバーの総数
操作方法	付加価値を付けます）	値を追加し、Set 構造体自体を返します
	削除(値)	値を削除し、削除が成功したかどうかを示すブール値を返します。
	has(値)	値が Set のメンバーであるかどうかを示すブール値を返します。
	クリア（）	すべてのメンバーをクリア、戻り値なし
トラバーサルメソッド	キー()	キー名を返すイテレータ
	値()	キー値のイテレータを返します。
	エントリ()	キーと値のペアのイテレータを返します。
	forEach()	コールバック関数を使用して各メンバーを反復処理します。

6.2 マップオブジェクト

js のオブジェクト (Object) は本質的にキーと値のペア (ハッシュ構造) の集合ですが、従来はキーとして文字列しか使用できず、その使用には大きな制限がありました。この問題を解決するために、ES6 は Map オブジェクトを提供します。これもキーと値のペアのコレクションですが、その「キー」の範囲は文字列に限定されず、さまざまな種類の値()をキーとして使用できます。

Map オブジェクトの共通のプロパティとメソッド
分類	名前	説明する
属性	サイズ	Map オブジェクトのメンバーの総数
操作方法	set(キー,値)	キー名 key に対応するキー値を value に設定し、Map 構造全体を返します
	取得(キー)	キーに対応するキーの値を読み取り、キーが見つからない場合は、未定義を返します。
	持っています(鍵)	キーが現在の Map オブジェクト内にあるかどうかを示すブール値を返します。
	削除(キー)	キーを削除すると、true が返されます。削除に失敗した場合は false を返します
	クリア（）	すべてのメンバーをクリア、戻り値なし
トラバーサルメソッド	キー()	キー名を返すイテレータ
	値()	キー値のイテレータを返します。
	エントリ()	すべてのメンバーの反復子を返します

この章の概要

人々の目に天才と映るのは、優れた才能によるものではなく、たゆまぬ努力によるものです。一般人から世界のスーパーマスターになるには1万時間の焼き戻しが必須条件。

- グラッドウェル、「1万時間の法則」

jsのES6

1. ECMAcript6 の概要

1.1 ECMAScript6の概念

1.2 ES6 トランスコーダバベルの使用

2.letコマンドとconstコマンド

2.1 letコマンド

2.2 constコマンド

3. 代入を解析する

3.1 配列の分割代入

3.1.1 基本的な使い方

3.1.2 入れ子になった配列の構造化

3.1.3 不完全な分解

3.1.4 剰余演算子

3.1.5 デフォルト値の構造化

3.2 オブジェクト分割代入

3.3 文字列の分割代入

3.4 関数パラメータの分割代入

4. 機能拡張

4.1 関数パラメータのデフォルト値

4.2 残りパラメータと名前属性

4.3 アロー関数

5. 組み込みオブジェクトの拡張

5.1 文字列の展開

5.1.2 テンプレート文字列

5.1.3 新しい文字列操作メソッド

5.2 配列の拡張

5.2.1 スプレッド演算子

5.2.2 Array.from() メソッド

5.2.3 配列トラバーサル法

5.3 オブジェクトの拡張

5.3.1 属性の簡潔な表記法

5.3.2 オブジェクト追加メソッド

5.3.3 オブジェクトの走査方法

6. オブジェクトの設定とマッピング

6.1 オブジェクトの設定

6.2 マップオブジェクト

この章の概要

おすすめ

jsのES6

1. ECMAcript6 の概要

1.1 ECMAScript6の概念

1.2 ES6 トランスコーダ バベルの使用

2.letコマンドとconstコマンド

2.1 letコマンド

2.2 constコマンド

3. 代入を解析する

3.1 配列の分割代入

3.1.1 基本的な使い方

3.1.2 入れ子になった配列の構造化

3.1.3 不完全な分解

3.1.4 剰余演算子

3.1.5 デフォルト値の構造化

3.2 オブジェクト分割代入

3.3 文字列の分割代入

3.4 関数パラメータの分割代入

4. 機能拡張

4.1 関数パラメータのデフォルト値

4.2 残りパラメータと名前属性

4.3 アロー関数

5. 組み込みオブジェクトの拡張

5.1 文字列の展開

5.1.2 テンプレート文字列

5.1.3 新しい文字列操作メソッド

5.2 配列の拡張

5.2.1 スプレッド演算子

5.2.2 Array.from() メソッド

5.2.3 配列トラバーサル法

5.3 オブジェクトの拡張

5.3.1 属性の簡潔な表記法

5.3.2 オブジェクト追加メソッド

5.3.3 オブジェクトの走査方法

6. オブジェクトの設定とマッピング

6.1 オブジェクトの設定

6.2 マップオブジェクト

この章の概要

おすすめ

1.2 ES6 トランスコーダバベルの使用