Introduction détaillée à l'analyse de 44 questions anormales JavaScript

Lorsque j'ai répondu à cette série de questions, j'ai non seulement douté de mon QI, mais aussi de ma vie...

Cependant, la compréhension des connaissances de base est une condition préalable à une approfondissement programmation. Voyons si ces questions anormales sont anormales ou non !

Question 1

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

Points de connaissance :

• Tableau/carte

• Number/parseInt

• JavaScript parseInt

Tout d'abord, la carte accepte deux paramètres, une fonction de rappel rappel, la valeur this d'une fonction de rappel

La fonction de rappel accepte trois paramètres currentValue, index, array;

Et dans la question, map ne passe que dans la fonction de rappel –parseInt.

Deuxièmement, parseInt n'accepte que deux paramètres de chaîne, radix (radix).

Facultatif. Représente la base du nombre à analyser. La valeur est comprise entre 2 et 36.

Si ce paramètre est omis ou a une valeur de 0, le nombre sera analysé en base 10. S'il commence par "0x" ou "0X", ce sera en base 16.

Si l'argument est inférieur à 2 ou supérieur à 36, parseInt() renverra NaN.

Cette question est donc posée

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

Tout d'abord, les deux derniers paramètres sont illégaux.

La réponse est donc [1, NaN, NaN]

Question n°2

[typeof null, null instanceof Object]

Deux points de connaissance :

• Opérateurs/type de

• Opérateurs/instance de

• Operators/instanceof(中)

typeof renvoie une chaîne représentant le type.

l'opérateur instanceof est utilisé pour détecter si constructor.prototype Existe dans la chaîne de prototypes de l'objet paramètre

Cette question peut être consultée directement sur le lien... Parce que typeof null === 'object' est comme ça depuis le début du langage... Le les résultats de

typeof peuvent être vus dans le tableau ci-dessous :

type         result
Undefined   "undefined"
Null        "object"
Boolean     "boolean"
Number      "number"
String      "string"
Symbol      "symbol"
Host object Implementation-dependent
Function    "function"
Object      "object"

La réponse est donc [object, false]

Question 3

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

Points de connaissance :

• Array/Reduce

arr.reduce(callback[, initialValue])

reduce accepte deux paramètres, un rappel et une valeur initiale .

La fonction de rappel accepte quatre paramètres previousValue, currentValue, currentIndex, array

Il est à noter que If the array is empty and no initialValue was provided, TypeError would be thrown.

donc la deuxième expression rapportera une exception. à la réponse de la Math.pow(3, 2) => 9; Math.pow(9, 1) =>9

an error

Question 4

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

Deux points de connaissances :

• Opérateurs /Operator_Precedence

• Operators/Conditional_Operator

En bref, a une priorité plus élevée que ?

, donc la question d'origine équivaut à 'Value is true' ? 'Somthing' : 'Nonthing' au lieu de 'Value is' (true ? 'Something' : 'Nonthing')

Réponse 'Something'

Question 5

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

C'est relativement simple, un point de connaissance :

• Histing

En JavaScript, les fonctions et les variables sont hissées. Le levage de variables est le comportement de JavaScript consistant à déplacer les déclarations vers le haut de la portée (soit la portée globale, soit la portée de la fonction actuelle).

Cette question est équivalente à

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

donc la réponse est 'Goodbye Jack'

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

Un point de connaissance :

• Infini

En JS, Math.pow(2, 53) == 9007199254740992 est la valeur maximale qui peut être représentée. la valeur maximale est ajoutée. One est toujours la valeur maximale. Donc la boucle ne s'arrêtera pas

Supplémentaire : @ jelly7723

Le plus grand entier pouvant être représenté en js est. pas 2 à la puissance 53, mais 1,7976931348623157 e308.
La 53ème puissance de 2 n'est pas le plus grand entier que js peut représenter, mais le plus grand entier qui peut être calculé correctement sans perdre en précision. Veuillez vous référer au guide faisant autorité sur js.
9007199254740992 1 ou 9007199254740992, cela est dû à un problème de précision. Si 9007199254740992 11 ou 9007199254740992 111, la valeur changera, mais le résultat calculé à ce moment n'est pas la valeur correcte, en raison de la perte de précision.

Question 7

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

La réponse est []

Lisez un article pour comprendre les tableaux clairsemés

• Traduction des tableaux clairsemés et des tableaux denses en JavaScript

• Array/filter

Jetons un coup d'œil au polyfill de Array.prototype.filter :

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

On voit que lors de l'itération de ce tableau, on vérifie d'abord si la valeur d'index est un attribut du tableau, puis testons-la.

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

C'est-à-dire, de 3 à 9 sont tous des pièges non initialisés !, ces index n'existent pas dans le tableau. Ces pièges seront ignorés lorsque la fonction de tableau est appelée

Question 8

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

• Défaut de conception en JavaScript ? Arithmétique à virgule flottante : 0,1 0,2 != 0,3

Les nombres à virgule flottante dans la norme IEEE 754Impossible d'exprimer les décimales avec précision

那什么时候精准, 什么时候不经准呢? 笔者也不知道…

答案 [true, false]

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

两个知识点:

• 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!'

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

解释:

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

还是刚才的知识点, 只不过 String 不仅是个构造函数 直接调用返回一个字符串哦.

答案 'Case A'

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

一个知识点

• Arithmetic_Operators#Remainder

此题等价于

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

需要注意的是 余数的正负号随第一个操作数.

答案 [true, true, true, false, false]

第12题

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

第一个题讲过了, 答案 3, NaN, 3

第13题

Array.isArray( Array.prototype )

一个知识点:

• Array/prototype

一个鲜为人知的实事: Array.prototype => [];

答案: true

第14题

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

• JavaScript-Equality-Table

答案: false

第15题

[]==[]

== 是万恶之源, 看上图

答案是 false

第16题

'5' + 3
'5' - 3

两个知识点:

• Arithmetic_Operators#Addition

• Arithmetic_Operators#Subtraction

+ 用来表示两个数的和或者字符串拼接, -表示两数之差.

请看例子, 体会区别:

> '5' + 3
'53'
> 5 + '3'
'53'
> 5 - '3'
2
> '5' - 3
2
> '5' - '3'
2

也就是说 - 会尽可能的将两个操作数变成数字, 而 + 如果两边不都是数字, 那么就是字符串拼接.

答案是 '53', 2

第17题

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

第18题

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

稀疏数组. 同第7题.

题目中的数组其实是一个长度为3, 但是没有内容的数组, array 上的操作会跳过这些未初始化的’坑’.

所以答案是 ["1", undefined × 2]

这里贴上 Array.prototype.map 的 polyfill.

Array.prototype.map = function(callback, thisArg) {

        var T, A, k;

        if (this == null) {
            throw new TypeError(' this is null or not defined');
        }

        var O = Object(this);
        var len = O.length >>> 0;
        if (typeof callback !== 'function') {
            throw new TypeError(callback + ' is not a function');
        }
        if (arguments.length > 1) {
            T = thisArg;
        }
        A = new Array(len);
        k = 0;
        while (k < len) {
            var kValue, mappedValue;
            if (k in O) {
                kValue = O[k];
                mappedValue = callback.call(T, kValue, k, O);
                A[k] = mappedValue;
            }
            k++;
        }
        return A;
    };

第19题

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语法的时候

知识点:

• Functions/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 !!!!

请读者细细体会!!

第20题

var a = 111111111111111110000,
    b = 1111;
a + b;

答案还是 111111111111111110000. 解释是 Lack of precision for numbers in JavaScript affects both small and big numbers. 但是笔者不是很明白……………. 请读者赐教!

第21题

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

这个题有意思!

知识点:

• Array/reverse

The reverse method transposes the elements of the calling array object in place, mutating the array, and returning a reference to the array.

也就是说 最后会返回这个调用者(this), 可是 x 执行的时候是上下文是全局. 那么最后返回的是 window.

答案是 window

第22题

Number.MIN_VALUE > 0

true

第23题

[1 < 2 < 3, 3 < 2 < 1]

这个题也还可以.

这个题会让人误以为是 2 > 1 && 2  其实不是的.

这个题等价于

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

答案是 [true, true]

第24题

// the most classic wtf
2 == [[[2]]]

这个题我是猜的. 我猜的 true, 至于为什么…..

both objects get converted to strings and in both cases the resulting string is "2" 我不能信服…

第25题

3.toString()
3..toString()
3...toString()

这个题也挺逗, 我做对了  答案是 error, '3', error

你如果换一个写法就更费解了

var a = 3;
a.toString()

这个答案就是 '3';

为啥呢?

因为在 js 中 1.1, 1., .1 都是合法的数字. 那么在解析 3.toString 的时候这个 . 到底是属于这个数字还是函数调用呢? 只能是数字, 因为3.合法啊!

第26题

(function(){
  var x = y = 1;
})();
console.log(y);
console.log(x);

答案是 1, error

y 被赋值到全局. x 是局部变量. 所以打印 x 的时候会报 ReferenceError

第27题

var a = /123/,
    b = /123/;
a == b
a === b

即使正则的字面量一致, 他们也不相等.

答案 false, false

第28题

var a = [1, 2, 3],
    b = [1, 2, 3],
    c = [1, 2, 4]
a ==  b
a === b
a >   c
a <   c

字面量相等的数组也不相等.

数组在比较大小的时候按照字典序比较

答案 false, false, false, true

第29题

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

知识点:

• Object/getPrototypeOf

只有 Function 拥有一个 prototype 的属性. 所以 a.prototype 为 undefined.

而 Object.getPrototypeOf(obj) 返回一个具体对象的原型(该对象的内部[[prototype]]值)

答案 false, true

第30题

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

f.prototype is the object that will become the parent of any objects created with new f while Object.getPrototypeOf returns the parent in the inheritance hierarchy.

f.prototype 是使用使用 new 创建的 f 实例的原型. 而 Object.getPrototypeOf 是 f 函数的原型.

请看:

a === Object.getPrototypeOf(new f()) // true
b === Function.prototype // true

答案 false

第31题

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

答案 ['foo', 'foo']

知识点:

• Function/name

因为函数的名字不可变.

第32题

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

知识点:

• String/replace#Specifying_a_function_as_a_parameter

str.replace(regexp|substr, newSubStr|function)

如果replace函数传入的第二个参数是函数, 那么这个函数将接受如下参数

• match 首先是匹配的字符串

• p1, p2 …. 然后是正则的分组

• offset match 匹配的index

• string 整个字符串

由于题目中的正则没有分组, 所以等价于问

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

答案: 1, NaN, 3

第33题

function f() {}
var parent = Object.getPrototypeOf(f);
f.name // ?
parent.name // ?
typeof eval(f.name) // ?
typeof eval(parent.name) //  ?

先说以下答案 'f', 'Empty', 'function', error 这个答案并不重要…..

这里第一小问和第三小问很简单不解释了.

第二小问笔者在自己的浏览器测试的时候是 '', 第四问是 'undefined'

所以应该是平台相关的. 这里明白 parent === Function.prototype 就好了.

第34题

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

知识点:

• RegExp/test

这里 test 函数会将参数转为字符串. 'nul', 'undefined' 自然都是全小写了

答案: true, true

第35题

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

[,,,] => [undefined × 3]

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

答案: ", , "

第36题

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

这个题比较流氓.. 因为是浏览器相关, class是个保留字(现在是个关键字了)

所以答案不重要, 重要的是自己在取属性名称的时候尽量避免保留字. 如果使用的话请加引号 a['class']

第37题

var a = new Date("epoch")

知识点:

• Date

• Date/parse

简单来说, 如果调用 Date 的构造函数传入一个字符串的话需要符合规范, 即满足 Date.parse 的条件.

另外需要注意的是 如果格式错误 构造函数返回的仍是一个Date 的实例 Invalid Date.

答案 Invalid Date

第38题

var a = Function.length,
    b = new Function().length
a === b

我们知道一个function(Function 的实例)的 length 属性就是函数签名的参数个数, 所以 b.length == 0.

另外 Function.length 定义为1……

所以不相等…….答案 false

第39题

var a = Date(0);
var b = new Date(0);
var c = new Date();
[a === b, b === c, a === c]

还是关于Date 的题, 需要注意的是

• 如果不传参数等价于当前时间.

• 如果是函数调用 返回一个字符串.

答案 false, false, false

第40题

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

知识点:

• Math/min

• Math/max

有趣的是, Math.min 不传参数返回 Infinity, Math.max 不传参数返回 -Infinity

答案: false

第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]

知识点:

• RegExp/exec

通俗的讲

因为第一个正则有一个 g 选项 它会‘记忆’他所匹配的内容, 等匹配后他会从上次匹配的索引继续, 而第二个正则不会

举个例子

var myRe = /ab*/g;
var str = 'abbcdefabh';
var myArray;
while ((myArray = myRe.exec(str)) !== null) {
  var msg = 'Found ' + myArray[0] + '. ';
  msg += 'Next match starts at ' + myRe.lastIndex;
  console.log(msg);
}
// Found abb. Next match starts at 3
// Found ab. Next match starts at 9

所以 a1 = ’1′; a2 = ’1′; a3 = null; a4 = ’2′

答案 [true, false]

第42题

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

这个….

JavaScript inherits 40 years old design from C: days are 1-indexed in C’s struct tm, but months are 0 indexed. In addition to that, getDay returns the 0-indexed day of the week, to get the 1-indexed day of the month you have to use getDate, which doesn’t return a Date object.

a.getDay()
3
b.getDay()
6
a.getMonth()
2
b.getMonth()
3

都是套路!

答案 [false, false]

第43题

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

知识点:

• String/match

String.prototype.match 接受一个正则, 如果不是, 按照 new RegExp(obj) 转化. 所以 . 并不会转义
那么 /gif 就匹配了 /.gif/

答案: 'a gif file'

第44题

function foo(a) {
    var a;
    return a;
}
function bar(a) {
    var a = 'bye';
    return a;
}
[foo('hello'), bar('hello')]

在两个函数里, a作为参数其实已经声明了, 所以 var a; var a = 'bye' 其实就是 a; a ='bye'

所以答案 'hello', 'bye'

 以上就是详细介绍44 个 JavaScript 变态题解析的内容，更多相关内容请关注PHP中文网（www.php.cn）！