騙されやすい JavaScript の問題

前書き

要約:これは、私が蓄積した、より興味深い、または難しいと思ういくつかの JavaScript トピックの理解と経験であり、長期的に更新される予定です。

女として生きるな、百年の喜びも悲しみも他人から来る。

console.log("1"); setTimeout(function(){ console.log("3") },0); console.log("2");

function fn() { setTimeout(function(){alert('can you see me?');},1000); while(true) {} }

要約すると、実際、JS は結局のところシングルスレッド製品です。いくら「非同期」であっても、シングルスレッドの壁を突破することは不可能です。したがって、多くの「非同期呼び出し」(Ajax を含む) は、実際には単なる「擬似非同期」です。このような概念を理解していれば、setTimeout と setInterval を理解することは難しくないかもしれません。

2. クロージャの予備調査

このブログでは、「JavaScript におけるクロージャの予備調査」という予備的な議論を実施しました。個人的に非常に興味深いと思うトピックがいくつかあります:

　　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,?,?,?

//a: 未定義,0,0,0

//b: 未定義,0,1,2
//c : unknown,0,1,1

3. Array/map,Number/parseInt

["1", "2", "3"].map(parseInt)//求输出结果复制代码

まず、map は 2 つのパラメータ、コールバック関数 callback とコールバック関数 this を受け入れます。 value

parseInt('1', 0);parseInt('2', 1);parseInt('3', 2);复制代码

4. 0.1 0.2!=0.3 and 9999999999999999 == 1000000000000000;

0.1 + 0.2 = 0.30000000000000004复制代码

ログイン後にコピー

解決策: Math.round( (.1 .2)*100)/100;

5. [1

この質問は、人々に 2>1&&2<3 であると誤解させるでしょう。実際、そうではありません。この質問は

1<2=>true;true<3=>1<3=>true;3<2=>true;false<1=>0<1=>true;复制代码 
 と同等です。答え: [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 サイトの他の関連記事を参照してください。