闻一以知十，前端要会的10道面试题(附答案与解析)

Posted 2021-09-01 北极光之夜。

一.先言：

目标：	成为offer收割机的兄弟offer拖拉机
范围：	html、CSS、javascript
题型：	单选、多选、不定项选择
数目：	10
本次难度（2星）：	⭐⭐⛤⛤⛤
答案与解析：	答案与解析是我自己查询与思考后书写的，仅供参考，不对的地方恳请指出🌞
北极光之夜。	auroras.blog.csdn.net

二.题目（答案在最后，答案在最后，答案在最后）：

1.以下哪个表达式的值为true？【不定项选择】

选项
A	‘1’ === 1
B	isNaN(1/0)
C	1 in [1]
D	1 && 2 > 1

2. 以下结果里，返回 false 的是？【不定项选择】

选项
A	[ ] == true
B	！！[ ]
C	NaN == NaN
D	null == undefined

3. 以下关于Histroy对象的属性或方法描述正确的是（）？【多选】

选项
A	back回到浏览器载入历史URL地址列表的当前URL的前一个URL
B	go表示刷新当前页面
C	length保存历史URL地址列表的长度信息
D	forward转到浏览器载入历史URL地址列表的当前URL的下一个URL。

4. 属于HTML5标签语意化的元素有 ？【不定项选择】

选项
A	article、footer
B	block
C	section、banner
D	header、nav

5. 控制台的输出结果是？【单选】

console.log(1);
let a = setTimeout(() => {console.log(2)}, 0);
console.log(3);
Promise.resolve(4).then(b => {
console.log(b);
clearTimeout(a);
});
console.log(5);

选项
A	1 2 3 4 5
B	1 3 5 2 4
C	1 3 5 4
D	1 3 4 5

6. 以下程序运行的结果为（）？【单选】

var k = 0;
for(var i=0,j=0;i<2,j<3;i++,j++){
    k += i + j;
}
console.log(k)

选项
A	6
B	2
C	4
D	8

7. 假设val已经声明,可定义为任何值。则下面js代码有可能输出的结果为？【单选】

console.log('Value is ' + (val != '0') ? 'define' : 'undefine');

选项
A	Value is define
B	Value is undefine
C	define
D	undefine

8. 下列代码输出结果正确的是（）？【单选】

var val = 12;
function fun1(){
    console.log(val);
    var val = 20;
    console.log(val);
}
fun1();

选项
A	12 20
B	undefined 20
C	20 undefined
D	20 20

9. 下列哪些事件不支持冒泡?（）【不定项选择】

选项
A	resize
B	click
C	blur
D	mouseleave

10. 某下对this对象的理解哪些是正确的 ()【不定项选择】

选项
A	this总是指向函数的直接调用者（而非间接调用者）；
B	如果有new关键字，this指向new出来的那个对象；
C	在事件中，this总是指向触发这个事件的对象；
D	this总是指向函数的间接调用者；

三.答案与解析：

1. 选D：
  首先 A 中的‘1’是string字符类型，1是number数字类型，而===要求类型也相等，所以排除；
  B中 1/0会得到Infinity，表示无穷大，也算数字值。isNaN() 函数用于检查其参数是否是非数字值，所以isNaN(1/0)返回的是false;
  C中 in操作符，对于数组属性需要指定数字形式的索引值来表示数组的属性名称。 1 in [1] 表示 数组[1]含不含有1这个索引index值，数组长度为1，含有的index值为0，所以结果为false,如果数组为1 in [0,1] 或者0 in [1]就是true了；
  D中1 && 2 > 1，右边的表达式2>1返回true，1所以 && true返回的也是true。

2. 选AC：
   A里因为==是比较运算符，所以两边都被隐式类型转换成number类型了，true 转为1 , [ ] 会转为 0 ， 所以false；
   B中 ！是逻辑运算符，所以 [ ]也隐式类型转换成Boolean类型的true值了，所以！！true还是true；
   C里NaN与任何值都不相等，包括其本身；
   D里Javascript规范规定null 和 undefined 是相等的。

3. 选AD：
  length 返回浏览器历史列表中的URL数量。 back() 加载 history列表中的前一个URL。 forward() 加载 history 列表中的下一个URL。 go() 加载history列表中的某个具体页面。所以选AD；

4. 选AD：
  block和banner不是，其它都是。

5. 选C：
   首先需要知道的是，JavaScript是单线程的，它先执行同步任务完才执行异步任务。在JavaScript异步任务中，promise是异步微任务，setTimeout是异步宏任务，JavaScript会先执行微任务完了才执行宏任务。所以在promise中清除了定时器a，输出 1 3 5 4；

6. 选A：
   for循环里逗号表达式只有最后一项是有效的，即对于i<2,j<3; 来说，判断循环是否结束的是 j < 3；而对于 j<3,i<2; 来说，判断循环是否结束的是 i < 2，所以题目只有当j<3才结束循环。

7. 选C：
   首先在这个题中，需要明确的是加号‘+’的优先级高于三目运算符‘？’但低于括号‘（）’，所以这里先运算’Value is ’ + (val != ‘0’) ，因为’Value is ’ 是字符串，所以不论括号（）里是什么，加上字符串结果为真，既然为真，通过三目运算得结果为define。

8. 选B：
   函数会优先找自己的内部变量，其中var val 会变量提升至函数顶部，相当于：

function fun1(){
    var val;
    console. log(val);
     val = 20;
    console.log(val);
}

9. 选ACD：
   常见不支持冒泡事件有：①focus ②blur ③mouseenter ④mouseleave ⑤load ⑥unload ⑦resize
   常见支持冒泡事件有：①click ②scroll

10. B：
   在不手动改变this指向的前提下，this才总是指向函数的直接调用对象。在事件中，this指向触发这个事件的对象， 特殊的是，IE中的attachEvent中的this总是指向全局对象Window。

总结：

夏天的风
正暖暖吹过
穿过头发穿过耳朵
你和我的夏天
风轻轻说着
…
果然一到夏天就适合听这首歌~

其它文章：
~关注我看更多简单创意特效：
文字烟雾效果 html+css+js
环绕倒影加载特效 html+css
气泡浮动背景特效 html+css
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
仿网易云官网轮播图 html+css+js
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
霓虹灯绘画板效果 html+css+js
记一些css属性总结（一）
Sass总结笔记
…等等
进我主页看更多~