前端面试-01

最新推荐文章于 2024-06-18 09:46:20 发布

王小七七

最新推荐文章于 2024-06-18 09:46:20 发布

阅读量1.7k

点赞数

文章标签：面试前端

本文链接：https://blog.youkuaiyun.com/nanana666/article/details/123219062

版权

这篇博客主要介绍了前端面试中常见的知识点，包括slice和splice的区别、BFC的定义与形成条件、CSS中的可继承属性、跨域请求的Content-Type、XSS攻击的理解以及JavaScript中的原型链、重绘与回流等概念，帮助读者准备前端面试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下代码输出

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]

slice-实现了从原数组中截取一部分，并返回所截取的数组对象。slice(start, end)。
splice-从原数组删除或者插入一部分内容。splice(index, howmany, item1, …itemx )。index -从当前索引删除，howmany,代表删除个数，items…-要添加的元素。返回值为被删除的数组对象。

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

<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>
// 输出：70px

border形成BFC，两个子组件margin重叠，取大。
如果块元素的 margin-top 与它的第一个子元素的 margin-top 之间没有 border、padding等来分隔，或者块元素的 margin-bottom与它最后一个子元素的 margin-bottom 之间没有 border、padding、height、min-height、max-height 分隔，那么外边距会塌陷。子元素多余的外边距会被父元素的外边距截。
链接: https://www.jianshu.com/p/16c58ef8b7c8.

假定某次上线，1小时内出bug的概率为50%，那么3小时内出bug的概率是？

结果：87.5%
3小时内不出BUG的概率是0.50.50.5=0.125，则出概率就是1-0.125=0.875。
1/2 +(1/2) 2 +(1/2) 3=7/8。

以下代码执行返回？

parseInt('0x111')
// 输出： 273
// 字符串以0x或0X开头，parseInt会将其按照十六进制数解析
// 1 * 16^2 + 1 * 16^1 + 1 * 16^0  = 273

关于https，描述正确的是

客户端会对服务器下发的证书进行域名校验 – ----正确的
客户端和服务器交互使用的是服务器下发的私钥
黑客拦截服务器下发的证书后就可以伪造服务器和客户端进行通信
手机只信任CA颁发的证书

下边关于XSS描述正确的是

XSS又名跨站脚本攻击，是利用服务器查询漏洞，在提交数据中注入sql语句，从而破坏网站数据
防范XSS攻击只要前端对数据进行Base64就可以解决
XSS攻击需要也服务器对接口进行防护 -----正确的。
XSS攻击仅在表单提交时使用

以下运行结果:

// An highlighted block
for(var i = 0; i < 10; i++) {

    setTimeout(function() {

        console.log(i);

    }, 1000);

}

输出：10个10

解释：
定时器函数不会立即加入进程队列，
要等延迟的时间到了才会被加入到进程队列中，
此题中1000ms后循环早已执行完，此时定时器函数才执行。

在跨域请求中，下列请求头中哪种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…)，那么将触发预检请求。
参考网址: https://my.oschina.net/ososchina/blog/672556.

下面代码输出结果正确的是：

// An highlighted block
function Setcount(count){

this.count=count

}

Setcount.prototype.printCount=function(){

console.log(this.count)

}

let a = new Setcount(100)

a.count =200

a.__proto__.count=300

a.__proto__.printCount()

a.printCount()

输出：300 200

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

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

relative，absolute, fixed都会脱离当前文档流，并相对于当前位置设置偏移量
absolute元素如果其父级设置了fixed属性，则其会相对于浏览器窗口设置偏移
z-index属性对元素position属性为relative，absolute, fixed都可以做层级设置 – 正确
relative元素以它原来的位置为基准偏移，在其移动后，原来的位置不再占据空间

请选择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

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

请选择正确的输出结果

var bar = [1,2,3]; for(var i in bar) {
	
		    setTimeout(function(){console.log(bar[i])},0); 
	

console.log(bar[i]);
}

输出：123和333

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

1.@keyframes animate {
            0%{
                top: 0;
                left: 0;
            }
            25%{
                top: 0;
                left: 200px;
            }
            50%{
                top: 200px;
                left: 200px;
            }
            75%{
                top: 200px;
                left: 0;
            }
}
2.@keyframes animate {
    0%{
        transform: translate(0,0);
    }
    25%{
        transform: translate(200px,0);
    }
    50%{
        transform: translate(200px,200px);
    }
    75%{
        transform: translate(0,200px);
    }
}

3..hide{
    display: none;
} 
4..hide {
    visibility:hidden;
}

正确： 2、 4；

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

display显示与否同时决定元素是否占据空间，visibility显示与否元素都会占据空间，因此后者不会引起回流.

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

在原型上扩展的可枚举方法，会被for in循环出来
通过hasOwnProperty可判断一个对象以及其原型链上是否具有指定名称的属性 - 错误
每个函数对象都有prototype属性，返回对象类型原型的引用
For循环是按顺序的，for in 循环是不一定按顺序的
for…of 循环可遍历普通对象，如{a:‘1’, b:2}- 错误

所有继承了 Object 的对象都会继承到 hasOwnProperty 方法。这个方法可以用来检测一个对象是否含有特定的自身属性；和 in 运算符不同，该方***忽略掉那些从原型链上继承到的属性。

for…in 语句以任意顺序迭代对象的可枚举属性。
for…of语句在可迭代对象上创建一个迭代循环，目前所有的内置可迭代对象如下：String、Array、TypedArray、Map 和 Set，它们的原型对象都实现了 @@iterator 方法。
for…in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。

在这里插入图片描述
css中哪些属性可以继承

CSS 中可继承的属性有以下几种。
字体系列属性
文本系列属性
元素可见性：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（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。形成BFC的条件有:

在这里插入图片描述

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

在这里插入图片描述