es6の共通知識のまとめ

es6 のよく使う知識ポイント

es6 と言えば、JavaScript についても話しましょう

1. 1995 年: JavaScript が誕生し、その初期名は LiveScript でした。

2. 1997: ECMAScript 標準が確立されました。

3. 1999: ES3 が登場し、同時に IE5 が大流行しました。

4. 2000–2005: AJAX とも呼ばれる XMLHttpRequest は、Outlook Web Access (2000)、Oddpost (2002)、Gmail (2004)、および Google Maps (2005) で広く使用されています。

5. 2009: ES5 が登場し、foreach、Object.keys、Object.create、JSON などの標準が (現在ほとんどの人が使用しています)。

6. 2015: ES6/ECMAScript2015 が登場します。 2015 年、ECMAScript 仕様草案の開発を担当する委員会 TC39 は、新しい標準を定義するシステムを 2016 年に 1 回に変更することを決定しました: ES7/ECMAScript2016 が登場しました。

7. 2017: ES8/ECMAScript2017 が登場します。

8. es6 に関して言えば、互換性が思い浮かぶので、2 つのリンクをチェックすることをお勧めします。

https://kangax.github.io/compat-table/es6/

---

http://kangax.github.io/compat-table/es2016plus/

es6 の使用方法

es6 コードを Babel コードに変換できます。Google トレーサは 2 つのトランスコーダです。試してみてください

---

Babel。は、既存の環境で実行できるように ES6 コードを ES5 コードに変換できる、広く使用されている ES6 トランスコーダです。 Babelを使えば使い慣れたツールを選べます

jsのvar、let、constの違い

var！ ！ ！ ！

---

varで定義された変数は変更可能です。初期化されていない場合はunknownが出力され、エラーは報告されません。

varはローカルスコープと関数スコープの2種類に分かれています

let! ！ ！ ！

let はブロックレベルのスコープです。let を使用して関数を定義した後は、関数の外部には影響しません。

let はブロックレベルのスコープです。var とは異なり、let には事前関数がなく、

const! を繰り返し宣言することはできません。 ！ ！ ！

const で定義された変数は変更できないため、初期化する必要があります。

const は定数であり、変更できません。通常は大文字で、ブロックレベルのスコープでもあります。 。 。

es6 テンプレート文字列、拡張オブジェクト リテラル、代入の構造化

es6 テンプレート文字列

---

テンプレート文字列は、埋め込み式を許可する文字列リテラルです。複数行の文字列と文字列補間関数を使用できます。 ES2015 仕様の以前のバージョンでは、「テンプレート文字列」と呼ばれていました

`` アポストロフィ

1. バインド変数

2. 文字列は複数行をサポートします

3. ... スプレッド演算子

4. オブジェクトリテラルの強化

オブジェクトリテラルの出力には従来の「.」と配列モードの2つの方法がありますが、配列モードで出力する場合は角かっこを引用符で囲む必要があります

---

オブジェクトリテラルの定義方法は次のとおりです。関数の多数のパラメータを 1 対 1 対応で出力する必要がある状況を簡単に処理できます。彼の解決策は、オブジェクトを関数に渡すことであり、このオブジェクトはリテラルな方法で定義されており、対応する属性も定義されています。関数は実行するために呼び出す必要があるコードの一部であるため、それらの関係は一目瞭然です

リテラルオブジェクトのプロパティは省略できます

1. リテラルオブジェクトのメソッドは次のとおりです。省略され、関数キーワードは省略できます

2. オブジェクトのプロパティは、自動的に計算するように記述することができます

3. Inherit——port——

4. 代入の構造化

代入の構造化では、変数の定義構文は、配列リテラルまたはオブジェクト リテラルの定義構文と非常に似ており、従来の属性よりも直感的で明確です。実際、アクセス メソッドを記述するために変数を使用するのは適切ではありません。なぜなら、任意の深さのネストされた配列を分解できるからです:

---

var [foo, [[bar], baz]] = [1, [[2], 3]];console.log(foo);// 1console.log(bar);// 2console.log(baz);// 3

対応するビットを空白のままにして、構造化された配列内の特定の要素をスキップすることができます:

var [,,third] = ["foo", "bar", "baz"];console.log(third);// "baz"

ES6のスプレッド演算子、アロー関数、関数パラメータ

スプレッド演算子のいくつかの効果

---

配列の展開

配列のコピー
配列のマージ
拡張機能
4. アロー関数

   //箭头函数 =>let jian = () => {console.log("Hello")}jian();//没有参数()=>{console.log("你好")};//有参数(name)=>{console.log(name);};//可以省略()let d = name=>{console.log(name);}d('jiang');//两个参数(name,age)=>{console.log(name,age);};//省略后的let c (a,b)=>a+b;(a,b)=>{console.log(a+b);console.log(c);

---

関数パラメータ

関数パラメータは3種類に分かれています

---

デフォルトパラメータ

拡張パラメータ
残りのパラメータ
3. シンボル
   シンボルES6 の新しい値型データであり、決して繰り返されない値を表します

let m = 1;let l = 1;console.log(m==l);//打印出truelet mm = Symbol();let ll = Symbol();console.log(mm==ll);//打印出flase

---

注、new 演算子は Symbol の前では使用できません

オブジェクトのシンボル プロパティを取得したい場合は、を使用する必要があります。 Object.getOwnPropertySymbols(o):

Set および WeakSet

ES6 は、Set および Map

Set および WeakSet データ構造を 2 つの新しいデータ構造に追加します。配列ですが、Set データ構造のメンバーは一意です

---

特記事項: Set に追加できる NaN は 1 つだけです

// Setsvar s = new Set();s.add("hello").add("goodbye").add("hello");s.size === 2;s.has("hello") === true;// Weak Setsvar ws = new WeakSet();ws.add({ data: 42 });

。

类似于 WeakMap，WeakSet 对象可以让你在一个集合中保存对象的弱引用，在 WeakSet 中的对象只允许出现一次：

var ws = new WeakSet();var obj = {};var foo = {};ws.add(window);ws.add(obj);ws.has(window); // truews.has(foo);    // false, foo 没有添加成功ws.delete(window); // 从结合中删除 window 对象ws.has(window);    // false, window 对象已经被删除

---

Map和WeakMap

Map和WeakMap是ES6新增的数据结构 事实上每个对象都可以看作是一个 Map。 它们本质与对象一样，都是键值对的集合，但是他们与Object对象主要的不同是，键可以是各种类型的数值，而Object对象的键只能是字符串类型或者Symbol类型值 。Map和WeakMap是更为完善的Hash结构。

// Mapsvar m = new Map();m.set("hello", 42);m.set(s, 34);m.get(s) == 34;// Weak Mapsvar wm = new WeakMap();wm.set(s, { extra: 42 });wm.size === undefined

WeakMap数据结构 WeakMap结构与Map结构基本类似。 区别是它只接受对象作为键名，不接受其他类型的值作为键名。键名是对象的弱引用，当对象被回收后，WeakMap自动移除对应的键值对，WeakMap结构有助于防止内存泄漏。

var wm = new WeakMap(); var obj = new Object(); wm.set(obj,'对象1'); obj=null; wm.get(obj);    //undefined wm.has(obj);    //false

由于WeakMap对象不可遍历，所以没有size属性。

关键点：ES2015=ES6
最常用的ES6特性
ES5只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。let则实际上为JavaScript新增了块级作用域。用它所声明的变量，只在let命令所在的代码块内有效。
块级作用域与函数声明问题：
函数能不能在块级作用域之中声明，是一个相当令人混淆的问题。
ES6引入了块级作用域，明确允许在块级作用域之中声明函数。

注意：ES6规定，块级作用域之中，函数声明语句的行为类似于let，在块级作用域之外不可引用。

当我们使用箭头函数时，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，它的this是继承外面的，因此内部的this就是外层代码块的this
5.ES6的继承机制，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。
6.template string
我们要插入大段的html内容到文档中时，传统的写法非常麻烦，所以之前我们通常会引用一些模板工具库

以上がes6の共通知識のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。