ES6 の学習 - ES6 を 1 つの記事で理解する

es6 の紹介

ES の正式名称は EcmaScript であり、スクリプト言語の仕様であり、頻繁に記述される EcmaScript の実装であるため、ES の新機能は実際には JavaScript の新機能を指します。

ES6 を学ぶ理由

1. ES6 バージョンには最も多くの変更があり、マイルストーンです。
2. ES6 には多くの新しい文法機能が追加され、プログラミングがより簡単かつ効率的になりました
3. ES6 はフロントエンド開発のトレンドであり、採用する必要があります

ES6-let 変数宣言と宣言の特性

変数の宣言:
es6を入れてみましょう
let 属性

変数を繰り返し宣言することはできません
ブロックレベルのスコープ [グローバルスコープ、関数スコープ、evalスコープ]
変数のプロモーションはありません（コードは実行前に変数と関数を事前に収集し、初期値としてnullと未定義を割り当てます）変数宣言の前にletは使用できませんが、varは宣言前に使用できます。
スコープチェーンには影響しません

const の宣言とその特徴

変数宣言【定数宣言】
const は定数を宣言します
const使用上の注意

必ず初期値を代入してください
暗黙のルール、一般的な定数は大文字を使用する
定数値は変更できません
ブロックレベルのスコープ

5.配列およびオブジェクトの要素への変更は定数への変更としてカウントされず、エラーは報告されません。

ES6 変数の構造体の割り当て

ES6では、特定のパターンに従って配列やオブジェクトから値を抽出し、変数に値を割り当てることができます

配列の分割
オブジェクトの分解

なぜオブジェクトの分解を行うのでしょうか?
まずコードを見てみましょう:

プロパティの分解はあまり使用されず、メソッドの分解がより多く使用されます。メソッドの分解を使用しない場合は、毎回 "zhao.xiaopin()" を記述する必要があり、繰り返しが多くなります。オブジェクトを分解して呼び出すことができますメソッドの前に「zhao.xxx」の形式を記述する必要はありません;

どのような状況でメソッドの分解を使用する必要がありますか:
開発者にとってより便利になるように新しい機能が作成されていますメソッドが頻繁に呼び出される場合は、コードをより簡潔にするために、この時点で分割代入を使用することを考えることができます。

ES6 テンプレート文字列

ES6 では文字列を宣言する新しい方法が導入されています es6 が文字列を導入する方法

es6 文字列宣言
特徴1：改行文字をコンテンツ内に直接出現させることができる
es6以前に改行文字があるとエラーが報告される【文法エラー】

es6出現以降はエラーが報告されない「``」を使用して問題を解決する文法上の誤り。
特徴2：可変スプライシング

es6 オブジェクトの簡略化された記述

ES6 では、変数や関数をオブジェクトのプロパティやメソッドとして中括弧内に直接記述することができるため、プログラマーがコードを記述する手順が簡素化されます。

変数形式によりオブジェクトの記述が簡素化される
メソッド宣言により、
es6 より前の煩雑なオブジェクトメソッドの記述が

簡素化されました。 es6 以降では、オブジェクトメソッドの記述が簡素化されました。

ES6 のアロー関数と宣言機能

es6 では、[矢印] (=>) を使用して関数を定義できます。

raw メソッドを使用した関数とアロー関数を使用したメソッドを宣言する
アロー関数宣言の特徴とこれまでの関数の違いは何ですか?

1. This は静的です。this は常に、関数が宣言されているスコープ内の this の値を指します。アロー関数の this の値は静的です。どのメソッドを使用して呼び出すかに関係なく、this は常に値を指します。宣言内の関数の現在のスコープにおける this の値。
直接呼び出し：これが指すアロー関数
call メソッド呼び出し：関数内で this の値を変更できる以下の結果は、アロー関数内での this の方向を call で変更できないことを示しています。
アロー関数を呼び出す
2. アロー関数は、オブジェクトをインスタンス化するためのコンストラクターとして使用できません。
アロー関数はオブジェクトをインスタンス化するコンストラクターとして使用できません
3. 引数変数は使用できません [関数内の特別な変数引数は、実際のパラメーターを格納するために使用されます]
アロー関数は引数変数を使用できません
4. アロー関数の短縮形
。2 つのケースのうち最初のケース: 括弧は省略されます。仮パラメータが 1 つだけの場合は省略できます。
アロー関数は括弧を省略します
2 つ目は中括弧を省略する方法で、コード本体に文が 1 つしかない場合は、このとき return を省略する必要があり、語順の実行結果が関数の戻り値となります。
アロー関数は中括弧を省略します
アロー関数を使用する場合の注意事項:

1. アロー関数は、this に依存しないコールバック、タイマー、配列メソッドのコールバックに適してい
ます。 2. アロー関数は、thi 関連のコールバック、イベントコールバック、およびオブジェクトメソッドには適していません。

es6関数パラメータのデフォルト値設定

es6では関数パラメータに初期値を代入できるようになりました

仮パラメータの初期値

es6 仮パラメータでは、NaN の結果が 1 つ少ない値が渡されます。es6 は

初期値を関数に代入します。このパラメータが渡されない場合、デフォルト値が初期値になります。

注: デフォルトのパラメータ値は通常、後に配置する必要があります (潜在ルール)
構造化代入と組み合わせて使用されます。

渡されたパラメータが渡される場合は、渡されない場合は、デフォルト値セットが使用されます。

es6 の残りのパラメータ

es6 は関数の実際のパラメータを取得するために使用される残りのパラメータを指し、引数を置換するために使用されます [関数が呼び出されたときにすべての実際のパラメータを取得します]

es5 が実際のパラメータを取得する方法 [返されたオブジェクト]
es6 の残りのパラメータ [配列を返す] では、

「フィルター」、一部のマップを使用して配列を返すことができ、これによりパラメータ処理の柔軟性が向上します。
注: 複数のパラメータがある場合は、残りのパラメータをパラメータの最後に配置する必要があります。
間違った使い方:

正しく使用してください:
残りのパラメータ

es6 スプレッドオペレーターの概要

[…] スプレッド演算子は、[配列] をカンマ区切りの [パラメータシーケンス] に変換できます。

例
... を使用せずに渡し、配列

を渡します ... を使用して渡します

スプレッド演算子の応用

配列のマージ
アレイクローン
擬似配列を実配列に変換する

es6-Symbolの導入と作成

シンボル ES6 の導入により、
新しいプリミティブデータ型シンボルである一意の値が導入されます。これは、JavaScript 言語の 7 番目のデータ型であり、文字列に似た配列型です。
シンボルの特徴

1. シンボルの値は一意であり、名前の競合を解決するために使用されます。
次に、symbol の値を他のデータで操作することはできません。
3. シンボルで定義されたオブジェクトのプロパティは、for...in ループを使用して走査することはできませんが、Reflect.ownKeys を使用してオブジェクトのすべてのキー名を取得できます。

シンボルを作成する
最初の方法:

2番目の作成方法：括弧内のシンボルはシンボルの符号のみ
シンボルの作成
3番目の方法：【Symbol.for()】、symbol.forはグローバルシンボルテーブル、存在する場合は対応するオブジェクトにアクセス、そうでない場合は、作成してください。

es6-objects はシンボルタイプの属性を追加します

シンボルを使用してオブジェクトとプロパティを追加すると、元のプロパティやメソッドを破壊することなく、オブジェクトをゲームに迅速かつ安全に追加できます。

最初の追加方法
2回目の追加

ES6-シンボルの組み込み値

ES6 は、それ自体で使用される Symbol 値を定義するだけでなく、言語によって内部的に使用されるメソッドを指す多くの組み込み Symbol 値も提供します。
ES6-シンボルの組み込み値

Symbol.hasInstance
isConcatSpreadable

es6-イテレータ

イテレータは、さまざまなデータ構造に統一されたアクセスメカニズムを提供するインターフェイスです。イテレータインターフェイスがデプロイされている限り、どのようなデータ分解でもトラバーサル操作を完了できます。

ES6 はループの新しいトラバーサルコマンド for ... を作成しました。イテレータインターフェイスは主に for ... または
ネイティブイテレータインターフェイスを持つデータは、for of、Array、Arguments、Set、map、string、typeArray、NodeList によってトラバースできます。
動作原理

a. 创建一个指针，指向当前数据结构的起始位置。
b. 第一次调用对象的next方法，指针自动指向数据结构的第一个成员，
c. 接下来不断调用next方法，指针一直往后移动，知道只想最后一个成员。
d. 每调用next方法返回一个包含value和done属性的对象
**注意：需要自定义遍历数据的时候要想到迭代器**

for...of ループ [出力キー値]
for...in ループ [出力キー名]

イテレータアプリケーション - カスタムトラバーサルデータ

イテレータの動作原理に従ってデータを走査するようにイテレータをカスタマイズします。

 <script>
        //声明一个对象
        const banji = {
    
    
            name:"终极一班",
            stus:['小明','小天','小吴','小王',],
            [Symbol.iterator](){
    
    
                //索引变量
                let index = 0;
                //指向
                let _this = this;
                return {
    
    
                    next:function(){
    
    
                        if(index<_this.stus.length){
    
    
                            const result = {
    
    value:_this.stus[index],done:false}
                            //下标自增
                            index++;
                            //返回结果
                            return result;
                        }else{
    
    
                            return {
    
    value:undefined,done:true}
                        }
                    }
                }
            }
        }

        //遍历这个对象
        for(let v of banji){
    
    
            console.log(v);
        }
    </script>

効果：
イテレータアプリケーション - カスタムトラバーサルデータ

es6-generator 関数の宣言と呼び出し

ジェネレーター関数は ES6 によって提供される非同期プログラミングソリューションです。文法的な動作は従来の関数とはまったく異なります。実際、これは非同期プログラミング用の特別な関数です。以前は純粋なコールバック関数ノード \fs \ ajax \ mongodb が使用されていました。

宣言と呼び出しメソッド:
ジェネレーターは、yield ステートメントを使用できます。
yield は、関数コードの区切り文字としてカウントできます

。 yield ステートメントは、次の呼び出しを使用して区切り文字として使用できます。
for-of を使用してジェネレーターを走査する
ジェネレーターの主な出力は、yield の動作を説明しています。

ES6 ジェネレーター関数のパラメーター受け渡し

ジェネレーターによって呼び出される次のパラメーターは実パラメーターを渡すことができ、この実パラメーターは yield ステートメントの戻り結果全体です。

関数全体にパラメータを渡す
次のメソッドはパラメーターを渡すこともでき、このパラメーターは前の yeild ステートメントの戻り結果として使用され、2 番目の呼び出しは最初の yeild ステートメントの全体的な戻り結果を返します。。。

es6 ジェネレーター関数インスタンス

非同期プログラミング：ファイル操作、ネットワーク操作（ajax、リクエスト）データベース操作
例：1秒出力111、2秒出力222、3秒出力333
層のコールバックでコールバック
es6 ジェネレーター関数インスタンス
地獄となります上記のコードはコールバック地獄に入ります、以下のコードはコールバック地獄になります機能しません
ここに画像の説明を挿入
例 2、取得、ユーザーデータ、注文データ、製品データの

呼び出しをシミュレートします。
ジェネレーター関数は非同期で動作します

es6-promise の学習と使用

es6-promise の紹介と基本的な使い方

Promise は、ES6 によって導入された非同期プログラミングの新しいソリューションです。Promise は、非同期操作をカプセル化し、奇妙な成功または失敗の結果を取得できるコンストラクターです [コールバック地獄の問題を解決します]

Promise コンストラクター:Promise {excutor}{ }

Promise.prototype.then方法

Promise.prototype.catch方法

1. Promise オブジェクトをインスタンス化します。Promise
オブジェクトには、初期化、成功、失敗の 3 つの状態があります。Promise
オブジェクトをインスタンス化します。

//实例化Promise对象【三个状态：初始化，成功，失败】
        const p = new Promise(function(resolve,reject){
    
    
            setTimeout(() => {
    
    
                let data = "数据库中的用户数据"
                //resolve调用
                resolve(data);
            }, 1000);
        });

呼び出しの成功と失敗の両方で、promise.then のメソッドが実行されます。then のメソッドには 2 つのパラメータがあり、どちらも関数型の値です。各関数には仮パラメータがあります。then の最初の関数が実行されると、実行の 2 番目の実行パラメータ、2 つの関数の仮パラメータは value とreason で、成功したものは value と呼ばれ、失敗したものは reson と呼ばれます。
呼び出してからコードを記述します。

/*
	 调用成功，就会调用promise对象的then方法,
     then方法接受两个参数，
     两个参数都是函数类型的值，每个函数都有一个形参，成功的叫做value,失败的叫做reason
     调到resolve代表成功，读取状态成功，then就会执行第一个回调函数代码
     如果读取状态失败，调用带有
  */
p.then(
	   function(value){
    
    
         console.log(value);
       },
       function(reason){
    
    
	   }
)

成功した呼び出しの出力:
Promise が正常にインスタンス化されました
読み取り失敗の例:

 const p = new Promise(function(resolve,reject){
    
    
            setTimeout(() => {
    
    
                //
                let data = "数据库中的用户数据"
                let err = "读取数据库失败"
                //resolve调用
                reject(err)
            }, 1000);
        });
        p.then(function(value){
    
    
            console.log(value);
        },function(reason){
    
    
            console.log(reason);
        })

Promise インスタンス化の読み取り失敗により結果が返される

es6-promise パッケージ読み取りファイル

ネイティブ js 出力ファイルの内容 [リクエストファイルの内容は非同期です]

//引入fs模块
const fs = require('fs');

//调用方法读取文件
fs.readFile('./resources/1.md',(err,data)=>{
    
    
    //如果失败则抛出错误
    if(err) throw err;
    //如果没有出错，则输出内容
    console.log(data.toString());
})

効果:
jsはファイルをネイティブに読み取ります
Promise パッケージを使用してファイルを読み取ります。

//3.使用promise封装
const p = new Promise(function(resolve,reject){
    
    
    fs.readFile("./resources/1.md",(err,data)=>{
    
    
        //判断读取失败
        if(err) reject(err);
        //如果成功
        resolve(data)
    })
})
p.then(
    function(value){
    
    
        console.log(value.toString());
    },
    function(reason){
    
    
        console.log(reason);
    })

効果：
Promise パッケージを使用してファイルを読み取る

es6-promise は Ajax リクエストをカプセル化します

ネイティブ Ajax リクエストデータ

 <script>
        //接口地址：https://api.apiopen.top/getJoke

        //创建对象
        const xhr = new XMLHttpRequest();

        //初始化
        xhr.open("GET","https://api.apiopen.top/getJoke");

        //发送
        xhr.send();

        //4.绑定时间，处理响应结果
        xhr.onreadystatechange = function(){
    
    
            //判断
            if(xhr.readyState === 4){
    
    
                //判断响应状态吗 200-299
                if(xhr.status >= 200 && xhr.status < 300){
    
    
                    //表示成功
                    console.log(xhr.response);
                }else{
    
    
                    //如果失败
                    console.log(xhr.status);
                }
            }
        }
    </script>

リクエスト成功の結果:
ネイティブ Ajax リクエストデータ
リクエスト失敗の結果:

2. Promise は Ajax コードをカプセル化します

<script>
        //接口地址：https://api.apiopen.top/getJoke

        const p = new Promise((resolve,reject)=>{
    
    

        //创建对象
        const xhr = new XMLHttpRequest();

        //初始化
        xhr.open("GET","https://api.apiopen.top/getJoke");

        //发送
        xhr.send();

        //4.绑定时间，处理响应结果
        xhr.onreadystatechange = function(){
    
    
            //判断
            if(xhr.readyState === 4){
    
    
                //判断响应状态吗 200-299
                if(xhr.status >= 200 && xhr.status < 300){
    
    
                    //表示成功
                    resolve(xhr.response)
                }else{
    
    
                    //如果失败
                    reject(xhr.status);
                }
            }
        }
    });
    //指定回调
    p.then(
    function(value){
    
    
        console.log(value);
    },
    function(reason){
    
    
        console.log(reason);
    })
    </script>

成功の効果:
Ajaxコードをカプセル化することを約束する
失敗の効果:

処理方法が異なる成功と失敗の結果はコールバック関数で処理されることがわかる非同期タスクの後のコールバックからthenまでの指定にはPromiseを使用する構造は明確であり、コールバック地獄の問題はありません。

es6-Promise.prototype.then方法

then return result: 戻り結果は、実行関数のコールバック結果によって決まります。コールバック関数で返された結果が ||promise タイプ属性の場合、ステータスは成功、戻り値はオブジェクトの成功値です。。
その後、Promise 以外のオブジェクトを返します

//创建promise对象
   const p = new Promise((resolve,reject)=>{
    
    
       setTimeout(()=>{
    
    
          //resolve("请求成功")
          reject("请求失败")
       },1000)
   });

   //调用 then方法
   const result = p.then(value =>{
    
    
       console.log(value);
       return value;
   },reason =>{
    
    
       console.log(reason);
       return reason;
   })
   console.log(result);

Promise.prototype.then メソッドは結果を返します

return戻り結果は書き込まないでくださいundefined。

3. then は Promise オブジェクトを返し
、 then は Promise オブジェクトを返します。 then の Promise の状態によって then メソッドによって返されるオブジェクトの状態が決まり、 then の Promise の失敗によって状態が決まります。 then メソッドによって返された失敗の内容。

//创建promise对象
   const p = new Promise((resolve,reject)=>{
    
    
       setTimeout(()=>{
    
    
          resolve("请求成功")
          //reject("请求失败")
       },1000)
   });

   //调用 then方法
   const result = p.then(value =>{
    
    
       return new Promise((resolve,reject)=>{
    
    
           resolve('ok')
       })
   },reason =>{
    
    
       console.log(reason);
   })
   console.log(result);

次に、Promise オブジェクトを返します

4.その後、エラーをスローします
[エラーがスローされた場合、この状態は失敗した Promise 状態でもあり、エラーの値はスローされた値になります]

//创建promise对象
   const p = new Promise((resolve,reject)=>{
    
    
       setTimeout(()=>{
    
    
          resolve("请求成功")
          //reject("请求失败")
       },1000)
   });

   //调用 then方法
   const result = p.then(value =>{
    
    
       //抛出错误
       throw new Error("出错啦")
   },reason =>{
    
    
       console.log(reason);
   })
   console.log(result);

効果:
その後エラーがスローされます
then メソッドは Promise オブジェクトを返すことができるため、then メソッドをチェーンで呼び出すことができ、そのチェーン呼び出し [then メソッドでコールバックを指定する場合、指定できるのは 1 つだけとなり、コールバック地獄の問題が変更されます)チェーンコール経由]
形式:

p.then(value=>{
    
    
    //异步任务
},reason=>{
    
    
 //异步任务
}).then(value=>{
    
    
     //异步任务
},reason=>{
    
    
 //异步任务
})

es6-promise 実践演習 - 複数ファイルコンテンツの読み込み

        //回调地狱容易重名，很不容易被发现

コールバック地獄の方法でやってください

//引入fs模块
const fs = require("fs")

fs.readFile('./resources/1.md',(err,data)=>{
    
    
    fs.readFile('./resources/2.md',(err,data1)=>{
    
    
        fs.readFile('./resources/3.md',(err,data2)=>{
    
    
            let result = data+"\r\n"+data1+"\r\n"+data2
            console.log(result);
        });
    });
});

上記のコードから、コールバック地獄は同じ名前になりやすく、見つけにくいことがわかります。
約束の実装:

//使用promise来实现
const p = new Promise((resolve,reject)=>{
    fs.readFile("./resources/1.md",(err,data)=>{
        resolve(data);
    })
})
p.then(value=>{
    return new Promise((resolve,reject)=>{
        fs.readFile("./resources/2.md",(err,data)=>{
            resolve([value,data]);
        });
    });
}).then(value=>{
    return new Promise((resolve,reject)=>{
        fs.readFile("./resources/3.md",(err,data)=>{
            //压入
            value.push(data);
            resolve(value)
        });
    });
}).then(value=>{
    console.log(value.join('\r\n'));
})

Promise は複数のファイルコンテンツの読み取りを実装します

es6-Promise オブジェクトのキャッチメソッド

catch は、Promise が失敗した場合のコールバックを指定するために使用されます。

最初のメソッドコード:

 <script>
        const p = new Promise((resolve,reject)=>{
    
    
            setTimeout(()=>{
    
    
                //设置p对象的状态为失败，并且设置失败的值
                reject("出错啦")
            })
        })
        p.then(function(value){
    
    

        },function(reason){
    
    
            console.error(reason);
        })
    </script>

効果：
Promiseのcatchメソッド

2 番目の方法のコード:

<script>
        const p = new Promise((resolve,reject)=>{
    
    
            setTimeout(()=>{
    
    
                //设置p对象的状态为失败，并且设置失败的值
                reject("出错啦")
            })
        })
        p.catch(function(reason){
    
    
            console.warn(reason);
        })
    </script>

Promiseのcatchメソッド

es6-collection の紹介と API

セット紹介

ES6 は新しいデータ構造 Set (コレクション) を提供します。配列に似ていますが、メンバーの値はすべてイテレータインターフェイスを実装する一意のコレクションであるため、[拡張演算子] と [for…of…] を使用して走査できます。

コレクションのプロパティとメソッド:
1) size: コレクション内の要素の数を返します
2) add: 新しい要素を追加し、現在のコレクションを返します
3) delete: 要素を削除し、ブール値を返します
4) has: checkコレクションに特定の要素が含まれているかどうか、ブール値を返します

コードを通じて Set を理解するだけです。

   //声明一个set
    let s = new Set();
    //可以写入可迭代数据，可以去重
    let s2 = new Set(['大事儿','小事儿','坏事儿','小事儿','很多事儿','大事儿'])
    console.log(s,typeof s);
    console.log(s2);

効果:
es6-collection の紹介と API
コレクションのプロパティとメソッドの紹介コードと効果

 //元素个数
    let s2 = new Set(['大事儿','小事儿','坏事儿','小事儿','很多事儿','大事儿'])
    console.log(s2.size);
    //向集合里添加新的元素
    s2.add("喜事儿")
    console.log("集合添加后有："+s2.size+"个",s2);
    //删除元素
    s2.delete("坏事儿")
    console.log("集合删除后有："+s2.size+"个",s2);
    //检测【检测集合中有没有该元素】
    console.log(s2.has('喜事儿'));
    //可以使用for...of...遍历
    for(let v of s2){
    
    
        console.log(v);
    }
    //清空集合
    s2.clear();
    console.log(s2);

効果：
es6-collection の紹介と API

es6-コレクションの練習

2 つの配列がすでに知られています。

let arr = [1,2,3,4,5,4,3,2,1,5,4,5,8,9,54,4,1]
let arr2 = [54,1,3,4,6,9,8]

アレイの重複排除

 //1.数组去重
        let result = [...new Set(arr)]
        console.log(result);

アレイの重複排除には setApi を使用する
2. 2 つの配列の交差

//2.交集
    let arr2 = [54,1,3,4,6,9,8]
        let result2 = [...new Set(arr)].filter(item=>{
    
    
            let s2 = new Set(arr2)
            if(s2.has(item)){
    
    
                return true
            }else{
    
    
                return false
            }
        })
    console.log(result2);
    //简化版求交集
    let result3 =[...new Set(arr)].filter(item=>new Set(arr2).has(item))
    console.log(result3);

Set API を使用して配列の交差部分を見つける
3. 2 つの配列の結合

//3.并集
        let result4 =[...new Set([...arr,...arr2])]
        console.log(result4);

効果:
setAPI を使用して 2 つの配列の和集合を見つけ、重複を削除します。
4. 2 つの配列の差分を求める [交差の逆演算]

//4.差集
        let result5 = [...new Set(arr)].filter(item=>{
    
    
            let s2 = new Set(arr2)
            if(!s2.has(item)){
    
    
                return true
            }else{
    
    
                return false
            }
        })
      let result6 =[...new Set(arr)].filter(item=>!new Set(arr2).has(item))
    console.log(result5);
    console.log(result6);

効果： Set API を使用して 2 つの配列の差分を見つける

es6-Mapの紹介とAPI

ES6はオブジェクトとキーと値のペアのコレクションに似たマップデータ構造を提供しますが、「キー」の範囲は文字列に限定されず、さまざまな種類の値（オブジェクトを含む）をキーとして使用できます。キー、およびマップはイテレータインターフェイスも実装しているため、[拡張演算子] と [for...of...] を使用して属性とメソッドをトラバースし、マップできます。

size マップ内の要素の数を返します。
size は新しい要素で、現在のマップを返します。
get はキーオブジェクトのキー値を返します
has は要素がマップに含まれているかどうかを検出し、ボリアン値を返します
clear はコレクションをクリアし、unknown を返し、
Map を宣言して追加します。

 //声明 Map
    let m = new Map();

    //添加元素
    m.set('name','吴又可');
    m.set('change',function(){
    
    
        console.log("无用的方法");
    });
    console.log(m);

API
マップは 2 番目のメソッドを追加します

 //声明 Map
    let m = new Map();

    //添加元素
    m.set('name','吴又可');
    m.set('change',function(){
    
    
        console.log("无用的方法");
    });
    let key = {
    
    
        school : "sgg"
    };
    m.set(key,['北京','上海','广州']);
    console.log(m);

影響:
地図API
マップの他の API

//添加
    m.set(key,['北京','上海','广州']);
    
    //删除
    m.delete('name')
    console.log(m);

    //获取
    console.log(m.get('change'));
    console.log(m.get(key));

    //遍历
    for(let v of m){
    
    
        console.log(v);
    }

    //清空  
    m.clear();

マップのその他の API

es6クラスクラス

ES6では従来の言語に近い記述方法を提供し、Classクラスの概念を導入し、オブジェクトのテンプレートとしてclassキーワードでクラスを定義できるようにしていますが、基本的にES6のクラスは単なる構文とみなすことができます。ほとんどの関数は es5 で実行できますが、新しいクラス記述メソッドはオブジェクトの循環記述メソッドをより明確にし、オブジェクト指向プログラミングの構文に近づけるだけです。

知識ポイント:
(1) クラスはクラスを宣言します
(2) コンストラクターはコンストラクターの初期化を定義します
(3) extends は親クラスを継承
します (4) static は静的メソッドとプロパティを定義します
(5) 親コンストラクターをスーパーコールします
(6) 親クラスのメソッドは繰り返し可能です。
Es6 クラスの使用を確認する

 // 手机
    function Phone(brand,price){
    
    
        this.brand = brand;
        this.price = price;
    }

    //添加方法
    Phone.prototype.call = function(){
    
    
        console.log("我可以打电话");
    }

    //实例化对象
    let Huawei = new Phone('华为',5999);
    Huawei.call();
    console.log(Huawei);

利用効果：
es5classの使用
3. es6クラスの利用

// class
    class Phone{
    
    
        //构造方法，名字不能修改，当实例化的时候会自动执行
        constructor(brand,price){
    
    
            this.brand = brand;
            this.price = price;
        }

        //方法必须使用该语法，不能使用es5的对象完整形式
        call(){
    
    
            console.log("我可以打电话");
        }
    }
    let onePlus = new Phone("huawei",4999);
    console.log(onePlus);

es6 でのクラス使用の影響

es6のクラスの静的メンバー

es5の静的メンバー

es5 では、インスタンスオブジェクトと関数オブジェクトのプロパティは同じではありません。インスタンスオブジェクトのプロパティは、コンストラクターのプロトタイプオブジェクトと同じです。インスタンスオブジェクトの暗黙のプロトタイプは、コンストラクターのプロトタイプオブジェクトを指します。

 function Phone(){
    
    

    }
    Phone.name = "手机";
    Phone.change = function(){
    
    
        console.log("我可以改变世界");
    }
    Phone.prototype.size = "5.5inch"
    let nokia = new Phone();
    console.log(nokia.name);
    console.log(nokia.size);
    npkia.change();

効果：
es5の静的変数