分享一波今日做的前端面试真题里比较有价值的题目,希望大家能够共同进步
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