【秋招笔试】2020bilibili秋招前端笔试题总结

2020bilibili秋招前端笔试题总结

*笔试内容仅针对前端部分

一、笔试题型

第一部分选择题（20题，每题2分）：全部与前端的知识相关，涵盖了JavaScript、CSS权重、防抖节流计算机网络等知识，以JavaScript为主，考核了很多JavaScript的用法和细节。

第二部分编程题（3题，每题20分）：题型较为简单，一个链表每k个节点反转一次后拼接输出结果。一年中的第几天。还有一个忘了。很多都是与字符串处理有关，推荐使用js进行编程。

二、知识点解析

在我看来，本次笔试的选择题部分还是有很多容易做错的题目，或者说需要细心才能做对的题目。拿出来分析一下，记录下这些有价值的题。

1. -1 >> 32 ?

考点，带符号位移位。

答案：-1 

解析：对负数进行移位，必须对补码进行移位后再转成原码得出结果。

例如，-1的原码是 100000001, 则-1的补码是111111111即符号位(最开头的1)不变，其他位取反加1.

对于有符号数，移位时最高位是会被复制的，也就是说111111111无论右移多少位，都是全是1，然后对该补码取反加1就可以得到原码即100000001还是-1。由此也可以得出一个结论，只要是负数，当他一直右移时，最终的结果都是-1(因为负数移动的时候，会复制最高位，即符号位的1，当当前数字的所有位数都移动完之后，最终剩下的二进制数（补码）即全为1，对其求原码即-1)。

当然，正数一直右移，最终的结果就是0。

2.['10','10','10','10','10'].map(parseInt)?

答案：[10, NaN, 2, 3, 4]

 

此题主要考验对数组方法map的熟悉程度。

按标准来说，数组的map方法接收的函数中实际上传递的是三个参数，只不过后两个参数不常用，就被忽略了。i

item表示数值遍历的当前项，index表示数组遍历当前项的下标，arr表示当前的数组对象。

arr.map(function(item, index, arr){
      .....     
});

一般我们只会用到第一个参数。

然而parseInt(string, radix);方法接收的是两个参数，第一个是要转换成整数的字符串变量，radix把字符串变量即第一个参数当做n进制数来解析最终转换成十进制。平常来说第二个变量是我们不常用到的，默认遵守如下规则：

在没有指定基数，或者基数为 0 的情况下，JavaScript 作如下处理：

• 如果字符串 string 以"0x"或者"0X"开头, 则基数是16 (16进制).
• 如果字符串 string 以"0"开头, 基数是8（八进制）或者10（十进制），那么具体是哪个基数由实现环境决定。ECMAScript 5 规定使用10，但是并不是所有的浏览器都遵循这个规定。因此，永远都要明确给出radix参数的值。
• 如果字符串 string 以其它任何值开头，则基数是10 (十进制)。

由于parseInt接收两个参数，所以map方法传递的item，index两个参数就生效了，作了如下转换：

数组中的第一个'10', index = 0, 默认是十进制数，所以转换成整数类型的10

数组中的第二个'10', index = 1, 超出了radix的定义，所以结果是NaN

数组中的第三个'10', index = 2, 把'10'当做二进制数来解析，转换成十进制，所以结果是 2

数组中的第三个'10‘, index = 3, 把'10'当做三进制数来解析，所以结果是3

。。。

以此类推。

 

对比 ["1", "2", "3","4","5"].map(parseInt)，结果是[1,NaN,NaN,NaN,NaN]

第一个数是1没问题，第二个数是NaN也没问题，但是这里为什么后面三个数都是NaN呢？

是因为无法解析成n进制数，比如数值为“3”的时候，index = 2,要把“3“解析成一个二进制数是不存在的，二进制数只包含0和1，'3‘超出了二进制的范围，解析失败，所以返回NaN。

3. 对象数组浅拷贝的理解（拷贝引用）

4. 把一个对象作为一个对象的属性能否可行？(不行，没办法区分不同的对象)

var b = {'a':1}
var c = {}
c[b] = 'aaa'

c[{}]  // 'aaa'
c[b] // 'aaa'
c[{'b':2}] //'aaa'

// 等同于

c["[object Object]"] // 'aaa'

5.encodeURIComponent() 函数 与 encodeURI() 函数的区别

详情参考：https://blog.csdn.net/qq_34629352/article/details/78959707

Global对象的encodeURI()和encodeURIComponent()方法可以对URI进行编码，以便发送给浏览器。有效的URI中不能包含某些字符，例如空格。而这URI编码方法就可以对URI进行编码，它们用特殊的UTF-8编码替换所有无效的字符，从而让浏览器能够接受和理解。

encodeURI()不会对本身属于URI的特殊字符进行编码，例如冒号、正斜杠、问号和井字号

而encodeURIComponent()则会对它发现的任何非标准字符进行编码

(encodeURIComponent不编码字符有71个：!， '，(，)，*，-，.，_，~，0-9，a-z，A-Z)

当url作为参数传递时如果没有用encodeURIComponent进行编码，会造成传递时url中的特殊字符丢失。

var url = 'http://www.baidu.com/ p3'
console.log(encodeURI(url)); // http://www.baidu.com/%20p3
console.log(encodeURIComponent(url)); // http%3A%2F%2Fwww.baidu.com%2F%20p3

可以使用decodeURIComponent 对使用encodeURIComponent编码的字符进行解码。

6. console.log([0,0,0].fill(3,2,4)) 的结果是什么？

结果应该打印的是 [0,0,3]   而不是 [3,2,4]

fill方法是用来为数组填充初始值用的，如果fill方法只有一个参数，表明要用来填充的元素，执行后数组内的所有元素都会被覆盖填充。

var arr = [0,0,0]
console.log(arr.fill(3))
//  [3,3,3]

fill的第二个参数指明数组开始填充元素的起始位置，第三个参数指明数组开始填充元素的结束位置。

7. XMLHttpRequest中readyState的五个状态值

AJAX中的 readyState 共有五个状态值，分别是

0：UNSENT 代理被创建，但尚未调用OPEN方法

1：OPENED ，open() 方法已经被调用。

2：HEADERS_RECEIVED，send() 方法已经被调用，并且头部和状态已经可获得。

3：LOADING，下载中； responseText 属性已经包含部分数据。

4：DONE，下载操作已完成。

8.  ~(2+"3") 的值为多少？

(1) 数字与字符串相加则生成字符串 ~（"23"）

(2) 对"23"进行按位反计算。23的二进制为 '00010111' 取反后为 '11101000'

(3) 要把值打印出来要把反码转为原码，对反码取反加一，结果得 '10011000' 最高位为1 保留，为负数得 -24

9. 以下代码执行的结果是什么？

function countFunc(){
    var funs = []
    for(var i = 0; i < 10; i++){
	    funs[i] = function(){
		    return i;
	    }
    }
    return funs;
}
var f = countFunc()

console.log(f[3]());

解析: 打印出的结果是 10。

因为用的是var 来声明 i 变量，i的作用域会提升，而函数内部引用了这个 i，形成闭包，i在代码执行结束的时候为 10，此时i不会被释放，因为被funs内部的函数所引用。

最后打印出来的值就是最后的 i 也就是10。