コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 騙されやすい JavaScript の問題

騙されやすい JavaScript の問題

hzc
リリース： 2020-06-28 09:50:23
転載
2257 人が閲覧しました

前書き

要約: これは、私が蓄積した、より興味深い、または難しいと思ういくつかの 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. クロージャの予備調査

このブログでは、「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,?,?,?
ログイン後にコピー

//質問: 3 つの行 a、b、c の出力は何ですか?

これは、非常に典型的な JS クロージャーの問題です。 fun 関数は 3 つのレベルでネストされており、各レベルの fun 関数がどの fun 関数であるかを把握することが特に重要です。

//答え:
//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

コールバック関数は、currentValue、index、array の 3 つのパラメータを受け入れます。質問では、map はコールバック関数 - parseInt のみを渡します。次に、parseInt は 2 つのパラメータ string、radix (radix) のみを受け入れます。基数は 2-36. 0 またはデフォルトは 10 です。したがって、この質問では

parseInt('1', 0);parseInt('2', 1);parseInt('3', 2);复制代码
ログイン後にコピー

最後の 2 つのパラメータは不正です。したがって、答えは次のようになります: [1, NaN, NaN];

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

言語仕様によれば、JavaScript は「IEEE 754 標準で定義された倍精度 64 ビット形式」形式を使用します。 754 値」) は数値を表します。このことから、興味深い結論を導き出すことができます。他のプログラミング言語 (C や Java など) とは異なり、JavaScript は整数値と浮動小数点値を区別しません。JavaScript ではすべての数値が浮動小数点値で表されます。したがって、数値演算を実行するときは特に注意してください。精度の損失 次の例を見てください: 

0.1 + 0.2 = 0.30000000000000004复制代码
ログイン後にコピー
特定の実装では、整数値は通常 32 ビットの整数変数として扱われます。また、個々の実装 (一部の実装など) では、整数値は通常 32 ビットの整数変数として扱われます。ブラウザ) 32 ビット整数でサポートされていない操作を実行するために使用されるまで、32 ビット整数変数として保存されます。これは、ビット操作を容易にするためです。大きな整数の精度は 2 の 53 乗以内で失われることはなく、ブラウザは Math.pow(2,53) 内のすべての数値を正確に計算できます。 10 進数ではありません。52 ビットを超える場合、JavaScript に正確に格納できます。
解決策: 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;复制代码</h3>
<p></p> と同等です。答え: [true,true]<p>この質問のポイントは、演算子の理解として、1つはJavaScriptにおける異なる型の値の比較規則、詳しくはJS比較表とJavaScriptの等価性判定を参照、もう1つは比較演算子と代入の理解です。演算子、つまり、1 つは左から右へ、もう 1 つは右からです。左に回ってください~<strong></strong>6. ブラウザの混乱の歴史 (1)</p>
<pre class="brush:php;toolbar:false">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 サイトの他の関連記事を参照してください。

関連ラベル：
javascript フロントエンド
ソース：juejin.cn
前の記事：フロントエンド JS の面接での基本的な質問 96 問 (回答を含む) 次の記事：8割以上の面接対象者が失敗するJS面接の質問
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります
から 2024-04-06 19:25:49
0
1
505
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
ベンダー固有の疑似要素上の JavaScript ホバー イベント 次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...
から 2024-04-06 15:35:24
0
1
274
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...
から 2024-04-06 12:53:11
0
1
376
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート