JS夯實基礎：Javascript 變态題解析 (上)

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

1、知識點：

Array/map
Number/parseInt
Global_Objects/parseInt
JavaScript parseInt

　　首先，map接受兩個參數，一個回調函數 callback，一個回調函數的this值。其中，回調函數接受三個參數 currentValue、index、arrary（目前值，索引，整個數組）；而題目中，map隻傳入了回調函數：parseInt。

　　其次，parseInt 隻接受兩個兩個參數 string、radix(基數)。是以這string就相當于參數currentValue，radix就相當于參數index

//是以本題即問
parseInt('1', 0);
parseInt('2', 1);
parseInt('3', 2);

//首先後兩者參數不合法。其中0,1,2就是索引index
//是以答案是 [1, NaN, NaN]

　　了解本題最主要是要知道：（1）map的回調函數的3個參數含義；（2）parseInt隻能接受2個參數，及參數含義

[typeof null, null instanceof Object]

2、兩個知識點：

Operators/typeof
Operators/instanceof
Operators/instanceof(中)

　　typeof 傳回一個表示類型的字元串。

　　instanceof 運算符用來檢測 constructor.prototype 是否存在于參數 object 的原型鍊上。

　　這個題比較簡單，答案就是： ["object", false]。typeof 的結果請看下表：

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

3、知識點：

Array/Reduce

　　arr.reduce(callback[, initialValue])

　　reduce接受兩個參數，一個回調，一個初始值。

　　回調函數接受四個參數

previousValue, currentValue, currentIndex, array

　　需要注意的是

If the array is empty and no initialValue was provided, TypeError would be thrown.

　　是以第二個表達式會報異常。第一個表達式等價于

Math.pow(3, 2) => 9; Math.pow(9, 1) =>9

　　答案

an error

　　注意：reduce和map打出來的參數不一樣。相當于數組[3,2,1]完全成為了回調函數的參數，然後回調函數Math.pow(3,2)=9，再作為

previousValue參數傳給回調函數。那麼第二行的currentValue=1是怎麼回事呢？我們再驗證下：

　　也就是說

previousValue

就是索引0的值，索引從1開始，然後

currentValue就是目前數組的索引的值。然後依次往下，了解這點比較重要。

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

4、兩個知識點：

Operators/Operator_Precedence
Operators/Conditional_Operator

　　簡而言之

的優先級大于

　　是以原題等價于

'Value is true' ? 'Somthing' : 'Nonthing'

而不是

'Value is' + (true ? 'Something' : 'Nonthing')

'Something'。雖然這道題都可以答對，但是真正含義不一定都清楚。

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

5、這個相對簡單, 一個知識點：

Hoisting

　　在 JavaScript中， functions 和 variables 會被提升。變量提升是JavaScript将聲明移至作用域 scope (全局域或者目前函數作用域) 頂部的行為。

　　這個題目相當于：

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

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

6、一個知識點：

Infinity

　　在JS裡，Math.pow(2,53)是可以表示最大值的，最大值加1還是最大值，是以循環不會停。

　　JS中可以表示的最大整數不是2的53次方，而是1.7976931348623157e+308。2的53次方不是js能表示的最大整數而應該是能正确計算且不失精度的最大整數，可以參見js權威指南。9007199254740992 +1還是 9007199254740992 ，這就是因為精度問題，如果 9007199254740992 +11或者 9007199254740992 +111的話，值是會發生改變的，隻是這時候計算的結果不是正确的值，就是因為精度丢失的問題。

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

7、知識點：filter用法和密集數組、稀松數組差別

　　我們來看一下 Array.prototype.filter 的 polyfill：

if (!Array.prototype.filter) {
  Array.prototype.filter = function(fun/*, thisArg*/) {
    'use strict';

    if (this === void 0 || this === null) {
      throw new TypeError();
    }

    var t = Object(this);
    var len = t.length >>> 0;
    if (typeof fun !== 'function') {
      throw new TypeError();
    }

    var res = [];
    var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
    for (var i = 0; i < len; i++) {
      if (i in t) { // 注意這裡!!!
        var val = t[i];
        if (fun.call(thisArg, val, i, t)) {
          res.push(val);
        }
      }
    }

    return res;
  };
}

　　我們看到在疊代這個數組的時候，首先檢查了這個索引值是不是數組的一個屬性，那麼我們測試一下：

3 in ary; => false
10 in ary; => true

　　也就是說從 3 - 9 都是沒有初始化的'坑'!這些索引并不存在與數組中，在 array 的函數調用的時候是會跳過這些'坑'的。

　　雖然length=9，但是真正元素隻有4個。是以答案是：[]

var two   = 0.2
var one   = 0.1
var eight = 0.8
var six   = 0.6
[two - one == one, eight - six == two]

　　此外，map也是如此：

8、一個知識點：

JavaScript的設計缺陷?浮點運算：0.1 + 0.2 != 0.3

　　IEEE 754标準中的浮點數并不能精确地表達小數。那什麼時候精準, 什麼時候不經準呢? 筆者也不知道。答案

[true, false]

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'));

9、兩個知識點:

Statements/switch
String

　　switch 是嚴格比較，String 執行個體和字元串不一樣：

var s_prim = 'foo';
var s_obj = new String(s_prim);

console.log(typeof s_prim); // "string"
console.log(typeof s_obj);  // "object"
console.log(s_prim === s_obj); // false

　　是以答案是：

'Do not know!'

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'));

10、知識點：

String(x) does not create an object but does return a string, i.e. typeof String(1) === "string"

　　還是剛才的知識點，隻不過 String 不僅是個構造函數，直接調用傳回一個字元串哦。是以答案：

'Case A'

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);

11、一個知識點

Arithmetic_Operators#Remainder

　　此題等價于

7 % 2 => 1
4 % 2 => 0
'13' % 2 => 1
-9 % % 2 => -1
Infinity % 2 => NaN

　　需要注意的是餘數的正負号随第一個操作數。答案

[true, true, true, false, false]

Array.isArray( Array.prototype )

12、一個知識點：

Array/prototype

　　Little known fact:

Array.prototype

itself is an Array：一個鮮為人知的實事:

Array.prototype => []

;是以答案是true

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

13、知識點：

　　更新通過一張簡單的圖，讓你徹底地、永久地搞懂JS的==運算非常不錯的一篇文章!

Boolean([0]) === true
[0] == true

true 轉換為數字 => 1
[0] 轉化為數字失敗，轉化為字元串 '0'，轉化成數字 => 0
0 !== 1

　　答案

：false

[]==[]

14、[] 是Object，兩個 Object 不相等。答案是

false

Number.MIN_VALUE > 0

15、知識點：

　　MIN_VALUE 屬性是 JavaScript 中可表示的最小的數（接近 0 ，但不是負數），它的近似值為 5 x 10-324。是以答案是true

JS夯實基礎：Javascript 變态題解析 (上)

繼續閱讀

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

開源按鍵元件Multi_Button的使用,含測試工程

layui多任務上傳添加進度條