摘要:和深入理解在和深入理解這篇博客里筆者曾做過(guò)總結(jié),我們知道試單線程的產(chǎn)物,兩個(gè)函數(shù)就是利用了插入代碼的方式實(shí)現(xiàn)了偽異步,和的原理實(shí)際上是一樣的。綜上所述,其實(shí)終歸是單線程產(chǎn)物。無(wú)論如何異步都不可能突破單線程這個(gè)障礙。
說(shuō)明:??這是筆者平時(shí)積累的一些覺(jué)得比較有意思或是比較有難度的JavaScript題目理解和心得,會(huì)保持長(zhǎng)期更新。
1.setTimeout和setInterval深入理解在setTimeout和setInterval深入理解這篇博客里筆者曾做過(guò)總結(jié),我們知道JavaScript試單線程的產(chǎn)物,兩個(gè)函數(shù)就是利用了插入代碼的方式實(shí)現(xiàn)了偽異步,和AJAX的原理實(shí)際上是一樣的。下面來(lái)看下這個(gè)例子:
</>復(fù)制代碼
console.log("1");
setTimeout(function(){
console.log("3")
},0);
console.log("2");
結(jié)果:控制臺(tái)依次輸出1,2,3;
</>復(fù)制代碼
function fn() {
setTimeout(function(){alert("can you see me?");},1000);
while(true) {}
}
你覺(jué)得這段代碼的執(zhí)行結(jié)果是什么呢?答案是,alert永遠(yuǎn)不會(huì)出現(xiàn)。
????這是為什么呢?因?yàn)椋瑆hile這段代碼沒(méi)有執(zhí)行完,所以插入在后面的代碼便永遠(yuǎn)不會(huì)執(zhí)行。
綜上所述,其實(shí)JS終歸是單線程產(chǎn)物。無(wú)論如何“異步”都不可能突破單線程這個(gè)障礙。所以許多的“異步調(diào)用”(包括Ajax)事實(shí)上也只是“偽異步”而已。只要理解了這么一個(gè)概念,也許理解setTimeout和setInterval也就不難了。
在JavaScript閉包初探這篇博客里面進(jìn)行了初步探討,有幾個(gè)小題個(gè)人覺(jué)得還是比較有意思的:
</>復(fù)制代碼
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
alert(object.getNameFunc()());//The Window
</>復(fù)制代碼
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
var that = this;
return function(){
return that.name;
};
}
};
alert(object.getNameFunc()());//My Object
</>復(fù)制代碼
function fun(n,o) {
console.log(o)
return {
fun:function(m){
return fun(m,n);
}
};
}
var a = fun(0); a.fun(1); a.fun(2); a.fun(3);//undefined,?,?,?
var b = fun(0).fun(1).fun(2).fun(3);//undefined,?,?,?
var c = fun(0).fun(1); c.fun(2); c.fun(3);//undefined,?,?,?
</>復(fù)制代碼
//問(wèn):三行a,b,c的輸出分別是什么?
這是一道非常典型的JS閉包問(wèn)題。其中嵌套了三層fun函數(shù),搞清楚每層fun的函數(shù)是那個(gè)fun函數(shù)尤為重要。
</>復(fù)制代碼
//答案:
//a: undefined,0,0,0
//b: undefined,0,1,2
//c: undefined,0,1,1
3. Array/map,Number/parseInt
</>復(fù)制代碼
["1", "2", "3"].map(parseInt)//求輸出結(jié)果
??首先, map接受兩個(gè)參數(shù), 一個(gè)回調(diào)函數(shù) callback, 一個(gè)回調(diào)函數(shù)的this值
其中回調(diào)函數(shù)接受三個(gè)參數(shù) currentValue, index, arrary;而題目中, map只傳入了回調(diào)函數(shù)--parseInt.其次, parseInt 只接受兩個(gè)兩個(gè)參數(shù) string, radix(基數(shù)). radix的合法區(qū)間是2-36. 0或是默認(rèn)是10.所以本題即問(wèn)
</>復(fù)制代碼
parseInt("1", 0);
parseInt("2", 1);
parseInt("3", 2);
后兩者參數(shù)不合法.所以答案是:[1, NaN, NaN];
4.?0.1+0.2!=0.3和9999999999999999 == 10000000000000000;</>復(fù)制代碼
根據(jù)語(yǔ)言規(guī)范,JavaScript 采用“IEEE 754 標(biāo)準(zhǔn)定義的雙精度64位格式”("double-precision 64-bit format IEEE 754 values")表示數(shù)字。據(jù)此我們能得到一個(gè)有趣的結(jié)論,和其他編程語(yǔ)言(如 C 和 Java)不同,JavaScript 不區(qū)分整數(shù)值和浮點(diǎn)數(shù)值,所有數(shù)字在 JavaScript 中均用浮點(diǎn)數(shù)值表示,所以在進(jìn)行數(shù)字運(yùn)算的時(shí)候要特別注意。精度丟失看看下面的例子:
</>復(fù)制代碼
0.1 + 0.2 = 0.30000000000000004
</>復(fù)制代碼
在具體實(shí)現(xiàn)時(shí),整數(shù)值通常被視為32位整型變量,在個(gè)別實(shí)現(xiàn)(如某些瀏覽器)中也以32位整型變量的形式進(jìn)行存儲(chǔ),直到它被用于執(zhí)行某些32位整型不支持的操作,這是為了便于進(jìn)行位操作。大整數(shù)精度在2的53次方以內(nèi)是不會(huì)丟失的,也就是說(shuō)瀏覽器能精確計(jì)算Math.pow(2,53)以內(nèi)所有的數(shù),小數(shù)精度,當(dāng)十進(jìn)制小數(shù)的二進(jìn)制表示的有限數(shù)字不超過(guò) 52 位時(shí),在 JavaScript 里也是可以精確存儲(chǔ)的。
解決辦法:Math.round( (.1+.2)*100)/100;
5. [1>2>3,3>2>1]??此題會(huì)讓人誤以為是2>1&&2<3,其實(shí)不是的,這個(gè)題等價(jià)于
</>復(fù)制代碼
1<2=>true;
true<3=>1<3=>true;
3<2=>true;
false<1=>0<1=>true;
答案:[true,true]
??這個(gè)題的重點(diǎn)是對(duì)于運(yùn)算符的理解,一是javascript對(duì)于不同類型數(shù)值的比較規(guī)則,詳見(jiàn)js比較表,javascript相等性判斷;二是對(duì)于比較操作符和賦值運(yùn)算符的理解,即一個(gè)自左向右一個(gè)自右向左~
</>復(fù)制代碼
3.tostring;
3..toString;
3...toString;
這個(gè)題感覺(jué)腦洞很大啊~先說(shuō)答案:error,"3",error;
可如果是
</>復(fù)制代碼
var a=3;
a.toString;
卻又合法了答案就是"3";
為啥呢?
因?yàn)樵贘S中1.1,1.,.1都是合法數(shù)字啊!那么在解析3.toString的時(shí)候到底是這是個(gè)數(shù)字呢,還是方法調(diào)用呢?瀏覽器就懵逼了唄,只能拋出一個(gè)error,所以說(shuō)感覺(jué)此題就是在戲耍瀏覽器......
</>復(fù)制代碼
var name = "World!";
(function () {
if (typeof name === "undefined") {
var name = "Jack";
console.log("Goodbye " + name);
} else {
console.log("Hello " + name);
}
})();
答案是什么呢...筆者第一次做的時(shí)候傻傻的覺(jué)得是Hello,world...實(shí)則不然,正確答案是:Goodbye Jack;
為什么呢,聲明提升...上述代碼相當(dāng)于下面的代碼:
</>復(fù)制代碼
var name = "World!";
(function () {
var name;
if (typeof name === "undefined") {
name = "Jack";
console.log("Goodbye " + name);
} else {
console.log("Hello " + name);
}
})();
8. 坑爹史(1)
</>復(fù)制代碼
var a = [0];
if ([0]) {
console.log(a == true);
} else {
console.log("wut");
}
讀者們你們覺(jué)得此題答案是什么呢?true?因?yàn)閇0]被看做Boolean是被認(rèn)為是true,理所當(dāng)然的推出來(lái)[0]==true,控制臺(tái)輸出true...看似沒(méi)錯(cuò),然而并不是這樣滴~[0]這個(gè)玩意兒在多帶帶使用的時(shí)候是被認(rèn)為是true的,但用作比較的時(shí)候它是false...所以正確答案是false;不信的話,F(xiàn)12控制臺(tái)輸出[0]==false;看是不是true......
9. 坑爹史(2)</>復(fù)制代碼
1 + - + + + - + 1
這題應(yīng)該是等同于:(倒著看)
</>復(fù)制代碼
1 + (a) => 2
a = - (b) => 1
b = + (c) => -1
c = + (d) => -1
d = + (e) => -1
e = + (f) => -1
f = - (g) => -1
g = + 1 => 1
答案是2
10. 坑爹史(3)</>復(fù)制代碼
function sidEffecting(ary) {
ary[0] = ary[2];
}
function bar(a,b,c) {
c = 10
sidEffecting(arguments);
return a + b + c;
}
bar(1,1,1)
此題涉及ES6語(yǔ)法,實(shí)在坑的不行...arguments
首先 The arguments object is an Array-like object corresponding to the arguments passed to a function.也就是說(shuō) arguments 是一個(gè) object, c 就是 arguments[2], 所以對(duì)于 c 的修改就是對(duì) arguments[2] 的修改.
所以答案是 21.
然而!!!!!!
當(dāng)函數(shù)參數(shù)涉及到 any rest parameters, any default parameters or any destructured parameters 的時(shí)候, 這個(gè) arguments 就不在是一個(gè) mapped arguments object 了.....請(qǐng)看:
</>復(fù)制代碼
function sidEffecting(ary) {
ary[0] = ary[2];
}
function bar(a,b,c=3) {
c = 10
sidEffecting(arguments);
return a + b + c;
}
bar(1,1,1)
答案是12...
請(qǐng)讀者細(xì)細(xì)體會(huì)!!
</>復(fù)制代碼
[,,,].join(", ")
</>復(fù)制代碼
[,,,] => [undefined × 3]
因?yàn)閖avascript 在定義數(shù)組的時(shí)候允許最后一個(gè)元素后跟一個(gè),, 所以這是個(gè)長(zhǎng)度為三的稀疏數(shù)組(這是長(zhǎng)度為三, 并沒(méi)有 0, 1, 2三個(gè)屬性哦)
答案: ", , "
</>復(fù)制代碼
var a = {class: "Animal", name: "Fido"};
a.class
這個(gè)題比較流氓.. 因?yàn)槭菫g覽器相關(guān), class是個(gè)保留字(現(xiàn)在是個(gè)關(guān)鍵字了);Fuck!
所以答案不重要, 重要的是自己在取屬性名稱的時(shí)候盡量避免保留字. 如果使用的話請(qǐng)加引號(hào) a["class"]
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/79651.html
摘要:函數(shù)式編程前端掘金引言面向?qū)ο缶幊桃恢币詠?lái)都是中的主導(dǎo)范式。函數(shù)式編程是一種強(qiáng)調(diào)減少對(duì)程序外部狀態(tài)產(chǎn)生改變的方式。 JavaScript 函數(shù)式編程 - 前端 - 掘金引言 面向?qū)ο缶幊桃恢币詠?lái)都是JavaScript中的主導(dǎo)范式。JavaScript作為一門多范式編程語(yǔ)言,然而,近幾年,函數(shù)式編程越來(lái)越多得受到開(kāi)發(fā)者的青睞。函數(shù)式編程是一種強(qiáng)調(diào)減少對(duì)程序外部狀態(tài)產(chǎn)生改變的方式。因此,...
摘要:說(shuō)明你可能發(fā)現(xiàn)有很多網(wǎng)站他們的登錄窗口或者說(shuō)是登錄框是可以拖動(dòng)的更有甚者他們的站點(diǎn)提示框都可以拖動(dòng)你也許可能會(huì)對(duì)這個(gè)功能的實(shí)現(xiàn)感興趣那么這篇文章可能會(huì)對(duì)你有所幫助具體的網(wǎng)站示例以網(wǎng)易云音樂(lè)站點(diǎn)為例,具體效果如下圖所示實(shí)現(xiàn)登錄窗口的拖拽原理解 說(shuō)明 你可能發(fā)現(xiàn)有很多網(wǎng)站他們的登錄窗口或者說(shuō)是登錄框是可以拖動(dòng)的, 更有甚者他們的站點(diǎn)提示框都可以拖動(dòng), 你也許可能會(huì)對(duì)這個(gè)功能的實(shí)現(xiàn)感興趣, ...
摘要:填坑之旅篇填坑之旅動(dòng)畫填坑之旅請(qǐng)求篇如果不能從頭到尾的建立一個(gè)應(yīng)用,那么將失色不少。隨著,內(nèi)置的支持了這個(gè)填補(bǔ)回調(diào)地獄大坑的功能。很好的利用了這一點(diǎn),它的請(qǐng)求返回結(jié)果就是。在界面上顯示異常用,顯示警告使用。 React Native填坑之旅--Button篇React Native填坑之旅--動(dòng)畫React Native填坑之旅--HTTP請(qǐng)求篇 如果不能從頭到尾的建立一個(gè)RN應(yīng)用,那...
摘要:在中巧用解決跳轉(zhuǎn)到第三方平臺(tái)時(shí)不能回調(diào)的問(wèn)題比如支付在開(kāi)發(fā)中遇到不少的坑,絕大部分解決了但是在我們的中如果跳轉(zhuǎn)到第三方網(wǎng)站上時(shí),那么問(wèn)題來(lái)了此時(shí)我們的是不能監(jiān)聽(tīng)到你在其它網(wǎng)站上的事件的,所以當(dāng)你想要回退到我們自己上時(shí)請(qǐng)緊握你的蛋小編在開(kāi)發(fā)這 在ionic中巧用iframe解決跳轉(zhuǎn)到第三方平臺(tái)時(shí)不能回調(diào)的問(wèn)題-比如支付 在ionic開(kāi)發(fā)中遇到不少的坑,絕大部分解決了但是在我們的app...
摘要:寫插件的初衷項(xiàng)目經(jīng)常需要無(wú)縫滾動(dòng)效果,當(dāng)時(shí)寫的時(shí)候用用這個(gè)老插件,相對(duì)不上很好用。后來(lái)轉(zhuǎn)向在沒(méi)有找到好的無(wú)縫滾動(dòng)插件,除了配置可以實(shí)現(xiàn)但是相對(duì)來(lái)說(shuō)太重了,于是自己造了個(gè)輪子。 寫插件的初衷 1.項(xiàng)目經(jīng)常需要無(wú)縫滾動(dòng)效果,當(dāng)時(shí)寫jq的時(shí)候用用msClass這個(gè)老插件,相對(duì)不上很好用。2.后來(lái)轉(zhuǎn)向vue在vue-awesome沒(méi)有找到好的無(wú)縫滾動(dòng)插件,除了配置swiper可以實(shí)現(xiàn)但是相對(duì)來(lái)...
閱讀 2582·2021-11-23 09:51
閱讀 2496·2021-09-30 09:48
閱讀 1096·2021-09-10 10:51
閱讀 2230·2021-08-12 13:22
閱讀 3584·2021-08-11 10:24
閱讀 2183·2019-08-30 15:55
閱讀 653·2019-08-30 14:05
閱讀 3220·2019-08-30 13:03