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

快来打我* 2022-11-13 05:26 202阅读 0赞

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

## 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][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][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][https_www.jianshu.com_p_427edf487525]

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

答：不能

3.http相关知识点

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

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

[https_blog.csdn.net_qq_38128179_article_details_101023305]: https://blog.csdn.net/qq_38128179/article/details/101023305
[https_www.runoob.com_w3cnote_es6-symbol.html]: https://www.runoob.com/w3cnote/es6-symbol.html
[https_www.jianshu.com_p_427edf487525]: https://www.jianshu.com/p/427edf487525