【牛客网-公司真题-前端入门篇】——58同城2021校招笔试-前端

🦸个人主页: 小卢要刷力扣题
🦸‍♂️ 作者简介： 大三学生,准备找工作的人儿
🕍 推荐一款找工作神器网站: 《牛客网》 |笔试题库|面试经验|实习招聘内推|
⛪ 系列专栏： 《前端面试题》
🐋 希望大家多多支持😘一起进步呀！
📝 如果文章对你有帮助的话，欢迎评论💬点赞👍收藏📂加关注

---

前言

秋招正式批已经到来,相信不少小伙伴在为找工作而烦恼,对自己的实力不太自信,感觉好难找工作,不用怕,下面我来给各位推荐一个知名刷题网站《牛客》

一、牛客是做什么的？

牛客网，是一个集笔面试系统、题库、课程教育、社群交流、招聘内推于一体的招聘类网站。牛客是领先的数字化招聘求职解决方案服务商，牛客向企业提供校园招聘技术人才招聘一站式解决方案服务，主要包括招聘渠道服务（发校招岗位收简历） ，招聘SaaS工具服务（笔、面试 、群面系统 ），招聘传播服务（技术竞赛、广告、线上招聘专场、牛客职播。
牛客网题库中包含几万道题目，主要通过第三方购买和 UGC 的方式获得，牛客网先后尝试了直播和录播课，内容覆盖笔试题解析、面试技巧和机器学习等。

在里面可以与大家交流最近的面试心得,
如果不知道怎么面试的或者面试技巧掌握得不够牢固的小伙伴可以在牛客里面找面经来看,快速提升自己的面试能力,以更快的找到自己心仪的工作

58同城2021校招笔试-前端

第一题考察的splice和slice的用法
splice和slice均是Array对象的方法。
splice：
意思为胶接，该方法返回被删除元素组成的数组，并且会改变原数组，语法为
array.splice(start[, deleteCount[, item1[, item2[, …]]]])
参数：
start：开始删除的位置（从0开始计数）；
deleteCount：删除的个数；
item1…：从start位置依次开始添加的元素；
返回值：
被删除元素组成的数组，没有删除则为空数组。
对应题解：从位置1开始删除2个元素，并添加进“3,4,5”这几个元素，所以原数组变成了[1,3,4,5,4,5],返回[2,3]
slice：
切割，该方法返回被提取出来的元素组成的数组，但不会改变原数组，语法为
arr.slice([begin[, end]])
参数：
begin和end分别为提取的起始位置（含）和截止位置（不含），均从0开始。
对应题解：从位置1（含）开始提取到位置2（不含），提出来的数组为[2]，五个参数中的后三个为多余的参数，会被忽略。
因此选C

这一题考察的是相邻margin的值
兄弟元素之间，上面元素的margin-bottom和下面元素的margin-top之间的合并。合并后的距离取两者之间最大值
height=10（上边div的top-margin）+10（上边div的height）+20（两盒共用margin）+10（下面div的height）+20(下面div的margin-bottom)
=70
因此选C

这一题考察的数学中的概率
反向推，3小时内不出BUG的概率是0.50.50.5=0.125，则出概率就是1-0.125=0.875
因此选C

parseInt()有第二个参数可以指定转换成几进制
以0X开头可以自动转十进制数字

parseFloat()没这个第二参数,而且也不会自动转换,
X开头就直接返回NAN了,0X返回0

HTTPS采用混合加密机制，包括公开密钥加密（非对称式加密，有公钥和私钥）和共享密钥加密（对称式加密，共用同样的密钥）。
非对称加密阶段：
1、服务器下发公钥给客户端，客户端使用该公钥加密数据，服务器接收到密文并使用自己的私钥解密；
所以B项错误，服务器下发的是公钥，私钥只在服务器保存。
但在服务器下发公钥的过程中如果被黑客攻击，客户端如果保证自己收到的公钥是否真实呢？这里就出现了CA认证机构，服务器先将公钥发给权威的CA获得公钥证书，再将公钥证书下发给客户端，客户端就可以向CA确认证书的真实性（在这一步骤进行校验，A选项正确）了。
C选项中，若黑客拦截了证书，理论上确实可以让客户端把自己认为是服务器，但是黑客没有私钥，无法解密客户端发来的密文，也就做不到和客户端通信了，C错。
所以这个步骤的实际过程是：
服务器从CA获取公钥证书，下发公钥证书给客户端，客户端通过浏览器内置CA公钥解密该证书得到服务器公钥，使用该公钥加密数据，服务器接收到密文并使用自己的私钥解密；
D.采用HTTPS协议的服务器必须要有一套数字证书，可以是自己制作或者CA证书。区别就是自己颁发的证书需要客户端验证通过，才可以继续访问，而使用CA证书则不会弹出提示页面。这套证书其实就是一对公钥和私钥。公钥给别人加密使用，私钥给自己解密使用。

A选项：xss（cross-site-scripting）攻击指的是攻击者往 web 页面里插入恶意 html 标签或者 javascript 代码 ；
B选项：首先代码里对用户输入的地方和变量都需要仔细检查长度和对 “<> , ; . ”等字进行过滤；其次任何内容写到页面之前都必须加 encode，避免不小心把 html tag 弄出来。这一个层面做好，至少可以堵住超过一半的XSS 攻击 ；
D选项：攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取 cookie 中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器汇总，而不是用户原本以为的信任站点 ；

setTimeout中的闭包函数是每1s执行一次
由于for循环的执行速度远小于1s，
所以当开始执行闭包函数的时候for循环已经结束了（i=10），
之后闭包函数执行十次（因为循环了10次），所以打印了10个10
如果把var换成let,运行结果就变为0~9

触发预检请求的三类条件：
默认情况下，跨域请求只支持GET,HEAD,POST方法，如果不是这三个请求方法（比如：PUT、DELETE、CONNECT、OPTIONS、TRACE和PATCH），那么将触发预检请求
默认情况下，浏览器跨域请求时，会自动添加的请求头（HOST,Referer,Connection、Accept、User-Agent,Accept-Languange,Accept-Encoding,Accept-Charset和Content-Type）,这些请求中还有其他请求头时，那么将触发预检请求。
如1、2所说的情况排除在外的条件下，跨域请求是，浏览器支持的Content-Type值为application/x-www-form-urlencoded，multipart/form-data和text/plain。如果是其他数据类型(如application/json,text/xml…)，那么将触发预检请求。
参考链接:Ajax 跨域(CORS)请求中的预检请求

当我们要去查找一个属性，它会在对象本身找，对象本身找不到，再就是原型
Setcount()为一个构造函数，通过new创建了一个实例a；
这时候Setcount()里面this指向a，相当与a.count=100；
下一步a.count=200，相当与更改了a.count的值；
a.__ proto__.count=300，a.__ proto__指向原型对象。相当与原型对象.count=300;
a.__ proto__.printCount()是在原型对象上调用printCount()，printCount()里面的this指向a.__ proto__，也就是指向原型对象，所以原型对象上面的count=300；
a.printCount()，this指向a，所以a=200；
因此选C

设置了fixed属性的元素，才是相对于视口进行定位偏移的，
设置了absolute属性的元素，是以理他最近的开启定位的祖先元素为基准，进行偏移的。
在fixed元素中的absolute元素，会相对于fixed元素进行定位偏移，不是视口
因此这一题选C

每个构造函数拥有__prop__和prototype属性，__ prop__是原型链查询时实际可以查到的，它指向构造函数的原型对象；而prototype是函数独有的，它包含所有实例共享的属性和方法，因此实例化的对象会指向它，
Animal为构造函数，实际指向的是__ prop__，即Function.prototype，因此Animal.foo即Function.prototype.foo=‘Function’
cat是Animal实例化出来的，因此他的__ proto__指向的是Animal的原型对象,即cat.foo = Object.prototype.foo

setTimeout是异步运行，会先运行主函数，也就是先运行下面的console.log(bar[i]);
此时的i已经为3，再运行setTimeout就一直输出3了
因此选D

回流(reflow)：当render tree 的一部分或全部的元素因改变了自身的宽高，布局，显示或隐藏，或者元素内部的文字结构发生变化 导致需要重新构建页面的时候，回流就产生了。
重绘(redraw)：当一个元素自身的宽高，布局，及显示或隐藏没有改变，而只是改变了元素的外观风格的时候，就会产生重绘。
使用 top left 定位是直接改变元素真实位置的，简单来说你 top: 5px 那就真的是离父容器上端 5px 或者偏离顶部定位 5px
你用 transform: translateY(-5px) 只是改变了视觉位置，不会发生重排，元素本身位置还是在 0px，只是视觉上向上偏移了 5px。
display显示与否同时决定元素是否占据空间，visibility显示与否元素都会占据空间，因此后者不会引起回流

●所有继承了 Object 的对象都会继承到 hasOwnProperty 方法。这个方法可以用来检测一个对象是否含有特定的自身属性；和 in 运算符不同，该方法会自动忽略掉那些从原型链上继承到的属性。
●for…in 语句以任意顺序迭代对象的可枚举属性。
●for…of语句在可迭代对象 上创建一个迭代循环，目前所有的内置可迭代对象如下：String、Array、TypedArray、Map 和 Set，它们的原型对象都实现了 @@iterator 方法。
●for…in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。
因此选BE

事件冒泡:
事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发
事件捕获
事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)，与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。

不支持冒泡的事件：这些事件仅发生于自身上，而它的任何父节点上的事件都不会产生
UI事件
load
unload
scroll
resize
焦点事件
blur
focus
鼠标事件
mouseleave
mouseenter

可以继承是属性有:
文本系列属性
元素可见性：visibility
表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
列表属性：list-style-type、list-style-image、list-style-position、list-style
生成内容属性：quotes
光标属性：cursor
页面样式属性：page、page-break-inside、windows、orphans
声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

BFC 概念
Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
浮动元素，绝对定位元素，非块级盒子的块级容器（例如inline-blocks，table-cells，and table-captions），以及overflow属性值不是“ visible”（visible是overflow的默认值）的块级盒子（视口除外），这些元素就会为他们的内容创建一个BFC。
因此ABCD都对

引起回流的有以下操作
●添加或者删除可见的DOM元素；
●元素位置改变；
●元素尺寸改变——边距、填充、边框、宽度和高度
●内容变化，比如用户在input框中输入文字，文本或者图片大小改变而引起的计算值宽度和高度改变
●页面渲染初始化
●浏览器窗口尺寸改变——resize事件发生时
●计算 offsetWidth 和 offsetHeight 属性
●设置 style 属性的值
因此选ACDE

B:relative移动后,仍占据原来位置
D:relactive是参照自身原始位置来移动的
因此选AC

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上
=== 判断规则
●如果类型不同，就不相等
●如果两个都是数值，并且是同一个值，那么[相等]；(！例外)的是，如果其中至少一个是NaN，那么不相等。（判断一个值是否是NaN，只能用isNaN()来判断）
●如果两个都是字符串，每个位置的字符都一样，那么相等；否则不相等。
●如果两个值都是true，或者都是false，那么相等。
●如果两个值都引用同一个对象或函数，那么相等；否则不相等。
●如果两个值都是null，或者都是undefined，那么相等。

== 判断规则：
●如果两个值类型相同，进行 === 比较。
●如果两个值类型不同，他们可能相等。根据下面规则进行类型转换再比较：
●如果一个是null、一个是undefined，那么相等。
●如果一个是字符串，一个是数值，把字符串转换成数值再进行比较。
●如果任一值是 true，把它转换成 1 再比较；如果任一值是 false，把它转换成 0 再比较。
●如果一个是对象，另一个是数值或字符串，把对象转换成基础类型的值再比较。对象转换成基础类型，利用它的toString或者valueOf方法。js核心内置类，valueOf先于toString；例外的是Date，Date利用的是toString转换。
●任何其他组合，都不相等。
因此选CDEF

使用一个哈希表或者数组存储各个字母的出现次数
输出最多出现的字母

import java.util.*;
 
public class Main{
    public static void main(String[] args){
        Scanner in=new Scanner(System.in);
        String str=in.nextLine();
        char[] s=str.toCharArray();
        int[] count=new int[260];
        for(char c:s){
             
            count[c]++;
        }
        int max=Integer.MIN_VALUE;
        char ans=' ';
        for(int i=0;i<260;i++){
            if(max<count[i]){
                max=count[i];
                ans=(char)i;
            }
        }
        System.out.println(ans);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

用第一个字符串与全部字符串比较
找出最短的前缀就是最长的公共前缀

卡特兰数

import java.util.*;


public class Solution {
    /**
     * 输入整数n，返回可消除为空字符串的的n组"五八"字符串数量。
     * @param n int整型 
     * @return int整型
     */
    public int getTargetNumber (int n) {
        // write code here
        int h = 1;
        for (int i = 2; i <= n; i++) {
            h = h * (4 * i - 2) / (i + 1);
        }
        return h;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18