フロントエンド面接準備----JavaScript(三)

7305 ワード
問題 コード 面接試験
本論文は、皆さんの学習のために、フロントエンドの愛がないと知っているカタログを整理し、21、async/await 22、即実行関数と使用シーン23、設計モード(要求をどのように実現し、応用、長所短所を説明する)を更新し続けます.配列問題配列除去常用方法検索配列重複項扁平化配列は、配列中の各項と特定値差分値順26、BOM属性オブジェクト方法27、サービス端末レンダリング28、ゴミ回収メカニズム29、eventloopプロセスとスレッドタスクキュー30、どのようにして迅速に文字列を千の精度の数字にするか?
二十一、async/await
MDN:asyncc function async functionから回転して、AsyncFunctionオブジェクトに戻る非同期関数を定義します.非同期関数は、イベントサイクル非同期によって実行される関数であり、結果は暗黙的なPromiseを介して返される.コードに非同期関数を使うと、文法や構造が標準の同期関数のように見えることがあります.
function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  var result = await resolveAfter2Seconds();
  console.log(result);
  // expected output: 'resolved'
}

asyncCall();
非同期関数は、非同期関数の実行を停止し、awaitの実行を待って非同期関数を実行し、結果を返すPromiseの命令を含むことができる.awaitキーワードは非同期関数内でのみ有効であることを覚えてください.非同期関数以外で使うと、文法的なエラーが発生します.非同期関数が一時停止すると、呼び出した関数は継続して実行されることに注意してください.
async/await           promise       ，     Promises      。
  Promises        ，async/await     generators  promises。
async/awaitについて話します
二十二、すぐに関数と使用シーンを実行します.
すぐに関数を実行します.関数を宣言して、直ちにこの関数を実行します.
(function fn(){
	console.log("      ");
})()
使用シーン
  • 関数は一回だけ働きます.
  • 直ちに関数を実行する変数は、初期化にのみ
    • を使用する.
    何が直ちに関数を実行するので、それはどんな作用がありますか?
    二十三、設計モード(どのように実現し、応用し、長所と短所を説明することを要求する)／一例モードの実現
    デザインモード
  • 工場モデル
  • 単体モード
  • モジュールモード
  • プロキシモード
  • 職責チェーンモード
  • コマンドモード
  • テンプレート方法モード
  • ポリシーモード
  • リリース–購読モード
  • 仲介者モード
    • 一例モード実現
    //     
var Singleton = function(name){
    this.name = name;
    this.instance = null;
};
Singleton.prototype.getName = function(){
    return this.name;
}
//       
function getInstance(name) {
    if(!this.instance) {
        this.instance = new Singleton(name);
    }
    return this.instance;
}
//          
var a = getInstance("aa");
var b = getInstance("bb");
    Javascriptのよく使う設計パターンの詳細解
    二十四、iframeの欠点は何ですか?
    iframe                   （     ）。
    短所:
  • は管理が容易ではない.
  • Promiseユーザの体験度の差.
  • は検索エンジンの最適化に不利です.
  • デバイスの互換性が悪い.
  • は、サーバのiframeからの要求を増加させ、負担を増加させる.
    • どのような欠点がありますか?
    二十五、配列問題
  • 配列の重さJavaScript高性能配列除去
  • 配列の一般的な方法jsにおける配列の一般的な方法のまとめ
  • 偏平化配列5つの方法で配列平準化を実現した
    • .
    26、BOM属性オブジェクトの方法
    ブラウザオブジェクトモデル(http)は、ブラウザオブジェクトモデル(Browser Object Model (BOM))の公式規格が存在しない.
    現代のブラウザは、ほぼBOMと同じ方法と属性を相互作用させることができ、したがって、JavaScriptの方法と属性としてしばしば言及される.
  • Windowオブジェクトのすべてのブラウザは、BOMオブジェクトをサポートしています.ブラウザのウィンドウを表します.全大域windowオブジェクトは、関数および変数が自動的にJavaScriptオブジェクトのメンバとなる.さらに(window)HTML DOMオブジェクトもdocumentオブジェクト属性である:window他のいくつかの方法:
  • window.document.getElementById("header");-新しいウィンドウを開く
  • window.open()-現在のウィンドウを閉じる
  • window.close()-現在のウィンドウを移動する
  • window.moveTo()-現在のウィンドウを再調整する
  • window.screenオブジェクトwindow.resizeTo()オブジェクトは、ユーザ画面の情報を含む.screenオブジェクトは、window.screenプレフィックスを持たずに書いてもよい.
  • window属性は、画素計での訪問者画面幅に戻る.
  • screen.width属性は、ピクセル計での訪問者画面の高さを返します.
  • screen.height属性は、訪問者画面の幅に戻り、ウィンドウツールバーなどの界面特徴をピクセル計で減算する.
  • screen.availWidth属性は、ウインドウツールバーなどのインターフェース特徴
    • を減算するために、訪問者画面の高さに戻る.
  • screen.availHeight属性は、色を表示するためのビット数を返します.
  • screen.colorDepth属性は、画面の画素深度に戻る.
  • window.locationオブジェクトscreen.pixelDepthは、現在のページアドレスを取得し(window.location)、ブラウザを新しいページにリダイレクトするために使用されてもよい.URLオブジェクトは、window.locationプレフィックスを持たずに書くことができる.
  • windowは、現在のページのwindow.location.href(href)を返します.
  • URLは、window.location.hostnameホストのドメイン名
    • に戻る.
  • webは、現在のページのパスまたはファイル名
    • を返します.
  • window.location.pathnameは、使用されたwindow.location.protocolプロトコル(web:またはhttp)を返します.
  • httpsは、新しい文書
    • を読み込む.
  • window.historyオブジェクトwindow.location.assignオブジェクトは、ブラウザ履歴を含む.window.historyオブジェクトはwindow.historyを持たずに書くことができます.ユーザのプライバシーを保護するために、windowがこのオブジェクトにアクセスすることに制限があります.いくつかの方法:
  • JavaScript-ブラウザで後退ボタンをクリックするのと同じです.
  • history.back()-ブラウザで前進ボタンをクリックするのと同じです.
  • Window Navigatorオブジェクトhistory.forward()オブジェクトは、windowプレフィックスを持たずに書くことができる.いくつかの例:
  • window.navigator属性は、ブラウザのアプリケーション名
    • に戻る.
  • navigator.appName属性は、ブラウザのアプリケーションコード名
    • に戻る.
  • navigator.appCodeName属性は、ブラウザプラットフォーム(オペレーティングシステム)
    • に戻る.
  • navigator.platformブラウザがオンラインである場合、属性はnavigator.onLine
    • に戻る.
  • ポップアップブロック警告ブロックtrue方法は、window.alert()プレフィックスを持たずに書くことができる.確認ブロックwindow方法は、window.confirm()プレフィックスを持たずに作成することができる.ヒントブロックwindow方法は、window.prompt()プレフィックスを持たずに作成することができる.ポップアップボックスに折り返し行を表示するには、バックスラッシュの後に文字nを追加してください.window
  • Timingイベント
    •   window.setTimeout(function, milliseconds);//              
  window.setInterval(function, milliseconds);//
    二十七、業務上のレンダリング
    インターネットの初期の段階では、ユーザがブラウザを使用してブラウズしているのは、複雑な論理がない簡単なページです.これらのページは全部後端にalert("Hello
    How are you?");    をつなぎ合わせた後、フロントエンドの完全なhtmlファイルに戻ります.ブラウザはこのhtmlファイルを入手した後、直接解析して展示することができます.これはいわゆるサーバ端にレンダリングされています.
    どのように迅速にページを判断しますか?
    二十八、ゴミ回収メカニズムhtmlは自動ごみ収集機構を持っています.つまり、実行環境はコードの実行中に使用されるメモリを管理します.JavaScriptプログラムを作成する時、開発者はメモリの使用問題に関心を持たなくてもいいです.必要なメモリの割り当てと不要メモリの回収は完全に自動管理を実現しました.このようなごみ収集メカニズムの原理は実はとても簡単です.もう使い続けない変数を見つけて、その占用メモリを解放します.このため、ゴミ収集器は、一定の時間間隔(またはコード実行中に所定の収集時間)で周期的に実行される.
  • タグクリアJavaScriptにおいてよく使用される迷惑レベル収集方式はマーククリアである.変数が環境に入ると(例えば.関数に変数を宣言する)この変数を「リングに入る」と表記します.論理街では、環境に入る変数によって占有されるメモリは永遠に解放されません.実行ストリームが環境に入ると、それらを使うことができるからです.変数が環境から離れると、それを環境から離れるというマークが付けられます.ゴミ収集は実行時にメモリに格納されているすべての変数にマークを付けます.次に、環境内の変数と、環境内の変数によって参照される変数のマークが削除されます.この後にマークを付けた変数は、環境の中のディスクがこれらにアクセスできなくなり、削除を準備する変数と見なされます.最後に、ごみ収集器はメモリの消去作業を完了し、マーク付きの値を廃棄し、それらが使っているメモリ空間を回収します.
  • 参照カウント参照カウントとは、各値が参照された回数を追跡記録することを意味する.変数を宣言して参照型の値を変数に割り当てた場合、この値の参照回数は1です.同じ値が他の変数に割り当てられている場合、その値の参照回数は1を加算します.逆に、この値に対して参照する変数が含まれている場合は、この値の参照回数は1を減算します.この値の参照回数が0になったら、この値にアクセスできないということですので、占有しているメモリ空間を元に戻すことができます.このように、ゴミ収集のモチモチとした状態では、次回出発すると、それらの参照回数がゼロの値で占有されているメモリが放出される.前端面接:JSごみ回収メカニズムについて話してください.
    29、eventloop
  • プロセスとスレッドの違い:プロセスはオペレーティングシステムのリソース割り当ての基本単位であり、スレッドはタスクスケジュールと実行の基本単位
    • である.
  • タスク・キューはES 6標準ではマクロタスク・キューとミクロタスク・キューに分けられています.イベントサイクルとタスク・キューの前端面テスト大全:Event Loop
    • 三十、どのように速く文字列を何千ビットの精度の数字に変えますか?
    var a = 1/7;
var b = parseFloat(a).toFixed(20);
console.log(b);
    クローズド