学ぶ価値のあるES6の特徴は何ですか？

カルマは勤勉です

01序文

ES6は次世代の言語標準になりました。フロントエンド学習は新しい段階に達しました。JavaScript言語は、複雑な大規模アプリケーションを記述してエンタープライズレベルの開発言語になるためにすでに使用できます。そして、フロントエンドの開発ポジションは現在、企業内で最も重要なポジションの1つであるため、新しいテクノロジーを学び、テクノロジーで製品を推進することは当然のことです。

ES6の研究については、Ruan Yifeng氏のチュートリアルをご覧になることをお勧めします。このチュートリアルでは、すべての知識ポイントが詳しく説明されており、非常に理解しやすくなっています。次に、ES6が追加した、プロジェクトで使用できるいくつかの重要な機能について説明し、よくある質問をインタビューします。

02新機能

ES6には多くの新機能が追加されており、ここで詳しく説明することはできません。インタビューで次のことを発見しました。明確に説明すれば合格できます。

let、var、constの違い
アロー機能
解体任務
テンプレート文字列
セット、マップデータ構造
約束オブジェクト
代理

let、var、constの違い

これらはすべて、変数/定数を宣言するために使用されるキーワードです。以前は、一般的にvarを使用して宣言していましたが、いくつかの欠点があり、間違いを犯しやすいです。

まず、変数の昇格とスコープの問題を理解しましょう。

変数の昇格：宣言にvarを使用する場合、宣言なしで使用できます。たとえば、次のとおりです。

console.log(a); //undefined

機能は向上しますか？優先度の高い関数または変数はどれですか。

console.log(a);  //f (a){}
var a=1;
function a(){};

その結果、関数は変数よりも優先度が高くなります。スコープは何ですか？

var a=1;
function b(){
  var a=2
  console.log(a);
}
b()

このコードを実行すると、結果は2になります。

var a = 1;
function b() {
    // var a = 2
    console.log(a);
}
b()

しかし、コードにコメントを付けると、結果が1になることがわかります。

スコープ：現在のジョブドメインでステートメントが見つからない場合は、親のスコープに移動してステートメントを見つけます。このようにして、チェーンを段階的に見つけ、最終的にチェーンを形成します。これがスコープチェーンです。

letとvarは変数の宣言に使用できる演算子ですが、それらの違いは、varにはスコープの昇格があり、letは現在のスコープの使用に制限されていることです。それ以外の場合、エラーが報告されます。また、ステートメントの前に使用することは間違っています。

console.log(a)
let a

定義されていないと言うでしょう

constは定数を宣言するために使用されます。宣言後は変更できず、変数の昇格の問題はありません。変更または宣言の前に使用すると、エラーが報告されます。また、letおよびconst宣言はウィンドウに表示されません。

var a = 1
let b = 1
const c = 1
console.log(window.b) // undefined
console.log(window. c) // undefined

定期試験のインタビューの質問は、次のコード出力は何を行うかです。

for (var i =0; i <5; i++) {
    setTimeout(()=>{
        console.log(i);
    },i*1000)
}
//5 5 5 5 5

これはブロックレベルのスコープの問題で、letステートメントに置き換えた場合、0 1 2 3 4が出力されます

要約すると：

varには可変プロモーションがあり、宣言の前に使用できます。他の2つには一時的なデッドゾーンがあり、宣言の前に使用することはできません
letとconstは基本的に同じですが、後者を再度割り当てることはできません
可変プロモーションによる機能プロモーション

アロー機能

アロー関数は、ES6で追加された新しい関数の書き込み方法で、次の2つの書き込み方法は実際には同じです。

setTimeout(function(){
    console.log("Hello World!");
},1000)

setTimeout(()=>{
    console.log("Hello World!");
},1000)

それと通常の機能の違いは何ですか？

コンストラクターとして使用できません。プロトタイプはありません
これは継承を指し、変更されません

解体任務

構造化代入は、パターンマッチングを記述する方法の1つです。これまでは、値を代入する場合、通常、次のように値を個別に代入する必要があります。

let a = 1;
let b = 2;
let c = 3;

ただし、構造化代入では、この方法で値を代入できます。左側と右側の両方がコピーに対応します。構造化が失敗した場合、値は未定義になります

let [a, b, c] = [1, 2, 3];

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

通常、私たちがよく使用する2つの側面があります。1つは、次のようなJSON文字列の分解です。

const {name,age,number} = {name:'rose',age:12,number:123}
console.log(name,age,number);  //rose 12 123

次のようなデータに使用できる交換操作もあります。

let a=1;
let b=2;

[a,b]=[b,a];

console.log(a,b);  //2, 1

テンプレート文字列

$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);

$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

以前の使用と比較して+ステッチングははるかにシンプルで読みやすくなっています。構文は宣言にバックティックを使用することであり、変数は$ {variable}を使用します。

セット、マップデータ構造

Setは、Setデータ構造の生成に使用されるコンストラクターです。配列に似ていますが、配列とは異なり、各項目を繰り返しません。この効果は、アレイの重複排除操作にも使用できます。

const s = new Set();
[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));
for (let i of s) {
  console.log(i);
}
// 2 3 5 4

アレイの重複排除、比較的シンプル

function unique(arr) {
    return [...new Set(arr)]
}

マップはオブジェクトと同様のキーと値のペアのコレクションですが、キーの範囲は文字列に限定されず、オブジェクトを含むさまざまなタイプの値をキーとして使用できます。

const m = new Map();
const o = {p: 'Hello World'};

m.set(o, 'content')
m.get(o) // "content"

m.has(o) // true
m.delete(o) // true
m.has(o) // false

コンストラクターとして、Mapは配列をパラメーターとして受け入れることもできます。配列のメンバーもキーと値のペアの配列です。

const map = new Map([
  ['name', '张三'],
  ['title', 'Author']
]);

map.size // 2
map.has('name') // true
map.get('name') // "张三"
map.has('title') // true
map.get('title') // "Author"

約束オブジェクト

const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

Promiseコンストラクターは関数をパラメーターとして受け入れます。関数の2つのパラメーターはresolveとrejectです。これらはJavaScriptエンジンによって提供される2つの関数であり、自分でデプロイする必要はありません。

resolve関数の機能は、Promiseオブジェクトの状態を「未完了」から「成功」に（つまり、保留から解決に）変更することです。これは、非同期操作が成功したときに呼び出され、非同期操作の結果をパラメーターとして渡し、拒否します。関数の機能は、Promiseオブジェクトの状態を「未完了」から「失敗」に（つまり、保留から拒否に）変更し、非同期操作が失敗したときに呼び出され、非同期操作によって報告されたエラーをパラメーターとして渡します。

Promiseインスタンスが生成されたら、thenメソッドを使用して、解決済み状態と拒否済み状態のコールバック関数をそれぞれ指定できます。

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

代理

プロキシは、ターゲットオブジェクトの前に「インターセプト」のレイヤーを設定することと理解できます。オブジェクトへの外部アクセスは、最初にこのレイヤーによってインターセプトされる必要があるため、外部アクセスをフィルタリングして書き換えるメカニズムを提供します。プロキシインターセプトには次の13種類があります。特定の使用法については、前に書いたプロキシを見つけることができます。