JavaScript填坑史

2024年5月1日 108次阅读 来源: damonare

申明：  这是笔者日常平凡积聚的一些以为比较有意思或是比较有难度的JavaScript题目明白和心得，会坚持历久更新。

1.setTimeout和setInterval深切明白

在setTimeout和setInterval深切明白这篇博客里笔者曾做过总结，我们晓得JavaScript试单线程的产品，两个函数就是利用了插进去代码的体式格局完成了伪异步，和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) {} 
}

你以为这段代码的实行效果是什么呢？答案是，alert永久不会涌现。
    这是为何呢？由于，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,?,?,?

//问:三行a,b,c的输出离别是什么？

这是一道异常典范的JS闭包题目。个中嵌套了三层fun函数，搞清楚每层fun的函数是谁人fun函数尤为主要。

//答案：
//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)//求输出效果

  起首, map接收两个参数, 一个回调函数 callback, 一个回调函数的this值
个中回调函数接收三个参数 currentValue, index, arrary;而题目中, map只传入了回调函数–parseInt.其次, parseInt 只接收两个两个参数 string, radix(基数). radix的正当区间是2-36. 0或是默许是10.所以本题即问

parseInt('1', 0);
parseInt('2', 1);
parseInt('3', 2);

后二者参数不正当.所以答案是：[1, NaN, NaN]；

4. 0.1+0.2!=0.3和9999999999999999 == 10000000000000000;

依据言语范例，JavaScript 采纳“IEEE 754 规范定义的双精度64位花样”（”double-precision 64-bit format IEEE 754 values”）示意数字。据此我们能获得一个风趣的结论，和其他编程言语（如 C 和 Java）差别，JavaScript 不辨别整数值和浮点数值，一切数字在 JavaScript 中均用浮点数值示意，所以在举行数字运算的时刻要特别注意。精度丧失看看下面的例子:

0.1 + 0.2 = 0.30000000000000004

在详细完成时，整数值通常被视为32位整型变量，在一般完成（如某些浏览器）中也以32位整型变量的情势举行存储，直到它被用于实行某些32位整型不支持的操纵，这是为了便于举行位操纵。大整数精度在2的53次方之内是不会丧失的，也就是说浏览器能准确盘算Math.pow(2,53)之内一切的数，小数精度，当十进制小数的二进制示意的有限数字不凌驾 52 位时，在 JavaScript 里也是能够准确存储的。\

解决办法：Math.round( (.1+.2)*100)/100;

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

  此题会让人误以为是2>1&&2<3,着实不是的，这个题等价于

1<2=>true;
true<3=>1<3=>true;
3<2=>true;
false<1=>0<1=>true;

答案：[true,true]
  这个题的重点是关于运算符的明白，一是javascript关于差别范例数值的比较划定规矩，详见js比较表,javascript相称性推断；二是关于比较操纵符和赋值运算符的明白，即一个自左向右一个自右向左~

6. 浏览器懵逼史（1）

3.tostring;
3..toString;
3...toString;

这个题觉得脑洞很大啊~先说答案：error,’3′,error;
可假如是

var a=3;
a.toString;

却又正当了答案就是’3′;
为啥呢？
由于在JS中1.1,1.,.1都是正当数字啊！那末在剖析3.toString的时刻究竟是这是个数字呢，照样要领挪用呢？浏览器就懵逼了呗，只能抛出一个error,所以说觉得此题就是在戏耍浏览器……

7. 声明提拔

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

答案是什么呢…笔者第一次做的时刻傻傻的以为是Hello,world…实则不然，准确答案是:Goodbye Jack;
为何呢，声明提拔…上述代码相当于下面的代码：

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 就是 arguments[2], 所以关于 c 的修正就是对 arguments[2] 的修正.
所以答案是 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’]

    原文作者：damonare
    原文地址: https://segmentfault.com/a/1190000005710817
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞