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