Home > Web Front-end > JS Tutorial > body text

Problems with JavaScript being easily tricked

hzc
Release: 2020-06-28 09:50:23
forward
2205 people have browsed it

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");
Copy after login

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

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

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
Copy after login
   var name = "The Window";
  var object = {
    name : "My Object",
    getNameFunc : function(){
      var that = this;
      return function(){
        return that.name;
      };
    }
  };  
  alert(object.getNameFunc()());//My Object
Copy after login
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,?,?,?
Copy after login

//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)//求输出结果复制代码
Copy after login

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);复制代码
Copy after login

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复制代码
Copy after login

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="6-1-" data-id="heading-7">6. The history of browser confusion (1)</h3>
<pre class="brush:php;toolbar:false">3.toString;3..toString;3...toString;复制代码
Copy after login

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

var a=3;
a.toString;复制代码
Copy after login

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);
    }
})();
Copy after login

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);
    }
})();
Copy after login

8. 坑爹史(1)

var a = [0];
if ([0]) {
  console.log(a == true);
} else {
  console.log("wut");
}
Copy after login

读者们你们觉得此题答案是什么呢?true?因为[0]被看做Boolean是被认为是true,理所当然的推出来[0]==true,控制台输出true...看似没错,然而并不是这样滴~[0]这个玩意儿在单独使用的时候是被认为是true的,但用作比较的时候它是false...所以正确答案是false;不信的话,F12控制台输出[0]==false;看是不是true......

###9. 坑爹史(2)

1 + - + + + - + 1
Copy after login

这题应该是等同于:(倒着看)

1 + (a)  => 2
a = - (b) => 1
b = + (c) => -1
c = + (d) => -1
d = + (e) => -1
e = + (f) => -1
f = - (g) => -1
g = + 1   => 1
Copy after login

答案是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)
Copy after login

此题涉及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)
Copy after login

答案是12...
请读者细细体会!!

11. 坑爹史(4)

[,,,].join(", ")
Copy after login
[,,,] => [undefined × 3]
Copy after login

因为javascript 在定义数组的时候允许最后一个元素后跟一个,, 所以这是个长度为三的稀疏数组(这是长度为三, 并没有 0, 1, 2三个属性哦)
答案: ", , "

12. 浏览器懵逼史(2)

var a = {class: "Animal", name: 'Fido'};
a.class
Copy after login

这个题比较流氓.. 因为是浏览器相关, 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();
Copy after login

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);
Copy after login

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); // 输出结果是多少?
Copy after login

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();
Copy after login

推荐教程:《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!

Related labels:
source:juejin.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!