ES6知識

ES6

VaRは、CONSTとの違いを聞かせて？

• グローバル変数はvarが窓に取り付けられた宣言、およびCONST聞かせていません
• 変数は、可変リフト存在し、CONSTせずに宣言するVAR
• せ、CONSTスコープは、ブロックレベルのスコープであり、範囲は機能VaRの範囲であります
• constせて、同じスコープの下で同じ名前の変数を宣言することはできません、とVARことができます
• そこの前に死んだの一時的な使用で、同じ範囲の下のconst文をできるようになります
• CONST
  • 宣言が割り当てられている必要があります一度、あなたがnullのプレースホルダを使用することはできません
  • 声明は、変更することはできませんした後
  • 文は、複合型のデータである場合は、そのプロパティを変更することができます

代理

プロキシES6は、操作対象から定義することができる新たな機能、です。Vue3.0は応答プロキシによって達成元のデータObject.definePropertyに置き換えられます。

let p = new Proxy(target, handler)

target代表的な薬剤は、オブジェクトに追加する必要がhandlerセットから定義または関数を得ることができる等、操作の定義からオブジェクトと。

let onWatch = (obj, setBind, getLogger) => {
  let handler = {
    set(target, property, value, receiver) {
      setBind(value, property)
      return Reflect.set(target, property, value)
    },
    get(target, property, receiver) {
      getLogger(target, property)
      return Reflect.get(target, property, receiver)
    }
  }
  return new Proxy(obj, handler)
}

let obj = { a: 1 }
let p = onWatch(
  obj,
  (v, property) => {
    console.log(`监听到属性${property}改变为${v}`)
  },
  (target, property) => {
    console.log(`'${property}' = ${target[property]}`)
  }
)
p.a = 2 // 控制台输出：监听到属性a改变
p.a // 'a' = 2

カスタム関数を設定し、我々はロジック機能の方法は、任意の属性は、通知を読み書きする際に放出された目的を達成するために、元のロジックに挿入されます。

、我々は更新されたセットを配布し、中に取得するに頼る収集する必要がある応答のVueを実装する必要がある場合はもちろん、これは、達成された応答のタイプの簡易版で、その理由は、その理由を必要としない、元のプロキシプロキシAPIを置き換えるために使用したいVue3.0 、一度行って、各プロパティの代理店のためのより良いパフォーマンスを再帰の層を追加し、元のデータの一部が耳を傾けるように更新することはできません実現が、完璧なプロキシが何らかの方法で変更したデータを監視することができ、唯一の欠点かもしれブラウザの互換性悪いです。

地図

効果は、変換の一部を行うために、元の配列の各要素を横断する、新しいマップアレイを生成することで、その後、元の配列が変化しない新しい配列を返します。

マッピングコールバック関数は、三つのパラメータ、現在の要素のインデックスの、すなわちインデックス、元の配列を取り

var arr = [1,2,3];
var arr2 = arr.map(item => item + 1)    
arr   //[ 1, 2, 3 ]
arr2  // [ 2, 3, 4 ]

['1','2','3'].map(parseInt)
// -> [ 1, NaN, NaN ]

• 最初のparseInt（ '1'、0） - > 1
• 第二のparseInt（ '2'、1） - >はNaN
• 第三のparseInt（ '3'、2） - >はNaN

フィルタ

新しい配列に要素が、我々は不要な要素を削除するには、この機能を使用することができたときに、フィルタの役割は、アレイがtrueを返して、新しい配列を生成します

フィルタコールバック関数は、次の3つのパラメータ、現在の要素のインデックスの、すなわちインデックス、元の配列を取り

減らします

配列の最後の要素を減らすことができるコールバック関数により得られた値に変換されます。
我々は値を加算したすべての要素の機能で機能を実現したい場合は、次のようなコードを書くかもしれません

const arr = [1, 2, 3]
let total = 0
for (let i = 0; i < arr.length; i++) {
  total += arr[i]
}
console.log(total) //6 

我々は減らす場合でも、言葉の使用は、コードの一部が1行のコード用に最適化されてトラバースすることができます

const arr = [1, 2, 3]
const sum = arr.reduce((acc, current) => acc + current, 0)
console.log(sum)

低減のために、それは2つのパラメータ、すなわち、初期値とコールバック関数が、我々は上記のコードの分解過程を減少させる受け付け

• まず、初期値は、最初に実行するコールバック関数への最初の引数として値は、0であります
• コールバック関数は、4つのパラメータ、すなわち、現在の要素の累積値、現在のインデックス、元の配列、後者の3つは、確かに、我々はここで、我々は最初の引数に焦点を当て、役割を理解することができますを受け付け
• コールバック関数の次の実行では、初期値と現在値が1の結果を加算することによって導出される、結果は、2番目のコールバック関数の最初の引数としてあります
• したがって、2番目のコールバック関数で、付加価値は、それぞれ1と2である、というように、結果は、6サイクル後に得られました。

機能と矢印の正常な機能でES6の違いは？

• 通常の関数の宣言は、可変リフトで最も高く、リフト機能には、矢印を持っていません
• アロー機能が所有していませんthis、arguments
• コンストラクタ関数として矢印新しい新しい、何の財産もないではないことはできません
• 収量コマンドを使用することができないので、関数は、発電機機能矢印を使用することができません
• ので、新しいコマンドを使用することはできません。
  • これを所有していない、コールを呼び出すことはできません、適用されます
  • 実装におけるプロトタイプのプロパティ、および新しいコマンドは、新しいプロトタイプコンストラクタオブジェクトに割り当てる必要がありません __proto__

約束する

Promise 翻訳は、このコミットメントが将来的に決定的な答えを持っていますが、そのコミットメントを意味し、彼らは他の州のステータスを変更することはできません待機状態から来たら、その取り組みは三つの状態、このコミットメントを持っています。

• 保留（保留）
• 完了（解決）
• （拒否）拒否

私たちは約束を構築すると、コンストラクタのコード内で即座に実行されます。

new Promise((resolve, reject) => {
  console.log('new Promise')
  resolve('success')
})
console.log('finifsh')

// 先打印new Promise， 再打印 finifsh

チェーンの通話を実現することを約束し、約束だと言って、各呼び出し後に返され、約束はブランドが新しい、理由の状態は不変ためです。あなたは、その後にリターンを使用する場合、戻り値はPromise.resolve（）パッケージとなります。

Promise.resolve(1)
  .then(res => {
    console.log(res) // => 1
    return 2 // 包装成 Promise.resolve(2)
  })
  .then(res => {
    console.log(res) // => 2
  })

もちろん、約束も、コールバック地獄の問題に良い解決策です

ajax(url)
  .then(res => {
      console.log(res)
      return ajax(url1)
  }).then(res => {
      console.log(res)
      return ajax(url2)
  }).then(res => console.log(res))

実際には、それはまた、そのような約束をキャンセルしていないなど、いくつかの欠点があり、エラーがコールバック関数で捕捉する必要があります。

非同期和のawait

あなたは、関数の非同期を追加する場合、関数は約束を返します。

async function test() {
  return "1"
}
console.log(test()) 
// -> Promise {<resolved>: "1"}

非同期は、次のラップされた関数Promise.resolve（）の戻り値であり、プロセスは同じ値に戻り、そしてのみ支持非同期の使用を待ちます。

async function test() {
  let value = await sleep()
}

非同期とは非同期約束の直接の使用に比べて最終的な解決策は、呼び出しチェーンを処理することの利点は、より明確にすることができ、正確結局、コードを書く、そして非常に病気の多くを書き込み、またできると言うことができる待ちます問題へのコールバック地獄エレガントなソリューション。

もちろん、いくつかの欠点があるため、ある非同期コードを待つが、同期コードに変換され、複数の非同期コード場合はパフォーマンスの低下の使用に依存しない待つためにつながります。

async function test() {
  // 以下代码没有依赖性的话，完全可以使用 Promise.all 的方式
  // 如果有依赖性的话，其实就是解决回调地狱的例子了
  await fetch(url)
  await fetch(url1)
  await fetch(url2)
}

使用例を見て待っています：

let a = 0
let b = async () => {
  a = a + await 10
  console.log('2', a)
}
b()
a++
console.log('1', a)

//先输出  ‘1’, 1
//在输出  ‘2’, 10

• = 0が保存されたときにように第1の機能Bは、発電機は、物事のスタックを維持する内部発電機を実現待つため、可変又はゼロの前に10で実行を待つために、最初に実行しました
• 待つ非同期動作が、次に発現が約束を返さないので、Promise.reslove（戻り値）に包装なり、その後、同期コードは、外側の関数である実行します
• 同期コードが保存され、この時間A = 0 + 10を使用するように入れ、開始値非同期コードの完了後++で印刷を行います

内部上述の説明は、発電機を実現待つ、実際には、発電機は糖衣構文の約束、および自動実行ジェネレータの内部実装と結合されて待ちます。

コード解析の問題

function wait() {
  return new Promise(resolve =>
    setTimeout(resolve,  1000)
  )
}

async function main() {
  console.time();
  const x = wait();
  const y = wait();
  const z = wait();
  await x;
  await y;
  await z;
  console.timeEnd();
}
main();

回答：出力時間：秒より少し。
理由：3ウェイト機能割り当てがすでに実装され始めていました。

わずかに変更されたあなたは、以上の3×1000ミリ秒の結果を得ることができるもの

function wait () {
  return new Promise(
    resolve => setTimeout(resolve,  1000)
  )
}

async function main () {
  console.time()
  const x = await wait()
  const y = await wait()
  const z = await wait()
  console.timeEnd()
}

main()

ジェネレータジェネレータ

function *foo(x) {
  let y = 2 * (yield (x + 1))
  let z = yield (y / 3)
  return (x + y + z)
}
let it = foo(5)
console.log(it.next())   // => {value: 6, done: false}
console.log(it.next(12)) // => {value: 8, done: false}
console.log(it.next(13)) // => {value: 42, done: true}

• 別の最初のジェネレータ関数呼び出しと通常の関数は、イテレータを返します。

• 第一次実行されると、パス参加者は無視され、機能が収率（X + 1）で停止するように、戻り5 + 1 = 6

• 第二次を実行すると、入ってくるパラメータは、戻り値の利回りに等しい、とあなたはパラメータを渡していない場合は、収率が常にundefinedを返します。このとき、第2収率= 8 12 * 2/3に等しくなるように、Yは、* 12 2 =せ

• 次の第3を行う場合、着信引数は、Zに渡されるので、Z = 13、X = 5であり、yは24 =合計は42に等しいです。

Builderの原則

yeild値を生成する場合、実行コンテキスト発生器は、スタックからポップします。しかしながら、イテレータを参照コンテキストを実行するためのチームを維持して、コンテキストは、それが破壊されたとして、コンテキストの実行後に正常な機能を好きではない、失われません

ESモジュール

ESモジュールが実現するモジュラーソリューションのネイティブであり、いくつかの違いがありますCommonJS

• CommonJS、すなわち、現在サポートされていない（$ {パス} /xx.js）を必要とするが、提案がされている、動的インポートをサポート
• なぜなら、サーバ用に輸入さCommonJSの同期、ファイルはメインスレッドスタックへの影響が大きくない場合でも、ローカルに同期インポートされています。後者はブラウザため、非同期インポートされますが、インポートは大きな影響をレンダリング同期する場合は、あなたは、ファイルをダウンロードする必要があります
• あなたは派生値が変更された場合でも、すべての値のコピーをエクスポートすると、インポートの値は変更されませんので、あなたが値を更新したい場合は、再度インポートを再しなければならないCommonJS。しかし、ESモジュールは、同じメモリアドレスへのリアルタイム結合、インポートおよびエクスポート値ポイントを経由して、輸入額が輸出額の変化に追従します
• ESモジュールが実行が必要です/輸出にコンパイル

// 引入模块 API
import XXX from './a.js'
import { XXX } from './a.js'
// 导出模块 API
export function a() {}
export default function() {}

プライベートメソッドとプライベートプロパティ（アリ側）

グエン教師| ES6エントリー

既存のソリューション

プライベートメソッドと私有財産だけでなく、外部のクラスのアクセス・メソッドとプロパティ内でアクセス可能です。これは、パッケージコードの賛成で一般的な需要ですが、ES6を提供していない、唯一の代替方法によって達成シミュレートすることができます。

一つのアプローチは、それは関数名や属性名の前に追加され、差に命名される_が、これは安全ではありませんが、チームの規範。

もう一つの方法は、単純である場所でクラスモジュールのうち、プライベートメソッドに内部モジュールのすべてのメソッドが外に見えているので、。

class Widget {
  foo (baz) {
    bar.call(this, baz);
  }

  // ...
}

function bar(baz) {
  return this.snaf = baz;
}

上記のコードは、bar.call内部コール（この、バズ）をメソッドfooが開示されています。これはバーが実際に現在のモジュールのプライベートメソッドになっていることができます。

もう一つの方法は、使用することですシンボル値の一意性を、シンボル値として名前のプライベートメソッドの名前を。

const bar = Symbol('bar');
const snaf = Symbol('snaf');

export default class myClass{

  // 公有方法
  foo(baz) {
    this[bar](baz);
  }

  // 私有方法
  [bar](baz) {
    return this[snaf] = baz;
  }

  // ...
};

上記のコード、バー、snafシンボル値は、一般的に、彼らはこのように、プライベートメソッドとプライベートプロパティの効果を達成し、取得することはできませんされています。しかし、それはまだそれらを得ることができ、絶対に不可能ではありませんReflect.ownKeys（）。

const inst = new myClass();

Reflect.ownKeys(myClass.prototype)
// [ 'constructor', 'foo', Symbol(bar) ]

代理

プロキシは、この層は第一こうしてフィルタリング及び外界へのアクセスを書き換えるためのメカニズムを提供し、傍受を通過しなければならないオブジェクトへのアクセス外部対象物の前に「ブロッキング」の層を設定する、と理解することができます。単語のプロキシ本来の意図は、エージェントが特定の操作のように翻訳することができ、その「プロキシ」で示すために、ここで使用される「ブローカー。」

var obj = new Proxy({}, {
  get: function (target, key, receiver) {
    console.log(`getting ${key}!`);
    return Reflect.get(target, key, receiver);
  },
  set: function (target, key, value, receiver) {
    console.log(`setting ${key}!`);
    return Reflect.set(target, key, value, receiver);
  }
});

遮断リストのプロキシのサポート、13種類の合計。

• （ターゲット、propKey、受信機）を取得
  • オブジェクトの読み取り属性などproxy.fooおよびプロキシ[「foo」を]インターセプト。
• セット（ターゲット、propKey、値、受信機）
  • オブジェクトのプロパティ、例えばproxy.foo = Vまたはプロキシ[「FOO」] = Vを傍受するように配置され、ブール値を返します。
• 持っている（ターゲット、propKey）
  • 操作プロキシでのインターセプトpropKeyはブール値を返します。
• deleteProperty（ターゲット、propKey）
  • 傍受削除プロキシ[propKey]操作は、ブール値を返します。
• ownKeys（ターゲット）
  • インターセプトObject.getOwnPropertyNames（プロキシ）、Object.getOwnPropertySymbols（プロキシ）、Object.keys（プロキシ）は、のために...ループで、配列を返します。この方法は、（）すべてのターゲット自体name属性をオブジェクト属性、およびObject.keysを返す結果自体が特性を横断することができるだけ対象物を含む返します。
• getOwnPropertyDescriptor（ターゲット、propKey）
  • 傍受Object.getOwnPropertyDescriptor（プロキシ、propKey）は、記述されたオブジェクトのプロパティを返します。
• DefineProperty（ターゲット、propKey、propDesc）
  • 傍受Object.defineProperty（プロキシ、propKey、propDesc）、Object.defineProperties（プロキシ、propDescs）は、ブール値を返します。
• preventExtensions（ターゲット）
  • 迎撃Object.preventExtensions（プロキシ）、ブール値を返します。
• getPrototypeOf（ターゲット）
  • 傍受Object.getPrototypeOf（プロキシ）は、オブジェクトを返します。
• isExtensible（ターゲット）
  • 迎撃Object.isExtensible（プロキシ）は、ブール値を返します。
• setPrototypeOf（ターゲット、プロト）
  • 迎撃Object.setPrototypeOf（プロキシ、プロト）は、ブール値を返します。対象オブジェクトが関数である場合、2つの追加の操作が傍受される可能性があります。
• （ターゲット、オブジェクト、引数）を適用
  • 動作としてプロキシインスタンスは、（...）proxy.apply、そのようなプロキシ（...引数）、proxy.call（オブジェクト、...引数）として、関数呼び出しを傍受します。
• （ターゲット、引数）を構築
  • プロキシインスタンス傍受操作は、このような新しいプロキシ（...引数）として、コンストラクタとして呼び出されます。