专栏首页前端达人20道精选的面试题附答案,进来看看能答对多少(一)

20道精选的面试题附答案,进来看看能答对多少(一)

来源 | https://www.cnblogs.com/echoyya/p/14518968.html

以下面试目,本人验证无误,查阅了相关资料,得出解析部分并做了相关总结,希望对正准备跳槽或找工作的你有所帮助!

1、写出执行结果

function side(arr) {
  arr[0] = arr[2];
}
function a(a, b, c) {
  c = 10;
  side(arguments);
  return a + b + c;
}
a(1, 1, 1);

答案及解析

答案 : 21
解析 : 
    1. 调用 a 函数,abc 都是 1,
    2. 后 c 赋值为10,
    3. 调 side 函数,参数 arguments对象,是形参abc的引用,此时 abc 为[1,1,10] 
    4. 给 arr[0] 赋值,即 a = c = 10,
    5. 输出结果 10 + 1 + 10 = 21

2、题一稍加改动,写出执行结果

function side(arr) {
  arr[0] = arr[2];
}
function a(a, b, c = 3) {
  c = 10;
  side(arguments);
  return a + b + c;
}
a(1, 1, 1);

答案及解析

答案 : 12
解析 : arguments 中的 c 还是 1,不会变成10,因为 a 函数给了默认值,就按ES6的方式解析,ES6有块级作用域,所以 c 的值是不会改变的。

3、 写出执行结果

var min = Math.min();
var max = Math.max();
console.log(min < max);  //会是什么?

答案及解析

答案 : false
解析 : 按常规思路,应该输出 true,最小值小于最大值,但是却是false,MDN是这样解释的:- Math.min(): 如果没有参数,结果为 Infinity (无穷大)
    - Math.max(): 如果没有参数,结果为 - Infinity (无穷小)    console.log(-0.0000000000001 > Math.max())    // true

4、写出执行结果,并解释原因

var a = 1;
(function a(){
    a = 2
    console.log(a)
})()

答案及解析

答案 : ƒ a(){
        a = 2
        console.log(a)
      }
解析 : IIFE: Immediately Invoked Function Expression 立即执行函数,存在的目的就是为了隔离作用域,防止污染全局命名空间。因此 IIFE 有自己独立的作用域,如果函数名称与内部变量名冲突,就会永远执行函数本身,所以输出函数本身
了解 : 
    1. 立即执行函数可以是匿名函数 ;(function(){ var ....})()
    2. 开始的第一个字符使用分号,避免出现代码压缩时产生意外的错误return reslut;(function(){...})(), 在省略分号之后,变成return 一个函数了
    3. 函数执行一对()的位置: ;(function(){....}())  效果同 ;(function(){....})() 常见为第二种

5、 写出执行结果,并解释原因

var fullname = 'a';
var obj = {
   fullname: 'b',
   prop: {
      fullname: 'c',
      getFullname: function() {
         return this.fullname;
      }
   }
};

console.log(obj.prop.getFullname());     // ?
var test = obj.prop.getFullname;
console.log(test());           // ?

答案及解析

答案 : c   a 
解析 : 在于运行时的this指向,取决于被谁调用,
    1. 第一问:getFullname 是作为obj.prop对象的方法被调用,此时执行环境就是该对象,即返回 c
    2. 第二问:getFullname 被分配给test变量,此时执行环境是全局对象,window,即返回 a

6、写出执行结果,并解释原因

var company = {
    address: 'beijing'
}
var obj = Object.create(company);
delete obj.address
console.log(obj.address);

答案及解析

答案 : c   a 
解析 : MDN解释,Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__。
Object.create(proto), 其中proto是 新创建对象的原型对象。
    - obj 通过prototype继承了company 的address属性,自己并没有该属性,所以delete操作符是没有作用的
    - delete使用原则: 是用来删除一个对象的属性,但仅限于在自身的属性上起作用(不可操作原型上的属性),若删除的属性不存在,那么delete将不会起作用,但仍会返回true

7、写出执行结果,并解释原因

var foo = function bar(){ return 12; };
console.log(typeof bar());

答案及解析

答案 : 报错 ReferenceError: bar is not defined
解析 : 命名函数表达式 函数只能在函数体内有效
    var foo = function bar(){ 
        // foo 可用
        // bar 可用
        console.log(typeof bar); // function
    };
    // foo 可用
    // bar 不可用

8、 写出执行结果,并解释原因

var x=1;
if(function f(){}){
    x += typeof f;
}
console.log(x)

答案及解析

答案 : 1undefined
解析 : 两点
    1. 函数声明在运算符中其值为true,但是放在运算符中的函数声明在执行阶段是找不到的
    2. 未声明的变量执行 typeof 不会报错,而是返回 undefined 

9、写出执行结果,并解释原因

function f(){
    return f;
}
 console.log(new f() instanceof f);

答案及解析

答案 : false
解析 : 
    - a instanceof b 用于检测 a 是否是 b 的实例,检测的是原型,检测过程中会遍历 a 的原型链,直到找到 b 的 prototype,如果存在返回true 否则返回false
    - 本题中return f后,new f()其返回的结果是 f 的函数对象,并不是一个实例,因此返回false
    - 改动一下即可返回true
  function f(){}
   console.log(new f() instanceof f); // true

10、写出执行结果,并解释原因

var foo = {
    bar: function(){
        return this.baz;
    },
    baz:1
}
console.log(typeof (f=foo.bar)());

答案及解析

答案 : undefined
解析 : 将foo.bar 赋值给 f ,相当于f(),此时 this 指向 window 

11、写出执行结果,并解释原因

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1);
}

答案及解析

答案 : 0  1  2
解析 : 使用let声明变量具有块级作用域(块是{}之间的任何内容)每次循环 i 将被创建为一个新值,并且每个值都会存在于循环内的块级作用域
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1);
}
// 3 3 3 
由于JS的中的事件执行机制,setTimeout函数真正被执行时,循环已经结束,由于是使用var声明的变量 i ,
因此该值是全局的,在循环期间自增,执行setTimeout函数时,i = 3

12、写出执行结果,并解释原因

const num = {
  a: 10,
  add() {
    return this.a + 2;
  },
  reduce: () => this.a -2;
};
console.log(num.add());
console.log(num.reduce());

答案及解析

答案 : 12  NaN
解析 : add 是普通函数,reduce是箭头函数,对于箭头函数this指向是它所在的上下文环境(定义时的位置),
意味着调用reduce时,this指向的并不是num对象 而是window,且全局并没有 a 属性,返回undefined,undefined - 2 返回NaN

13、 写出执行结果,并解释原因

const person = { name: "Echoyya" };

function sayHi(age) {
  return `${this.name} is ${age}`;
}
console.log(sayHi.call(person, 5));
console.log(sayHi.bind(person, 5));

答案及解析

答案 : Echoyya is 5 ; 
        ƒ sayHi(age) {
          return `${this.name} is ${age}`;
        }
解析 : call, bind方法都可以改变this指向,但是 call方式会立即执行,bind方法返回一个绑定函数,带有执行上下文,但不会立即执行,需要在调用一下。

14、 写出执行结果,并解释原因

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

答案及解析

答案 : [1, NaN, NaN]
解析 : // 以上代码等同于
["1", "2", "3"].map((item, index) => parseInt(item, index));
parseInt(string, radix) 解析一个字符串并返回指定基数的十进制整数
radix是2-36之间的整数,表示被解析字符串的基数。
    - 该参数省略或其值为 0,则数字将以 10 为基础来解析;
    - 如果以 “0x” 或 “0X” 开头,将以 16 为基数;
    - 如果小于 2 或者大于 36,将返回 NaN。
分步执行:parseInt('1',0),parseInt('2',1),parseInt('3',2),由于'3'不属于二进制字符,返回NaN

15、写出执行结果,并解释原因

[typeof null, null instanceof Object]

答案及解析

答案 : ['object', false]
解析 : 
    1. typeof返回一个表示类型的字符串,typeof null 返回'object'
    2. instanceof 用于检测constructor.prototype是否存在于参数object的原型链上

16、写出执行结果,并解释原因

var arr = [0,1];
arr[5] = 5;
newArr = arr.filter(function(x) { return x === undefined;});
console.log(newArr.length);  // ?

答案及解析

答案 : 0
解析 : filter方法,为数组中每个元素调用一次callback,返回一个由满足条件的元素组成的新数组,callback只会在已经赋值的索引上被调用,
对于被删除或未被赋值的索引不会被调用, arr[5]=5之后,arr的值为 [0, 1, empty × 3, 5],
索引为234的元素没有初始化,并不存在于数组中,在callback函数调用时会跳过,因此没有一个元素的值是undefined。

17、写出执行结果,并解释原因

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

答案及解析

答案 : Do not know!
解析 : switch 是严格比较,String实例和字符串不一样
    var str1 = 'str';
    var str2 = new String('str')
    console.log(typeof str1) // 'string'
    console.log(typeof str2) // 'object'

18、写出执行结果,并解释原因

console.log([2,1,0].reduce(Math.pow));  // ?
console.log([].reduce(Math.pow));       // ?

A. 2 报错
B. 2 NaN
C. 1 报错
D. 1 NaN

答案及解析

答案 : C
解析 : reduce(callback, initialValue) 方法参数callback是一个回调函数,并作为累加器,数组中的每个值从左到右开始计算,最终返回一个值。参数initialValue是累加器初始值
该回调函数可接收四个参数:total  必需。初始值, 或者计算结束后的返回值。currentValue 必需。当前元素。currentIndex  可选。当前元素索引。arr 可选。当前元素所属的数组对象。
而Math.pow 可接收两个参数,即前两个参数
分步执行得到:Math.pow(2,1) => 2 ,Math.pow(2,0) => 1,要有一些数学基础哦,所以第一个console输出 1 ,而第二个console将报错TypeError: Reduce of empty array with no initial value,
原因是:if the array is empty and no initialValue was provided,TypeError would be thrown ,意思是说,若数组为空且没有提供initialValue初始值,将会抛出TypeError

19、写出执行结果,并解释原因

function Foo() {
    Foo.a = function() {
        console.log(1)
    }
    this.a = function() {
        console.log(2)
    }
}
Foo.prototype.a = function() {
    console.log(3)
}
Foo.a = function() {
    console.log(4)
}
Foo.a();    // ?
let obj = new Foo();
obj.a();    // ?
Foo.a();    // ?

答案及解析

答案 : 4  2  1 
解析 : 
    1. Foo.a():调用 Foo 的静态方法 a,虽然 Foo 中有优先级更高的属性方法 a,但 Foo 此时没有被调用,所以此时输出 Foo 的静态方法 a 的结果:4
    2. let obj = new Foo(); 使用 new 方法调用函数,返回函数实例对象,此时 Foo 函数内部的属性方法初始化,原型方法建立。
    3. obj.a(); 调用 实例方法 a,该实例目前有两个 a 方法:一个内部属性方法,一个原型方法。当两者重名时,内部属性方法优先级更高,会覆盖后者,所以输出2
    4. Foo.a(); 根据第2步可知 Foo 函数内部的属性方法已初始化,覆盖了同名的静态方法,所以输出:1

20、写出执行结果,并解释原因

const value  = 'Value is' + !!Number(['0']) ? 'Echoyya' : 'undefined';
console.log(value);

答案及解析

答案 : Echoyya
解析 : 
    1.  !!Number(['0']) 返回false
    2. + 运算符优先级 大于 ? 运算符,
    所以该题目等价于 'Value is false' ? 'Echoyya' : 'undefined',而不是 'Value is (false' ? 'Echoyya' : 'undefined') 

本文完~

本文分享自微信公众号 - 前端达人(frontend84)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-05-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 20道精选的面试题附答案,进来看看能答对多少(二)

    以下题目,本人验证无误,查阅了相关资料,得出解析部分并做了相关总结,希望对正准备跳槽或找工作的你有帮助!

    前端达人
  • 大数据技术Hadoop面试题,看看你能答对多少?答案在后面

    a)NameNode b)Jobtracker c)Datanode d)secondaryNameNode e)tasktracker

    华章科技
  • 大数据技术Hadoop面试题,看看你能答对多少?答案在后面

    单项选择题 1. 下面哪个程序负责 HDFS 数据存储。 a)NameNode b)Jobtracker c)Datanode d)secondaryNameN...

    CSDN技术头条
  • 错过“金三银四”的Java程序员面试有多苦逼!机会只留给有准备的人!

    错过金三银四的,切不可跟风,看到同事一个个都走了,自己也盲目的开始面试起来(期间也没有准备充分),到底是因为技术原因影响自己的发展,偏移自己规划的轨迹,还是钱给...

    Java程序猿
  • BAT华为美团头条面试考什么?这份GitHub万星资源,告诉你面试题+答案+出题人分析

    2020校招脚步临近,怎样备战即将到来的面试,在众多面试者中脱颖而出惊艳到面试官,化身大厂Offer收割机?

    量子位
  • 【学习】教程:产品运营分析之Excel实用入门

    为什么写Excel,因为昨天给实习产品经理布置了一道题目,对20多万条搜索关键词进行文本分析,半天时间,两位新同学分析完毕,晚上23点给我发的邮件。我也对这20...

    小莹莹
  • 你《提问的智慧+如何有效地报告Bug》了吗?

    http://iamin.blogdriver.com/iamin/1204404.html

    阿敏总司令
  • FW:提问的智慧(How To Ask Questions The Smart Way) 大众硬件Linux大众软件软件测试搜索引擎

    这篇文章可以说是经典了,时不时的回头再读读,总有启发 Copyright (C) 2001 by Eric S. Raymond 中文版Copyleft...

    阿敏总司令
  • BAT华为美团头条面试考什么?这份GitHub万星资源,告诉你面试题+答案+出题人分析

    2020校招脚步临近,怎样备战即将到来的面试,在众多面试者中脱颖而出惊艳到面试官,化身大厂Offer收割机?

    算法工程师之路

扫码关注云+社区

领取腾讯云代金券