2021前端面试题及答案（2021年3月25日）

最新推荐文章于 2024-04-20 22:29:36 发布

laosixnotwo

最新推荐文章于 2024-04-20 22:29:36 发布

阅读量3.6k

点赞数 9

文章标签： css javascript

本文链接：https://blog.csdn.net/laosixnotwo/article/details/115220416

版权

分享一波今日做的前端面试真题里比较有价值的题目，希望大家能够共同进步

css篇

1.如何让字体变粗。

font-weight: bold;

2.解释 display: none;,visibility: hidden;,opacity: 0; 的异同。

display: none;
元素消失
不保留大小位置
不会触发点击事件
导致重排（Relayout/Reflow）
p.s.重排一定导致重绘
visibility: hidden;
元素隐藏
保留大小位置
不会触发点击事件
导致重绘（Repainting）
opacity: 0;
元素隐藏（可见度为0）
保留大小位置
会触发点击事件

更多重排重绘相关内容，可以看这篇博文https://blog.csdn.net/qq_38128179/article/details/101023305

附上一份代码方便大家实践

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.a {visibility: hidden;}
			.b {display: none;}
			.c {opacity: 0;}
		</style>
	</head>
	<body>
		<div class="a" onclick="alert('ahsifdhuias')">ahifhuahsf</div>
		<div class="b">51651655</div>
		<div class="c" onclick="alert('%^&*()')">#$%^&%$%^&*&^%</div>
	</body>
</html>

3.引用外部css文件的方法。

答：import和 link

JavaScript篇

1.true,Boolean(true),new Boolean(true) 之间，分别用 == 和 === 比较的结果。

解：

在js中如果用 == 进行比较，js是会自动转换类型的，所以说只要内容一样，得到的结果就会为true

比如说将 string类型的1 和 number类型的1 做 == 比较，结果就会为true

console.log('1' == 1) //true

而js的 === 比较，是不会自动转化类型的，也就是说要内容和类型都一样，才会返回true

比如将 string类型的1 和 number类型的1 做 === 比较，结果就会为false

console.log('1' === 1) //false

在本题中，因为：

console.log(typeof(true)) //boolean
console.log(typeof(Boolean(true))) //boolean
console.log(typeof(new Boolean(true))) //object

new出来的东西都是object类型的，其余的都是Boolean类型，类型不一样，=== 比较结果就会为false

2.es6中新增的基本数据类型

答：Symbol

Symbol的具体含义和用法，可以看一下菜鸟教程：https://www.runoob.com/w3cnote/es6-symbol.html

3.以下那个操作的答案不为 ‘1’ ?

A.	[] + 1
B.	[] + '1'
C.	['1'] + {}
D.	['1'] + []

解：

console.log([] + 1) //'1'
console.log([] + '1') //'1'
console.log(['1'] + {}) //'1'[object Oject]
console.log(['1'] + []) //'1'

答：C

4.介绍 sort() 的作用，以及写出 ['1', '2', '3', '12', '22', '110'].sort() 的输出结果。

答：

用于数组的排序

当 sort() 没有参数时，他会按每个数组元素的第一个数字/字母进行升序排列。如果数组元素还有第二个数字/字母，会将第一个数字/字母相同的元素，根据第二个数字/字母进行一次升序排列

我知道你们也许没看懂，直接举个栗子：

console.log(['about', 'banana', 'cow', 'cat', 'apple'].sort())
//[ 'about', 'apple', 'banana', 'cat', 'cow' ]

console.log(['1', '2', '3', '12', '22', '110'].sort())
//[ '1', '10', '110', '2', '22', '3' ]

在默认情况下，是没办法将数字按大小排列的，如果要实现按数字大小排列需要传入参数

console.log(['1', '2', '3', '12', '22', '110'].sort(function(a, b) {
	return a - b
}))
//[ '1', '2', '3', '12', '22', '110' ]

console.log(['1', '2', '3', '12', '22', '110'].sort((a, b) => {
	return a - b
}))
//[ '1', '2', '3', '12', '22', '110' ]

console.log(['1', '2', '3', '12', '22', '110'].sort((a, b) => {
	return b - a
}))
//[ '110', '22', '12', '3', '2', '1' ]

所以答案是：[ ‘1’, ‘10’, ‘110’, ‘2’, ‘22’, ‘3’ ]

5.描述 pop() 的作用。

答：

//删除数组的最后一个元素，并返回它

let a = ['1', '2', '3', '12']

console.log(a) //['1', '2', '3', '12']
console.log(a.pop()) //'12'
console.log(a) //['1', '2', '3']

6.描述 splice() 的作用。

答：

//splice(a,b,c)
//选中一个位置 a，删除从 a开始的 b个元素，并在 a位置补充内容 c
//b可以为 0或负数，即不删除内容

let arr = ['a', 'b', 'c', 'd']

console.log(arr) //[ 'a', 'b', 'c', 'd' ]

arr.splice(1, 0, 'aijfosj')

console.log(arr) //[ 'a', 'aijfosj', 'b', 'c', 'd' ]

7.描述 slice() 的作用。
答：

//会返回一个新数组，不改变原来的数组
//slice(a,b)
//从 a开始，截取数组的 b个元素
//a从 0开始，若 a为负数，则从数组最后往前截取，此时不再需要 b参数

let arr = ['a', 'b', 'c', 'd']
let new_arr = arr.slice(0,2)
// let new_arr = arr.slice(-3)
console.log(new_arr)

8.JavaScript的基本类型？

答：string、number、Boolean、null、undefined

概念篇

1.如何判断url同源？

答：

协议、端口号、域名，只要有一个不同，就不同源

具体可以看看这篇博文：https://www.jianshu.com/p/427edf487525

2.sessionStorage能否在一个浏览器的不同标签中共享？

答：不能

3.http相关知识点

http分为请求报文和响应报文
请求头后面的空行必须有
http是一种无状态协议

如果我的分享让你学到了新东西，就点个赞吧OVO

laosixnotwo

关注

9
点赞
踩
65

收藏

觉得还不错? 一键收藏
1
评论
2021前端面试题及答案（2021年3月25日）

分享一波今日做的前端面试真题里比较有价值的题目，希望大家能够共同进步css篇1.如何让字体变粗。font-weight: bold;2.解释 display: none;,visibility: hidden;,opacity: 0; 的异同。display: none;元素消失不保留大小位置不会触发点击事件导致重排（Relayout/Reflow）p.s.重排一定导致重绘visibility: hidden;元素隐藏保留大小位置不会触发点击事件导致重绘（Repai
复制链接

扫一扫