44-Channel JavaScript puzzle (JavaScript puzzlers!)

Source: Internet
Author: User
Tags getdate pow

JavaScript puzzlers original 1. ["1", "2", "3"].map (parseint)
答案:[1, NaN, NaN]解析:parseInt (val, radix) :两个参数,val值,radix基数(就是多少进制转换)     map 能传进回调函数 3参数 (element, index, array)     parseInt(‘1‘, 0);  //0代表10进制     parseInt(‘2‘, 1);  //没有1进制,不合法     parseInt(‘3‘, 2);  //2进制根本不会有3巩固:["1", "1", "11","5"].map(parseInt) //[1, NaN, 3, NaN]  
2. [typeof null, NULL instanceof Object]
答案:["object", false]解析:null代表空对象指针,所以typeof判断成一个对象。可以说JS设计上的一个BUG     instanceof 实际上判断的是对象上构造函数,null是空当然不可能有构造函数巩固:null == undefined //true    null === undefined //flase
3. [[3,2,1].reduce (Math.pow), [].reduce (MATH.POW)]
答案:an error解析:Math.pow (x , y)  x 的 y 次幂的值     reduce(fn,total)     fn (total, currentValue, currentIndex, arr)          如果一个函数不传初始值,数组第一个组默认为初始值.         [3,2,1].reduce(Math.pow)         Math.pow(3,2) //9         Math.pow(9,1) //9巩固:[].reduce(Math.pow)       //空数组会报TypeError     [1].reduce(Math.pow)      //只有初始值就不会执行回调函数,直接返回1     [].reduce(Math.pow,1)     //只有初始值就不会执行回调函数,直接返回1     [2].reduce(Math.pow,3)    //传入初始值,执行回调函数,返回9
4.
 var val = ‘smtg‘; console.log(‘Value is ‘ + (val === ‘smtg‘) ? ‘Something‘ : ‘Nothing‘);

What is the result of the execution of this code?

答案:Something解析:字符串连接比三元运算有更高的优先级      所以原题等价于 ‘Value is true‘ ? ‘Somthing‘ : ‘Nonthing‘      而不是 ‘Value   is‘ + (true ? ‘Something‘ : ‘Nonthing‘)巩固:    0 || fn() && fn()   //0  ||短路 ,后边不会执行啊    0 || 1 ? 2 : 3 ;    //2  那这个为什么不会短路呢?一两句话说不清,我总结了一篇文章

JavaScript operator Precedence Puzzle

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

What is the result of the execution of this code?

答案:Goodbye Jack解析:(1)typeof时 name变量提升。 在函数内部之声明未定义     (2)typeof优先级高于===巩固:    var str = ‘World!‘;       (function (name) {    if (typeof name === ‘undefined‘) {        var name = ‘Jack‘;        console.log(‘Goodbye ‘ + name);    } else {        console.log(‘Hello ‘ + name);    }    })(str);    答案:Hello World 因为name已经变成函数内局部变量
6.
var END = Math.pow(2, 53);var START = END - 100;var count = 0;for (var i = START; i <= END; i++) {    count++;}console.log(count);

What is the result of the execution of this code?

答案:other ,不是101解析:js中可以表示的最大整数不是2的53次方,而是1.7976931348623157e+308。2的53次方不是js能表示的最大整数而应该是能正确计算且不失精度的最大整数,巩固:     var END = 1234567635;     var START = END - 1024;     var c = count = 0;     for (var i = START; i <= END; i++) {        c = count++;     }     console.log(count);   //1025     console.log(c);       //1024
7.

What is the result of the execution of this code?

答案:[]解析:filter() 不会对空数组进行检测。会跳过那些空元素巩固:      var ary = [0,1,2,undefined,undefined,undefined,null];      ary.filter(function(x) { return x === undefined;});      
8.
var two   = 0.2var one   = 0.1var eight = 0.8var six   = 0.6[two - one == one, eight - six == two]

What is the result of the execution of this code?

答案:[true, false]解析:IEEE 754标准中的浮点数并不能精确地表达小数巩固:var two   = 0.2;     var one   = 0.1;     var eight = 0.8;     var six   = 0.6;     ( eight - six ).toFixed(4) == two      //true
9.
function showCase(value) {    switch(value) {    case ‘A‘:        console.log(‘Case A‘);        break;    case ‘B‘:        console.log(‘Case B‘);        break;    case undefined:        console.log(‘undefined‘);        break;    default:        console.log(‘Do not know!‘);    }}showCase(new String(‘A‘));

What is the result of the execution of this code?

答案:Do not know!解析:switch判断的是全等(===) ,new String(x)是个对象巩固:var a =  new String(‘A‘) ;      a.__proto__     // String.prototype 实例的原型指向构造函数的原型对象
10.
function showCase2(value) {    switch(value) {    case ‘A‘:        console.log(‘Case A‘);        break;    case ‘B‘:        console.log(‘Case B‘);        break;    case undefined:        console.log(‘undefined‘);        break;    default:        console.log(‘Do not know!‘);    }}showCase2(String(‘A‘));

What is the result of the execution of this code?

答案:Case A解析:String(‘A‘)就是返回一个字符串巩固: var a2 =  ‘A‘;      a2.__proto__                  // String.prototype       a1.__proto__ === a2.__proto__  // true 上一题的a.__proto__      那字符串不是对象为啥也指向String.prototype?解析:b是基本类型的值,逻辑上不应该有原型和方法。为了便于操作,有一种特殊的引用类型(基本包装类型)String。其实读取时,后台会自动完成下面的操作:      var str = new String("A"); //创建实例      str.__proto__;             //调用指定属性和方法      str = null;                //销毁实例      所以 a1.__proto__ === a2.__proto__      但注意基本包装类型特殊就在于它对象(str)的生命周期,只存在于一行代码(a1.__proto__ === a2.__proto__)的执行瞬间。      这也就解释了为啥字符串也能操作属性和方法但不能添加。基本包装类型有三个(String,Number,Boolean)     (详情请看《js高程》 5.6基本包类型 P119)
11.
function isOdd(num) {    return num % 2 == 1;}function isEven(num) {    return num % 2 == 0;}function isSane(num) {    return isEven(num) || isOdd(num);}var values = [7, 4, ‘13‘, -9, Infinity];values.map(isSane);

What is the result of the execution of this code?

答案:[true, true, true, false, false]解析:%如果不是数值会调用Number()去转化     ‘13‘ % 2       // 1      Infinity % 2  //NaN  Infinity 是无穷大      -9 % 2        // -1巩固: 9 % -2        // 1   余数的正负号随第一个操作数
12.
parseInt(3, 8)parseInt(3, 2)parseInt(3, 0)

What is the result of the execution of this code?

答案:3  NaN  3解析:2进制不可能有3
13.
Array.isArray( Array.prototype )

What is the result of the execution of this code?

答案:true解析:Array.prototype是一个数组     数组的原型是数组,对象的原型是对象,函数的原型是函数
14.
var a = [0];if ([0]) {  console.log(a == true);} else {  console.log("wut");}

What is the result of the execution of this code?

答案:false解析:[0]的boolean值是true巩固:a[0] 的boolean是 false
15.[]==[]
答案:false解析:两个引用类型, ==比较的是引用地址巩固:[]== ![]      (1)! 的优先级高于== ,右边运算结果等于 false     (2)一个引用类型和一个值去比较 把引用类型转化成值类型,左边0     (3)所以 0 == false  答案是true
16.
‘5‘ + 3‘5‘ - 3

What is the result of the execution of this code?

答案:53  2解析:加号有拼接功能,减号就是逻辑运算巩固:typeof (+"1")   // "number" 对非数值+—常被用来做类型转换相当于Number()
17.1 +-+ + +-+ 1
答案:2解析:+-又是一元加和减操作符号,就是数学里的正负号。负负得正哈。 巩固: 一元运算符还有一个常用的用法就是将自执行函数的function从函数声明变成表达式。      常用的有 + - ~ ! void      + function () { }      - function () { }      ~ function () { }      void function () { }
18.
var ary = Array(3);ary[0]=2ary.map(function(elem) { return ‘1‘; });

What is the result of the execution of this code?

答案:["1", empty × 2]解析:如过没有值,map会跳过不会执行回调函数
19.
function sidEffecting(ary) {  ary[0] = ary[2];}function bar(a,b,c) {  c = 10  sidEffecting(arguments);  

What is the result of the execution of this code?

答案:21, 解析:arguments会和函数参数绑定。巩固:但如果es6付给初始值则无法修改      function sidEffecting(ary) {        ary[0] = ary[2];      }      function bar(a=1,b,c) {        c = 10        sidEffecting(arguments);        return a + b + c;    }       bar(1,1,1)       //12
20.
var a = 111111111111111110000,b = 1111;a + b;

What is the result of the execution of this code?

答案:11111111111111111000解析:在JavaScript中number类型在JavaScript中以64位(8byte)来存储。这64位中有符号位1位、指数位11位、实数位52位。2的53次方时,是最大值。其值为:9007199254740992(0x20000000000000)。超过这个值的话,运算的结果就会不对.
21st.
var x = [].reverse;x();

What is the result of the execution of this code?

答案:window解析:但在chrome上执行报错,没太懂
22.number.min_value > 0
答案:true解析:MIN_VALUE 属性是 JavaScript 中可表示的最小的数(接近 0 ,但不是负数)。它的近似值为 5 x 10-324。
23.[1 < 2 < 3, 3 < 2 < 1]
答案:[true,true]解析: 1 < 2    =>  true;      true < 3 =>  1 < 3 => true;            3 < 2     => false;      false < 1 => 0 < 1 => true;
24.2 = = [[[2]]]
答案:true解析:值和引用类型去比较,把引用类型转话成值类型     [[[2]]])//2巩固:++[[]][+[]]+[+[]] //"10"     (1)(++([[]][+[]])) + [+[]]  //这步看不懂看4题下面的文章,就是运算符权重判断     (2)(++([[]][0])) + [0]      // 16题中我们讲过+用来做类型转换Number([]) ===0     (3)+([] + 1) + [0]            //[[]]数组的第0项就是[],++代表自增+1       *******  注意这一步不是 (++[]) + [0] 这样是错误的   **********     (4)+([] + 1) + [0]           // 前面+将"1"转成数字1 后边,+是拼接 "0" 所以是字符串"10"      这题的详细解释在下面的链接中。高票答案解释的非常赞,推荐阅读
The consolidated question is explained in detail in stackoverflow25.
3.toString()3..toString()3...toString()

What is the result of the execution of this code?

答案:error, "3", error解析:因为在 js 中 1.1, 1., .1 都是合法的数字. 那么在解析 3.toString 的时候这个 . 到底是属于这个数字还是函数调用呢? 只能是数字, 因为3.合法啊!
26.
(function(){  var x = y = 1;})();console.log(y);console.log(x);

What is the result of the execution of this code?

答案:1, error解析:y 被赋值成全局变量,等价于     y = 1 ;     var x = y;
27.
var a = /123/,b = /123/;a == ba === b

What is the result of the execution of this code?

答案:false, false解析:正则是对象,引用类型,相等(==)和全等(===)都是比较引用地址
28.
var a = [1, 2, 3],b = [1, 2, 3],c = [1, 2, 4]a ==  ba === ba >   ca <   c

What is the result of the execution of this code?

答案:false, false, false, true解析:相等(==)和全等(===)还是比较引用地址     引用类型间比较大小是按照字典序比较,就是先比第一项谁大,相同再去比第二项。
29.
var a = {}, b = Object.prototype;[a.prototype === b, Object.getPrototypeOf(a) === b]    

What is the result of the execution of this code?

答案:false, true解析:Object 的实例是 a,a上并没有prototype属性     a的__poroto__ 指向的是Object.prototype,也就是Object.getPrototypeOf(a)。a的原型对象是b
30.
function f() {}var a = f.prototype, b = Object.getPrototypeOf(f);a === b         

What is the result of the execution of this code?

答案:false解析:a是构造函数f的原型 : {constructor: ?}     b是实例f的原型对象 : ? () { [native code] }
31.
function foo() { }var oldName = foo.name;foo.name = "bar";[oldName, foo.name]     

What is the result of the execution of this code?

答案:["foo", "foo"]解析:函数的名字不可变.
"1 2 3". Replace (/\d/g, parseint)
答案:"1 NaN 3"解析:replace() 回调函数的四个参数:      1、匹配项        2、与模式中的子表达式匹配的字符串        3、出现的位置        4、stringObject 本身 。如果没有与子表达式匹配的项,第二参数为出现的位置.所以第一个参数是匹配项,第二个参数是位置 parseInt(‘1‘, 0) parseInt(‘2‘, 2)  //2进制中不可能有2 parseInt(‘3‘, 4)巩固:   "And the %1".replace(/%([1-8])/g,function(match,a , b ,d){      console.log(match +"  "+ a + " "+ b +" "+d )    });   //%1  
33.
function f() {}var parent = Object.getPrototypeOf(f);f.name // ?parent.name // ?typeof eval(f.name) // ?typeof eval(parent.name) //  ?  

What is the result of the execution of this code?

答案:"f", "Empty", "function", error解析:f的函数名就是f     parent是f原型对象的名字为"" ,     先计算eval(f.name) 为 f,f的数据类型是function     eval(parent.name) 为undefined, "undefined"
34.
var lowerCaseOnly =  /^[a-z]+$/;lowerCaseOnly.test(null), lowerCaseOnly.test()]

What is the result of the execution of this code?

答案:[true, true]解析:这里 test 函数会将参数转为字符串. ‘nul‘, ‘undefined‘ 自然都是全小写了
35.[,,,].join (",")
答案:",,"解析:因为javascript 在定义数组的时候允许最后一个元素后跟一个,     所以这个数组长度是3,巩固: [,,1,].join(".").length //  
36.
var a = {class: "Animal", name: ‘Fido‘};a.class   

What is the result of the execution of this code?

答案:other解析:这取决于浏览器。类是一个保留字,但是它被Chrome、Firefox和Opera接受为属性名。在另一方面,每个人都会接受大多数其他保留词(int,私有,抛出等)作为变量名,而类是VordBoint。
37.var a = new Date ("Epoch")
答案:other解析:您得到“无效日期”,这是一个实际的日期对象(一个日期的日期为true)。但无效。这是因为时间内部保持为一个数字,在这种情况下,它是NA。      在chrome上是undefined       正确的是格式是var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);
38.
var a = Function.length,b = new Function().lengtha === b

What is the result of the execution of this code?

答案:false解析:首先new在函数带()时运算优先级和.一样所以从左向右执行     new Function() 的函数长度为0巩固:function fn () {         var a = 1;      }      console.log(fn.length)       //0 fn和new Function()一样
39.
var a = Date(0);var b = new Date(0);var c = new Date();[a === b, b === c, a === c]

What is the result of the execution of this code?

答案:[false, false, false]解析:当日期被作为构造函数调用时,它返回一个相对于划时代的对象(JAN 01 1970)。当参数丢失时,它返回当前日期。当它作为函数调用时,它返回当前时间的字符串表示形式。a是字符串   a === b // 数据类型都不同,肯定是falseb是对象     b === c // 引用类型,比的是引用地址c也是对象   a === c // 数据类型都不同,肯定是false巩固:  var a = Date(2018);       var b = Date(2001);       [a ===b ]       //[true] Date() 方法获得当日的日期,作为函数调用不需要,返回的同一个字符串       "Tue Jun 12 2018 14:36:24 GMT+0800 (CST)" 当然如果a,b执行时间相差1秒则为false
40.
var min = Math.min(), max = Math.max()min < max

What is the result of the execution of this code?

答案:false解析: Math.min 不传参数返回 Infinity, Math.max 不传参数返回 -Infinity       无限集合之间不能比较大小。巩固:Number.MAX_VALUE  > Number.MIN_VALUE  //true
41.
function captureOne(re, str) {  var match = re.exec(str);  return match && match[1];}var numRe  = /num=(\d+)/ig,    wordRe = /word=(\w+)/i,    a1 = captureOne(numRe,  "num=1"),    a2 = captureOne(wordRe, "word=1"),    a3 = captureOne(numRe,  "NUM=2"),    a4 = captureOne(wordRe,  "WORD=2");[a1 === a2, a3 === a4]

What is the result of the execution of this code?

答案:[true, false]解析: /g有一个属性叫lastIndex,每次匹配如果没有匹配到,它将重置为0,如果匹配到了,他将记录匹配的位置。我们看一个简单的例子吧。        var numRe  = /num=(\d)/g;         numRe.test("num=1abcwewe") //true         numRe.lastIndex            //5     匹配到num=1后在5的索引位置         numRe.exec("num=1")        //fales 这次要从5的索引位置,开始匹配         numRe.lastIndex            //0     上一次匹配失败了numRe.lastIndex重制为0
42.
var a = new Date("2014-03-19"),b = new Date(2014, 03, 19);[a.getDay() === b.getDay(), a.getMonth() === b.getMonth()]

What is the result of the execution of this code?

答案:[false, false]解析: var a = new Date("2014-03-19")    //能够识别这样的字符串,返回想要的日期      Wed Mar 19 2014 08:00:00 GMT+0800 (CST)      b = new Date(2014, 03, 19);       //参数要按照索引来      Sat Apr 19 2014 00:00:00 GMT+0800 (CST)      月是从0索引,日期是从1       getDay()是获取星期几      getMonth()是获取月份所以都不同巩固: [a.getDate() === b.getDate()] //true
43.
 if (‘http://giftwrapped.com/picture.jpg‘.match(‘.gif‘)) {    ‘a gif file‘  } else {    ‘not a gif file‘  }

What is the result of the execution of this code?

答案:‘a gif file‘解析: String.prototype.match 接受一个正则, 如果不是, 按照 new RegExp(obj) 转化. 所以 . 并不会转义 。 那么 /gif 就匹配了 /.gif/巩固: if (‘http://giftwrapped.com/picture.jpg‘.indexOf(‘.gif‘)) {        ‘a gif file‘      } else {        ‘not a gif file‘      }      //‘a gif file‘ 同样的道理
44.
function foo(a) {  var a;  return a;}function bar(a) {    var a = ‘bye‘;    return a;}[foo(‘hello‘), bar(‘hello‘)]

What is the result of the execution of this code?

答案:["hello", "bye"]解析:最后一题很简单吧,变量声明

17 Pips
Links: Https://juejin.im/post/5b1f899fe51d4506c60e46ee
Source: Denver Nuggets
Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.

44-Channel JavaScript puzzle (JavaScript puzzlers!)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.