[四]金、銀3、あなたがJSアリではないことを知っている問題で、見出しZhentiの決意

入門


金、銀3と4は、特別に顔の質問を手配し、本明細書で提示されます:
1、フロントエンドに適した、就職の面接を見つけることが必要である
顔をしたインターンシップを卒業、2を、ゲインの経験
3、徹底的に理解するための実用的な根拠から
4を、フレームワークのソースコードを探ります、研究不可欠なフロントエンドのアルゴリズム
5、ウォッチアリ、テンセント、米国のグループ、今日の見出しと元のタイトル、の漸進的な導入の他のメーカー
投票に準備ができている6、履歴書の完成

BAT / TMDは、このような大企業の面接はどのように


注嘆き、TMDは呪いでない場合、それから、ああ、多分あなたはBAT、TMDを知っているが、あなたは何を知っていますか?(ノウハウBaiduのために急いではありません!)

Tは(今日のヘッドライン)M(米国のグループ)D(滴)BATになった後に新しいインターネットの巨大な国

導入されたフェイス質問


スタックメモリとクロージャのスコープに関するいくつかの質問で1.BATペンの質問

読者は、次の3つの例で良い経験を持っていることができ、あなたはそれを実行しようとすることができます

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>挑战js面试</title>
</head>
<body>
    <script>
        //ex1
        let a={},b='0',c=0;
        a[b]='超逸';
        a[c]='博客';
        console.log(a[b]);

        //ex2
        /*let a={},b=Symbol('1'),c=Symbol('1');
        a[b]='超逸';
        a[c]='博客';
        console.log(a[b]);*/

        //ex3
        /*let a={},b={n:'1'},c={m:'2'};
        a[b]='超逸';
        a[c]='博客';
        console.log(a[b]);*/
    </script>
</body>
</html>

EX1:ヒープ内のデジタル属性名==文字列の属性名が覆われていました

EX2:記号はのユニークな値を作成するために使用される

オブジェクトは以下のような、必ずしも属性名の文字列ではありません、記号があるかもしれません

EX3:すべてのオブジェクト、のtoString()結果は以下の通りです

だから、およびEX1として、覆われていました


上記の3つの例から、だけでなく、拡大します:

EX1:配列とオブジェクトとの間の差

EX2:手書きシンボル

EX3:Object.prototype.toString()应用/のvalueOf

次に、次の質問(ピットがあることに注意してください):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>挑战js面试题</title>
</head>
<body>
    <script>
        var test=(function(i){
            return function(){
                alert(i*=2);
            }
        })(2);
        test(5);
    </script>
</body>
</html>

関数は、カスタム関数のすぐ上に実行されます


回答:文字列4(A4失う!!!)

次の問題

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>挑战js面试题</title>
</head>
<body>
    <script>
        var a=0,b=0;
        function A(a){
            A = function (b){
                alert(a + b++);
            };
            alert(a++);
        }
        A(1);
        A(2);
    </script>
</body>
</html>

答え:列1および4(1と4 A緩い!!!)

実際には、3つの質問上記の「前菜」で以下の質問を誘発することがあります

2.オブジェクト(配列)の深い浅いコピーコピー(見出し)
  • シャローコピー
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>挑战js面试题</title>
</head>
<body>
    <script>
        let obj = {
            a: 100,
            b: [10,20,30],
            c: {
                x: 10
            },
            d: /^\d+$/
        };
        //浅拷贝 ES6以前做法
        let obj2 = {};
        for(key in obj){
            //确定私有,不克隆原型上的
            if(!obj.hasOwnProperty(key)) continue;
            obj2[key]=obj[key];
        }
        console.log(obj,obj2);
        /*ES6中的浅拷贝*/
        let obj3={
            ...obj
        };
        console.log(obj3);
    </script>
</body>
</html>

鍵ですが、オブジェクト内のオブジェクトがある場合、問題が発生のみ浅いコピークローン次元オブジェクト:

修正のコピーを持ち出し浅いコピー問題元アドレスの値

  • ディープコピー
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>挑战js面试题</title>
</head>
<body>
    <script>
        let obj = {
            a: 100,
            b: [10,20,30],
            c: {
                x: 10
            },
            d: /^\d+$/
        };
        //缺点:函数,正则等会出现问题
        let obj2 = JSON.parse(JSON.stringify(obj));
        console.log(obj2);
    </script>
</body>
</html>

所与の栗、によって引き起こされる問題:

上記の変換プロセス、唯一の数、文字列、論理値、ヌルのためにこれらの4つの基本型

もう一つのアプローチ:類似の浅いコピーが、それは多次元である場合には、再帰的な操作(ここでは例示のみ、および同様の機能)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>挑战js面试题</title>
</head>
<body>
    <script>
        let obj = {
            a: 100,
            b: [10,20,30],
            c: {
                x: 10
            },
            d: /^\d+$/
        };
        
        function deepClone(obj){
            //过滤特殊情况
            if(obj === null) return null;
            if(typeof obj !== 'object') return obj;
            if(obj instanceof RegExp){
                return new RegExp(obj);
            }
            if(obj instanceof Date){
                return Date(obj);
            }
            //不直接创建空对象目的:因为克隆的结果和之前保持相同的所属类
            let newObj = new obj.constructor;
            for(key in obj){
                if(obj.hasOwnProperty(key)){
                    newObj[key] = deepClone(obj[key]);
                }
            }
            return newObj;
        }
        let obj2=deepClone(obj);
        console.log(obj,obj2);
        console.log(obj === obj2);
        console.log(obj.c === obj2.c)
    </script>
</body>
</html>

オブジェクト指向についての質問がトリガー流血3.顔(アリ)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>挑战js面试题</title>
</head>
<body>
    <script>
        function Foo(){
            getName=function(){
                console.log(1);
            };
            return this;
        }
        Foo.getName = function (){
            console.log(2);
        };
        Foo.prototype.getName = function (){
            console.log(3);
        };
        var getName = function(){
            console.log(4);
        };

        function getName(){
            console.log(5);
        }

        Foo.getName();
        getName();
        Foo().getName();
        getName();;
        new Foo.getName();
        new Foo().getName();
        new new Foo().getName();
    </script>
</body>
</html>

この問題は、特に貴重な、関連する変数がアップグレードされる演算子の優先順位などをJS

いわゆる可変リフト、任意のコードが実行される前に、現在の実行コンテキストでは、この時代のvarと機能で、私たちのVARをもたらし、宣言ファンクションキー(作成)および定義(割り当て)の前に、VaRの事前に宣言することができ、 +機能付きステートメントが直接定義することができます。


二つの工程は、FOO()が実行正常な機能を表すのfoo()。関連項目GetName()

新しいFoo.getName(); //ないパラメータは、新しい表していない
表現新しいはFoo()のgetName();. //新しいパラメータを


上記の表と組み合わせることで、新しいFoo.getName();エグゼクティブFoo.getName(のメンバーへのアクセス)して、新しいです

新しいはFoo()のgetName();. XXX新しい最初に行わ(プロトタイプ上かどうかを確認するために、例を与えるために、この時点でインスタンス)を得、xxx.getName()

。新しい新しいはFoo()のgetName();

その後、最初の(プロトタイプを見つけるために、である)XXXのインスタンスを取得するための新しいはFoo(の実現)、今回新たにxxx.getName()この時点では何のパラメータリストではありません、最初操作子アクセスxxx.getName()と3つの新しい結果がない取得変更

出力:

4.顔の質問は、あなたが完全にイベントループでJSを把握することができます(見出し)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>挑战js面试题</title>
</head>
<body>
    <script>
        async function async1(){
            console.log('async1 start');
            await async2();
            console.log('async1 end');
        }
        async function async2(){
            console.log('async2');
        }
        console.log('script start');
        setTimeout(function(){
            console.log('setTimeout');
        },0)
        async1();
        new Promise(function (resolve){
            console.log('promise1');
            resolve();
        }).then(function(){
            console.log('promise2');
        });
        console.log('script end');
    </script>
</body>
</html>

ブラウザは、マルチスレッドシングルスレッドとJSであります

同期および非同期のブラウザの問題を解決するためにミクロおよびマクロタスクキュータスクに分け、機能に応じて、イベントキューイベントキューを提供

メインスレッドコード>マイクロタスク]> [マクロタスク:実行の順序

出力:

マクロタスク:

例えば、タイマーのsetTimeout(非同期)の場合、イベントが結合します

マイクロタスク:

await(非同期、その戻りのためのxおよびウェイトの機能を実行する、結果は、次に下のコードを実行します)
解決()/(拒否)、次いで/キャッチコードの実行によって実行されます
約束、非同期

新しい約束(同期)が直ちに実行されます

学如逆水行舟,不进则退
公開された583元の記事 ウォンの賞賛1701 ビュー28万+

おすすめ

転載: blog.csdn.net/weixin_42429718/article/details/104907304