前端面试题_es8面试题-CSDN博客

1、父元素添加 position: relative
       div{
           position:absolute;
           top: 50%;
left: 50%;
transform: translate(-50%, -50%);
       }
   2、div {
   display: flex;
justify-content:center; //子元素水平居中
align-items:center; //子元素垂直居中
   }

3、#box {
width: 100px;
height: 100px;
position: relative;
}

#content {
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}

3、css写一个三角形

div {
width: 0;
height: 0;
border: 20px solid transparent;
border-width: 40px 20px 0 0;
border-right-color: #f99;
}

4、css选择器的优先级

!important>行内样式>id选择器>类/属性/伪类选择器>伪元素/标签选择器>通配符选择器*

5、px、em和rem的区别

px是固定单位,

em是相对单位,相当于当前文字的大小,如果没有就找父元素

rem也是相对单位,相对于html的fontsize的大小

6、什么是重绘和重排

重排: 当DOM元素影响了元素的几何属性（例如宽和高），浏览器需要重新计算元素的几何属性，同样其它元素的几何属性也会和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程称为“重排”。

重绘: 完成重排后，浏览器会重新绘制受影响的部分到屏幕上中，该过程称为“重绘”。

当我们改变DOM的大小，增加删除都会导致重排，当给DOM元素改变颜色的时候，会导致重绘.
   重排一定会重绘，重绘不会重排。重排会影响性能，所以我们尽快能的减少重排的操作

7、flex常用的容器属性

1. flex-direction: 设置容器中的主轴方向
2. flex-wrap: 项目在主轴方向上是否换行显示
3. justify-content: 设置容器中的项目在主轴上的对齐方式
4. align-items: 单行项目在侧轴上的排列方式
5. align-content: 多行项目侧轴上的对齐方式
6. flex-flow: 是flex-direction和flex-wrap的合写, 默认值为row nowrap

8、如何设置比12px更小的字体

p {
   font-size:12px;
           -webkit-transform:scale(0.8);
   }

9、H5新增了那些特性

1. 语义化标签: header nav section article aside footer
2. 多媒体标签: video audio
3. 表单控件: number search email tel date file time url
4. 本地离线存储 localStorage 长期存储数据,改变浏览器数据不会丢失
sessionStorage 浏览器关闭数据会丢失
5. 自定义属性 data-*
6. 画布 Canvas
7. 拖拽释放 (Drap and Drap) API ondrop
8. 新的技术文本 webworker
9. 地理位置 (Geolocation) API

10、C3新增了那些特性

1. 圆角 border-radius
2. 盒子模型 box-sizing
3. 阴影 box-shadow 盒子阴影 text-shadow 文字阴影
4. 过渡 transition
5. 2D转换transform translate(平移) scale(缩放) skew(斜切) rotate(旋转) transform-origin 控制转换中心点
6. 3D转换 perspective(透视距) transform-style(3D控件效果)
7. 渐变 linear-gradient radial-gradient
8. 弹性布局 flex
9. 媒体查询 @media screen and () {...}
10. 边框图片 border-image
11. 自定义动画 @keyframes animation
12. 颜色新增RGBA HSLA模式
13. 背景 background-size background-origin background-clip

11、js的数据类型有哪些

简单数据类型: number string boolean undefined null

复杂数据类型: object function array

12、typeof返回的数据类型

number string boolean undefined object function
特殊情况：
typeof null -->object
typeof array -->object
typeof typeof 任何类型 -->string

13、返回false的情况有哪些

0 "" null false NaN undefined 不成立的表达式

14、对this的理解

this是个关键字,它的指向和函数的调用方式有关

1. 函数调用模式, this指向window
2. 构造函数调用模式, this指向新创建的实例对象
3. 方法调用模式, this指向调用方法的对象
4. 上下文调用模式, call和apply方法中, this指向方法内的第一个参数
bind方法中, bind创建的新函数的this绑定为bind方法中新的函数
5. 在事件处理函数中,this指向触发事件的当前元素
6. 定时器中,this指向window
7. 箭头函数中没有this指向问题,它的this和外层作用域的this保持一致
8. 匿名函数中的this总是指向window

15、new操作符做了什么

1. 创建一个新对象
   2. 函数内部的this指向这个对象
   3. 执行函数体
   4. 自动返回这个函数

16、什么是深拷贝什么是浅拷贝

浅拷贝: 拷贝对象的一层属性,如果对象里面还有对象,拷贝的是地址, 两者之间修改会有影响,适用于对象里面属性的值是简单数据类型的.

深拷贝: 拷贝对象的多层属性,如果对象里面还有对象,会继续拷贝,使用递归去实现.

17、如何实现深拷贝和浅拷贝

浅拷贝:
var obj = {
class: 'UI',
age: 20,
love: 'eat'
}
function getObj(obj) {
var newObj = {}
for (var k in obj) {
newObj[k] = obj[k]
}
return newObj
}
var obj2 = getObj(obj)
console.log(obj2)

深拷贝:
var obj = {
class: '前端',
age: 26,
love: {
friuts : 'apple',
meat: 'beef'
}
}
function getObj(obj) {
var newObj = {}
for (var k in obj) {
/* if (typeof obj[k] == 'object') {
newObj[k] = getObj(obj[k])
} else {
newObj[k] = obj[k]
} */
newObj[k] = typeof obj[k] == 'object' ? getObj(obj[k]) : obj[k]
}
return newObj
}
var obj2 = getObj(obj)
console.log(obj2)

18、对闭包的理解？并能举出闭包的例子

闭包函数和声明该函数的词法环境的组合(两个嵌套关系的函数,内部函数可以访问外部函数定义的变量)

闭包的优点：1、形成私有空间，避免全局变量的污染
2、持久化内存，保存数据

闭包的缺点：1、持久化内存，导致内存泄露

解决：1、尽快避免函数的嵌套，以及变量的引用
2、执行完的变量，可以赋值null，让垃圾回收机制，进行回收释放内存（当不在引用的变量、对象，垃圾回收机制就会回收）

垃圾回收机制：常见的浏览器垃圾回收算法: 引用计数和标记清除法
1）引用计数：如果没有任何变量指向它了，说明该对象已经不再需要了。缺点：循环引用
2）标记清除法：在JS中就是全局触发时，扫描内存中的对象，无法触及的对象，就会被回收。
例: 点击li获取当前下标
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
var lis = document.querySelectorAll('li')
for (var i = 0; i < lis.length; i++) {
(function (j) {
lis[j].onclick = function () {
console.log(j)
}
})(i)
}

19、什么是原型和原型链

原型: 函数都有prototype属性,这个属性的值是个对象,称之为原型

原型链: 对象都有__proto__属性,这个属性指向它的原型对象,原型对象也是对象,也有__proto__属性,指向原型对象的原型对象,这样一层一层形成的链式结构称为原型链.

20、call、apply和bind的区别

1. call和apply方法都可以调用函数,方法内的第一个参数可以修改this的指向

2. call方法可以有多个参数,除了第一个参数,其他参数作为实参传递给函数
apply方法最多有2个参数,第二个参数是个数组或伪数组,数组里面的每一项作为实参传递给函数

3. bind方法不能调用函数,它会创建一个副本函数,并且绑定新函数的this指向bind返回的新的函数

21、==和===的区别

== 表示是相等，只比较内容

=== 表示是全等，不仅比较内容，也比较类型

22、es6-es10新增常用方法

es6:
1、let、const
2、解构赋值 let { a, b } = { a: 1, b: 2 }
3、箭头函数
4、字符串模板
5、扩展运算符
6、数组方法：map、filter等等
7、类：class关键字
8、promise
9、函数参数默认值 fn(a = 1) {}
10、对象属性简写 let a = 1; let obj = {a}
11、模块化：import--引入、exprot default--导出

es7:
1、includes()方法，用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回true，否则返回false。

es8:
1、async/await

es9：
1、Promise.finally() 允许你指定最终的逻辑

es10:
1、数组Array的flat()和flatmap()
flat:方法最基本的作用就是数组降维
var arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

//使用 Infinity 作为深度，展开任意深度的嵌套数组
arr3.flat(Infinity);
// [1, 2, 3, 4, 5, 6]
flatmap:方法首先使用映射函数映射(遍历)每个元素，然后将结果压缩成一个新数组

23、怎么理解函数的防抖和节流

1、定义：
防抖: 就是指触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。
例如：设定1000毫秒执行，当你触发事件了，他会1000毫秒后执行，但是在还剩500毫秒的时候你又触发了事件，那就会重新开始1000毫秒之后再执行

节流: 就是指连续触发事件但是在设定的一段时间内中只执行一次函数。
例如：设定1000毫秒执行，那你在1000毫秒触发在多次，也只在1000毫秒后执行一次

2、防抖和节流的实现：
<body>
<input type="text" class="ipt" />
<script>
var timerId = null
document.querySelector('.ipt').onkeyup = function () {
// 防抖
if (timerId !== null) {
clearTimeout(timerId)
}
timerId = setTimeout(() => {
console.log('我是防抖')
}, 1000)
}

document.querySelector('.ipt').onkeyup = function () {
// 节流
console.log(2)
if (timerId !== null) {
return
}

timerId = setTimeout(() => {
console.log('我是节流')
timerId = null
}, 1000)
}

</script>
</body>

24、什么是事件流

事件流是指事件传播的顺序,由事件捕获 => 目标事件 => 事件冒泡

25、如何阻止冒泡和默认行为

阻止冒泡和捕获 e.stopPropagation()
阻止默认行为 e.preventDefault() return false
注意：addEventListener注册的事件，在高浏览器版本中，return false将没有效果，必须要用事件对象

26、原生注册事件的方式有哪些？区别是什么

注册方式
       1. on + 事件名称
       2. addEventListener
       区别:
           1. 使用on注册事件,同一个元素只能注册一个同类型事件,否则会覆盖。
           2. addEventListener可以注册同一事件多次,不会被覆盖。

27、http和https的区别

1.https协议需要到CA申请证书，一般免费证书较少，因而需要一定费用。

2.http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl/tls加密传输协议。

3.http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

4.http的连接很简单，是无状态的；HTTPS协议是由SSL/TLS+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

28、get 和post的区别

get
           1. 在url后面拼接参数,只能以文本的形式传递数据
           2. 传递的数据量小,4KB左右
           3. 安全性低, 会将数据显示在地址栏
           4. 速度快,通常用于安全性要求不高的请求
           5. 会缓存数据
   post
       1. 安全性比较高
           2. 传递数据量大,请求对数据长度没有要求
           3. 请求不会被缓存,也不会保留在浏览器历史记录里

29、项目中遇到的状态码有哪些

200 请求成功, 2开头的异步表示请求成功
       304 请求被允许,但请求内容没有改变, 3开头的一般请求完成
       400 请求格式错误, 4开头的一般表示请求错误
       404 请求的资源(网页)不存在,
       500 内部服务器错误, 5开头的一般都是指服务器错误

30、jsonp的原理？以及优缺点

原理: 利用script标签的src属性具有天然可跨域的特性，由服务端返回一个预先定义好的Javascript函数的调用，并且将服务器数据以该函数参数的形式响应给浏览器.

       优点: 完美解决在测试或者开发中获取不同域下的数据,用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

       缺点：Jsonp只支持get请求而不支持post 请求,也就是说如果想传给后台一个json 格式的数据,此时问题就来了, 浏览器会报一个http状态码41错误,告诉你请求格式不正确.

31、什么是同源策略？怎么解决跨域问题

同源策略: 同源策略是浏览器的一种安全策略, 所谓同源是指域名、协议、端口完全相同，不同源则跨域。
解决跨域的方法:
           1. 通过jsonp跨域
           2. 跨域资源共享（CORS Access-Control-Allow-Origin: http://api.bob.com）
           3. nginx代理跨域

32、页面通信的方式有哪些

: 1. 通过url拼接地址
2. H5本地存储

33、null和undefined的区别

null 表示空值没有获取到。typeof null 返回"object"
undefined 表示未定义，声明没有值。typeof undefined 返回"undefined"

34、Json字符串和json对象怎么相互转换（序列化）

答: JSON对象转JSON字符串: json.stringify(对象)
JSON字符串转JSON对象: json.parse(字符串)

35、怎么理解同步和异步

1、javascript是单线程。单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。于是就有一个概念——任务队列。

2、同步任务，顾名思义，就是立即执行的任务，同步任务一般会直接进入到主线程中执行；而异步任务，就是异步执行的任务，比如ajax网络请求，setTimeout 定时函数等都属于异步任务，异步任务会通过任务队列( Event Queue )的机制来进行协调。

36、localStorage、sessionStorage和cookie的区别

共同点: 都是保存在浏览器端，且同源的。
   区别:
   1. 请求不同:
       cookie 数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。
       sessionStorage 和 localStorage不会自动把数据发给服务器，仅在本地保存。

   2. 存储大小限制也不同:
       cookie 数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
       sessionStorage 和 localStorage虽然也有存储大小的限制，但比cookie大得多，sessionStorage约5M、localStorage约5M 。
   3. 数据有效期不同:
       sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；
       localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
       cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
   4. 作用域不同:
       sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；
       localStorage，cookie在所有同源窗口中都是共享的；

37、你对WebSocket了解哪些

答: WebSocket 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯，它建立在TCP之上，同HTTP一样通过TCP来传输数据，但是它和HTTP最大不同是：

1. WebSocket是一种双向通信协议，在建立连接后，WebSocket服务器和Browser/Client Agent都能主动的向对方发送或接收数据，就像Socket一样；
2. WebSocket需要类似TCP的客户端和服务器端通过握手连接连接成功后才能相互通信。

38、js的运行机制是什么

js是单线程执行的，页面加载时，会自上而下执行主线程上的同步任务，当主线程代码执行完毕时，才开始执行在任务队列中的异步任务。具体如下

1.所有同步任务都在主线程上执行，形成一个执行栈。

2.主线程之外，还存在一个"任务队列(eventloop队列或者消息队列)"。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。

3.一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。哪些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。

4.主线程不断重复上面的第三步.

39、怎么理解面向对象

1、面向对象是一种软件开发的思想和面向过程是相对应的，就是把程序看作一个对象，将属性和方法封装其中，以提高代码的灵活性、复用性、可扩展性。

2、面向对象有三大特性：封装、继承、多态。
封装：把相关的信息（无论数据或方法）存储在对象中的能力
继承：由另一个类（或多个类）得来类的属性和方法的能力
多态：编写能以多种方法运行的函数或方法的能力

3、js中对象是一个无序的数据集合或者也可以说是属性和方法的集合，可以动态的添加属性可方法。

4、js是基于对象，但是也使用了嵌入了面向对象的思想，可以实现继承和封装，这样也可以提供代码的灵活性和复用性。

40、如何清除浏览器的缓存

当我们请求的地址相同的时候，浏览器为了提高性能，会把相同地址的数据进行缓存。如果服务端的数据发生改变，客户端也不会更新，那就需要清除缓存 
解决：在url后面加时间戳