这几天逛掘金,发现一些有意思的面试题,收集给大家分享一下
一. 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]中的ab为变量
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++
}
}
- 解析
-
==两边的数据格式不一样,涉及隐式转换
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
-
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
