摘要:關(guān)于點擊進入項目是我于開始的一個項目,每個工作日發(fā)布一道面試題。那個率先改變的實例的返回值,就傳遞給的回調(diào)函數(shù)。通過插入標簽的方式來實現(xiàn)跨域,參數(shù)只能通過傳入,僅能支持請求。因此清除浮動,只需要觸發(fā)一個即可。
關(guān)于【Step-By-Step】
Step-By-Step (點擊進入項目) 是我于 2019-05-20 開始的一個項目,每個工作日發(fā)布一道面試題。每個周末我會仔細閱讀大家的答案,整理最一份較優(yōu)答案出來,因本人水平有限,有誤的地方,大家及時指正。
如果想 加群 學(xué)習(xí),可以通過文末的公眾號,添加我為好友。
更多優(yōu)質(zhì)文章可戳: https://github.com/YvetteLau/...
__
本周面試題一覽:
實現(xiàn) Promise.race 方法
JSONP 原理及簡單實現(xiàn)
實現(xiàn)一個數(shù)組去重的方法
清楚浮動的方法有哪些
編寫一個通用的柯里化函數(shù) currying
20. 實現(xiàn) Promise.race 方法在實現(xiàn) Promise.race 方法之前,我們首先要知道 Promise.race 的功能和特點,因為在清楚了 Promise.race 功能和特點的情況下,我們才能進一步去寫實現(xiàn)。
Promise.race 功能Promise.race(iterable) 返回一個 promise,一旦 iterable 中的一個 promise 狀態(tài)是 fulfilled / rejected ,那么 Promise.race 返回的 promise 狀態(tài)是 fulfilled / rejected.
let p = Promise.race([p1, p2, p3]);
只要p1、p2、p3之中有一個實例率先改變狀態(tài),p的狀態(tài)就跟著改變。那個率先改變的 Promise 實例的返回值,就傳遞給 p 的回調(diào)函數(shù)。
Promise.race 的特點Promise.race 的返回值是一個 promise 實例
如果傳入的參數(shù)為空的可迭代對象,那么 Promise.race 返回的 promise 永遠是 pending 態(tài)
如果傳入的參數(shù)中不包含任何 promise,Promise.race 會返回一個處理中(pending)的 promise
如果 iterable 包含一個或多個非 promise 值或已經(jīng)解決的promise,則 Promise.race 將解析為 iterable 中找到的第一個值。
Promise.race 的實現(xiàn)Promise.race = function (promises) { //promises傳入的是可迭代對象(省略參數(shù)合法性判斷) promises = Array.from(promises);//將可迭代對象轉(zhuǎn)換為數(shù)組 return new Promise((resolve, reject) => { if (promises.length === 0) { //空的可迭代對象; //用于在pending態(tài) } else { for (let i = 0; i < promises.length; i++) { Promise.resolve(promises[i]).then((data) => { resolve(data); }).catch((reason) => { reject(reason); }) } } }); }21. JSONP原理及簡單實現(xiàn)
盡管瀏覽器有同源策略,但是 標簽的 src 屬性不會被同源策略所約束,可以獲取任意服務(wù)器上的腳本并執(zhí)行。jsonp 通過插入 script 標簽的方式來實現(xiàn)跨域,參數(shù)只能通過 url 傳入,僅能支持 get 請求。
實現(xiàn)原理:Step1: 創(chuàng)建 callback 方法
Step2: 插入 script 標簽
Step3: 后臺接受到請求,解析前端傳過去的 callback 方法,返回該方法的調(diào)用,并且數(shù)據(jù)作為參數(shù)傳入該方法
Step4: 前端執(zhí)行服務(wù)端返回的方法調(diào)用
jsonp源碼實現(xiàn)function jsonp({url, params, callback}) { return new Promise((resolve, reject) => { //創(chuàng)建script標簽 let script = document.createElement("script"); //將回調(diào)函數(shù)掛在 window 上 window[callback] = function(data) { resolve(data); //代碼執(zhí)行后,刪除插入的script標簽 document.body.removeChild(script); } //回調(diào)函數(shù)加在請求地址上 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); });
服務(wù)端代碼(node):
//express啟動一個后臺服務(wù) let express = require("express"); let app = express(); app.get("/show", (req, res) => { let {callback} = req.query; //獲取傳來的callback函數(shù)名,callback是key res.send(`${callback}("Hello!")`); }); app.listen(3000);22. 實現(xiàn)一個數(shù)組去重的方法 法1: 利用ES6新增數(shù)據(jù)類型 Set
Set類似于數(shù)組,但是成員的值都是唯一的,沒有重復(fù)的值。
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],則添加到數(shù)組中 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],則添加到數(shù)組中 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,且容器的內(nèi)容中有浮動(float為left或right)的元素,在這種情況下,容器的高度不能自動伸長以適應(yīng)內(nèi)容的高度,使得內(nèi)容溢出到容器外面而影響(甚至破壞)布局的現(xiàn)象。這個現(xiàn)象叫浮動溢出,為了防止這個現(xiàn)象的出現(xiàn)而進行的CSS處理,就叫CSS清除浮動。
1. 利用 clear 屬性
在 優(yōu)點:簡單,代碼少,瀏覽器兼容性好。 缺點:需要添加大量無語義的html元素,代碼不夠優(yōu)雅,后期不容易維護。 IE8以上和非IE瀏覽器才支持:after,如果想要支持IE6、7,需要給 outer 元素,設(shè)置樣式 zoom: 1; 根據(jù) BFC 的規(guī)則,計算 BFC 的高度時,浮動元素也參與計算。因此清除浮動,只需要觸發(fā)一個BFC即可。 position 為 absolute 或 relative overflow 不為 visible 的塊元素 display 為 inline-block, table-cell, table-caption 如: 注意使用 display: inline-block 會產(chǎn)生間隙。 在開始之前,我們首先需要搞清楚函數(shù)柯里化的概念。 函數(shù)柯里化是把接受多個參數(shù)的函數(shù)變換成接受一個單一參數(shù)(最初函數(shù)的第一個參數(shù))的函數(shù),并且返回接受余下的參數(shù)而且返回結(jié)果的新函數(shù)的技術(shù)。 參數(shù)復(fù)用 提前返回 – 返回接受余下的參數(shù)且返回結(jié)果的新函數(shù) 延遲執(zhí)行 – 返回新函數(shù),等待執(zhí)行 [1] 珠峰架構(gòu)課(墻裂推薦) [2] CSS-清除浮動 [3] 詳解JS函數(shù)柯里化 [4] JavaScript數(shù)組去重 謝謝各位小伙伴愿意花費寶貴的時間閱讀本文,如果本文給了您一點幫助或者是啟發(fā),請不要吝嗇你的贊和Star,您的肯定是我前進的最大動力。 https://github.com/YvetteLau/... 文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。 轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/104953.html.outer:after{
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
可以使用以下方法來觸發(fā)BFC
.outer {
overflow: hidden;
}
const currying = (fn, ...args) =>
args.length < fn.length
//參數(shù)長度不足時,重新柯里化該函數(shù),等待接受新參數(shù)
? (...arguments) => currying(fn, ...args, ...arguments)
//參數(shù)長度滿足時,執(zhí)行函數(shù)
: 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
函數(shù)柯里化的主要作用:
關(guān)注公眾號,加入技術(shù)交流群。
摘要:關(guān)于點擊進入項目是我于開始的一個項目,每個工作日發(fā)布一道面試題。的狀態(tài)由決定,分成以下兩種情況只有的狀態(tài)都變成,的狀態(tài)才會變成,此時的返回值組成一個數(shù)組,傳遞給的回調(diào)函數(shù)。 關(guān)于【Step-By-Step】 Step-By-Step (點擊進入項目) 是我于 2019-05-20 開始的一個項目,每個工作日發(fā)布一道面試題。每個周末我會仔細閱讀大家的答案,整理最一份較優(yōu)答案出來,因本人...
摘要:實例擁有構(gòu)造函數(shù)屬性,該屬性返回創(chuàng)建實例對象的構(gòu)造函數(shù)。在考慮對象而不是自定義類型和構(gòu)造函數(shù)的情況下,寄生式繼承也是一種有用的模式。在子類的構(gòu)造函數(shù)中,只有調(diào)用之后,才能使用關(guān)鍵字,否則報錯。 不積跬步無以至千里。 關(guān)于【Step-By-Step】 Step-By-Step (點擊進入項目) 是我于 2019-05-20 開始的一個項目,每個工作日發(fā)布一道面試題。每個周末我會仔細閱讀...
閱讀 745·2021-10-09 09:44
閱讀 2024·2021-09-22 15:54
閱讀 5064·2021-09-22 10:55
閱讀 1445·2019-08-29 18:41
閱讀 781·2019-08-29 11:24
閱讀 2106·2019-08-28 18:20
閱讀 1032·2019-08-26 11:51
閱讀 3052·2019-08-26 11:00