前端常见面试题目（五）

一、['1', '2', '3'].map(parseInt) what & why ?

• 首先map函数的第一个参数callback一共可以接收三个参数，其中第一个参数currentValue代表当前被处理的元素，而第二个参数index（可选）代表该元素的索引，第三个参数array（可选），是callback map 方法被调用的数组。
• parseInt是用来解析字符串的，使字符串成为指定基数的整数。parseInt(string, radix)接收两个参数，第一个表示被处理的值（字符串），第二个表示解析时的基数。
• 整体处理过程如下：
  1、parseInt('1', 0) ，radix为0时，且string参数不以“0x”和“0”开头时，按照10为基数处理。这个时候返回1
  2、parseInt('2', 1) ，基数为1（1进制）表示的数中，最大值小于2，所以无法解析，返回NaN
  3、parseInt('3', 2) ，基数为2（2进制）表示的数中，最大值小于3，所以无法解析，返回NaN
  4、map函数返回的是一个数组，所以最后结果为[1, NaN, NaN]

['10','10','10','10','10'].map(parseInt);
// [10, NaN, 2, 3, 4]

parseInt(100); // 100
parseInt(100, 10); // 100
parseInt(100, 2); // 4 -> converts 100 in base 2 to base 10

如果实际上想要循环访问字符串数组, map()然后把它换成数字,该怎么办？使用编号! 或者给parseInt带上第二个参数

['1','2','3'].map(Number)
// [1, 2, 3]
// 或者
['1','2','3'].map((item) => parseInt(item, 10))
// [1, 2, 3]

二、以下代码输出什么

var b = 10;
(function b(){
    b = 20;
    console.log(b); 
})();

解析如下：举几个例子来说明

var b = 10;
(function b() {
   // 内部作用域，会先去查找是有已有变量b的声明，有就直接赋值20，确实有了呀。发现了具名函数 function b(){}，拿此b做赋值；
   // IIFE的函数无法进行赋值（内部机制，类似const定义的常量），所以无效。
  // （这里说的“内部机制”，想搞清楚，需要去查阅一些资料，弄明白IIFE在JS引擎的工作方式，堆栈存储IIFE的方式等）
    b = 20;
    console.log(b); // [Function b]
    console.log(window.b); // 10，不是20
})();

// 严格模式下能看到错误：Uncaught TypeError: Assignment to constant variable
var b = 10;
(function b() {
  'use strict'
  b = 20;
  console.log(b)
})() // "Uncaught TypeError: Assignment to constant variable."

// 有window
var b = 10;
(function b() {
    window.b = 20; 
    console.log(b); // [Function b]
    console.log(window.b); // 20是必然的
})();

// 有var
var b = 10;
(function b() {
    var b = 20; // IIFE内部变量
    console.log(b); // 20
   console.log(window.b); // 10 
})();

三、以下代码输出什么

var a = 10;
(function () {
    console.log(a)
    a = 5
    console.log(window.a)
    var a = 20;
    console.log(a)
})()

依次输出：undefined -> 10 -> 20，代码执行步骤如下：

var a = undefined;
a = 10;
(function () {
// 变量提升（预解析）
var a = undefined;
console.log(a); // 输出undefined
a = 5;
console.log(window.a); // 找window(全局)对象的a, 输出10
a = 20;
console.log(a); // 输出20
})()

四、以下代码输出什么

var obj = {
    '2': 3,
    '3': 4,
    'length': 2,
    'splice': Array.prototype.splice,
    'push': Array.prototype.push
}
obj.push(1)
obj.push(2)
console.log(obj) // [empty × 2, 1, 2, splice: ƒ, push: ƒ]

解析：

• 1. 根据MDN的说法理解，push方法应该是根据数组的length来根据参数给数组创建一个下标为length的属性
• 2. 当一个对象拥有length属性，并且splice属性是个函数，对我们来说就可以看作是一个类数组
• 3. 既然是类数组，对象的键就是数组的下标，对象的值就是数组当前下标的值
• 4. 此时撇开length属性不管，这个类数组可以看作：[empty, empty, 3, 4]
• 5. 当length属性起作用时，它将这个类数组的长度截断了，此时可以看作：[empty, empty]
• 6. 之后这个类数组进行了两次push操作，（obj.push(1) = arr[3] = 1）结果可以看作：[empty, empty, 1, 2]

五、数组里面有10万个数据，取第一个元素和第10万个元素的时间相差多少

JavaScript 没有真正意义上的数组，所有的数组其实是对象，其“索引”看起来是数字，其实会被转换成字符串，作为属性名（对象的 key）来使用。所以无论是取第 1 个还是取第 10 万个元素，都是用 key 精确查找哈希表的过程，其消耗时间大致相同