ES6 について詳しく説明し、新機能について学びましょう。

この記事では、ES6 について詳しく説明し、ES6 の新機能について学びます。お役に立てば幸いです。

フロントエンド (vue) マスタリーコースへのエントリー: ラーニングに入る

ES6 を理解する

ECMAScript 、Netscape によって開発された脚本语言的标准化规范です。当初はMochaという名前でしたが、後にLiveScriptに改名され、最終的にはJavaScriptに改名されました。
ECMAScript 2015 (ES2015) バージョン 6 (当初は ECMAScript 6 ( ES6 ) として知られていました) には、新しい機能が追加されています。

ES6 ブロック スコープ レット

まず、スコープとは何でしょうか？スコープとは単に変数を宣言することを意味します。この変数の有効なスコープはlet来る前です。 js にはvarの全局作用域と函数作用域のみがあり、 ES6块级作用域が js に導入されます。

 {
var a = "?";
b = "⛳" とします。
}
コンソール.ログ(a);
コンソール.ログ(b);

 ?
キャッチされない参照エラー: b が定義されていません

ご覧のとおり、ブロック内で変数 a を定義するために var キーワードを使用していますが、実際にはグローバルにアクセスできます。したがって、 var声明的变量是全局的はブロック内で有効になるようにする必要があります。いいえ、 ES6の新しいブロック レベルのスコープ キーワードlet使用して変数 a を宣言できます。再度アクセスすると、 a is not defined 、というエラーが報告されます。

ES6 配列の分割

以下に示すように、まず配列を返す関数を定義してから、非構造化配列を使用し、その配列を呼び出して戻り値を temp に代入し、解构数组を使用した後、配列変数を直接定義します。次に、関数の戻り値は変数を指します。最初の項目の値は最初の配列変数に、2 番目の項目は 2 番目の配列変数に自動的に割り当てられます。最後に 3 つの変数が出力されます。問題。

関数朝食() {
戻る ['？'、 '？'、 '？'];
}
var temp = 朝食();
console.log(temp[0], temp[1], temp[2]);

let [a, b, c] = breakfast();
console.log(a, b, c);

 ? ?
? ?

ES6 オブジェクトの分割

まず、 breakfast解构对象は对象を返します。キーと値のペアのキーは、割り当てが完了した後のカスタム変数を表します。次に、オブジェクトを返すために Breakfast 関数が呼び出され、変数 a、b、c が表示されます。問題がないことがわかります。

関数朝食() {
return { a: '?'、b: '?'、c: '?' }
}
let { a: a, b: b, c: c } = breakfast();
console.log(a, b, c);

 ? ?

ES6 テンプレート文字列

テンプレート文字列を使用する前に、+ を使用して文字列変数を連結します。

ES6 が提供するテンプレート文字列を使用します。 ${变量}を使用する場合は、最初に `` を使用して文字列をラップします。

 a = '?' とします。
b = '?️';

let c = '今日食べる' + a + '食べたら見る' + b;
コンソール.ログ(c);

let d = `今日 ${a} を食べて、${b} を食べた後に見てください`;
コンソール.ログ(d);

今日は食べる?食べてから見よう?
今日は食べる?食べてから見よう?

ES6 は文字列に他の文字列が含まれているかどうかを判断します

これらの関数を使用すると、文字列が何かで始まるかどうか、文字列が何かで終わるかどうか、文字列が含まれているかどうかなどの操作を簡単に実行できます。

 let str = 'こんにちは、私はシャオ・ジョウです❤️';
console.log(str.startsWith('Hello'));
console.log(str.endsWith('❤️'));
console.log(str.endsWith('Hello'));
console.log(str.includes(" "));

真実
真実
間違い
真実

ES6のデフォルトパラメータ

ES6 では、関数を呼び出すときに、パラメータに値が割り当てられていない場合は、設定されたデフォルト パラメータを使用して実行されます。パラメータに値が割り当てられると、新しく割り当てられたパラメータを使用して実行されます。値を使用して、デフォルト値を上書きします。

関数 Say(str) {
コンソール.ログ(文字列);
}
function Say1(str = 'Hey') {
コンソール.ログ(文字列);
}
言う（）;
Say1();
Say1('❤️');

未定義
おいおい❤️

ES6 スプレッド演算子

...使用して要素を展開し、操作を簡単にします。

 let arr = ['❤️', '?', '?'];
コンソール.ログ(arr);
console.log(...arr);
let brr = ['王子', ...arr];
コンソールログ(brr);
console.log(...brr);

 [「❤️」、「?」、「?」
❤️ ?
[「王子様」、「❤️」、「?」、「?」
王子様❤️？

ES6 剰余演算子

...演算子は関数パラメータで使用され、パラメータの配列を受け取ります。次のように使用されます。

関数 f1(a, b, ...c) {
console.log(a, b, c);
console.log(a, b, ...c);
}
f1('?','?','☃️','㊙️');

 ? ? [「☃️」、「㊙️」]
☃️㊙️

ES6関数名

.name使用して関数の名前を取得できます。具体的な使用方法は次のとおりです。

関数 f1() { }
console.log(f1.name);
let f2 = function () { };
console.log(f2.name);
let f3 = function f4() { };
console.log(f3.name);

 f1
f2
f4

ES6 アロー関数

アロー関数を使用するとコードをより簡潔にすることができますが、アロー関数の制限にも注意する必要があります。アロー関数自体にはこれがありません。これは親を指します。

 f1 = a => a; とします。

let f2 = (a, b) => {
a + b を返します。
}

console.log(f1(10));
console.log(f2(10, 10));

 10
20

ES6 オブジェクト式

es6のオブジェクト式を利用すると、オブジェクトの属性が値と同じであれば値を省略でき、関数を書く際にfunction省略することができます。 使い方は以下の通りです。

 a = '㊙️';
b = '☃️' とします。

const obj = {
あ：あ、
b: b、
言う: function () {

}
}

const es6obj = {
ああ、
b、
言う（） {

}
}

コンソール.ログ(obj);
コンソール.ログ(es6obj);

 { a: '㊙️'、b: '☃️'、say: [関数:say] }
{ a: '㊙️'、b: '☃️'、say: [関数:say] }

ES6 定数

constキーワードを使用して測定を定義します。const const測定に値を割り当てるアクションを制限しますが、測定内の値は制限しません。

 const app = ['☃️', '?'];
console.log(...app);
app.push('?');
console.log(...app);
アプリ = 10;

測定値に値を再度割り当てると、エラーが報告されることがわかります。

 ☃️ ?
☃️ ?
アプリ = 10;
^
TypeError: 定数変数への代入。

ES6 オブジェクトのプロパティ名

オブジェクト属性を定義するためにドットを使用する場合、属性名にスペース文字が含まれている場合、それは不正であり、構文を渡すことができません。 [属性名]を使用すると、問題を完全に解決できます。また、属性名を直接記述するだけでなく、属性名を直接記述することもできます。具体的な使い方は以下の通りです。

 obj = {} にします。
let a = '小さな名前';
obj.name = '王子';
// 属性を定義するためにドットを使用し、途中にスペースを入れることは違法です。 // obj.little name = 'Little Prince';
obj[a] = '星の王子さま';
コンソール.ログ(obj);

 { 名前: '王子'、'小さな名前': '星の王子さま' }

ES6 は 2 つの値が等しいかどうかを判断します

===または==を使用して一部の特殊な値を比較した結果は、ニーズを満たしていない可能性があります。Object.is Object.is(第一个值，第二个值)使用して判断すると、満足できるかもしれません。

 console.log(NaN == NaN);
console.log(+0 == -0);
console.log(Object.is(NaN, NaN));
console.log(Object.is(+0, -0));

間違い
真実
真実
間違い

ES6 オブジェクトのコピー

次のように、 Object.assign()を使用して、あるオブジェクトを別のオブジェクトにコピーします。

 obj = {} にします。
オブジェクト.assign(
// ソースオブジェクト、
//対象オブジェクトをコピー { a: '☃️' }
);
コンソール.ログ(obj);

 { a: '☃️' }

ES6 オブジェクトのプロトタイプを設定する

es6 を使用して、次のようにオブジェクトのプロトタイプを設定できます。

 obj1 = { にします
得る（） {
1を返します。
}
}
obj2 = { にします
答え: 10、
得る（） {
2を返します。
}
}
let test = Object.create(obj1);
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj1);
Object.setPrototypeOf(test, obj2);
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj2);

 1
真実
2
真実

ES6 プロトタイプ

obj1 = { にします
得る（） {
1を返します。
}
}
obj2 = { にします
答え: 10、
得る（） {
2を返します。
}
}
let テスト = {
__proto__:obj1
}
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj1);
test.__proto__ = obj2;
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj2);

 1
真実
2
真実

ES6スーパー

obj1 = { にします
得る（） {
1を返します。
}
}
let テスト = {
__proto__: obj1、
得る（） {
super.get() + ' ☃️' を返します。
}
}
console.log(test.get());

 1 ☃️

ES6 生成イテレータ

学習する前に、まずイテレータを作成します

関数 die(arr) {
i = 0 とします。

戻る {
次（） {
完了 = (i >= arr.length);
let value = !done ? arr[i++] : 未定義;

戻る {
値: 値、
完了：完了
}
}
}
}
let arr = ['☃️', '?', '?'];

dieArr = die(arr); とします。
console.log(dieArr.next());
console.log(dieArr.next());
console.log(dieArr.next());
console.log(dieArr.next());

 { 値: '☃️'、完了: false }
{ 値: '?'、完了: false }
{ 値: '?'、完了: false }
{ 値: 未定義、完了: true }

OK、簡略化されたジェネレーターを見てみましょう

関数* die(arr) {
for (let i = 0; i < arr.length; i++) {
arr[i] を生成します。
}
}
let test = die(['?','☃️']);
console.log(test.next());
console.log(test.next());
console.log(test.next());

 { 値: '?'、完了: false }
{ 値: '☃️'、完了: false }
{ 値: 未定義、完了: true }

ES6クラス

es6 を使用すると、クラスを迅速かつ便利に構築できます。

クラスストゥ {
コンストラクター(名前) {
this.name = 名前;
}
言う（） {
return this.name + 'Say Ori';
}
}
let xiaoming = new stu("小明");
console.log(xiaoming.say());

シャオミンはオリが与えたと言った

ES6 の準備

クラス属性を取得または変更するための get/set メソッドを定義する

クラスストゥ {
コンストラクター(名前) {
this.name = 名前;
}
得る（） {
this.name を返します。
}
set(newStr) {
this.name = newStr;
}
}
let xiaoming = new stu("小明");
console.log(xiaoming.get());
xiaoming.set("ダーミン")
console.log(xiaoming.get());

シャオミンとダミン

ES6静的

static キーワードで変更されたメソッドは、オブジェクトをインスタンス化せずに直接使用できます。

クラスストゥ {
静的say(str) {
コンソール.ログ(文字列);
}
}
stu.say("元の静的メソッド");

 Origi の静的メソッド

ES6 が拡張

継承を使用すると、次のようなコードの冗長性を減らすことができます。

クラス人 {
コンストラクター(名前, bir) {
this.name = 名前;
this.bir = bir;
}
showInfo() {
return '名前:' + this.name + '誕生日:' + this.bir;
}
}
クラス A は Person { を拡張します。
コンストラクター(名前, bir) {
スーパー(名前、bir);
}
}
let zhouql = new A("周啓洛", "2002-06-01");
// Zhou Qiluo 自体には showInfo メソッドはなく、人の console.log(zhouql.showInfo()) から継承されます。

名前: 周祁洛 誕生日: 2002-06-01

ES6セット

配列とは異なり、セット コレクションでは、セット コレクション内の要素の重複は許可されません。

 // Set コレクションを作成します let food = new Set('??');
// 繰り返し追加します。food.add('?'); には 1 つだけを入れることができます。
food.add('?');

コンソール.ログ(食べ物);
//現在のコレクションのサイズ console.log(food.size);
// 要素がコレクションに存在するかどうかを判断します console.log(food.has('?'));
// コレクション内の要素を削除します food.delete('?');
コンソール.ログ(食べ物);
// コレクションをループします food.forEach(f => {
コンソール.ログ(f);
});
// コレクションをクリア food.clear();
コンソール.ログ(食べ物);

セット(3) { '?'、'?'、'?' }
3
真実
セット(2) { '?'、'?' }
?
?
セット(0) {}

ES6 マップ

マップを組み合わせてキーと値のペアを保存します

let food = new Map();
a = {}、b = function () { }、c = "名前";

food.set(a, '?');
food.set(b, '?');
food.set(b, '?');
food.set(c, 'ご飯');

コンソール.ログ(食べ物);
コンソール.ログ(食べ物.サイズ);
console.log(food.get(a));
食品.削除(c);
コンソール.ログ(食べ物);
console.log(food.has(a));

food.forEach((v, k) => {
console.log(`${k} + ${v}`);
});
food.clear();
コンソール.ログ(食べ物);

 Map(3) { {} => '?', [関数: b] => '?', '名前' => '米' }
3
?
Map(2) { {} => '?', [関数: b] => '?' }
真実
[オブジェクト オブジェクト] + ?
関数 () { } + ?
地図(0) {}

ES6 のモジュール性

es6 は、モジュラー開発を使用して、一部のコンテンツだけでなく、デフォルトのエクスポートやその他の詳細を簡単にインポートおよびエクスポートできます。

 a = '?' とします。
let f1 = function (str = 'パラメータ') {
コンソール.ログ(文字列);
}
エクスポート { a, f1 };

 './27moduletest.js' から {a, f1} をインポートします。
コンソール.ログ(a);
f1();
f1('わかった');