(轉)44 道 JavaScript 難題

JavaScript Puzzlers原文

1. ["1", "2", "3"].map(parseInt)

  1.  
    答案:[ 1, NaN, NaN]
  2.  
    解析: parseInt (val, radix) :兩個參數,val值,radix基數(就是多少進制轉換)
  3.  
    map 能傳進回調函數 3參數 (element, index, array)
  4.  
    parseInt('1', 0); //0表明10進制
  5.  
    parseInt('2', 1); //沒有1進制,不合法
  6.  
    parseInt('3', 2); //2進制根本不會有3
  7.  
    鞏固:[ "1", "1", "11","5"].map(parseInt) //[1, NaN, 3, NaN]

2. [typeof null, null instanceof Object]

  1.  
    答案:[ "object", false]
  2.  
    解析: null表明空對象指針,因此typeof判斷成一個對象。能夠說JS設計上的一個BUG
  3.  
    instanceof 實際上判斷的是對象上構造函數,null是空固然不可能有構造函數
  4.  
    鞏固: null == undefined //true null === undefined //flase

3. [ [3,2,1].reduce(Math.pow), [].reduce(Math.pow) ]

  1.  
    答案:an error
  2.  
    解析: Math.pow (x , y) x 的 y 次冪的值
  3.  
    reduce(fn,total)
  4.  
    fn (total, currentValue, currentIndex, arr)
  5.  
    若是一個函數不傳初始值,數組第一個組默認爲初始值.
  6.  
    [ 3,2,1].reduce(Math.pow)
  7.  
    Math.pow(3,2) //9
  8.  
    Math.pow(9,1) //9
  9.  
    [].reduce( Math.pow) //空數組會報TypeError
  10.  
    鞏固:[ 1].reduce(Math.pow) //只有初始值就不會執行回調函數,直接返回1
  11.  
    [].reduce( Math.pow,1) //只有初始值就不會執行回調函數,直接返回1
  12.  
    [ 2].reduce(Math.pow,3) //傳入初始值,執行回調函數,返回9

4.

  1.  
    var val = 'smtg';
  2.  
    console.log( 'Value is ' + (val === 'smtg') ? 'Something' : 'Nothing');

這段代碼的執行結果?javascript

  1.  
    答案:Something
  2.  
    解析:字符串鏈接比三元運算有更高的優先級
  3.  
    因此原題等價於 'Value is true' ? 'Somthing' : 'Nonthing'
  4.  
    而不是 'Value is' + (true ? 'Something' : 'Nonthing')
  5.  
    鞏固:等我有空總結一下

5.

  1.  
    var name = 'World!';
  2.  
    ( function () {
  3.  
    if (typeof name === 'undefined') {
  4.  
    var name = 'Jack';
  5.  
    console.log('Goodbye ' + name);
  6.  
    } else {
  7.  
    console.log('Hello ' + name);
  8.  
    }
  9.  
    })();

這段代碼的執行結果?java

  1.  
    答案:Goodbye Jack
  2.  
    解析:( 1)typeof時 name變量提高。 在函數內部之聲明未定義
  3.  
    2)typeof優先級高於===
  4.  
    鞏固:
  5.  
    var str = 'World!';
  6.  
    ( function (name) {
  7.  
    if (typeof name === 'undefined') {
  8.  
    var name = 'Jack';
  9.  
    console.log('Goodbye ' + name);
  10.  
    } else {
  11.  
    console.log('Hello ' + name);
  12.  
    }
  13.  
    })(str);
  14.  
    答案:Hello World 由於name已經變成函數內局部變量

6.

  1.  
    var END = Math.pow(2, 53);
  2.  
    var START = END - 100;
  3.  
    var count = 0;
  4.  
    for (var i = START; i <= END; i++) {
  5.  
    count++;
  6.  
    }
  7.  
    console.log( count);

這段代碼的執行結果?es6

  1.  
    答案:other ,不是 101
  2.  
    解析:js中能夠表示的最大整數不是 2的53次方,而是1.7976931348623157e+308。2的53次方不是js能表示的最大整數而應該是能正確計算且不失精度的最大整數,
  3.  
    鞏固:
  4.  
    var END = 1234567635;
  5.  
    var START = END - 1024;
  6.  
    var c = count = 0;
  7.  
    for (var i = START; i <= END; i++) {
  8.  
    c = count++;
  9.  
    }
  10.  
    console.log( count); //1025
  11.  
    console.log( c); //1024

7.

  1.  
    var ary = [0,1,2];
  2.  
    ary[ 10] = 10;
  3.  
    ary.filter( function(x) { return x === undefined;});

這段代碼的執行結果?web

  1.  
    答案:[]
  2.  
    解析:filter() 不會對空數組進行檢測。會跳過那些空元素
  3.  
    鞏固:
  4.  
    var ary = [0,1,2,undefined,undefined,undefined,null];
  5.  
    ary.filter( function(x) { return x === undefined;});
  6.  
    // [undefined, undefined, undefined]

8.

  1.  
    var two = 0.2
  2.  
    var one = 0.1
  3.  
    var eight = 0.8
  4.  
    var six = 0.6
  5.  
    [ two - one == one, eight - six == two]

這段代碼的執行結果?chrome

  1.  
    答案:[ true, false]
  2.  
    解析:IEEE 754標準中的浮點數並不能精確地表達小數
  3.  
    鞏固: var two = 0.2;
  4.  
    var one = 0.1;
  5.  
    var eight = 0.8;
  6.  
    var six = 0.6;
  7.  
    ( eight - six ).toFixed( 4) == two
  8.  
    //true

9.

  1.  
    function showCase(value) {
  2.  
    switch(value) {
  3.  
    case 'A':
  4.  
    console.log('Case A');
  5.  
    break;
  6.  
    case 'B':
  7.  
    console.log('Case B');
  8.  
    break;
  9.  
    case undefined:
  10.  
    console.log('undefined');
  11.  
    break;
  12.  
    default:
  13.  
    console.log('Do not know!');
  14.  
    }
  15.  
    }
  16.  
    showCase( new String('A'));

這段代碼的執行結果?數組

  1.  
    答案: Do not know!
  2.  
    解析: new String(x)是個對象
  3.  
    鞏固:下一題

10.

  1.  
    function showCase2(value) {
  2.  
    switch(value) {
  3.  
    case 'A':
  4.  
    console.log('Case A');
  5.  
    break;
  6.  
    case 'B':
  7.  
    console.log('Case B');
  8.  
    break;
  9.  
    case undefined:
  10.  
    console.log('undefined');
  11.  
    break;
  12.  
    default:
  13.  
    console.log('Do not know!');
  14.  
    }
  15.  
    }
  16.  
    showCase2( String('A'));

這段代碼的執行結果?瀏覽器

  1.  
    答案: Case A
  2.  
    解析: String('A')就是返回一個字符串

11.

  1.  
    function isOdd(num) {
  2.  
    return num % 2 == 1;
  3.  
    }
  4.  
    function isEven(num) {
  5.  
    return num % 2 == 0;
  6.  
    }
  7.  
    function isSane(num) {
  8.  
    return isEven(num) || isOdd(num);
  9.  
    }
  10.  
    var values = [7, 4, '13', -9, Infinity];
  11.  
    values.map(isSane);

這段代碼的執行結果?app

  1.  
    答案:[ true, true, true, false, false]
  2.  
    解析:%若是不是數值會調用 Number()去轉化
  3.  
    '13' % 2 // 1
  4.  
    Infinity % 2 //NaN Infinity 是無窮大
  5.  
    -9 % 2 // -1
  6.  
    鞏固: 9 % -2 // 1 餘數的正負號隨第一個操做數

12.

  1.  
    parseInt(3, 8)
  2.  
    parseInt(3, 2)
  3.  
    parseInt(3, 0)

這段代碼的執行結果?函數

  1.  
    答案: 3 NaN 3
  2.  
    解析: 2進制不可能有3

13.

Array.isArray( Array.prototype ) 

這段代碼的執行結果?ui

  1.  
    答案: true
  2.  
    解析: Array.prototype是一個數組
  3.  
    數組的原型是數組,對象的原型是對象,函數的原型是函數

14.

  1.  
    var a = [0];
  2.  
    if ([0]) {
  3.  
    console.log(a == true);
  4.  
    } else {
  5.  
    console.log("wut");
  6.  
    }

這段代碼的執行結果?

  1.  
    答案: false
  2.  
    解析:[ 0]的boolean值是true
  3.  
    鞏固:a[ 0] 的boolean是 false

15.[]==[]

  1.  
    答案: false
  2.  
    解析:兩個引用類型, ==比較的是引用地址
  3.  
    鞏固:[]== ![]
  4.  
    ( 1)! 的優先級高於== ,右邊運算結果等於 false
  5.  
    ( 2)一個引用類型和一個值去比較 把引用類型轉化成值類型,左邊0
  6.  
    ( 3)因此 0 == false 答案是true

16.

  1.  
    '5' + 3
  2.  
    '5' - 3

這段代碼的執行結果?

  1.  
    答案:53 2
  2.  
    解析:加號有拼接功能,減號就是邏輯運算

17. 1 + - + + + - + 1

  1.  
    答案:2
  2.  
    解析:+-又表明正負號, 負負得正。

18.

  1.  
    var ary = Array(3);
  2.  
    ary[ 0]=2
  3.  
    ary.map( function(elem) { return '1'; });

這段代碼的執行結果?

  1.  
    答案:[ "1", empty × 2]
  2.  
    解析:如過沒有值,map會跳過不會執行回調函數

19.

  1.  
    function sidEffecting(ary) {
  2.  
    ary[ 0] = ary[2];
  3.  
    }
  4.  
    function bar(a,b,c) {
  5.  
    c = 10
  6.  
    sidEffecting( arguments);
  7.  
    return a + b + c;
  8.  
    }
  9.  
    bar( 1,1,1)

這段代碼的執行結果?

  1.  
    答案: 21,
  2.  
    解析: arguments會和函數參數綁定。
  3.  
    但若是es6付給初始值則沒法修改
  4.  
    function sidEffecting(ary) {
  5.  
    ary[ 0] = ary[2];
  6.  
    }
  7.  
    function bar(a=1,b,c) {
  8.  
    c = 10
  9.  
    sidEffecting( arguments);
  10.  
    return a + b + c;
  11.  
    }
  12.  
    bar( 1,1,1)
  13.  
    //12

20.

  1.  
    var a = 111111111111111110000,
  2.  
    b = 1111;
  3.  
    a + b;

這段代碼的執行結果?

  1.  
    答案: 11111111111111111000
  2.  
    解析:在JavaScript中number類型在JavaScript中以 64位(8byte)來存儲。這64位中有符號位1位、指數位11位、實數位52位。2的53次方時,是最大值。其值爲:9007199254740992(0x20000000000000)。超過這個值的話,運算的結果就會不對.

21.

  1.  
    var x = [].reverse;
  2.  
    x();

這段代碼的執行結果?

  1.  
    答案: window
  2.  
    解析:但在chrome上執行報錯,沒太懂

22.Number.MIN_VALUE > 0

  1.  
    答案: true
  2.  
    解析:MIN_VALUE 屬性是 JavaScript 中可表示的最小的數(接近 0 ,但不是負數)。它的近似值爲 5 x 10-324。

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

  1.  
    答案:[ true,true]
  2.  
    解析: 1 < 2 => true;
  3.  
    true < 3 => 1 < 3 => true;
  4.  
     
  5.  
    3 < 2 => false;
  6.  
    false < 1 => 0 < 1 => true;

24.2 == [[[2]]]

  1.  
    答案: true
  2.  
    解析:值和引用類型去比較,把引用類型轉話成值類型
  3.  
    [ [[2]]])//2

25.

  1.  
    3 .toString()
  2.  
    3. .toString()
  3.  
    3.. .toString()

這段代碼的執行結果?

  1.  
    答案: error, "3", error
  2.  
    解析:由於在 js 中 1.1, 1., .1 都是合法的數字. 那麼在解析 3.toString 的時候這個 . 究竟是屬於這個數字仍是函數調用呢? 只能是數字, 由於3.合法啊!

26.

  1.  
    ( function(){
  2.  
    var x = y = 1;
  3.  
    })();
  4.  
    console.log(y);
  5.  
    console.log(x);

這段代碼的執行結果?

  1.  
    答案: 1, error
  2.  
    解析:y 被賦值成全局變量,等價於
  3.  
    y = 1 ;
  4.  
    var x = y;

27.

  1.  
    var a = /123/,
  2.  
    b = /123/;
  3.  
    a == b
  4.  
    a === b

這段代碼的執行結果?

  1.  
    答案: false, false
  2.  
    解析:正則是對象,引用類型,相等(==)和全等(===)都是比較引用地址

28.

  1.  
    var a = [1, 2, 3],
  2.  
    b = [ 1, 2, 3],
  3.  
    c = [1, 2, 4]
  4.  
    a == b
  5.  
    a === b
  6.  
    a > c
  7.  
    a < c

這段代碼的執行結果?

  1.  
    答案: false, false, false, true
  2.  
    解析:相等(==)和全等(===)仍是比較引用地址
  3.  
    引用類型間比較大小是按照字典序比較,就是先比第一項誰大,相同再去比第二項。

29.

  1.  
    var a = {}, b = Object.prototype;
  2.  
    [a.prototype === b, Object.getPrototypeOf(a) === b]

這段代碼的執行結果?

  1.  
    答案: false, true
  2.  
    解析: Object 的實例是 a,a上並無prototype屬性
  3.  
    a的__poroto__ 指向的是 Object.prototype,也就是Object.getPrototypeOf(a)。a的原型對象是b

30.

  1.  
    function f() {}
  2.  
    var a = f.prototype, b = Object.getPrototypeOf(f);
  3.  
    a === b

這段代碼的執行結果?

  1.  
    答案: false
  2.  
    解析:a是構造函數f的原型 : { constructor: ƒ}
  3.  
    b是實例f的原型對象 : ƒ () { [ native code] }

31.

  1.  
    function foo() { }
  2.  
    var oldName = foo.name;
  3.  
    foo.name = "bar";
  4.  
    [oldName, foo.name]

這段代碼的執行結果?

  1.  
    答案:[ "foo", "foo"]
  2.  
    解析:函數的名字不可變.

32."1 2 3".replace(/\d/g, parseInt)

  1.  
    答案: "1 NaN 3"
  2.  
    解析:replace() 回調函數的四個參數:
  3.  
    一、匹配項
  4.  
    二、與模式中的子表達式匹配的字符串
  5.  
    三、出現的位置
  6.  
    四、stringObject 自己 。
  7.  
    若是沒有與子表達式匹配的項,第二參數爲出現的位置.因此第一個參數是匹配項,第二個參數是位置
  8.  
    parseInt('1', 0)
  9.  
    parseInt('2', 2) //2進制中不可能有2
  10.  
    parseInt('3', 4)
  11.  
    鞏固:
  12.  
    "And the %1".replace(/%([1-8])/g,function(match,a , b ,d){
  13.  
    console.log(match +" "+ a + " "+ b +" "+d )
  14.  
    });
  15.  
    //%1 1 8 And the %1

33.

  1.  
    function f() {}
  2.  
    var parent = Object.getPrototypeOf(f);
  3.  
    f.name // ?
  4.  
    parent.name // ?
  5.  
    typeof eval(f.name) // ?
  6.  
    typeof eval(parent.name) // ?

這段代碼的執行結果?

  1.  
    答案: "f", "Empty", "function", error
  2.  
    解析:f的函數名就是f
  3.  
    parent是f原型對象的名字爲 "" ,
  4.  
    先計算 eval(f.name) 爲 f,f的數據類型是function
  5.  
    eval(parent.name) 爲undefined, "undefined"

34.

  1.  
    var lowerCaseOnly = /^[a-z]+$/;
  2.  
    lowerCaseOnly.test( null), lowerCaseOnly.test()]

這段代碼的執行結果?

  1.  
    答案:[ true, true]
  2.  
    解析:這裏 test 函數會將參數轉爲字符串. 'nul', 'undefined' 天然都是全小寫了

35.[,,,].join(",")

  1.  
    答案: ",,"
  2.  
    解析:由於javascript 在定義數組的時候容許最後一個元素後跟一個,
  3.  
    因此這個數組長度是 3,
  4.  
    鞏固: [,, 1,].join(".").length // 3

36.

  1.  
    var a = {class: "Animal", name: 'Fido'};
  2.  
    a. class

這段代碼的執行結果?

  1.  
    答案:other
  2.  
    解析:這取決於瀏覽器。類是一個保留字,可是它被Chrome、Firefox和Opera接受爲屬性名。在另外一方面,每一個人都會接受大多數其餘保留詞( int,私有,拋出等)做爲變量名,而類是VordBoint。

37.var a = new Date("epoch")

  1.  
    答案:other
  2.  
    解析:您獲得「無效日期」,這是一個實際的日期對象(一個日期的日期爲 true)。但無效。這是由於時間內部保持爲一個數字,在這種狀況下,它是NA。
  3.  
    在chrome上是undefined
  4.  
    正確的是格式是var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

38.

  1.  
    var a = Function.length,
  2.  
    b = new Function().length
  3.  
    a === b

這段代碼的執行結果?

  1.  
    答案: false
  2.  
    解析:首先 new在函數帶()時運算優先級和.同樣因此從左向右執行
  3.  
    new Function() 的函數長度爲0
  4.  
    鞏固: function fn () {
  5.  
    var a = 1;
  6.  
    }
  7.  
    console.log(fn.length)
  8.  
    //0 fn和new Function()同樣

39.

  1.  
    var a = Date(0);
  2.  
    var b = new Date(0);
  3.  
    var c = new Date();
  4.  
    [a === b, b === c, a === c]

這段代碼的執行結果?

  1.  
    答案:[ false, false, false]
  2.  
    解析:當日期被做爲構造函數調用時,它返回一個相對於劃時代的對象( JAN 01 1970)。當參數丟失時,它返回當前日期。當它做爲函數調用時,它返回當前時間的字符串表示形式。
  3.  
    a是字符串 a === b // 數據類型都不一樣,確定是false
  4.  
    b是對象 b === c // 引用類型,比的是引用地址
  5.  
    c也是對象 a === c // 數據類型都不一樣,確定是false
  6.  
    鞏固: var a = Date(2018);
  7.  
    var b = Date(2001);
  8.  
    [a ===b ]
  9.  
    //[true] Date() 方法得到當日的日期,做爲函數調用不須要,返回的同一個字符串
  10.  
    "Tue Jun 12 2018 14:36:24 GMT+0800 (CST)" 固然若是a,b執行時間相差1秒則爲false

40.

  1.  
    var min = Math.min(), max = Math.max()
  2.  
    min < max

這段代碼的執行結果?

  1.  
    答案: false
  2.  
    解析: Math.min 不傳參數返回 Infinity, Math.max 不傳參數返回 -Infinity
  3.  
    無限集合之間不能比較大小。
  4.  
    鞏固: Number.MAX_VALUE > Number.MIN_VALUE //true

41.

  1.  
    function captureOne(re, str) {
  2.  
    var match = re.exec(str);
  3.  
    return match && match[1];
  4.  
    }
  5.  
    var numRe = /num=(\d+)/ig,
  6.  
    wordRe = /word=(\w+)/i,
  7.  
    a1 = captureOne(numRe, "num=1"),
  8.  
    a2 = captureOne(wordRe, "word=1"),
  9.  
    a3 = captureOne(numRe, "NUM=2"),
  10.  
    a4 = captureOne(wordRe, "WORD=2");
  11.  
    [a1 === a2, a3 === a4]

這段代碼的執行結果?

  1.  
    答案:[ true, false]
  2.  
    解析: /g有一個屬性叫lastIndex,每次匹配若是沒有匹配到,它將重置爲 0,若是匹配到了,他將記錄匹配的位置。咱們看一個簡單的例子吧。
  3.  
    var numRe = /num=(\d)/g;
  4.  
    numRe.test( "num=1abcwewe") //true
  5.  
    numRe.lastIndex //5 匹配到num=1後在5的索引位置
  6.  
    numRe.exec( "num=1") //fales 此次要從5的索引位置,開始匹配
  7.  
    numRe.lastIndex //0 上一次匹配失敗了numRe.lastIndex重製爲0

42.

  1.  
    var a = new Date("2014-03-19"),
  2.  
    b = new Date(2014, 03, 19);
  3.  
    [a.getDay() === b.getDay(), a.getMonth() === b.getMonth()]

這段代碼的執行結果?

  1.  
    答案:[ false, false]
  2.  
    解析: var a = new Date("2014-03-19") //可以識別這樣的字符串,返回想要的日期
  3.  
    Wed Mar 19 2014 08:00:00 GMT+0800 (CST)
  4.  
    b = new Date(2014, 03, 19); //參數要按照索引來
  5.  
    Sat Apr 19 2014 00:00:00 GMT+0800 (CST)
  6.  
    月是從 0索引,日期是從1
  7.  
    getDay()是獲取星期幾
  8.  
    getMonth()是獲取月份因此都不一樣
  9.  
    鞏固: [a.getDate() === b.getDate()] //true

43.

  1.  
    if ('http://giftwrapped.com/picture.jpg'.match('.gif')) {
  2.  
    'a gif file'
  3.  
    } else {
  4.  
    'not a gif file'
  5.  
    }

這段代碼的執行結果?

  1.  
    答案: 'a gif file'
  2.  
    解析: String.prototype.match 接受一個正則, 若是不是, 按照 new RegExp(obj) 轉化. 因此 . 並不會轉義 。 那麼 /gif 就匹配了 /.gif/
  3.  
    鞏固: if ('http://giftwrapped.com/picture.jpg'.indexOf('.gif')) {
  4.  
    'a gif file'
  5.  
    } else {
  6.  
    'not a gif file'
  7.  
    }
  8.  
    //'a gif file' 一樣的道理
相關文章
相關標籤/搜索