ゴールドスリーシルバーフォーの準備、フロントエンドインタビューの知識ポイントの要約、収集することをお勧めします

本日は、フロントエンドインタビューの知識ポイントについてお話します。まもなくゴールド、スリー、シルバーのシーズンになりますので、この記事がお役に立てば幸いです。

フロントエンドの基本

ブラウザ

• ブラウザのキャッシュメカニズム：強力なキャッシュとネゴシエーションのキャッシュ、そして違いは何ですか？
• ストレージ関連：localstorage、sessionStorage、cookieなどの機能は何ですか？違いは何ですか？
• ブラウザのネットワークパネルにあるもの、主にタイミングの下の期間はどういう意味ですか？TTFBとは何ですか？
• ブラウザのパフォーマンスを使用しましたか？また、それは何に使用されますか？
• クロスドメインの原則、クロスドメインを実現する方法は何ですか？
• ブラウザ環境のイベントループとは何ですか？実際、それはマクロタスクとミクロタスクです、あなたはこの記事を読むことができます

JavaScript

基本データ型と参照データ型

• 基本的なデータ型：未定義、Null、ブール、文字列、数値、記号
• 参照データ型：Object、Array、Date、RegExp、Function
• ここでは、typeof、instanceofを検討できます。これには、次のtypeofおよびinstanceofの手動実装が含まれます。

// 实现typeof
function type(obj) {
	return Object.prototype.toString.call(a).slice(8,-1).toLowerCase();
}

// 实现instanceof
function instance(left,right){
    left=left.__proto__
    right=right.prototype
    while(true){
       if(left==null)
       	  return false;
       if(left===right)
          return true;
       left=left.__proto__
    }
}

プロトタイプチェーン

プロトタイプチェーンが何を理解し、それは次のとおりです。インスタンスプロト=== constructor.prototype

Object.prototype.__proto__ === null // true
Function.prototype.__proto__ === Object.prototype // true
Object.__proto__ === Function.prototype // true

より良い質問があります、あなたはそれについて考えることができます：

function F() {}
Object.prototype.b = 2;
F.prototype.a = 1;
var f = new F();
console.log(f.a) // 1
console.log(f.b) // 2
console.log(F.a) // undefined
console.log(F.b) // 2
复制代码

上記のコードで、Faが未定義なのはなぜですか？

function F() {}
Object.prototype.b = 2;
Function.prototype.a = 1;
var f = new F();
console.log(f.a) // undefined
console.log(f.b) // 2
console.log(F.a) // 1
console.log(F.b) // 2

上記のコードで、faが未定義なのはなぜですか？

function F() {}
F.prototype.a = 1;
var f1 = new F()
F.prototype = {
    a: 2
}
var f2 = new F()
console.log(f1.a) // 1
console.log(f2.a) // 2

継承

継承のいくつかの方法：

• プロトタイプチェーンの継承：

  function SuperType() {
    this.name = 'Yvette';
    this.colors = ['red', 'blue', 'green'];
  }
  SuperType.prototype.getName = function () {
      return this.name;
  }
  function SubType() {
      this.age = 18;
  }
  SubType.prototype = new SuperType();
  SubType.prototype.constructor = SubType;
  
  let instance1 = new SubType();
  instance1.colors.push('yellow');
  console.log(instance1.getName());
  console.log(instance1.colors); // ['red', 'blue', 'green', 'yellow']
  
  let instance2 = new SubType();
  console.log(instance2.colors); // ['red', 'blue', 'green', 'yellow']
  

  短所：

• • プロトタイプを介して継承が実現されると、プロトタイプは別のタイプのインスタンスになり、元のインスタンス属性は現在のプロトタイプ属性になり、プロトタイプの参照タイプ属性はすべてのインスタンスで共有されます。（参照型の値はすべてのインスタンスで共有されます）
• • サブタイプのインスタンスを作成する場合、すべてのオブジェクトインスタンスに影響を与えずに、スーパータイプのコンストラクターにパラメーターを渡す方法はありません。

• コンストラクターの継承：

  function SuperType(name) {
      this.name = name;
      this.colors = ['red', 'blue', 'green'];
  }
  function SubType(name) {
      SuperType.call(this, name);
  }
  let instance1 = new SubType('draven');
  instance1.colors.push('yellow');
  console.log(instance1.colors);  // ['red', 'blue', 'green', 'yellow']
  
  let instance2 = new SubType('ben');
  console.log(instance2.colors);  // ['red', 'blue', 'green']
  

  利点：

• • スーパークラスにパラメータを渡すことができます
• • プロトタイプに含まれる参照型の値がすべてのインスタンスで共有されるという問題を解決します。短所：
• • メソッドはすべてコンストラクターで定義されており、関数の再利用について話す方法はありません。
• • スーパータイプのプロトタイプで定義されたメソッドは、サブタイプからは見えません。

• 組み合わせ継承：

  function SuperType(name) {
      this.name = name;
      this.colors = ['red', 'blue', 'green'];
  }
  SuperType.prototype.sayName = function () {
      console.log(this.name);
  }
  function SuberType(name, age) {
      SuperType.call(this, name);
      this.age = age;
  }
  SuberType.prototype = new SuperType()
  SuberType.prototype.constructor = SuberType
  
  let instance1 = new SuberType('draven', 25);
  instance1.colors.push('yellow');
  console.log(instance1.colors); // ['red', 'blue', 'green', 'yellow']
  instance1.sayName(); //draven
  
  let instance2 = new SuberType('ben', 22);
  console.log(instance2.colors);  // ['red', 'blue', 'green']
  instance2.sayName();//ben
  

  短所：

• • いずれの場合も、スーパータイプコンストラクターは2回呼び出されます。1回目はサブタイププロトタイプの作成時、もう1回はサブタイプコンストラクター内で呼び出されます。利点：
• • スーパークラスにパラメータを渡すことができます
• • 各インスタンスには独自のプロパティがあります
• • 関数の再利用

• 寄生結合継承。寄生結合継承は、参照型の最も合理的な継承パラダイムです。Object.createを使用して、結合継承に基づいて最適化します。

  function SuperType(name) {
      this.name = name;
      this.colors = ['red', 'blue', 'green'];
  }
  SuperType.prototype.sayName = function () {
      console.log(this.name);
  }
  function SuberType(name, age) {
      SuperType.call(this, name);
      this.age = age;
  }
  SuberType.prototype = Object.create(SuperType.prototype)
  SuberType.prototype.constructor = SuberType
  let instance1 = new SuberType('draven', 25);
  instance1.colors.push('yellow');
  console.log(instance1.colors); //[ 'red', 'blue', 'green', 'yellow' ]
  instance1.sayName(); //draven
  
  let instance2 = new SuberType('ben', 22);
  console.log(instance2.colors); //[ 'red', 'blue', 'green' ]
  instance2.sayName();//ben
  

• ES6の継承：

  class SuperType {
      constructor(age) {
          this.age = age;
      }
  
      getAge() {
          console.log(this.age);
      }
  }
  
  class SubType extends SuperType {
      constructor(age, name) {
          super(age); // 调用父类的constructor(age)
          this.name = name;
      }
  }
  
  let instance = new SubType(18, 'draven');
  instance.getAge(); // 18
  

• • クラスで定義されているすべてのメソッドを列挙できるわけではありません。（ES5プロトタイプのメソッドはデフォルトで列挙可能です）

閉鎖：

• Ke Lihua：

// 实现固定参数的curry
function add(a, b, c, d) {
    return a + b + c + d
}

function curry(fn) {
    const length = fn.length
    let params = []
    return function func() {
        params = params.concat([].slice.call(arguments))
        if (params.length === length) {
            const res = fn.apply(null, params);
            params = [];
            return res;
        } else {
            return func;
        }
    }
}

const addCurry = curry(add);
console.log(addCurry(1, 2)(3, 4)); // 10
console.log(addCurry(2)(3)(4)(5)); // 14

// 实现随意参数的柯理化
function add() {
    let params = [].slice.call(arguments);
    function func() {
        params = params.concat([].slice.call(arguments))
        return func;
    }
    func.toString = () => {
        return  params.reduce((a, b) => {
            return a + b;
        }, 0);
    }
    return func;
}

console.log(add(1, 2)(3, 4)); // 10
console.log(add(2)(3)(4)(5)); // 14

• 防振とスロットル：

機能のアンチシェイクとスロットルは、どちらもイベントトリガーの頻度を制御する方法です。

// 防抖
export function debounce(func, wait, immediate) {
    let timeout, args, context, timestamp, result;

    let nowTime = Date.now || function () {
        return new Date().getTime();
    };

    const later = function () {
        let last = nowTime() - timestamp;

        if (last < wait && last >= 0) {
            timeout = setTimeout(later, wait - last);
        } else {
            timeout = null;
            if (!immediate) {
                result = func.apply(context, args);
                if (!timeout) context = args = null;
            }
        }
    };

    return function () {
        context = this;
        args = arguments;
        timestamp = nowTime();
        let callNow = immediate && !timeout;
        if (!timeout) timeout = setTimeout(later, wait);
        if (callNow) {
            result = func.apply(context, args);
            context = args = null;
        }

        return result;
    };
};

// 节流
function throttle(fn, threshhold) {
    let timeout
    let start = new Date;
    threshhold = threshhold || 160
    return function () {
        const context = this, args = arguments, curr = new Date() - 0
        clearTimeout(timeout)//总是干掉事件回调
        if (curr - start >= threshhold) {
            fn.apply(context, args)
            start = curr
        } else {
            //让方法在脱离事件后也能执行一次
            timeout = setTimeout(function(){
                fn.apply(context, args)
            }, threshhold);
        }
    }
}

var / let / const

このパートでは、主にletとvar、変数の昇格などの理解について説明します。

次のコードの実行結果はどうなりますか？

var foo = {n: 1};
var bar = foo;
foo.x = foo = {n: 2};

bar = ？
foo = ？

上記の実行の結果は次のとおりですbar = {n:1,x:{n:2}}; foo={n:2}：;

a();
var a=3;
function a(){
alert(10)
}
alert(a)
a=6;
a()

上記の実行の結果は次のとおりです10 3 error。;最後のエラーは、aが関数ではないためです。

==および===

暗黙の変換の手順：主に、強力な二重待機で何が行われるかを理解します。理解しやすいです。

強いクラス（=）最初に、両側のタイプが同じであるかどうかを比較します。異なる場合は、直接falseを返します。タイプが同じである場合は、次のようになります。判断するために、==によって引き起こされる暗黙の変換を見てみましょう。

二重等号によって引き起こされる暗黙の変換

1.まず、二重等号の前後にNaNがあるかどうかを確認します。NaNがある場合は、常にfalseを返します。

次に、二重等号の前後にブール値があるかどうかを確認します。ブール値がある場合は、ブール値を数値に変換します。（Falseは0、trueは1）

3.次に、二重等号の前後に文字列があるかどうかを確認します。次の3つの状況があります。

1、对方是对象，对象使用toString()或者valueOf()进行转换；

2、对方是数字，字符串转数字；（前面已经举例）

3、对方是字符串，直接比较；

4、其他返回false

4.数値の場合、相手はオブジェクトであり、そのオブジェクトはvalueOf（）またはtoString（）と比較され、他のすべてのオブジェクトはfalseを返します。

5、null、undefinedは型変換されませんが、それらは等しい

.toString（）メソッドおよび.valueOf（）メソッドの数値変換

通常の状況では、オブジェクトを文字列に変換するにはtoString（）メソッドを呼び出す必要があり、オブジェクトを数値に変換するにはvalueOf（）メソッドを呼び出す必要があると考えられますが、実際のアプリケーションではそれほど単純ではありません。次のコード例：

let obj = {
 name: "draven",
 age: 28
}
console.log(obj.toString()); //[object Object]

同様に、valueOf（）メソッドを見てみましょう。

let arr = [1, 2, 3];
console.log(arr.valueOf());//[1, 2, 3]

上記のコードからわかるように、valueOf（）メソッドは、オブジェクトをこのオブジェクトを反映できる数値に変換しません。代わりに、toString（）を使用します

let arr = [1, 2, 3];
console.log(arr.toString());//1,2,3

注：多くの友人は、文字列に変換するにはtoString（）メソッドを最初に呼び出す必要があると考えています。実際、これは間違った理解です。toString（）メソッドを呼び出すと文字列に変換できることを理解する必要がありますが、文字列を最初のtoString（）メソッドの呼び出しに変換する必要はありません。

次のコードを見てみましょう。

let arr = {};
arr.valueOf = function () { return 1; }
arr.toString = function () { return 2; }
console.log(arr == 1);//true

let arr = {};
arr.valueOf = function () { return []; }
arr.toString = function () { return 1; }
console.log(arr == 1);//true

上記のコードから、変換が最初にvalueOf（）を呼び出すことがわかります。valueOf（）が値でない場合は、toStringが呼び出されて変換されます。

let arr = {};
arr.valueOf = function () { return "1"; }
arr.toString = function () { return "2"; }
console.log(arr == "1");//true

「1」が文字列の場合、valueOf（）が最初に呼び出されます。

let arr = [2];
console.log(arr + "1");//21

上記の例では、arr.toString（）の後に2が続くため、toString（）が呼び出されます。

変換プロセスは次のようになります。最初に、arrは最初にvalueOf（）メソッドを呼び出しますが、この数値メソッドは単純に継承され、書き換えられていません（もちろん、この書き換えは私たちによって実装されていません）。戻り値は値型ではなく配列オブジェクト自体であるため、代わりにtoString（）メソッドが呼び出されるため、文字列に変換する目的が達成されます。

説明

ほとんどのオブジェクトは、最初にvalueOf（）メソッドを呼び出そうとすることで、暗黙的に値型に変換されます。ただし、Dateオブジェクトは例外です。このオブジェクトのvalueOf（）メソッドとtoString（）メソッドは慎重に書き直されています。デフォルトでは、+演算子を使用するなど、toString（）メソッドが呼び出されます。他の算術環境の場合は、代わりに呼び出されます。valueOf（）メソッド。

let date = new Date();
console.log(date + "1"); //Sun Apr 17 2014 17:54:48 GMT+0800 (CST)1
console.log(date + 1);//Sun Apr 17 2014 17:54:48 GMT+0800 (CST)1
console.log(date - 1);//1460886888556
console.log(date * 1);//1460886888557

たとえば、統合と改善のために、次のトピックに一緒に取り組みましょう！

let a;
console.dir(0 == false);//true
console.dir(1 == true);//true
console.dir(2 == {valueOf: function(){return 2}});//true

console.dir(a == NaN);//false
console.dir(NaN == NaN);//false

console.dir(8 == undefined);//false
console.dir(1 == undefined);//false
console.dir(2 == {toString: function(){return 2}});//true

console.dir(undefined == null);//true

console.dir(null == 1);//false

console.dir({ toString:function(){ return 1 } , valueOf:function(){ return [] }} == 1);//true

console.dir(1=="1");//true
console.dir(1==="1");//false

[] == 0 // true

上記は理解できますか？コードの最後の行の結果が真になる理由は何ですか？

es6

このパートでは、es6、いくつかの新しいタイプ、文法などの習熟度を調べます。RuanYifeng先生のes6記事をご覧になることをお勧めします

手書きの実装

jsはバインドを実装します

// 实现bind
Function.prototype.myBind = function (context,...args) {
    let self = this;
    let params = args;
    return function (...newArgs) {
        self.call(context, ...params.concat(...newArgs))
    }
}
var a = {
    name: 'this is a'
}

function sayName() {
    console.log(this.name, arguments)
}

let newfn = sayName.myBind(a, '1234', '5678')
newfn('1000', '2000')

jsは呼び出しを実装します

// 实现call
Function.prototype.myCall = function (context,...args) {
    context.fn = this;
    context.fn(...args)
    delete context.fn;
}
var a = {
    name: 'this is a'
}
function sayName() {
    console.log(this.name, arguments)
}
sayName.myCall(a, '1234', '5678')

jsはsetIntervalを実装します

// setTimeout 实现setInterval
function mySetInterval(fn, time) {
    let timer = {};
    function timeout() {
        timer.t = setTimeout(() => {
            fn();
            timeout()
        }, time)
    }
    timeout();
    return timer;
}

function clearMyInterval(timer) {
    clearTimeout(timer.t)
}

約束する

約束には、独自の約束の実現や呼び出しに関するいくつかの知識ポイントなど、多くの検査ポイントがあります。

2つの記事をお勧めします：Promiseの実現とPromise

css

• ボックスモデル、ボックスモデルのマージンとパディングの特徴は何ですか？
• フレックスレイアウトの属性とは何ですか？それらはどういう意味ですか？
• 左右中央配置、上下中央配置、上下左右中央配置の実装方法は？
• 単一行が省略を超えています...、複数行が省略を超えています...
• アダプティブレイアウト
• レスポンシブレイアウト
• less、scss、stylus
• rem、em、vw等
• 携帯端末で1pxを実現するには？
• cssはどのように三角形を実装しますか？
• cssリンクとインポートの違いは何ですか？

html

• メタは何に使用されますか
• ブロック要素と行要素の違いと例
• html5の新しいタグは何ですか？
• ビデオタグ、イベントなどの使用。

フロントエンドフレームワーク

見る

vue基本

一、vue的ライフ周期：beforeCreate、created、beforeMounte、mounted、beforeUpdate、updated、beforeDestory、destroyed;

2. Vueコンポーネント通信：

• 小道具（放出）；
• $attrと$リスナー、
• イベントバスオブジェクト（バスオン$on、Buがね。$放出）、
• 提供（注入）、
• v-model（props：value、emit：input）、
• $ children、
• vuex

3.キープアライブ、LRUアルゴリズムの使用と原則

第4に、vueのv-showとv-ifの違い、watchとvueで計算されたものの違い。

5つ、その他：フレームワークnuxtの使用などのvueサーバー側レンダリング、element-uiなどのフロントエンドコンポーネントライブラリの使用。

vue2およびvue3

3はProxy + Reflect、2はObject.defineProperty、dom-diffの最適化、componentApiなどです。

vue-router

• 実装モード：ハッシュと履歴; 2つの違いと分析
• イベント：グローバル：beforeEach、afterEach;ルーティング：beforeEnter;コンポーネント：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
• 実装の原則、ソースコード

vuex

• vuexとは何ですか？vuex公式ウェブサイト
• 状態、ゲッター、ミューテーション（コミット）、アクション（ディスパッチ）、モジュール
• mapState、mapMutations、mapGetters、mapActions； subscribe、subscribeAction
• 実装原理、ソースコードなど。

反応する

1つはライフサイクル

  1.react16之前的生命周期是什么？
  2.react16之后的生命周期是什么？
  3.react16和react16之前的版本有什么区别？
  4.requestAnimationFrame是什么？requestIdleCallback是什么？如何实现requestAnimationFrame

// 实现requestAnimationFrame
var lastTime = 0
window.requestAnimationFrame = function (callback) {
    let now = Date().now;
    let timeCall = Math.max(0, 16 - (lastTime - now));

    let id = setTimeout(function () {
        callback(now + timeCall)
    }, timeCall)

    lastTime = now + timeCall;
    return id;
}

二、反応フック

1.常用的reacthooks都有哪些？
2.使用useEffect模拟componentDidMount和componentDidUpdate
3.useEffect返回的是什么？做什么用的？
4.useEffect和useLayoutEffect的区别是什么？
5、useMemo和useCallback是什么？做什么用的？有什么区别？

三、react-router

1.如何实现路由切换，有几种方式？
2.有哪几个钩子函数？onEnter和routerWillLeave
3.link与a标签的区别什么？

4、redux

1.redux是什么？做什么的？与vuex有什么区别？
2.redux包含哪几块？state，reducers，actions

5.その他：

1.服务端渲染next；
2.组件库antd；
3.PureComponent与Component的区别是什么？
4.react的性能优化有什么建议？
5.封装一个promise的setState

// 使用promise封装setState
function setStateP(state) {
    return new Promise(resolve => {
        this.setState(state, resolve)
    })
}

ツールタイプ-webpack

• 1. webpackとは何ですか？
• 2. webpackの動作原理は何ですか？
• 3.プラグインを作成したことがありますか？どうやってそうなった？
• 4.ローダーは何をしますか？ローダーとプラグインの違いは何ですか？
• 5.webpackなどでの最適化の提案。

webpackについて話す

nodeJs

• event-loop：この記事を読むことができますnodejsイベントループ

• egg：ライフサイクル、ディレクトリ構造、一般的に使用されるプラグイン

• koa：KoaのミドルウェアとExpressのミドルウェアの違い、オニオンリングモデルを実装する機能

  // 洋葱圈模型
  function compose(middleware) {
      return function (context, next) {
          let index = -1;
          function dispatch(i) {
              if (i <= index) {
                  return Promise.reject('err')
              }
              index = i;
              let fn = middleware[i];
              if(i === middleware.length) {
                  fn = next;
              }
              if (!fn) {
                  return Promise.resolve();
              }
              try {
                  return Promise.resolve(fn(context, function next() {
                      return dispatch(i + 1);
                  }))
              } catch (e) {
                  return Promise.reject(e);
              }
          }
          dispatch(0);
      }
  }
  
  

child_process

• 1. spawn、exec、execFile、fork、
• 2. Forkはspawnに似ていますが、違いはforkが子プロセスを作成するときにjsファイルを実行する必要があることです。
• 3. spawnとexecおよびexecFileの違いは、後者の2つが作成されるときに、timeout属性を指定してタイムアウト期間を設定でき、プロセスがタイムアウトすると強制終了されることです。
• 4. execとexecFileの違いは、execFileがファイルを実行するのに対し、execは既存のコマンドを実行することです。

pm2

• PM2で一般的に使用されるコマンド：start、stop、delete、logs、restart、list
• -iパラメータ、マルチスレッドの開始、監視、-w、ファイルの変更の監視
• pm2構成ファイル、複数のアプリ、アプリアレイを構成し、pm2を開始します。pm2.connfig.jsを開始します—only = one-app-name

コンピュータの基本

httpシリーズ

• スリーウェイハンドシェイクとは何ですか？なぜ3回かかるのですか？
• 四光波とは何ですか？なぜ4回必要なのですか？
• http1、http2、httpsの違いは何ですか？
• httpsはどのように暗号化されますか？
• リクエストをキャンセルするにはどうすればよいですか？AbortController

ソート

• バブルソート

// 从小到大排序：
function bubblingSort(list){
     let temp;
     for(let i=0; i<list.length; i++){
          for(let j=i; j<list.length; j++){
               if(list[i] > list[j]){
                    temp = list[i];
                    list[i] = list[j];
                    list[j] = temp;
               }
          }
     }
     return list;
}
let res = bubblingSort([10, 8, 2, 23, 30, 4, 7, 1])
console.log(res); // [1, 2, 4, 7, 8, 10, 23, 30]

• 直接選択ソート

从小到大排序：
function selectSort(list){
     let r,temp;
     for(let j=0; j<list.length; j++){
          for(let i = j+1; i<list.length; i++){
               if(list[j] > list[i]){
                   temp = list[j];
                   list[j] = list[i];
                   list[i] = temp;
               }
          }
     }
     return list;
}
let res = selectSort([10, 8, 2, 23, 30, 4, 7, 1])
console.log(res); // [1, 2, 4, 7, 8, 10, 23, 30]

• 直接挿入ソート

ソートプロセス全体はn-1挿入です。つまり、シーケンスの最初のレコードは順序付けられたサブシーケンスと見なされ、シーケンス全体が順序付けられるまで2番目のレコードが1つずつ挿入されます。

function insertSort(list) {
    let flag;
    for(let index = 1; index < list.length; index++) {
        flag = list[index];
        let j = index - 1;
        while (flag < list[j]) {
            list[j + 1] = list[j]
            j--;
        }
        list[j + 1] = flag;
    }
     return list;
}
let res = insertSort([10, 8, 2, 23, 30, 4, 7, 1])
console.log(res); // [1, 2, 4, 7, 8, 10, 23, 30]

• ヒルソート

ソートプロセス：最初に正の整数d1 <nを取り、d1で区切られたすべてのレコードをグループに入れ、グループ内で直接挿入ソートを実行します。次にd2 <d1を取り、上記のグループ化およびソート操作を繰り返します。di= 1、つまり、すべてのレコードをグループに並べ替えます

function shellSort(list) {
    const length = list.length;
    let j, temp;
    for (let d = parseInt(length / 2); d >= 1; d = parseInt(d / 2)) {
        for (let i = d; i < length; i++) {
            temp = list[i];
            j = i - d;
            while (j >= 0 && temp < list[j]) {
                list[j + d] = list[j];
                j -= d;
            }
            list[j + d] = temp;
        }
    }
    return list;
}
let res = shellSort([10, 8, 2, 23, 30, 4, 7, 1])
console.log(res); // [1, 2, 4, 7, 8, 10, 23, 30]

• クイックソート

一度並べ替えると、並べ替えるレコードが2つの独立した部分に分割され、レコードの一部のキーワードがレコードの他の部分のキーワードよりも小さくなり、レコードの2つの部分を並べ替えて実現できます。シーケンス全体の順序。

function quickSort(v,left,right){
    if(left < right){
        var key = v[left];
        var low = left;
        var high = right;
        while(low < high){
            while(low < high && v[high] > key){
                high--;
            }
            v[low] = v[high];
            while(low < high && v[low] < key){
                low++;
            }
            v[high] = v[low];
        }
        v[low] = key;
        quickSort(v,left,low-1);
        quickSort(v,low+1,right);
    }
}
let list = [10, 8, 2, 23, 30, 4, 7, 1]
quickSort(list, 0, 7)
console.log(list); // [1, 2, 4, 7, 8, 10, 23, 30]

その他

• tcp / ipプロトコルの5層モデル：アプリケーション層、トランスポート層、ネットワーク層、データリンク層、および物理層
• アルゴリズム関連、leetcodeでブラッシングしましょう
• 二分木のトラバース、フロント、ミドル、バックのトラバース、深さ優先、幅優先。
• スタックとキューの使用
• リンクリストの使用

その他

• ハイバード

1、什么是hybrid？
2、jsbridge是什么？如何实现？
3、hybrid开发需要注意什么？

• プリロードと遅延ロード：

1.包括图片视频等内容的懒加载(IntersectionObserver的使用封装)
2.数据的预加载，纯h5的prefetch && 与端结合的预加载方案
3.js的按需加载(配合webpack的import().then()的split实现)

• domドキュメントのロード手順は何ですか？

1、 解析HTML结构。
2、 加载外部脚本和样式表文件。
3、 解析并执行脚本代码。
4、 构造HTML DOM模型。//ready
5、 加载图片等外部文件。
6、 页面加载完毕。//load

• ブラウザがURLを入力してから表示が完了するまで何が経過しましたか？

此问题网上有很多回答，属于自由发挥问题；回答的深度和广度能够看出本人的知识面。此处就不多说了。

• フロントエンドのパフォーマンスの最適化とその他の側面

総括する

PDFにまとめた面接の知識ポイント

スペースに限りがあり、コンテンツの一部のみが表示されます

この完全版の面接の質問と分析が必要な場合は、[クリックして]無料で入手してください。

コードワードは簡単ではありません。指を動かして気に入ってから、~~~

最後になりましたが、転職してもお好きな仕事を見つけていただければ幸いです。