資格の中間レベルのフロントエンドエンジニアは、28のJavaScriptのスキルを習得しなければなりません

序文

テキストの特定の用途に対応するコードと詳細なコメントは、私のgithubの上のソースコードの下に接続されています。

1.オブジェクトのデータタイプが決定されます

異なる評価関数を返すためにクロージャと共に使用Object.prototype.toStringは異なるタイプ、1行のコード、シンプルかつエレガントでフレキシブル(イニシャル着信ノート型パラメータ)を通過させることによって決定されます

この機能は、パッケージの種類を検出するために推奨されていない呼び出しは最初の操作パラメータをボクシングになるので、基本データ型で生成することができます

アレイマップを達成するために2 ES5方法

これは、ために失敗矢印のこの字句の結合機能で、この時点のコールバックへの最初の引数として第2パラメータマップ、最初の引数は、矢印の機能がある場合は、第2のセットを言及する価値があります

他のhasOwnPropertyを現在のターゲット要素が配列の下に存在することで判断し、スパース配列に対処するためである(友人のおかげで地域のコメント)

3.マップのアレイを使用して実装方法を減らします

4. ES5フィルタアレイの実装方法

前記方法は、フィルタの実装アレイを減らします

6. ES5は、アレイのいくつかの方法を実装します

配列は、それが空の配列の場合は、必ず最終的に返されますいくつかの方法を実行しfalse、それが空の配列の場合は、別の配列内のすべてのメソッドの配列は、それが常に返されますが、true

7. ES5アレイ実装を減らします

(三元@設け神コードに感謝)が疎な配列との間の関係であるので、正しい要素と添え字を横切る、疎な要素をスキップ確保する必要性を減らすことができるため

8.フラット減らす実装のアレイを使用する方法

selfFlatはこの時点に依存しているので、減らすこの時点のselfFlatトラバーサルを指定する必要があり、そうでない場合は、このようにエラーを指しているウィンドウをデフォルト設定されます

出会いを反復を低減原理は依然として配列の要素であるES6によって行わ配列、その膨張オペレータ次元削減(ES5は、concatメソッドを使用することができる)、及び配列要素は、アレイ内にネストすることができ、次のことを行う必要があり再帰呼び出しのselfFlat

方法フラットネイティブ奥行き寸法低減パラメータをサポートするデフォルトの一次元アレイを削除することである、すなわち、深さを示しています

着信Inifityは、一次元アレイに配列に渡されます

たびに再帰的な深さパラメータの原則マイナス1は、深さパラメータは、元の配列への直接リターン0であれば

9. ES6にクラスの構文を達成

内部寄生クラスES6を合成継承に基づいており、それはObject.create法によって空のオブジェクトを作成し、最高の継承であり、この空のオブジェクトはObject.createメソッドパラメータを継承させサブクラス(サブタイプ)プロトタイプオブジェクトは空のオブジェクトに等しい、あなたはサブクラスのプロトタイプのインスタンスは空のオブジェクトに等しく、空の試作品と同等の親クラスのプロトタイプオブジェクト(superType.prototype)相続のオブジェクトを実装することができます

Object.createは、第二引数をサポートするには、空のオブジェクト定義のプロパティとプロパティ記述子/アクセサディスクリプタ世代に、我々は、constructorプロパティを定義するために空のオブジェクトに沿って複数のデフォルト動作を継承することができますされ、それは金ではありません引用された内部属性(可算:偽)

クラスはES6サブクラスは、親クラスの静的メソッドと静的プロパティ、およびを継承することができますここでは、クラスとクラス間の継承ニーズの定義についての事例と例、追加のメソッド間の継承を行うことができます通常の組み合わせ寄生継承使用Object.setPrototypeOfスーパータイプサブタイプのプロトタイプセットは、それによって、親クラスから継承された静的及び静的プロパティを可能にします

10.関数カリー化

どのように使用するには:

カリー化は重要な機能のプログラミング技法、関数のパラメータを使用して技術のシリーズに関数のパラメータの数であります

関数型プログラミングは、関数を組み合わせることができ、合わせた機能は、単一の引数を取り、その需要を受けて、組み合わせを構成する関数の機能を使用する必要が複数存在する場合、カリー化を使用する必要があり、別の重要な機能を構成します関数は、部分的な評価の組み合わせを用意し、それは常に、単一のパラメータを取り

借入胡湯はブログの例を

(プレースホルダ付き)11カリー化関数

どのように使用するには:

カリーは、アイデアは、現在のラウンドパラメータはプレースホルダが含まれている場合、プレースホルダに最後のラウンドを埋めるために行くために渡された一人一引数が、その後、内部の配列に保存されていることであると認識させるために、より柔軟な文字を占有することで現在のラウンドプレースホルダパラメータを埋めるためではない要素の現在のラウンドの終わりには、プレースホルダだけを充填する前に渡されます

12.一部の機能

どのように使用するには:

部分的な機能などカレーコンセプト、彼らはその後、パラメータの単一残りを受け、機能はあなたが合格パラメータに基づいて、カリー化リターンを停止します、違いはあなたが合格いくつかのパラメータの固定部分関数ということだと思います機能、数はカリー化する前に、関数のパラメータを満たすためにパラメータの数になるまで、

Function.prototype.bind関数は、以前のパラメータのパラメータバインド機能のリストに追加されるように、第2引数は始め受け入れ部分関数の典型的な代表であり、そして異なる結合するこの機能も、上記の会計をサポートしていることですプレースホルダ

13.フィボナッチ数とその最適化

メモリ機能を使用して、前の操作の結果は、しばしば、前の計算結果に依存しているために保存していた時間を大幅に節約することができ、例えばフィボナッチ数、欠点は、クロージャが追加メモリオブジェクトOBJを取るということです

14.関数バインドを実現する方法

バインド方式のコア機能のような、アカウントに他のケースの数を取って、コールの使用であります

  • bind関数呼び出しが返された場合、新たなコンストラクタが期限切れになるように値をバインドして、新しい指定されたオブジェクトされます
  • バインド長に定義され、名前が関数属性(ない列挙属性)
  • 関数プロトタイプを結合した後、元の関数に指定する必要があり

15.関数呼び出しを実現する方法

原理は、シンボルプロパティタイプのES6を使用して競合を防ぐために、ここで実行するためのプロパティのコンテキスト(文脈)に渡されたパラメータとして機能します

シンプルなモジュール16 CO

どのように使用するには:

実行機能はバック約束が正常に解決された収率は自動的に次のyieldキーワードの次のメソッドが進行を呼び出しますジェネレータ関数パッケージ実行機能はyieldキーワードは停止します遭遇するたびジェネレータ関数をとり、最終的約束は成功し、次の約束を解決解決されるたび、すべて正常に解決する場合、すべての分析の結果を印刷、形成することになる、進化は非同期/のawait最も使用される構文になりました

17防振機能

実行されないよう、追加のトリガーが再びトリガイベントの終了後、原則は、タイマーイベントが再び指定された時間内に最後にクリアされます場合にトリガされたタイマーの使用であるかどうかに、後続の時間に入るとすぐに実行するかどうかにつながりますタイマーが所定の時間関数に自動的にトリガを超えるまで、タイマーをリセットし、新しい機能

外直接内部カウンタを除去するように外向きに閉じることによって、キャンセル機能を露出させ

18.スロットリング機能

そして裁判官として内部タイムスタンプを付加的に使用することを除いて類似した手ブレ補正機能は、次のトリガ・イベントを可能にするために一定の期間のためのトリガーイベントはありません

19.遅延ロード画像

すべての画像が読み込まれた後、スクロールイベント(イベントはスロットルを追加監視するための勧告を)監視、画像がロードされているgetBoundClientRectの実装では、あなたが最後のイベントをアンバンドルをリッスンする必要がある、からなるDOMのimgタグのリストから削除されます

実装intersectionObserver、IntersectionObserverをインスタンス化し、それがすべてのIMGにラベルを付けることが観察されました

パラメータエントリを通過しながら見た、このような各要素の境界情報、現在の要素の対応するDOMノードとしてインスタンスを保持するようにすべての要素IMGタグは、可視領域がインスタンス化コールバックを実行するコールバックに入り、いくつかの状態その観察を持ち上げながら、可視領域への電流要素の比は、領域にいつでも視覚要素は、実際の画像は、現在、imgタグに割り当てられています

20.新しいキーワード

21. Object.assignを達成

私は別の記事を参照することができObject.assign原則のブログ

22. instanceofは

最後にプロトタイプチェーンを通過する際の原則は、再帰的にプロトタイプチェーンの正しいパラメータを横断して、比較のために各パラメータを残している、それはfalseを返し、trueを返しました

23.プライベート変数の実現

すべて含むProxyエージェント使用_で始まる変数を、それが外部にアクセスすることはできません

閉鎖のプライベート変数フォームを保存し、同じクラスのすべてのインスタンスにアクセスする欠点は、プライベート変数です

各インスタンスは、独自のプライベート変数を持っている別の実装パッケージが閉鎖の上記の種類の欠点を解決し、閉じ、欠点は、文法クラス、メソッドのすべての権限(プライベート変数にアクセスするための方法)のシンプルさを放棄しています彼らは、コンストラクタに格納されています

WeakMapと閉鎖することにより、構成オブジェクトの各インスタンスで現在のインスタンスとすべてのプライベート変数を保存し、WeakMapの外部閉鎖にアクセスすることはできませんが、利点は何の変数が存在しない場合、インスタンスを指し、それは自動的にリリースする予定ということですWeakMap使用プライベートインスタンス変数を保存し、メモリのオーバーフローの問題を軽減

24.シャッフルアルゴリズム

10未満の配列のための初期のクロム要素は、アレイの障害につながることができます挿入ソートを、使用するクロムアルゴリズムの最新バージョンは安定ソートアルゴリズムに場所を使用する場合でも、順不同で実際にはありませんスクランブル問題のために解決されていません

アルゴリズムは、その場で追加の配列と域外、アルゴリズムをシャッフル図場所の一つなので、より経済的なメモリ使用量を宣言する必要はありませんに分けてシャッフル、アルゴリズムをシャッフルすることにより、実際のオーダーを達成することができ、原理はトラバース、あります配列の要素、現在の要素の全てとランダムに選択され、交換後

25.シングルトン

SingletonパターンはES6方法プロキシ傍受コンストラクタを実行することによって達成されます。

26. promisify

どのように使用するには:

promisify関数は、コールバック関数がエラー最初のスタイル(nodejs)コールバック関数のための約束のヘルパー関数となり、原理はERROR-最初にするスタイルのコールバックを関係なく、成功または失敗のである実装した後、最終的なコールバック関数を実行します、私たちは何をする必要があるに状態制御約束のコールバック関数をさせることです

すべてのモジュールをFSに手動による方法は、より柔軟な層promisify機能ラップされないようにプロキシエージェントはまた、方法を得る傍受する、FSモジュール全体で本明細書中で使用されます

27.プロセスエレガントな非同期/待ちます

どのように使用するには:

各ユース非同期は/すべてのよりエレガントなのtry / catchの層に包まれた待つ必要はありません、あなたがローダー、ASTの構文木解析、経験を書くことができWebPACKのを使用している場合、自動的にのtry / catchを注入し、文法を待って、ここでは別のアイデアを提供していますそのような補助機能にも使用する必要がありますされていません

28.持つEventEmitterをパブリッシュおよびサブスクライブ

イベント間の緩やかなデカップリングを達成するためのイベントを登録する方法は、トリガイベントトリガ方式にすることでイベントとログオフイベントをトリガするために、一度だけ登録するために使用余分一度オフにし、ヘルパー機能を追加しました

29. JSON.stringify(追加)を達成

JSON文字列にJSON.stringifyオブジェクトを使用する場合、いくつかの不正なデータ型は、以下のように主に、歪みます

  • オブジェクトが含まれている場合toJSONメソッドはtoJSONを呼び出します
  • アレイでは
    1. 未定義/記号/機能データ・タイプがある場合はnullになり
    1. インフィニティがあります/ NaNはnullになります
  • 対象に
    1. 属性値が未定義/記号/ファンクションデータ型、属性、および値が文字列にないとき
    1. 値インフィニティ/ NaNの属性、属性値はnullになり、
  • 呼び出しの値の日付データ型toISOString
  • 非配列/オブジェクト/機能/日付複合データ型は、空のオブジェクトになります
  • 循環参照は、エラーがスローされます

またJSON.stringifyはまた、第二及び第三オプションのパラメータを渡すことができ、興味の友人が理解できます

長いコードを達成するため、ここで私が対処するために、対応するソースコードを貼り付けする準備ができていますJSON.stringifyを

ソース

ソースコードは、スターを歓迎し、後のフォローアップスキルは、新しいコンテンツを追加するのは初めてとなります

参考資料

カリー化のJavaScript関数のトピック

話題のJavaScript関数の組み合わせ

JavaScriptのメモリ機能のトピック

プライベート変数のES6シリーズを達成

JavaScriptをスクランブル話題

おすすめ

転載: blog.csdn.net/weixin_33681778/article/details/91403862