【Step-By-Step】高頻面試題深刻解析 / 週刊05

本週面試題一覽:

• 實現 Promise.race 方法
• JSONP 原理及簡單實現
• 實現一個數組去重的方法
• 清除浮動的方法有哪些
• 編寫一個通用的柯里化函數 currying

更多優質文章可戳: github.com/YvetteLau/B…

20. 實現 Promise.race 方法

在實現 Promise.race 方法以前，咱們首先要知道 Promise.race 的功能和特色，由於在清楚了 Promise.race 功能和特色的狀況下，咱們才能進一步去寫實現。

Promise.race 功能

Promise.race(iterable) 返回一個 promise，一旦 iterable 中的一個 promise 狀態是 fulfilled / rejected ，那麼 Promise.race 返回的 promise 狀態是 fulfilled / rejected.

let p = Promise.race([p1, p2, p3]);
複製代碼

只要p一、p二、p3之中有一個實例率先改變狀態，p的狀態就跟着改變。那個率先改變的 Promise 實例的返回值，就傳遞給 p 的回調函數。

Promise.race 的特色

Promise.race 的返回值是一個 promise 實例

• 若是傳入的參數爲空的可迭代對象，那麼 Promise.race 返回的 promise 永遠是 pending 態
• 若是傳入的參數中不包含任何 promise，Promise.race 會返回一個處理中（pending）的 promise
• 若是 iterable 包含一個或多個非 promise 值或已經解決的promise，則 Promise.race 將解析爲 iterable 中找到的第一個值。

Promise.race 的實現

Promise.race = function (promises) {
    //promises傳入的是可迭代對象(省略參數合法性判斷)
    promises = Array.from(promises);//將可迭代對象轉換爲數組
    return new Promise((resolve, reject) => {
        if (promises.length === 0) {
            //空的可迭代對象;
            //用於在pending態
        } else {
            for (let i = 0; i < promises.length; i++) {
                Promise.resolve(promises[i]).then((data) => {
                    resolve(data);
                }).catch((reason) => {
                    reject(reason);
                })
            }
        }
    });
}
複製代碼

21. JSONP原理及簡單實現

儘管瀏覽器有同源策略，可是 <script> 標籤的 src 屬性不會被同源策略所約束，能夠獲取任意服務器上的腳本並執行。jsonp 經過插入 script 標籤的方式來實現跨域，參數只能經過 url 傳入，僅能支持 get 請求。

實現原理:

• Step1: 建立 callback 方法
• Step2: 插入 script 標籤
• Step3: 後臺接受到請求，解析前端傳過去的 callback 方法，返回該方法的調用，而且數據做爲參數傳入該方法
• Step4: 前端執行服務端返回的方法調用

jsonp源碼實現

function jsonp({url, params, callback}) {
    return new Promise((resolve, reject) => {
        //建立script標籤
        let script = document.createElement('script');
        //將回調函數掛在 window 上
        window[callback] = function(data) {
            resolve(data);
            //代碼執行後，刪除插入的script標籤
            document.body.removeChild(script);
        }
        //回調函數加在請求地址上
        params = {...params, callback} //wb=b&callback=show
        let arrs = [];
        for(let key in params) {
            arrs.push(`${key}=${params[key]}`);
        }
        script.src = `${url}?${arrs.join('&')}`;
        document.body.appendChild(script);
    });
}
複製代碼

使用:

function show(data) {
    console.log(data);
}
jsonp({
    url: 'http://localhost:3000/show',
    params: {
        //code
    },
    callback: 'show'
}).then(data => {
    console.log(data);
});
複製代碼

服務端代碼(node):

//express啓動一個後臺服務
let express = require('express');
let app = express();

app.get('/show', (req, res) => {
    let {callback} = req.query; //獲取傳來的callback函數名，callback是key
    res.send(`${callback}('Hello!')`);
});
app.listen(3000);
複製代碼

22. 實現一個數組去重的方法

法1: 利用ES6新增數據類型 Set

Set相似於數組，可是成員的值都是惟一的，沒有重複的值。

function uniq(arry) {
    return [...new Set(arry)];
}
複製代碼

法2: 利用 indexOf

function uniq(arry) {
    var result = [];
    for (var i = 0; i < arry.length; i++) {
        if (result.indexOf(arry[i]) === -1) {
            //如 result 中沒有 arry[i],則添加到數組中
            result.push(arry[i])
        }
    }
    return result;
}
複製代碼

法3: 利用 includes

function uniq(arry) {
    var result = [];
    for (var i = 0; i < arry.length; i++) {
        if (!result.includes(arry[i])) {
            //如 result 中沒有 arry[i],則添加到數組中
            result.push(arry[i])
        }
    }
    return result;
}
複製代碼

法4：利用 reduce

function uniq(arry) {
    return arry.reduce((prev, cur) => prev.includes(cur) ? prev : [...prev, cur], []);
}
複製代碼

法5：利用 Map

function uniq(arry) {
    let map = new Map();
    let result = new Array();
    for (let i = 0; i < arry.length; i++) {
        if (map.has(arry[i])) {
            map.set(arry[i], true);
        } else {
            map.set(arry[i], false);
            result.push(arry[i]);
        }
    }
    return result;
}
複製代碼

23. 清除浮動的方法有哪些？

當容器的高度爲auto，且容器的內容中有浮動（float爲left或right）的元素，在這種狀況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢出到容器外面而影響（甚至破壞）佈局的現象。這個現象叫浮動溢出，爲了防止這個現象的出現而進行的CSS處理，就叫CSS清除浮動。

<style> .inner { width: 100px; height: 100px; float: left; } </style>
<div class='outer'>
    <div class='inner'></div>
    <div class='inner'></div>
    <div class='inner'></div>
</div>
複製代碼

1. 利用 clear 屬性

在 <div class='outer'> 內建立一個空元素，對其設置 clear: both; 的樣式。

• 優勢：簡單，代碼少，瀏覽器兼容性好。
• 缺點：須要添加大量無語義的html元素，代碼不夠優雅，後期不容易維護。

2. 利用 clear 屬性 + 僞元素

.outer:after{
    content: '';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}
複製代碼

IE8以上和非IE瀏覽器才支持:after，若是想要支持IE六、7，須要給 outer 元素，設置樣式 zoom: 1;

3. 利用 BFC 佈局規則

根據 BFC 的規則，計算 BFC 的高度時，浮動元素也參與計算。所以清除浮動，只須要觸發一個BFC便可。

可使用如下方法來觸發BFC

• position 爲 absolute 或 fixed
• overflow 不爲 visible 的塊元素
• display 爲 inline-block, table-cell, table-caption

如：

.outer {
    overflow: hidden;
}
複製代碼

注意使用 display: inline-block 會產生間隙。

24. 編寫一個通用的柯里化函數 currying

在開始以前，咱們首先須要搞清楚函數柯里化的概念。

函數柯里化是把接受多個參數的函數變換成接受一個單一參數（最初函數的第一個參數）的函數，而且返回接受餘下的參數並且返回結果的新函數的技術。

const currying = (fn, ...args) =>
    args.length < fn.length
        //參數長度不足時，從新柯里化該函數，等待接受新參數
        ? (...arguments) => currying(fn, ...args, ...arguments)
        //參數長度知足時，執行函數
        : fn(...args);
複製代碼

function sumFn(a, b, c) {
    return a + b + c;
}
var sum = currying(sumFn);
console.log(sum(2)(3)(5));//10
console.log(sum(2, 3, 5));//10
console.log(sum(2)(3, 5));//10
console.log(sum(2, 3)(5));//10
複製代碼

函數柯里化的主要做用：

• 參數複用
• 提早返回 – 返回接受餘下的參數且返回結果的新函數
• 延遲執行 – 返回新函數，等待執行

參考文章：

[1] CSS-清除浮動

[2] 詳解JS函數柯里化

[3] JavaScript數組去重

謝謝各位小夥伴願意花費寶貴的時間閱讀本文，若是本文給了您一點幫助或者是啓發，請不要吝嗇你的贊和Star，您的確定是我前進的最大動力。 github.com/YvetteLau/B…

關注公衆號，加入技術交流羣