【前端小记】--前端面试题（持续更新...）

置顶尤记昨日书

已于 2023-02-17 17:36:04 修改

阅读量282

点赞数 1

分类专栏：前端小记文章标签：前端 javascript java

于 2023-02-14 10:31:17 首次发布

xiaohui

本文链接：https://blog.csdn.net/am_xiao_hui/article/details/129021949

版权

前端小记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

前段面试题

浏览器
- 1. 浏览器本地数据存储方式
JavaScript
CSS

浏览器

1. 浏览器本地数据存储方式

（1）有哪几种？
① cookie：用于身份验证和状态存储；

为了弥补HTTP协议无状态的不足，用cookie记录用户身份和一些用户信息，是服务器端保存在浏览器的一小段文本信息。内部以键值对的形式存储，紧跟域名，浏览器每次向服务器端发出请求，都会附带上这段信息。

② localStorage：用于存储持久性数据，除非用户手动删除，否则数据将终身存储；
③ sessionStorage：用于存储临时会话数据，页面重新加载后仍然存在，关闭浏览器时数据丢失。
（2）有什么区别：
① 存储大小不同

cookie一般不超过4k;
sessionStorage和localStorage可达5M；

② 持久性不同

cookie只在设置过期时间之前有效，即使当前窗口或浏览器关闭；
sessionStorage仅在当前浏览器关闭之前有效；localStorage始终有效，因此用于持久性数据保存，除非手动删除；

③ 作用域不同

cookie在所有同源（指协议、域名、端口都相同）窗口中都是共享的，也就是说只要不到过期时间或未设时间时浏览器不关闭，数据就一直存在；
sessionStorage不能在不同的浏览器窗口中共享，即使是同一个页面；

但是在某些特殊情况下，在当前页面新开页面（比如a标签等等），打开一个新页面时会复制顶级浏览会话的上下文作为新会话的上下文，也就是复制了之前的sesionStorage。

localstorage：在所有同源窗口中都是共享的，也就是说只要浏览器不关闭，数据就存在；

JavaScript

1. 说一说js阻塞的问题

（1）原因
浏览器在渲染页面时，构建DOM树的过程中遇见了js代码，而js又是单线程的，所以不得不停下来去渲染js，从而阻塞浏览器原本的工作状态，所以就造成了js堵塞；
（2）解决方案
① 把js标签放在页面构建之后。即后面，前面，这样就会让DOM树先构建完成再去处理js代码，从而避免了阻塞问题；
② asnyc异步执行js。脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）;
③ defer延迟执行js。脚本将在页面完成解析时执行;

2. js中箭头函数和普通函数区别

（1）箭头函数可以简写，函数返回值只有一句的时候可以省略{}和return；普通函数不能简写；
（2）箭头函数全部是匿名函数；普通函数有具名函数，也有匿名函数；

什么是匿名函数？
匿名函数就是没有名字的函数，它不能单独存在，它必须赋给一个变量或者在末尾加一个（）变成立即执行函数才可以。

（3）箭头函数没有原型对象，普通函数有原型对象。也正是因为箭头函数没有原型对象，所有的东西都要依赖于上一级，所以箭头函数没有单独的this、arguments、super，并且不能作为构造函数。

为什么箭头函数没有原型对象？
因为在定义上箭头函数被设计为轻巧的，没有老式功能所带来的负担的一种方式。
什么是arguments对象？
arguments对象就是把函数调用时的传参集合在了一个数组对象中。
为什么箭头函数明明可以传参，却没有arguments对象呢？与其说是箭头函数没有arguments对象，不如说是没有自己的arguments对象，其实究其根本就是因为她没有原型对象，没办法拥有这些。

3. 改变函数内部this指针的方法及区别

（1）有哪几种？
以Person函数为例，使函数指向obj，输出{ age : 20 , className : 2 }

function Person(age, className) {
   this.age = age; //此时的this指向window
   this.className = className;
   console.log(this);
}
var obj = {};

① call()
传参：第一个为this要指向的对象，后续参数为指向对象的值列表（原函数有几个就有几个）

Person.call(obj, 20, 2);//立即执行常用于做继承

② apply()
传参：第一个为this要指向的对象，后续参数为指向对象的值数组（原函数有几个就有几个）

Person.apply(obj, [20, 2]);//立即执行

③ bind()
传参：第一个为this要指向的对象，后续参数为指向对象的值数组（原函数有几个就有几个）

Person.bind(obj, 20, 2)();//手动执行

（2）有什么区别？
① call() 和 apply() 是立即执行，而 bind() 返回的是一个函数（本身不会执行，需要重新调用）副本，也就是原函数不会发生变化，所以需要手动执行；
② apply() 的第二个参数是数组，call() 的第二个参数是列表，bind() 的第二个参数可以是数组也可以是列表。

4. js的事件循环机制

5. js中判断一个变量是否为数组的方法

（1）Array.isArray()
是ES5提出的一个方法，需考虑兼容性问题，用于确定传递的值是否是一数组，返回 boolean值，只能判断数组。
在这里插入图片描述
（2）instanceof
运算符，用于检验构造函数的prototype属性是否出现在原型链上，返回布尔值，也能判断其他类型数据。

（3）constructor
实例的构造函数，也能判断其他类型数据。

（4）Object.prototype.toString.call()
获取对象的不同类型，也能判断其他类型数据。

为什么要用Object.prototype？
Array、function等类型作为Object的实例，都各自重写了自己的toString方法，我们要得到对象的具体类型，需要调用Object的原型的未被重写的toString()方法
为什么要用call()?
改变this指向，如果不加call()的话返回的就是原型obj的字符串，加call()其实就是把call中的参数传入原型obj中，指向被call的对象。

（5）Array.prototype.isPrototypeOf()
原型链上的方法，用于测试一个对象是否存在于另一个对象的原型链上，只能判断数组类型。
在这里插入图片描述
（6）proto
通过对象原型判断与数组的原型对象是否一致，若一致为数组类型，反之不是，只适用于数组。

（7）Object.getPrototypeOf()===Array.prototype
通过判断原型对象与数组的原型对象是否一致，若一致为数组类型，反之不是，只适用于数组。
在这里插入图片描述

6. typeof的底层机制是什么？为什么不能监测引用类型数据？

typeof是根据变量值的内存标识符进行判断的，而js 在底层存储变量的时候，会在变量的机器码的低位1-3位存储其类型信息，基本数据类型都有自己独有的标识符，但是nulll类型是后来加的，而他的标识符是000，所以不能识别null，也不能识别引用类型数据，null和引用类型数据都会等于Object。

7. js中null和undefined的区别

（1）undefined本质上是window的一个属性，而null是一个对象；

null表示空值，undefined表示缺少值（没有赋值的变量）

（2）undefined不是关键字，而null是关键字;

var undefined=""  //undefined
var null=""   //报错

（3）undefined在和null进行==比较时两者相等，全等于比较时两者不等
（4）使用Number()对undefined和null进行类型转换时前者为NaN，后者为0

8. js中深拷贝的方法

9. var、let和const的区别

（1）var声明范围是全局作用域和函数作用域，let，const声明范围是块级作用域；

块级作用域包括函数作用域，不仅限于块级作用域；
let定义变量避免了无意中全局变量污染，更加的灵活安全；
在循环语句中，let关键字为每次循环绑定单独绑定一个变量。

（2）var 存在变量提升，let，const声明的变量却不存在变量提升；
（3）var可以重复定义变量，let，const不可以重复定义变量；
（4）var 声明的全局变量为全局对象的属性，let，const 命令声明的全局变量不属于全局对象的属性；

10. slice和splice的区别

11. map和dorEach的区别

CSS

1. display:none和visibility:hidden的区别

（1）display：none；会让元素从渲染树中消失，渲染的时候不占据任何空间；visibility：hidden；不会让元素从渲染树中消失，渲染的时候仍然占据空间，只是内容不可见；
（2）display：none；是非继承属性，子孙节点消失是由于元素从渲染树中消失造成，通过修改子孙节点的属性无法显示；visibility：hidden是继承属性，子孙节点消失是由于继承了hidden，通过设置子节点visibility：visible，可以让子孙节点显示。
（3）读屏器不会读取display：none的元素内容，而会读取visibility：hidden的元素内容。

2. position属性的值及其区别

（1）position:static；静态定位
是position属性的默认值，表示无论怎么设置top、bottom、right、left属性元素的位置（与外部位置）都不会发生改变。
（2）position:relative；相对定位
表示用top、bottom、right、left属性可以设置元素相对与其相对于初始位置的相对位置，不脱离文档流。
（3）position:absolute;绝对定位
表示用top、bottom、right、left属性可以设置元素相对于其父元素（除了设置了static的父元素以外）左上角的位置，如果父元素设置了static，子元素会继续追溯到祖辈元素一直到body，脱离文档流。
（4）position:fixed；固定定位
指定元素相对于屏幕视口的位置，在屏幕滚动时，元素位置不改变。
（5）position:sticky:；粘性布局
粘性元素根据滚动位置在相对和固定之间切换，起初是相对定位，到达给定的偏移位置后，固定在该位置。

3. 实现垂直水平居中的几种方式

以此结构为例：

<style>
.box {
   width: 100px;
   height: 90px;
   background: pink;
}
.child {
   width: 20px;
   height: 20px;
   background: brown;
}
</style>
<body>
  <div class="box">
    <div class="child">
    </div>
  </div>
</body>

（1）使用弹性布局给父盒子设置弹性定位、主轴、纵轴居中；

.box {
   display: flex;
   justify-content: center;
   align-items: center;
   }
.child {
}

（2）使用网格布局，给父盒子设置弹性定位、主轴、纵轴居中；

.box {
   display: flex;
   justify-content: center;
   align-items: center;
   }
.child {
}

（3）给父盒子设置display:grid;使用网格布局，设置 place-content: center;使左右平均分配。

.box {
   display: grid;
   place-content: center;
}
.child {
}

（4）给父盒子设置弹性定位，子盒子设置mrgin;auto;

.box {
   display: flex;
}
.child {
   margin: auto;
}

（5）使用定位的方式，给父盒子设置相对定位，子盒子设置绝对定位，以及left和top设置为50%，再使用transform的 translate(-50%, -50%)属性使子盒子像左和上移动自身的50%；

.box {
    position: relative;
}
.child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

（6）给父盒子设置display：table-cell;使元素表现的类似一个表格中的单元格td（利用这个特性可以实现文字的垂直居中效果），然后设置垂直水平居中，再把子盒子设置成块级元素，以便于适应水平居中。

.box {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.child {
    display: inline-block;
}

display:block 与 display:inline-block 的区别是什么？
两个都是将行内元素转成块级元素，但是块级元素一般单独占一行，如果我们想把行内元素转成块级元素，但又不让它单独占一行，就可以使用display:inline-block。display:block则是单独的转换，不具备此功能。

（7）给父盒子设置相对定位，子盒子设置绝对定位，把它的上下左右设置为0，margin设置自适应。

.box {
    position:relative;
}
.child {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:0;
}

4. blocck和line-block的区别

尤记昨日书

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端小记】--前端面试题（持续更新...）

浏览器1. 浏览器本地数据存储方式JavaScript1. 说一说js阻塞的问题2. js中箭头函数和普通函数区别3. 改变函数内部this指针的方法及区别4. js的事件循环机制
复制链接

扫一扫