Problems with JavaScript being easily tricked

Foreword

Summary: This is the understanding and experience of some JavaScript topics that I have accumulated that I find more interesting or difficult, and will be updated in the long term.

Don’t live your life as a woman. A hundred years of joy and sorrow will come from others.

Text

1.In-depth understanding of setTimeout and setInterval

The author has made a summary in this blog of in-depth understanding of setTimeout and setInterval. We know that JavaScript test orders The products of threads, the two functions use the method of inserting code to achieve pseudo-asynchronous, which is actually the same principle as AJAX. Let’s take a look at this example:

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

Result: The console outputs 1, 2, 3 in sequence;

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

What do you think the execution result of this code is? The answer is that the alert never appears.
Why is this? Because the while code has not been executed, the code inserted later will never be executed.
To sum up, in fact, JS is a single-threaded product after all. No matter how "asynchronous" it is, it is impossible to break through the single-thread barrier. Therefore, many "asynchronous calls" (including Ajax) are actually just "pseudo-asynchronous". As long as you understand such a concept, it may not be difficult to understand setTimeout and setInterval.

2. Preliminary exploration of closures

We have conducted a preliminary discussion in this blog: A preliminary exploration of closures in JavaScript. There are several topics that I personally find quite interesting:

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

//Question: What are the outputs of the three lines a, b, and c?

This is a very typical JS closure problem. There are three levels of fun functions nested in it. It is particularly important to figure out which fun function the fun function of each level is.

//Answer:
//a: undefined,0,0,0
//b: undefined,0,1,2
//c : undefined,0,1,1

3. Array/map,Number/parseInt

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

First, map accepts two parameters, a callback function callback, and a callback function this value
The callback function accepts three parameters currentValue, index, array; and in the question, map only passes in the callback function--parseInt. Secondly, parseInt only accepts two parameters string, radix (radix). The legal range of radix is ​​2-36. 0 or the default is 10. So this question asks

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

The latter two parameters are illegal. So the answer is: [1, NaN, NaN];

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

According to the language specification, JavaScript uses the "double-precision 64-bit format defined by the IEEE 754 standard" format IEEE 754 values") represents numbers. From this we can draw an interesting conclusion. Unlike other programming languages ​​(such as C and Java), JavaScript does not distinguish between integer values ​​and floating point values. All numbers are represented by floating point values ​​in JavaScript, so when performing numerical operations Pay special attention when doing so. Loss of precision Take a look at the following example:

0.1 + 0.2 = 0.30000000000000004复制代码

In specific implementations, integer values ​​are usually treated as 32-bit integer variables, and in individual implementations (such as some browsers) Stored as a 32-bit integer variable until it is used to perform some operation not supported by 32-bit integers, this is to facilitate bit manipulation. The precision of large integers will not be lost within 2 to the 53rd power, which means that the browser can accurately calculate all numbers within Math.pow(2,53). Decimal precision, when the finite number represented by the binary representation of a decimal decimal is not When it exceeds 52 bits, it can be stored accurately in JavaScript.
Solution: Math.round( (.1 .2)*100)/100;

5. [1<2<3,3<2<1]

This question will make people mistakenly think that it is 2>1&&2<3. In fact, it is not. This question is equivalent to

1<2=>true;true<3=>1<3=>true;3<2=>true;false<1=>0<1=>true;复制代码</h3>
<p><strong>Answer: [true,true]</strong> The key point of this question is For the understanding of operators, one is the comparison rules of different types of values ​​in javascript. For details, please see js comparison table and javascript equality judgment; the other is the understanding of comparison operators and assignment operators, that is, one from left to right and one from right. Turn to the left~</p>
<h3 id="The-history-of-browser-confusion">6. The history of browser confusion (1)</h3>
<pre class="brush:php;toolbar:false">3.toString;3..toString;3...toString;复制代码

This question feels very imaginative~ Let me tell you the answer first: error,'3',error;
But if it is

var a=3;
a.toString;复制代码

but it is legal, the answer is '3';
Why?
Because 1.1, 1.,.1 are all legal numbers in JS! So when parsing 3.toString, is this a number or a method call? The browser is confused and can only throw an error, so I feel that this question is just playing tricks on the browser...

7. Statement improvement

var name = 'World!';
(function () {
    if (typeof name === 'undefined') {
        var name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();

The answer is What... When the author did it for the first time, I foolishly thought it was Hello, world... In fact, it is not the case. The correct answer is: Goodbye Jack;
Why, the statement is promoted... The above code is equivalent to the following Code:

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教程》

The above is the detailed content of Problems with JavaScript being easily tricked. For more information, please follow other related articles on the PHP Chinese website!