有意思的前端面试题

这几天逛掘金,发现一些有意思的面试题,收集给大家分享一下
一. js基础题

let a = {a: 10};
let b = {b: 10};
let obj = {
  a: 10
};
obj[b] = 20;
console.log(obj[a]);

如果不运行代码,请思考一下结果是啥?
简书暂时不支持折叠功能,所以直接看一下结果吧

console.log(obj[a]);//20

• 解析
  考的知识点-
  1.Object的key为字符串
  2.obj[a]和obj[b]中的a b为变量

obj[b] = 20;
console.log(obj)//{a:10,[object Object]: 20}

此时obj[a]获取的是obj['object Object']的值,也就是20
二. 隐式转换a==1&&a==2&&a==3
上题的解法有几种,下面只说一种,而且是不被推荐的一种,但是涉及到js基础,咱们就来看一看

• 先说答案

a={
  i: 1,
 valueOf(){
   return this.i++
 }
}

• 解析

1. ==两边的数据格式不一样,涉及隐式转换

a = {
  i: 1,
  toString(){
    console.log('tostring')
  }
}
a==1//tostring

a = {
  i: 1,
  valueOf(){
    console.log('valueOf')
  }
}
a==1//valueOf

a = {
  i: 1,
  valueOf(){
    console.log('valueOf')
  },
 toString(){
    console.log('tostring')
  }
}
a==1//valueOf

2. object隐式转换首先调用valueOf方法,如果无此方法,就调用toString方法;这里指的是object实例的本身方法,而不是原型链上的方法,如果实例本身既无valueOf也无toString,那么调用的就是原型链上的方法,所以写成如下方法也是可以的

a={
  i: 1,
 toString(){
   return this.i++
 }
}

三. 请写出下面的输出结果

var a = {
  name:'lv',
  print(){
    return ()=>{
      console.log(this.name)
    }
  }
}
var b = {
  name:'yong'
}
a.print()()
a.print().call(b)
a.print.call(b)()

答案如下

"lv"
"lv"
"yong"

解析如下：

• 第一个控制台输出很好理解，正常执行函数
• 第二个和第三个涉及了call知识点和es6箭头函数
  1.call方法会改变函数(不包括箭头函数)里this指向并执行函数
  2.箭头函数的this指向是固定的，不会受call方法影响，箭头函数this永远指向箭头函数所在对象的this,
  简单说就是,该this是print函数的this.所以第二个代码输出'lv'，第三行代码执行时改变了print函数的this,所以输出结果为'yong'

四. 请看题

const a = { 1:'a',2:'b',3:'c'}
const set = new Set([1,2,3,4,'5'])
console.log(a.hasOwnProperty('1'))
console.log(a.hasOwnProperty(1))
console.log(set.has('1'))
console.log(set.has(1))
console.log(set.has('5'))
console.log(set.has(5))

答案如下

true
true
false
true
true
false

• 解析
  Object的key为字符串,数字会转换成字符串
  hasOwnProperty接收的参数为字符串，数字会转化为字符串
  set结构-键值可以是任意格式，所以会区分出字符串和数字

五.请写出下面题目的打印值-关于this指向

let length = 10 
function fn() {
  console.log(this.length)
}
let obj = {
  length: 5,
  method(fn){
    fn()
    arguments[0]()
  }
}
obj.method(fn,1)

考点：

• 全局下声明变量let和var的区别-var的变量会挂在window上；let不会
• this的引用对象永远是call的第一个参数，没有指定call的第一个参数(这里包括隐式指定)时为undefined,非严格模式下会被js指向window
• window.length返回当前窗口中包含的框架数量(框架包括frame和iframe两种元素).
• arguments[0]()等价于arguments.0.call(arguments)等价于fn.call(arguments)
  若是运行结果还是不懂，可以留言，我看到后会答复
  每个运行环境下的第一个结果不太一样，这里只展示我的结果

0
2

五. 不使用加减乘除计算一个整数的8倍
这个题目通用解法就是使用二进制位运算符

function scaleNum(num,multiple){
  let i = multiple/2
  return num<<i
}
let a = scaleNum(5,4)
console.log(a)//20

这个代码只限于2的倍数计算,如果是其他倍数还需要用其他的位运算符做一下减法

• 下面献上我刚看到题目时想到的CSS方法，这个方法不建议面试时用，因为别人好像没这么写的(骚操作)

function scaleNum(num,multiple){
  let a = document.createElement('div')
  a.style.width=`${num}px`
  a.style.transform = `scale(${multiple})`
  a.id='lllccc'
  document.body.appendChild(a)
  let result = a.getBoundingClientRect().width
  document.body.removeChild(a)
  return result 
}
let a = scaleNum(5,10)
console.log(a)//50