58同城2021校招笔试部分题目及讲解

console.log([1,2,3,4,5].splice(1,2,3,4,5));
console.log([1,2,3,4,5].slice(1,2,3,4,5));

以下代码输出
[2,3]和[2]

splice与slice区别

slice方法实现了从原数组中截取一部分返回新的数组

slice(start, end)不包含end,如果start,end为负数则表示从数组最后一个索引向前计算

返回值：所截取的数组对象

所以问题一的结果为[2].

问题二：[1,2,3,4,5].splice(1,2,3,4,5)

splice方法实现了从原数组中删除或插入一部分内容

splice(index, howmany, item1, ...itemx )

index表示从当前索引开始删除，

howmany代表删除元素的个数

items 要添加到索引的新元素

返回值：如果从原数组中删除了元素，则但返回含有被删除的数组对象

root元素的高 (通过getComputedStyle(root).height计算) 为？

70px

<html>
<body>
<div id="root" style="border:1px solid red;">
    <div style="width:10px;height:10px;margin:10px;"></div>
    <div style="width:10px;height:10px;margin:20px;"></div>
</div>
</body>
</html>

有border形成BFC，两个子组件margin重叠，取大

如果块元素的 margin-top 与它的第一个子元素的 margin-top 之间没有 border、padding等来分隔，或者块元素的 margin-bottom与它最后一个子元素的 margin-bottom 之间没有 border、padding、height、min-height、max-height 分隔，那么外边距会塌陷。子元素多余的外边距会被父元素的外边距截断。

BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。形成BFC的条件有

display 为以下其中之一的值 inline-block，table-cell，table-caption、flex ✓

浮动元素，float 除 none 以外的值 ✓

overflow 除了 visible 以外的值（hidden，auto，scroll） ✓

绝对定位元素，position（absolute，fixed） ✓

CSS 盒模型、BFC、IFC、GFC、FFC

下边关于https描述正确的是:

客户端会对服务器下发的证书进行域名校验

HTTPS 协议是由 HTTP 加上 TLS/SSL 协议构建的可进行加密传输、身份认证的网络协议，主要通过数字证书、加密算法、非对称密钥等技术完成互联网数据传输加密，实现互联网传输安全保护。设计目标主要有三个。

（1）数据保密性：保证数据内容在传输的过程中不会被第三方查看。就像快递员传递包裹一样，都进行了封装，别人无法获知里面装了什么 [4] 。

（2）数据完整性：及时发现被第三方篡改的传输内容。就像快递员虽然不知道包裹里装了什么东西，但他有可能中途掉包，数据完整性就是指如果被掉包，我们能轻松发现并拒收 [4] 。

（3）身份校验安全性：保证数据到达用户期望的目的地。就像我们邮寄包裹时，虽然是一个封装好的未掉包的包裹，但必须确定这个包裹不会送错地方，通过身份校验来确保送对了地方 [4] 。

双向的身份认证

客户端和服务端在传输数据之前,会通过基于X.509证书对双方进行身份认证。具体过程如下 [3] :

客户端发起 SSL 握手消息给服务端要求连接。

服务端将证书发送给客户端。

客户端检查服务端证书，确认是否由自己信任的证书签发机构签发。如果不是，将是否继续通讯的决定权交给用户选择 ( 注意，这里将是一个安全缺陷 )。如果检查无误或者用户选择继续，则客户端认可服务端的身份。

服务端要求客户端发送证书，并检查是否通过验证。失败则关闭连接，认证成功则从客户端证书中获得客户端的公钥，一般为1024位或者 2048位。到此，服务器客户端双方的身份认证结束，双方确保身份都是真实可靠的。

下边关于XSS描述正确的是

XSS又名跨站脚本攻击，是利用服务器查询漏洞，在提交数据中注入sql语句，从而破坏网站数据

防范XSS攻击只要前端对数据进行Base64就可以解决

XSS攻击需要也服务器对接口进行防护 ✓

XSS攻击仅在表单提交时使用

A选项：xss（cross-site-scripting）攻击指的是攻击者往 web 页面里插入恶意 html 标签或者 javascript 代码 ；

B选项：首先代码里对用户输入的地方和变量都需要仔细检查长度和对 “<> , ; . ”等字进行过滤；其次任何内容写到页面之前都必须加 encode，避免不小心把 html tag 弄出来。这一个层面做好，至少可以堵住超过一半的XSS 攻击；

D选项：攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取 cookie 中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器汇总，而不是用户原本以为的信任站点；

以下运行结果:

for(var i = 0; i < 10; i++) {

    setTimeout(function() {

        console.log(i);

    }, 1000);

}

10个10

for循环执行内部函数的时候i到9，然后终止时i加到10后不累加了，所以通过宏任务可知console.log十次十

在跨域请求中，下列请求头中哪种content-type一定会触发cors预检查

text/plain

multipart/form-data

application/x-www-form-unlencoded

application/json ✓

触发预检请求的三类条件：

默认情况下，跨域请求只支持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...)，那么将触发预检请求。

关于position定位，下列说法正确的是

relative，absolute, fixed都会脱离当前文档流，并相对于当前位置设置偏移量

absolute元素如果其父级设置了fixed属性，则其会相对于浏览器窗口设置偏移

z-index属性对元素position属性为relative，absolute, fixed都可以做层级设置 ✓

relative元素以它原来的位置为基准偏移，在其移动后，原来的位置不再占据空间

absolute的元素，如果它的父容器设置了position属性，并且position的属性值为absolute或者relative，那么就会依据父容器进行偏移 ✓

relative元素以它原来的位置为基准偏移，在其移动后，原来的位置不再占据空间

fixed元素，可定位于相对于浏览器窗口的指定坐标，它始终是以 body 为依据 ✓

relative元素是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TOP、RIGHT、BOTTOM、LEFT进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位 ✓

absolute:只有上级标签有position：absolute/relative属性，才能作为它的父级，否则以body为参考;
relative:偏移的top，right，bottom，left 的值都以它原来的位置为基准偏移，移动后的元素在原来的位置仍会占空间；

设置了fixed属性的元素，才是相对于视口进行定位偏移的，

设置了absolute属性的元素，是以离他最近的开启定位的祖先元素为基准，进行偏移。

这里在fixed元素中的absolute元素，会相对于fixed元素进行定位偏移，不是视口

请选择console打印的正确值

Object.prototype.foo = 'Object';
Function.prototype.foo = 'Function';
function Animal () {};
var cat = new Animal();
console.log(cat.foo);
console.log(Animal.foo);

Object Function

构造函数Animal是由 new Function() 创建的一个对象，因此Animal的__proto__属性指向的是Function.prototype；又因函数本身又是一个对象，因此Animal.prototype是指向Object.prototype;cat是由Animal创建出来的实例，cat.__proto__指向Animal.prototype.

下列哪个属性不会引起浏览器重排（reflow）:

 @**keyframes** animate {
    0%{
        transform: translate(0,0);
    }
    25%{
        transform: translate(200px,0);
    }
    50%{
        transform: translate(200px,200px);
    }
    75%{
        transform: translate(0,200px);
    }
}

.hide {
    visibility:hidden;
}

回流：当render tree 的一部分或全部的元素因改变了自身的宽高，布局，显示或隐藏，或者元素内部的文字结构发生变化导致需要重新构建页面的时候，回流就产生了。
重绘：当一个元素自身的宽高，布局，及显示或隐藏没有改变，而只是改变了元素的外观风格的时候，就会产生重绘。例如你改变了元素的background-color....

回流必将引起重绘，而重绘不一定会引起回流。

下列会导致页面回流reflow的操作有

添加或者删除可见的DOM元素 ✓

仅修改DOM元素的字体颜色、背景色

resize浏览器窗口 ✓

设置可见元素为display: none

读取元素的属性offsetWidth和offsetHeight ✓

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

关于javascript，以下选项描述错误的是

在原型上扩展的可枚举方法，会被for in循环出来

通过hasOwnProperty可判断一个对象以及其原型链上是否具有指定名称的属性 x

每个函数对象都有prototype属性，返回对象类型原型的引用

For循环是按顺序的，for in 循环是不一定按顺序的 x

for...of 循环可遍历普通对象，如{a:'1', b:2}

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

下列关于js事件的描述中，正确的有

**事件冒泡**是指当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。 ✓

**不支持冒泡的事件有**blur、focus、load、resize、mouseleave ✓

事件委托不依赖于事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

通过addEventListener方法给Dom添加事件监听，addEventListener形参中的第三个参数控制是捕获传递触发还是冒泡传递触发。 ✓

css中哪些属性可以继承

font-size ✓

margin

border

color ✓

1、字体系列属性

font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
font-size：设置字体的尺寸
font-style：定义字体的风格
font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
font-stretch：允许你使文字变宽或变窄。所有主流浏览器都不支持。
font-size-adjust：为某个元素规定一个 aspect 值，字体的小写字母 "x" 的高度与"font-size" 高度之间的比率被称为一个字体的 aspect 值。这样就可以保持首选字体的 x-height。

2、文本系列属性

text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：增加或减少单词间的空白（即字间隔）
letter-spacing：增加或减少字符间的空白（字符间距）
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色

3、元素可见性：visibility

4、表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout

5、列表属性：list-style-type、list-style-image、list-style-position、list-style

6、生成内容属性：quotes

7、光标属性：cursor

8、页面样式属性：page、page-break-inside、windows、orphans

9、声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

所有元素可以继承的属性：

1、元素可见性：visibility、opacity2、光标属性：cursor

内联元素可以继承的属性:

1、字体系列属性2、除text-indent、text-align之外的文本系列属性

块级元素可以继承的属性:

1、text-indent、text-align

请选择结果为真的表达式

null == undefined

undefined === undefined

null == null

null === null

=== 判断规则

如果类型不同，就[不相等]
如果两个都是数值，并且是同一个值，那么[相等]；(！例外)的是，如果其中至少一个是NaN，那么[不相等]。（判断一个值是否是NaN，只能用isNaN()来判断）
如果两个都是字符串，每个位置的字符都一样，那么[相等]；否则[不相等]。
如果两个值都是true，或者都是false，那么[相等]。
如果两个值都引用同一个对象或函数，那么[相等]；否则[不相等]。
如果两个值都是null，或者都是undefined，那么[相等]。

== 判断规则：

如果两个值类型相同，进行 === 比较。
如果两个值类型不同，他们可能相等。根据下面规则进行类型转换再比较：

如果一个是null、一个是undefined，那么[相等]。
如果一个是字符串，一个是数值，把字符串转换成数值再进行比较。
如果任一值是 true，把它转换成 1 再比较；如果任一值是 false，把它转换成 0 再比较。
如果一个是对象，另一个是数值或字符串，把对象转换成基础类型的值再比较。对象转换成基础类型，利用它的toString或者valueOf方法。js核心内置类，会尝试valueOf先于toString；例外的是Date，Date利用的是toString转换。
任何其他组合，都[不相等]。

实现一个函数，输入一个字符串，返回该字符串出现最多的字母

const fn = (str) => {
    let obj = {};
    for (let i=0;i<str.length;i++){
        if (!obj[str[i]]) obj[str[i]] = 1;
        else obj[str[i]]++;
    }
    let maxItem = 0;
    let index = 0;
    for (item in obj) {
        if (obj[item]>maxItem){
            maxItem = obj[item];
            index = item
        } 
    }
    return index;
}
var arr = readline().split(',');
console.log(fn(arr[0]));

编写查询函数返回数字字符串中最大的公共前缀字符串

var arr = readline().split(',');
const maxStr = (arr) => {
  let longest = arr[0];
  for (let i = 1; i < arr.length; i++) {
    for (let j = 0; j < Math.min(longest.length, arr[i].length); j++) {
      if (longest[j] != arr[i][j]) {
        longest = longest.slice(0,j);
      }
    }
  }
  return longest;
};
console.log(maxStr(arr))