ホームページ > 記事 > ウェブフロントエンド > 騙されやすい JavaScript の問題
要約: これは、私が蓄積した、より興味深い、または難しいと思ういくつかの JavaScript トピックの理解と経験であり、長期的に更新される予定です。
女として生きるな、百年の喜びも悲しみも他人から来る。
#本文1.setTimeout と setInterval の詳細な理解著者は、setTimeout と setInterval の詳細な理解をこのブログにまとめました。 JavaScript テストでは、スレッドの積である 2 つの関数がコードを挿入する方法を使用して擬似非同期を実現しますが、これは実際には AJAX と同じ原理です。この例を見てみましょう:console.log("1"); setTimeout(function(){ console.log("3") },0); console.log("2");結果: コンソールは 1、2、3 を順番に出力します;
function fn() { setTimeout(function(){alert('can you see me?');},1000); while(true) {} }このコードの実行結果は何だと思いますか?答えは、アラートは決して表示されないということです。 ### どうしてこれなの? while コードは実行されていないため、後から挿入されたコードは実行されません。
要約すると、実際、JS は結局のところシングルスレッド製品です。いくら「非同期」であっても、シングルスレッドの壁を突破することは不可能です。したがって、多くの「非同期呼び出し」(Ajax を含む) は、実際には単なる「擬似非同期」です。このような概念を理解していれば、setTimeout と setInterval を理解することは難しくないかもしれません。
2. クロージャの予備調査
var name = "The Window"; var object = { name : "My Object", getNameFunc : function(){ return function(){ return this.name; }; } }; alert(object.getNameFunc()());//The Window
var name = "The Window"; var object = { name : "My Object", getNameFunc : function(){ var that = this; return function(){ return that.name; }; } }; alert(object.getNameFunc()());//My Object
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,?,?,?//質問: 3 つの行 a、b、c の出力は何ですか?
これは、非常に典型的な JS クロージャーの問題です。 fun 関数は 3 つのレベルでネストされており、各レベルの fun 関数がどの fun 関数であるかを把握することが特に重要です。
//答え:
//a: 未定義,0,0,0//b: 未定義,0,1,2
3. Array/map,Number/parseInt
//c : unknown,0,1,1
["1", "2", "3"].map(parseInt)//求输出结果复制代码
parseInt('1', 0);parseInt('2', 1);parseInt('3', 2);复制代码
4. 0.1 0.2!=0.3 and 9999999999999999 == 1000000000000000;
言語仕様によれば、JavaScript は「IEEE 754 標準で定義された倍精度 64 ビット形式」形式を使用します。 754 値」) は数値を表します。このことから、興味深い結論を導き出すことができます。他のプログラミング言語 (C や Java など) とは異なり、JavaScript は整数値と浮動小数点値を区別しません。JavaScript ではすべての数値が浮動小数点値で表されます。したがって、数値演算を実行するときは特に注意してください。精度の損失 次の例を見てください:特定の実装では、整数値は通常 32 ビットの整数変数として扱われます。また、個々の実装 (一部の実装など) では、整数値は通常 32 ビットの整数変数として扱われます。ブラウザ) 32 ビット整数でサポートされていない操作を実行するために使用されるまで、32 ビット整数変数として保存されます。これは、ビット操作を容易にするためです。大きな整数の精度は 2 の 53 乗以内で失われることはなく、ブラウザは Math.pow(2,53) 内のすべての数値を正確に計算できます。 10 進数ではありません。52 ビットを超える場合、JavaScript に正確に格納できます。0.1 + 0.2 = 0.30000000000000004复制代码
解決策: Math.round( (.1 .2)*100)/100;5. [1
この質問は、人々に 2>1&&23ae0f26a381d0c01fb9b8b7242737512true;truee5dfd1e04a098d470fd53bdae68047611e5dfd1e04a098d470fd53bdae6804761true;325346d3d65c60a4c2739f19f2f21fdd8true;false66a8cecc548e92eefe204758893a9e9e066a8cecc548e92eefe204758893a9e9etrue;复制代码
と同等です。答え: [true,true]この質問のポイントは、演算子の理解として、1つはJavaScriptにおける異なる型の値の比較規則、詳しくはJS比較表とJavaScriptの等価性判定を参照、もう1つは比較演算子と代入の理解です。演算子、つまり、1 つは左から右へ、もう 1 つは右からです。左に回ってください~6. ブラウザの混乱の歴史 (1)
3.toString;3..toString;3...toString;复制代码この質問は非常に想像力豊かだと感じます~Let最初に答えを教えてください: error,'3',error;
しかし、var a=3; a.toString;复制代码
であっても合法であれば、答えは '3';なぜですか?1.1、1.、.1 はすべて JS の正当な数値であるためです。では、3.toString を解析するとき、これは数値ですか、それともメソッド呼び出しですか?ブラウザは混乱してエラーをスローすることしかできないため、この質問はブラウザをいたずらしているだけのような気がします...
7. ステートメントの改善var name = 'World!'; (function () { if (typeof name === 'undefined') { var name = 'Jack'; console.log('Goodbye ' + name); } else { console.log('Hello ' + name); } })();答えは「What.. . 著者が初めてそれを行ったとき、私は愚かにも Hello, world だと思いました...実際には、そうではありません。正解は: Goodbye Jack;
Why, the state is promoted..上記のコードは、次のコードと同等です:var name = 'World!'; (function () { var name; if (typeof name === 'undefined') { name = 'Jack'; console.log('Goodbye ' + name); } else { console.log('Hello ' + name); } })();8. 坑爹史(1)
var a = [0]; if ([0]) { console.log(a == true); } else { console.log("wut"); }读者们你们觉得此题答案是什么呢?true?因为[0]被看做Boolean是被认为是true,理所当然的推出来[0]==true,控制台输出true...看似没错,然而并不是这样滴~[0]这个玩意儿在单独使用的时候是被认为是true的,但用作比较的时候它是false...所以正确答案是false;不信的话,F12控制台输出[0]==false;看是不是true......
###9. 坑爹史(2)
1 + - + + + - + 1这题应该是等同于:(倒着看)
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)
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语法,实在坑的不行...arguments
首先 The arguments object is an Array-like object corresponding to the arguments passed to a function.也就是说 arguments 是一个 object, c 就是 arguments2, 所以对于 c 的修改就是对 arguments2 的修改.
所以答案是 21.
然而!!!!!!
当函数参数涉及到 any rest parameters, any default parameters or any destructured parameters 的时候, 这个 arguments 就不在是一个 mapped arguments object 了.....请看: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...
请读者细细体会!!11. 坑爹史(4)
[,,,].join(", ")[,,,] => [undefined × 3]因为javascript 在定义数组的时候允许最后一个元素后跟一个,, 所以这是个长度为三的稀疏数组(这是长度为三, 并没有 0, 1, 2三个属性哦)
答案: ", , "12. 浏览器懵逼史(2)
var a = {class: "Animal", name: 'Fido'}; a.class这个题比较流氓.. 因为是浏览器相关, class是个保留字(现在是个关键字了);Fuck!
所以答案不重要, 重要的是自己在取属性名称的时候尽量避免保留字. 如果使用的话请加引号 a['class']13.一道容易被人轻视的面试题
function Foo() { getName = function () { alert (1); }; return this; } Foo.getName = function () { alert (2);}; Foo.prototype.getName = function () { alert (3);}; var getName = function () { alert (4);}; function getName() { alert (5);} //请写出以下输出结果: Foo.getName(); getName(); Foo().getName(); getName(); new Foo.getName(); new Foo().getName(); new new Foo().getName();14.闭包小题
for(var i = 0; i < 5; i++) { console.log(i); } for(var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, 1000 * i); } for(var i = 0; i < 5; i++) { (function(i) { setTimeout(function() { console.log(i); }, i * 1000); })(i); } for(var i = 0; i < 5; i++) { (function() { setTimeout(function() { console.log(i); }, i * 1000); })(i); } for(var i = 0; i < 5; i++) { setTimeout((function(i) { console.log(i); })(i), i * 1000); } setTimeout(function() { console.log(1) }, 0); new Promise(function executor(resolve) { console.log(2); for( var i=0 ; i<10000 ; i++ ) { i == 9999 && resolve(); } console.log(3); }).then(function() { console.log(4); }); console.log(5);15. 函数的隐式转换
function fn() { return 20; } console.log(fn + 10); // 输出结果是多少 function fn() { return 20; } fn.toString = function() { return 10; } console.log(fn + 10); // 输出结果是多少? function fn() { return 20; } fn.toString = function() { return 10; } fn.valueOf = function() { return 5; } console.log(fn + 10); // 输出结果是多少?16. 函数防抖和函数节流(ES6)
//函数节流 const throttle = (fun, delay) => { let last = null; return () => { const now = + new Date(); if (now - last > delay) { fun(); last = now; } } } //实例 const throttleExample = throttle(() => console.log(1), 1000); //调用 throttleExample(); throttleExample(); throttleExample(); //函数防抖 const debouce = (fun, delay) => { let timer = null; return () => { clearTimeout(timer); timer = setTimeout(() => { fun(); }, delay); } } //实例 const debouceExample = debouce(() => console.log(1), 1000); //调用 debouceExample(); debouceExample(); debouceExample();推荐教程:《JS教程》
以上が騙されやすい JavaScript の問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。