前言

?? 作者主頁：https://hongweblog.blog.csdn.net/

?? 簡介：沒有什么遠大的理想，做自己喜歡的事情就好~

?? 掃碼關注微信公眾號： >>> Dianc小助手 <<<

?? 前端學習路線圖、面試刷題、二次元壁紙珍藏，Dianc小助手后續會持續完善，

?? 大家的積極參與和討論，是Dianc推送更多優質內容的動力~

時隔25天

本期終于迎來總結，本篇有點特殊，前段時間因為js代碼不以圖片的形式展現，所以導致作業量變大，效果反而也不算很好，所以后面打算還是以圖片的形式發出，并且下一期的面試題將加入css/html的考點進行寫作，

本次還是以手寫代碼為主，小伙伴可以自行復制，同時因為每篇發布時間不統一，導致解題思路都不算很準確，如果小伙伴能及時發現，那么請及時指出，本人會及時修改~

第一題

<script>
        // 使用遞回的形式實作陣列的扁平化
        var a = [1, [2, [3, 4, 5]]]
        function flatten(arr) {
            let result = []
            for (var i = 0; i < arr.length; i++) {
                if (Array.isArray(arr[i])) {
                    result = result.concat(flatten(arr[i]))
                }
                else {
                    result.push(arr[i])
                }
            }
            return result;
        }
        console.log(flatten(a)); //[1,2,3,4,5]
    </script>

解題思路

首先要理解扁平化是什么意思，顧名思義就是減少復雜性裝飾，使其事物本身更簡潔、簡單，突出主題，即要把多余的嵌套去除，遞回判斷條件就是如果不是陣列那么結束，拋出答案，即扁平化的陣列，

第二題

<script>
        // 說出下面的列印結果，并解釋其原因

        let a = { n: 1 };
        let b = a;
        a.x = a = { n: 2 };

        console.log(a.x)
        console.log(b.x)
    </script>

解題思路

這一題涉及到賦值的優先級問題，a.x比等于號的賦值優先級高，所以會先將a.x賦值成{n:2}，再將a的指標變成{n:2}，所以原本a.x是有值的，后來再進行賦值時找不到，就會輸出undefined，

第三題

<script>
        // 說出下列的列印結果

        const obj = { 1: 'a', 2: 'b', 3: 'c' }
        const set = new Set([1, 2, 3, 4, 5])

        console.log(obj.hasOwnProperty('1'))
        console.log(obj.hasOwnProperty(1))
        console.log(set.has('1'))
        console.log(set.has(1))

    </script>

解題思路

hasOwnProperty() 方法會回傳一個布林值，指示物件自身屬性中是否具有指定的屬性（也就是，是否有指定的鍵，同時，物件里的屬性名默認是物件呈現，所以第一行應該輸出True，然后下面的has()方法指示Set物件是否包含指定的值，如果存在指定值，則回傳true，否則回傳false，
實列化后是會判斷是物件還是數字的，所以第三行輸出false，

第四題

<script>
        // 說出下列的列印結果

        const obj = { a: 'one', b: 'two', a: 'three' }
        console.log(obj)
    </script>

解題思路

這題簡單的不行，只要知道物件重復是會被頂替的就知道答案了，沒有太多坑，所以答案就是輸出
{a: ‘three’, b: ‘two’}

第五題

<script>
        // 說出下列的列印結果

        for (let i = 1; i < 5; i++) {
            if (i === 3) continue
            console.log(i)
        }
    </script>

解題思路

for回圈不用多說，這里區分好break和continue的區別就好，break是結束回圈，continue是跳出本次回圈，下一次還會執行，所以應該輸出1，2，4，

第六題

<script>
        // 說出下列的列印結果

        String.prototype.giveLydiaPizza = () => {
            return 'Just give Lydia pizza already!'
        }
        const userName = 'Lydia'
        console.log(userName.giveLydiaPizza())
    </script>

解題思路

String是一個內置的建構式，我們可以為它添加屬性， 我剛給它的原型添加了一個方法， 原始型別的字串自動轉換為字串物件，由字串原型函式生成， 因此，所有字串（字串物件）都可以訪問該方法！

第七題

 <script>
        // 說出下列的列印結果
        var result = [];
        var a = 3;
        var total = 0;
        function foo(a) {
            for (var i = 0; i < 3; i++) {
                result[i] = function () {
                    total += i * a;
                    console.log(total)
                }
            }
        }
        foo(1);
        result[0]();
        result[1]();
        result[2]();

    </script>

解題思路

首先我們一定看清楚回圈的變數是全域變數還是區域變數，如果是全域那么呼叫i的時候在預編譯時已經算好了，所以此時函式result呼叫到的i應該是3，所以再看total也是全域變數，所以執行后應該是3，6，9，

第八題

<script>
        // 說出下列的列印結果

        function Person(name) {
            this.name = name;
        }
        function Student() {

        }

        Student.prototype = Person.prototype;
        Student.prototype.constructor = Student;
        var s = new Student('Tom');
        console.log(s instanceof Person);
    </script>

解題思路

學了這么久js多多少少聽過是大寫的首字母一般作為建構式使用，所以使用instanceof 運算子用于檢測建構式的 prototype 屬性是否出現在某個實體物件的原型鏈上，
所以答案是true；

第九題

<script>
        for (var i = 0; i < 10; i++) {
            setTimeout(() => {
                console.log(i)
            }, 0)
        }
    </script>

解題思路

這一題很經典噢，只能說搞懂之后就很簡單，當存在setTimeout時，要明白它是下一次宏任務，然后又因為是var變數，所有呼叫的i應該是window.i=10，所以上述代碼列印10次10，

第10題

<script>
        for (let i = 0; i < 10; i++) {
            setTimeout(() => {
                console.log(i)
            }, 0)
        }
    </script>

解題思路

那么上面我已經提供了兩種方式了，這邊為了證明自己沒有水文章，我決定寫出第四種方法，大家可以自己深思一下噢，這個經典不止這幾種方式實作，

第11題

<script>
        console.log('a')

        setTimeout(() => {
            console.log('b')
        }, 0)

        console.log('c')

        Promise.resolve().then(() => {
            console.log('d')
        }).then(() => {
            console.log('e')
        })

        console.log('f')
    </script>

解題思路

好，先說答案：a c f d e b；

具體本題考察宏任務和微任務的執行順序，首先我們先了解一下宏任務和微任務的作業流程，其實昨天也涉及到了，但是沒有細說

那么再來說說本題的宏任務是正常輸出的console.log，setTimeout屬于下一輪宏任務，即本輪微任務執行完再執行，Promise屬于微任務，那么setTimeout就是最后輸出的啦

第12題

<script>
        var a = 2
        var obj = {
            a: 3,
            fn: function () {
                const a = () => {
                    console.log(this.a)
                }
                const b = function () {
                    console.log(this.a)
                }
                a()
                b()
            }
        }

        obj.fn()
    </script>

解題思路

先說答案：3 2；

不知道小伙伴做對沒有，那么首先我們要知道這題考察this的指向問題，通過題目發現其實只有箭頭函式和正常函式的區別，那就要清楚箭頭函式的this其實指向的是父級作用域，所以this.a應該指向這個物件里的a，正常函式就不多說了，指向window，

第13題

<script>
        function side(arr) {
            arr[0] = arr[2];
        }
        function a(a, b, c = 3) {
            c = 10;
            side(arguments);
            return a + b + c;
        }

        console.log(a(1, 1, 1))
    </script>

解題思路

這題需要細心一點，首先我們執行console.log的時候會傳給a函式3個值，但是，這里注意一下，c=3說明獨立創建了一個塊級作用域，再往下看c又=10了，很好這里應該會有小伙伴被誤導了，arguments真的會參考c=10嗎，答案是錯的，其實當c獨立創建了一個塊級作用域的時候，arguments就不會取這個值了，而是取傳過來的值1，1，1，那么a和b應該都等于1，c不變等于10.

第14題

<script>
        var a = [0];
        if (a) {
            console.log(a == true);
        } else {
            console.log(a)
        }

        (function () {
            var a = (b = 5);
        })();

        console.log(b);
        console.log(a);
    </script>

解題思路

首先當一個變數在if里面的時候會轉化成布林值進行判斷ture或者false進行判斷，再進去之后a==true涉及到復雜型別，那么比較的就是指標指向，不同就為false，所以第一個值列印false，再往后看，立即執行函式里定義了一個var，那么在作用域里面，外面是訪問不到里面的，但是b可以訪問到，因為是全域變數，所以第二和第三個值就為5和【0】，a取開始定義的值，

第15題

<script>
        var fullName = 'a';
        var obj = {
            fullName: 'b',
            prop: {
                fullName: 'c',
                getFullName: function() {
                    return this.fullName;
                }
            }
        }

        console.log(obj.prop.getFullName());
        var test = obj.prop.getFullName;
        console.log(test());
    </script>

解題思路

首先這題考察this的指向，那么我們看清楚第一次控制臺輸出的時候函式是直接物件執行，所以第一次輸出的fullName應該指向父級prop的fullName，即c，
第二次并不是直接使用物件執行函式，所以應該翻譯成window.test()；那么全域的fullName即是a，所以答案就出來了，

第16題

 <script>
        var foo = {
            bar: function() {
                return this.baz;
            },
            baz: 1
        }
        console.log(typeof(f = foo.bar)());
    </script>

解題思路

首先我們需要知道輸出的時候后面有（），說明要執行函式，此時我們發現f其實是全域的，所以呼叫起來應該是window.f()，那么foo.bar的this應該就指向window，往上找不到bar的屬性，所以應該輸出undefined，

第17題

<script>
        const num = {
            a: 10,
            add() {
                return this.a + 2;
            },
            reduce: () => this.a - 2
        };
        console.log(num.add());
        console.log(num.reduce());
    </script>

解題思路

add（）函式輸出12應該沒什么問題，關鍵就在reduce輸出什么，仔細觀察會發現使用的并不是正常函式，而是箭頭函式，箭頭函式的this指向最近的父級，再往上看就只有window了，所以window.a是udefined，那么減去一個非數將得到NAN對吧，

第18題（CSS題目 - Beta）

說一下對css盒模型的理解

答案

css盒子模型 又稱框模型 (Box Model) ，包含了元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）幾個要素，
盒模型有兩種：標準盒模型和IE盒模型，
標準盒模型中width和height指的是內容區域的寬度和高度，增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸；但在IE6瀏覽器的width不是內容的寬度，而是內容、內邊距和邊框的寬總和；IE的content部分包含了border和padding，

第19題

<script>
        let a = {
            name: "jock",
            age: 20
        }

        function change(o) {
            o.age = 24;
            o = {
                name: "alan",
                age: 30
            }
            return o
        }
        let b = change(a)
        console.log(b.age)
        console.log(a.age)
    </script>

解題思路

本題主要考察物件指標的參考關系，那么我們看后面將a的值傳給了change(o)，所以此時o和a的物件指向同一個位置，所以a.age=o.age=24，后面又重新覆寫了o的物件，所以此時o.age變成了30.

第20題

<script>
        // TODO: A: foo(){foo=10;console.log(foo)}
        // TODO: B: 1
        // TODO: C: 10
        // TODO: D: undefined

        var foo = 1;
        (function foo() {
            foo = 10;
            console.log(foo);
        }())
    </script>

解題思路

注意這里的立即執行函式是有名稱的，本題主要考察有名稱的自定義函式會默認創建一個物件屬性值，而這個屬性值就是函式本身（是只讀的，不能被修改）所以答案就輸出這個函式

最后

其實大廠的題目有簡單也有難點，甚至有考細節的地方，就和年輕時考的數學試卷一樣，選擇題總有送分的對吧，所以簡單的題一定要拿下，但也不能掉以輕心，
如果上面的題目你還有不懂的建議參考解題思路去復習，查漏補缺，最后祝各位小伙伴都能進入自己理想的企業 ！

熱門文章推薦：

🥇 這樣配置學習VSCode，寫前端代碼想不快都難（??精心準備多動圖，建議收藏噢~??）
🥈 還不會搭建個人博客?手把手教你用Wordpress搭建只屬于你的世界~
🥉 Hexo的準備作業（手把手教你搭建Node.js/Git環境）