2023前端面试题

An-one

已于 2023-02-09 21:05:51 修改

阅读量1.6k

点赞数 1

分类专栏：前端面试题文章标签：前端 javascript vue.js Powered by 金山文档

于 2023-02-09 21:03:48 首次发布

本文链接：https://blog.csdn.net/Jshsbdhsh/article/details/128960550

版权

前端面试题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.样式优先级的规则是什么?

!important>行内样式>嵌入样式>外链样式>id选择器>类选择器>标签选择器>复合选择器>通配符>继承样式

2.谈谈你对vue生命周期的理解

生命周期是什么？Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载DOM–>渲染、更新–>渲染、卸载等一系列过程，我们称这是Vue的生命周期。

3.vue 组件间通信方式

1.prop方式

2.自定义事件（ on)

3.全局事件总线（this.$bus)

4.pubsub.js (发布与订阅，一般用在react)

5.vueX

6.插槽

4.对SPA单页面的理解，它的优缺点分别是什么

SPA（Single Page Application）是一种技术，它能够在一个页面上提供完整的应用体验，通过AJAX和JavaScript技术来实现。

优点：

更快的加载时间：因为数据是在客户端而不是服务器端加载，因此SPA可以更快地加载页面；

更好的用户体验：SPA可以提供更好的用户体验，因为它可以更快地加载页面，并且可以更好地处理用户的交互；

更少的服务器负载：SPA可以减少服务器的负载，因为它可以把大部分的加载和处理工作都放在客户端；

更低的维护成本：SPA可以减少维护成本，因为所有的代码都在客户端，所以不需要每次更新都要发布新的版本。

缺点：

搜索引擎不友好：由于SPA是一个单页面应用，因此搜索引擎无法正确抓取，这可能会影响网站的SEO；

浏览器兼容性问题：由于SPA应用程序依赖于JavaScript，因此如果用户的浏览器不支持JavaScript，就无法正常使用SPA应用程序；

安全性问题：由于SPA应用程序的代码都在客户端，因此它更容易受到攻击；

测试困难：由于SPA应用程序的代码都在客户端，因此测试起来比较困难。

5.v-if和v-show有什么区别？

v-if 是条件渲染，它会根据表达式的值的真假来决定是否渲染，如果为假，则什么都不做；如果为真，则会渲染出元素，但是它会确保条件块在切换当中不会有任何的性能损失。

v-show 是条件展示，它不管表达式的值是什么，都会渲染出元素，只是根据表达式的值来确定是显示还是隐藏。它的优势在于，切换的时候比 v-if 要快，因为它不需要销毁再创建节点，只需要改变 CSS 属性，但是它的缺点也很明显，因为它渲染出来的元素在 DOM 中依然存在，所以它会对性能有一定的影响。

6.computed和watch的区别？

computed

computed是基于它们的依赖进行缓存的可计算属性，只有在其依赖值发生改变时才会重新计算。

watch

watch选项用于监听某个值的变化，当值发生改变时，会触发回调函数。它可以接收四个参数：新值、旧值、触发的表达式和 watch 实例本身。

7.vue-router路由模式有几种

哈希模式(Hash Mode)：使用URL的hash部分（即#及其后面的内容）来模拟一个完整的URL，当URL改变时，页面不会重新加载，只有hash值发生变化时，才会触发对应的路由函数。

历史模式(History Mode):使用HTML5 History API，当URL改变时，页面会重新加载，每次跳转都会向服务器发送一个请求，这种模式可以让搜索引擎更好的抓取页面，但是会增加服务器的压力。

8.如何解决vuex页面刷新数据丢失问题

1、使用vuex的persistedState插件，可以将vuex的状态持久化到本地存储中，当页面刷新时，从本地存储中读取vuex的状态，从而解决页面刷新数据丢失问题。

2、使用localStorage或者sessionStorage，将vuex的状态存储在本地，当页面刷新时，从本地存储中读取vuex的状态，从而解决页面刷新数据丢失问题。

3、使用vuex的plugin插件，在页面刷新时，从服务器端读取v

9.Vue中key是用来做什么的？为什么不推荐使用index作为key?

Vue中key是用来标识Vue中的元素和组件的唯一标识符，当Vue要处理元素和组件时，它会用key来追踪和区分它们。

不推荐使用index作为key的原因是：当Vue要重新排列元素和组件时，它会根据key来重新排列，如果使用index作为key，Vue会认为这些元素和组件都是新的，导致它们不能正确的重新排列。

10.JS基本数据类型，JS有几种方法判断变量的类型

JS基本数据类型有：

Number（数字）、String（字符串）、Boolean（布尔值）、Undefined（未定义）、Null（空）、Symbol（符号）。

JS有以下几种方法可以判断变量的类型：

typeof操作符：typeof操作符可以返回一个表示变量类型的字符串，比如：typeof 123 // “number” 。

instanceof操作符：instanceof操作符可以用来判断一个变量是否是某个对象的实例，比如：var a = new String("abc"); a instanceof String // true。

Object.prototype.toString()：Object.prototype.toString()可以返回一个表示变量类型的字符串，比如：Object.prototype.toString.call(123) // "[object Number]"。

constructor属性：变量的constructor属性可以指向变量的构造函数，比如：var a = new String("abc"); a.constructor == String // true。

11.罗列数组哪些操作方法1、会改变原数组，2、不改变原数组，3、数组去重

1、会改变原数组：

1) push()：向数组的末尾添加一个或多个元素，并返回新的长度。

2) pop()：删除数组的最后一个元素，并返回删除的元素。

3) shift()：删除数组的第一个元素，并返回删除的元素。

4) unshift()：向数组的开头添加一个或更多元素，并返回新的长度。

5) reverse()：颠倒数组中元素的顺序。

6) sort()：对数组的元素进行排序。

7) splice()：通过删除或替换现有元素或者原地添加新的元素来修改数组。

2、不改变原数组：

1) concat()：连接两个或多个数组，并返回结果。

2) slice()：从某个已有的数组返回选定的元素。

3) filter()：通过指定函数测试所有元素，并返回符合条件的元素组成的新数组。

4) map()：对数组中的每个元素进行操作，并返回操作后的新数组。

5) reduce()：接收一个函数作为累加器，对数组中的每个元素（从左到右）应用该函数，最终将其减少为单个值。

6) every()：检查数组中的每个元素是否都能通过指定函数的测试。

7) some()：检查数组中的每个元素是否至少有一个能通过指定函数的测试。

3、数组去重：

1) Set()：Set 对象允许你存储任何类型的唯一值，并且可以使用数组的方法来去重。

2) filter()：使用 filter 方法，可以根据数组的某个值是否在新数组中存在，来去重。

3) includes()：使用 includes 方法，可以根据数组的某个值是否存在，来去重。

12.如何解决跨域？ajax、axios、jsonp的理解

跨域解决方案有：

JSONP：利用script标签没有跨域限制的特性，通过传递一个callback函数来解决跨域问题。

CORS：服务器端设置Access-Control-Allow-Origin来实现跨域，浏览器会对这个响应头进行处理，从而实现跨域。

代理服务器：利用代理服务器来转发请求，从而达到跨域的目的。

修改document.domain：修改document.domain属性来达到跨域的目的。

对ajax、axios、jsonp的理解：

（1）Ajax：Ajax（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的网页开发技术。它使用异步数据传输，可以在不重新加载整个页面的情况下更新部分网页内容。

（2）Axios：Axios是一个基于Promise的HTTP客户端，可用于浏览器和node.js中。它提供了一个简单的API来发出XMLHttpRequests（Ajax请求），并处理响应。

（3）JSONP：JSONP（JSON with Padding）是一种使用<script>标签加载外部资源的技术，用于解决跨域问题。它使用<script>标签加载数据，并将数据封装在一个回调函数中，以便在数据加载完成后调用该函数。

13.http和https的区别？ get和post的区别？

http和https的区别？

HTTP（HyperText Transfer Protocol）是一种基于TCP/IP通信协议的应用层协议，它规定了客户端和服务器端之间的通信方式，是一种无状态的、基于请求/响应模式的协议。

HTTPS（HyperText Transfer Protocol Secure）是在HTTP的基础上加入SSL/TLS安全层，以提供传输安全的网络传输协议。它使用证书进行身份认证，使用加密传输数据，可以有效防止数据在传输过程中被窃取和篡改。

HTTP和HTTPS的主要区别有：

传输协议不同：HTTP采用明文传输，HTTPS采用密文传输；

安全性不同：HTTP不加密，易受到窃听攻击；HTTPS采用SSL/TLS加密，可以有效防止数据被窃取和篡改；

端口不同：HTTP使用80端口，HTTPS使用443端口；

证书不同：HTTP不需要证书，HTTPS需要CA机构颁发的SSL证书；

性能

get和post的区别：

GET 是一种请求方法，它向服务器请求某个资源，而 POST 是一种提交数据的方法，它向服务器发送数据。GET 请求可以被缓存，而 POST 请求不可以被缓存。GET 请求可以被收藏，而 POST 请求不可以被收藏。GET 请求有长度限制，而 POST 请求没有长度限制。GET 请求只能进行 URL 编码，而 POST 请求可以使用多种编码方式

14.本地存储的方式有哪些？

Cookie：最常用的本地存储方式，它是一种在客户端保存少量数据的技术，Cookie 数据存放在用户的浏览器中，每次访问都会携带 Cookie 信息，Cookie 可以用来存储会话信息、个性化设置等。

Web Storage：HTML5 提供的新的本地存储方式，它可以更大量地存储数据，支持两种存储方式：LocalStorage 和 SessionStorage，它们都存储在客户端，但 LocalStorage 数据会一直保存，而 SessionStorage 数据只在会话期间保存，会话结束后就会被清除。

IndexedDB：IndexedDB 是一种本地存储数据库，它可以用来存储大量结构化数据，它支持事务，可以用来存储较大量的数据，比如文件等。

File System API：File System API 是 HTML5 提供的一种本地存储方式，它可以用来在客户端存储文件，并且可以访问文件系统中的文件。

Web SQL Database：Web SQL Database 是一种基于 SQL 的本地存储数据库，它可以用来存储结构化数据，支持事务，可以用来存储较大量的数据。

15.cookie,sessionStorage,localStorage的区别

cookie：cookie 是网站为了标识用户身份而储存在用户本地终端（Client Side）的小文件，它会在浏览器下次访问同一站点时被提取出来，以此来判断用户的身份，从而决定用户看到的页面内容。

sessionStorage：sessionStorage 是一种在客户端本地存储数据的方式，它的存储范围是在当前会话下（session），也就是说，关闭浏览器窗口后，sessionStorage 中的数据就会被清除掉。

localStorage：localStorage 是一种在客户端本地存储数据的方式，它的存储范围是在当前域名下，也就是说，不同的域名下的 localStorage 是不共享的，而且 localStorage 数据是永久保存的，除非主动删除或清除浏览器缓存数据。

16.从web前端方面优化性能？至少列举5点？

减少HTTP请求：减少页面中的图片、CSS文件、JS文件，尽量使用CSS Sprites和文本文件；

使用CDN：使用CDN加速静态资源的加载；

压缩文件：使用Gzip压缩文件，减少文件传输时间；

使用缓存：使用缓存技术，减少对服务器的访问；

合理的JS、CSS放置：将JS文件放置在页面底部，将CSS文件放置在页面头部。

17.从web前端方面优化性能？至少列举5点？

减少HTTP请求：减少页面中的图片、CSS文件、JS文件，尽量使用CSS Sprites和文本文件；

使用CDN：使用CDN加速静态资源的加载；

压缩文件：使用Gzip压缩文件，减少文件传输时间；

使用缓存：使用缓存技术，减少对服务器的访问；

合理的JS、CSS放置：将JS文件放置在页面底部，将CSS文件放置在页面头部。

18.服务器相关知识信息，前端项目部署相关实例说明

服务器相关知识：

（1）服务器概念：服务器是一台能够接收外部请求，处理请求，并返回响应结果的计算机系统。

（2）服务器类型：服务器可以分为物理服务器和虚拟服务器两种，物理服务器是指一台实体服务器，而虚拟服务器是指在一台物理服务器上通过虚拟化技术创建的多个虚拟服务器。

（3）服务器操作系统：服务器操作系统是指在服务器上运行的操作系统，常见的服务器操作系统有Windows Server、Linux、Unix等。

（4）服务器软件：服务器软件是指在服务器上运行的软件，常见的服务器软件有Web服务器、数据库服务器、邮件服务器等。

前端项目部署实例：

（1）准备工作：安装服务器操作系统（如Linux）和Web服务器（如Apache），并配置好网络环境。

（2）上传文件：将前端项目的文件上传到服务器的指定目录中。

（3）配置网站：根据前端项目的需求，配置Web服务器，使其能够正确处理前端项目的请求。

（4）检查部署：通过在浏览器中输入服务器的IP地址，检查前端项目是否部署成功。

19.数据统计大屏开发，使用什么技术栈？举例说明

技术栈：

前端：HTML5 + CSS3 + JavaScript + React + D3.js + Webpack

后端：Node.js + Express + MongoDB

前端：HTML5 + CSS3 + JavaScript 可以用来构建页面的布局和展示，React 是一个用于构建用户界面的 JavaScript 库，D3.js 是一个用于创建交互式数据可视化的 JavaScript 库，Webpack 可以将 JavaScript 模块打包成可用于浏览器的静态资源文件。

后端：Node.js 是一个基于 JavaScript 的服务器端开发框架，Express 是一个基于 Node.js 的 web 开发框架，MongoDB 是一个面向文档的 NoSQL 数据库。

20.前端职业规划说明

前端职业规划是一个非常重要的话题，它是一个漫长的过程，但是它也是一个可以帮助你获得成功的过程。在前端职业规划中，你需要明确自己的职业目标，搞清楚自己的技能和经验，以及如何获得更多的技能和经验。

首先，你需要明确自己的职业目标，比如你想成为一名前端开发工程师，一名前端设计师，一名前端架构师等等。一旦你明确了自己的职业目标，你就可以开始制定职业规划，比如你需要学习哪些技能，你需要参加哪些培训，你需要参加哪些实习，你需要参加哪些比赛等等。

其次，你需要搞清楚自己的技能和经验，并且要不断提升自己的技能和经验，比如你需要学习HTML，CSS，JavaScript，React，Vue等前端技术，还要学习后端技术，比如Node.js，PHP等等，你还要学习设计技术，比如Adobe Photoshop，Adobe Illustrator等等。

最后，你还要不断搜索机会，比如你可以参加一些实习，参加各种比赛，加入一些技术社区，参加一些学习团队，参加一些技术会议，参加一些技术培训，参加一些技术比赛等等，这些都可以帮助你提升自己的技能和经验，让你更容易实现自己的职业目标。

1.有一个数组[1,2,null,5,6,undefined,0],需要过滤掉null和undefined，然后对每一项乘以2，最终进行求和。

const arr = [1,2,null,5,6,undefined,0];const newArr = arr.filter(item => item !== null && item !== undefined).map(item => item * 2);const sum = newArr.reduce((prev, cur) => prev + cur);console.log(sum); // 28

2.一下代码输出结果是什么，为什么：

for(var i =0;i<3;i++){ setTimeout(()=>{ console.log(i); },1000) }

输出结果是 3 3 3，因为在一个闭包中，变量i的值是一直在变的，当setTimeout执行时，i的值已经等于3，所以输出3 3 3。

3.实现如下留空的sleep方法，并输出结果

function sleep(ms){

}

console.log('立即输出');await sleep(1000);console.log('1秒后才输出')

//实现

function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)) }

console.log('立即输出'); sleep(1000).then(() => { console.log('1秒后才输出') })

4.一个完整的URL最多可以由哪些部分组成？

一个完整的URL由以下几部分组成：

协议：指定使用的协议，如HTTP、HTTPS、FTP等；

主机名：指定服务器的域名或IP地址；

端口号：指定服务器上的端口号，可以省略；

路径：指定服务器上的文件或资源的路径；

查询参数：指定向服务器发送的查询参数，可以省略；

锚点：指定文档中的某个位置，可以省略。

5.HTTP请求和响应的报文结构是什么样的

HTTP请求报文结构：

请求行：请求方法，请求URI，HTTP协议版本

请求头：Host，User-Agent，Accept，Accept-Language，Accept-Encoding，Connection等

请求体：可选，具体根据请求方法的不同而不同

HTTP响应报文结构：

状态行：HTTP协议版本，响应状态码，状态描述

响应头：Server，Date，Content-Type，Content-Length，Connection等

响应体：可选，具体根据响应状态码的不同而不同

6.前后端分离开发的优点和缺点

优点：

前后端分离，可以更好的提高开发效率，前端和后端可以同时开发，减少开发时间；

前后端分离，可以更好的降低耦合度，可以更好的实现前端的视图展示和后端的数据处理；

前后端分离，可以更好的提高系统的可维护性，可以更快的实现更新和维护；

缺点：

前后端分离，需要有一定的技术和开发经验，需要更多的学习成本；

前后端分离，需要更多的技术支持，如接口文档，网络通信等；

前后端分离，需要更多的测试成本，因为前后端分离后，需要进行多次的接口测试；

7.简单描述一下浏览器的协商缓存和强缓存

浏览器的协商缓存是指浏览器在发出请求时，会在请求头中添加一个If-Modified-Since或者If-None-Match字段，用来表示客户端上次获取资源的时间或者资源的ETag值，服务器根据这些信息来判断资源是否更新，如果没有更新，则返回304响应码，表示资源没有修改，客户端可以使用本地缓存，从而避免了重复下载资源。

强缓存是指浏览器可以根据服务器发送的响应头中的Cache-Control和Expires字段的值来判断是否使用本地缓存，如果Cache-Control或Expires的值比当前时间大，则表示可以使用本地缓存，从而避免重复下载资源。

8.XXS攻击

XSS（跨站脚本攻击）是一种网络攻击，它允许攻击者在网站上注入恶意代码，以便在访问该网站的用户的计算机上执行恶意操作。XSS攻击通常通过在网页上植入恶意JavaScript代码来实现，这些代码可以在用户浏览网页时被执行，从而获取用户的敏感信息，如登录凭据或其他敏感信息。XSS攻击也可以用于破坏网站的正常功能，例如破坏网站的布局或使网站不可用。XSS攻击可以通过多种方式进行，例如，攻击者可以在网页中植入恶意JavaScript代码，以便在用户访问该网页时执行恶意操作。

9.xxs攻击如何防御

1、应用程序层面：

（1）对关键字段进行限制，如检查用户提交的字段长度，字符范围，限定参数的最大值等。

（2）不要将用户提交的数据直接插入数据库，应该先进行转义，如将用户提交的html标签进行转义，以防止被注入攻击。

（3）尽量采用参数化SQL语句，而不是字符串拼接的SQL语句，以防止SQL注入攻击。

2、网络层面：

（1）采用防火墙过滤，如对特殊字符进行过滤，限制特定IP访问，检测恶意攻击行为等。

（2）采用Web应用防火墙，对恶意攻击行为进行检测和阻止。

（3）采用限制访问的方式，对不同的用户类型实施不同的访问控制，以防止恶意攻击。

10.Git怎么合并提交记录

使用git merge命令

使用git merge命令可以将两个分支的提交记录合并到一起，以达到合并提交记录的目的。

11.用js实现一个自己的instanceof(a,b)

function instanceof(a, b) { let proto = a.proto; while(true) { if (proto === null) { return false; } if (proto === b.prototype) { return true; } proto = proto.proto; }}

12.js生成一个随机颜色，范围：#333333~@DDDDDD

functionrandomColor(){

varr=Math.floor(Math.random()*256).toString(16);

varg=Math.floor(Math.random()*256).toString(16);

varb=Math.floor(Math.random()*256).toString(16);

return"#"+r+g+b;

}

1.DOCTYPE的作用是啥

DOCTYPE是文档类型声明，它指示浏览器渲染文档的方式，是一种标准的语法，它的作用是告诉浏览器使用哪种文档标准

2.至少写出3个DOCTYPE文档类型

HTML 4.01 Strict：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"" target="_blank">http://www.w3.org/TR/html4/strict.dtd">

HTML 5：

<!DOCTYPE html>

XHTML 1.0 Strict：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3.HTML与XHTML，有什么区别

HTML和XHTML是两种不同的语言，它们之间有一些显著的差异。

1）HTML是一种标记语言，而XHTML是一种XML应用。

2）HTML允许使用不正确的标签，而XHTML要求标签必须正确嵌套。

3）HTML允许使用小写标签，而XHTML要求标签必须使用大写字母。

4）HTML允许不正确的属性，而XHTML要求属性必须正确。

5）HTML允许属性不加引号，而XHTML要求属性必须加引号。

6）HTML允许使用自闭合标签，而XHTML要求所有标签必须闭合。

4.rem和em的区别

rem是相对于根元素html的字体大小来计算的，em是相对于父元素的字体大小来计算的。

5.JS基本数据类型有：

Number（数字）、String（字符串）、Boolean（布尔值）、Undefined（未定义）、Null（空）、Symbol（符号）。

6.postion的值,relative和absolute分别是相对于谁进行定位的？

relative是相对于其本身，absolute是相对于其父元素。

7.什么是BFC规范

BFC（块级格式化上下文）规范是W3C定义的一套CSS规范，它定义了元素如何在页面上呈现和布局的规则，主要解决浮动元素与非浮动元素之间或者浮动元素之间的交互关系。。

8.什么是promise？主要用到什么地方？

Promise 是一种异步编程的解决方案，允许异步操作以同步的方式进行处理。它提供了一种更优雅的方式来处理异步操作，并允许异步操作像同步操作一样被处理。主要用到了异步编程，如Ajax请求、定时器任务等。

9.async、await的使用场景是什么

async/await是ES7的语法，它是用来解决异步编程的问题，可以使异步编程更加容易和优雅。

async/await的使用场景主要有：

处理异步任务：使用async/await可以更加优雅地处理异步任务，避免使用回调函数来处理异步任务。

同步请求：使用async/await可以把多个异步请求同步化，方便编写代码。

并发处理：使用async/await可以把多个异步任务并发处理，提高处理效率。

改善代码可读性：使用async/await可以把复杂的异步代码拆分成多个简单的异步函数，改善代码的可读性。

10.事件委托是什么

事件委托是一种事件处理技术，它允许你只指定一个事件处理程序来响应某一类型的事件，而不是为每一个事件都指定一个事件处理程序。

事件委托的工作原理是，当一个事件发生时，它会从文档或者文档树中向上冒泡，直到找到它所属的元素，然后检查该元素上是否有指定的事件处理程序，如果有，则调用它，如果没有，则继续冒泡，直到找到有指定事件处理程序的元素为止。

11.判断一个变量是数组有哪些方法

使用Array.isArray()方法；

使用 typeof操作符来检测一个变量是否为数组；

使用instanceof操作符来检测一个变量的类型；

使用对象的.constructor属性，判断是数组的构造函数。

12.display:none和visibility:hidden的区别是什么

display:none和visibility:hidden的区别是：

display:none 会让元素完全从文档布局中消失，display的值为none的元素，不占据空间，也不显示；

visibility:hidden 会让元素从文档布局中消失，但是仍然会保留其占据的空间，只是元素不可见。

13.介绍一下闭包？闭包的常用场景

闭包是指有权访问另一个函数作用域中的变量的函数。

常用场景：

（1）封装变量：利用闭包可以封装全局变量，使外部无法访问，从而保护程序的数据。

（2）函数柯里化：柯里化指的是将多个参数函数转换成只有一个参数的函数，利用闭包可以实现函数柯里化。

（3）定时执行：利用闭包可以按照指定时间调用函数执行，实现定时任务。

14.var、let和const的区别

var

1.声明全局变量 // 2.传统变量声明方式 // 3.跨作用域提升，它在执行之前声明的变量会被向上提升到它的所属作用域顶部 // 4.可以多次声明

let

1.块级作用域 // 2.不可以重复声明 // 3.不存在变量提升

const

1.拥有块级作用域 // 2.不可以重复声明 // 3.不存在变量提升 // 4.声明的常量不可以修改

15.一. js中 0.1 + 0.2 为什么不等于0.3?

因为浮点数运算的精度问题。在计算机运行过程中，需要将数据转化成二进制，然后再进行计算。js中的Number类型遵循IEEE754标准，在IEEE754标准的64位浮点数相加，因为浮点数自身小数位数的限制而截断的二进制在转化为十进制，就变成0.30000000000000004，所以在计算时会产生误差。小数转化为IEEE754的过程：先转化为二进制的形式，然后再用科学计数法表示，接着把通过科学计数法表示的二进制数用IEEE754标准表示。

16.移动端开发时，一般怎么实现自适应布局？

使用百分比的宽度和高度；

使用媒体查询，根据不同的屏幕宽度来设置不同的样式；

使用flex布局；

使用Viewport；

使用rem单位；

使用CSS3的transform-scale缩放；

使用CSS3的calc()函数计算宽度；

使用CSS3的media queries响应式布局；

使用JavaScript和jQuery来实现自适应布局

17.行内元素有哪些？块级元素有哪些？空元素有哪些？

行内元素：

a 标签

img 标签

span 标签

input 标签

strong 标签

em 标签

label 标签

块级元素：

div 标签

p 标签

h1~h6 标签

ul 标签

ol 标签

li 标签

table 标签

form 标签

空元素：

br 标签

hr 标签

img 标签

input 标签

link 标签

meta 标签

18.请指出以下代码的区别：function Person(){}、var person = Person() 、var person=new Person()

（1）function Person(){}：定义一个Person函数，用来构造Person对象。

（2）var person = Person()：调用Person函数，并将返回值赋值给变量person，此时person变量的值为undefined。

（3）var person=new Person()：使用new关键字调用Person函数，并将返回的Person对象赋值给变量person，此时person变量的值为Person对象。

19.vue里怎么实现父子组件通信

使用props：父组件可以将数据传递给子组件，子组件可以通过props接收父组件传递过来的数据。

使用$emit：子组件可以通过$emit触发父组件的自定义事件，父组件可以监听子组件触发的事件，从而获取子组件传递过来的数据。

使用provide/inject：provide/inject是vue2.2.0新增的特性，可以实现不太深的组件层级之间的数据传递。

使用vuex：vuex是vue官方提供的一个状态管理模式，可以实现不同组件之间的数据共享。

20.vuex是什么？一个vuex对象里有什么属性？

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

一个Vuex对象包含以下属性：

state：用于存储状态信息。

getters：用于获取状态信息的计算属性。

mutations：用于更改状态信息的函数。

actions：用于处理异步操作的函数。

modules：用于将store分割为模块的对象。

21.利用css实现一个秒针绕一点转动的效果

.clock {

width: 200px;

height: 200px;

position: relative;

}

.clock:before {

content: '';

display: block;

width: 8px;

height: 8px;

background: #000;

border-radius: 50%;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

.clock:after {

content: '';

display: block;

width: 2px;

height: 100px;

background: #000;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%) rotate(90deg);

animation: rotateClock6slinearinfinite;

}

@keyframesrotateClock {

from {

transform: translate(-50%, -50%) rotate(90deg);

}

to {

transform: translate(-50%, -50%) rotate(450deg);

}

1.Ar.ray..pr.oto.type的方法中，哪个方法不会改变原有数组

A、push B、slice C、splice D、sort答案：B、slice

2.事件传播的三个阶段

捕获阶段：从最外层元素开始，沿着DOM树向下传播，依次调用捕获阶段的事件处理函数；

目标阶段：调用目标元素上的事件处理函数；

冒泡阶段：从目标元素开始，沿着DOM树向上传播，依次调用冒泡阶段的事件处理函数。

3.js中阻止默认事件的默认操作是？

通过调用事件对象的preventDefault()方法来阻止默认事件的默认操作。

4.ES6 解构表达式let[a,b,c,d,e]="hello",的结果

a = 'h';b = 'e';c = 'l';d = 'l';e = 'o';

5.["1","2","3"].map(parseInt)结果是啥

[1, NaN, NaN]

6.下面代码执行结果依次为

var a = 1; function fn1(a){ console.log(a); a=2;}fn1();console.log(a)// 1// 1

7.下列关于跨域描述不正确的是（C）

A,跨域可以通过jsonp实现B,跨域可以通过服务端代理实现C，所有跨域方式必须设置crossDomain为true才能携带cookieD,跨域是前后端分离部署的基础

8、下列提高性能方法错误的是(D)

A合并压缩Js文件,减少网络请求耗时B尽量减少 Dom操作,提高js执行性能C.在引用is文件的日时标加入版木号例如 test.js?1000D.减少Dom的复杂度，增加css优化

9、下列关于jsonp描述不正确的是(B)

A.jsonp 跨域需要服务端配合B.jsonp 跨域需要设置crossDomain为true 才能携带cookieC.jsonp是ajax请求的一种,类似 get postD. jsonp具有良好的兼容性，不需要现代浏览器支持

10、在javascript里,下列选项中不属于数组方法的是(B)

A.sort() B. length() C. concat() D. reverse()

11、下列哪个是css中可继承的属性()

A. Height B.border C. width D.color

12、下边这代码输出的结果是(C):

var two=0.2var one=0.1var eight = 0.8var six =0.6console.log([two - one == one, eight - six == two]);A. true,true B. false,true C. true,false D. false,false

13.[typeof null, null instanceof Object]这些类型的结果是()

A.["object", false] B. [null, false]C.["object", true] D. other

A.["object", false]

14、以下哪个不是javascript 的全局函数(B.eval)

A. parseFloat B.eval C. setTimeout D.alert

15、（多选)关于以下代码,说法正确的有哪些?(A、C、D)

function Person(){} var person = new Person();A.每一个原型都有一个constructor属性指向关联的构造函数。B.每一个对象都有一个 prototype属性。C. Object.getPrototypeOf(person)=== Person.prototypeD. person.constructor === Person

16.promise的then为什么可以支持链式调用?

Promise的then方法返回一个新的Promise实例，这样就可以实现链式调用。Promise的then方法接收两个参数，第一个参数是resolve状态的回调函数，第二个参数是reject状态的回调函数，当Promise的状态发生改变时，就会触发对应的回调函数，而新返回的Promise实例的状态由回调函数的返回值决定。这样，一个Promise的then方法的调用就可以返回另一个Promise，从而实现链式调用。

17.Please write some codes, mock the get request with the axios.

//import axios

import axios from 'axios';

//Create a function to make the get request

const getData = () => {

return axios.get('http://example.com/data')

.then(response => response.data)

.catch(error => console.log(error));

}

//Call the function

getData()

.then(data => console.log(data))

.catch(error => console.log(error));

18.What' s the difference between v-if and v- show?

V-if is used for conditionally rendering a piece of DOM based on a Boolean expression, while v-show is used for displaying an element regardless of the initial condition but with the ability to toggle its visibility. V-if will render the element only if the condition is true, while v-show will always render the element but toggle its display based on

19.列举几种vue路由的跳转方式

1. 使用vue-router提供的router-link组件：

`<router-link :to="{ path: '/user/123' }">User</router-link>`

2. 使用JavaScript代码直接操作router实例：

`this.$router.push('/user/123')`

3. 使用编程式导航：

`this.$router.push({ path: '/user/123' })`

4. 使用replace替换当前路由：

`this.$router.replace('/user/123')

20.Vue生命周期

Vue 生命周期主要分为8个阶段：

beforeCreate：实例刚被创建，此时实例上还没有数据，也没有编译好的模板。

created：实例已经创建完成，数据已经被观测，属性已经定义，但是挂载阶段还没有开始，$el 属性目前不可见。

beforeMount：此时实例已经挂载，但是 DOM 还没有更新。

mounted：此时实例已经挂载完成，DOM 已经更新，$el 属性可以使用了。

beforeUpdate：状态更新之前调用此钩子，此时 data 中的数据已经更新，可以获取更新后的 DOM，但是此时还没有开始重新渲染 DOM。

updated：此时实例已经更新完毕，DOM 已经重新渲染完毕，可以执行依赖于 DOM 的操作。

beforeDestroy：实例销毁之前调用，此时实例仍然有完整的数据和方法。

destroyed：此时实例已经销毁，所有的事件监听和子实例也都已经被销毁，可以执行一些清理工作。

1、JavaScript 包括哪些数据类型，请分别编写3种以上类型的判断函数如:isString

JavaScript数据类型包括：字符串string、数字number、布尔boolean、对象object、数组array、null、undefined等。

判断函数：

// 判断是否是字符串

function isString(val) {

return Object.prototype.toString.call(val) === '[object String]';

}

// 判断是否是数字

function isNumber(val) {

return Object.prototype.toString.call(val) === '[object Number]';

}

// 判断是否是布尔

function isBoolean(val) {

return Object.prototype.toString.call(val) === '[object Boolean]';

}

// 判断是否是对象

function isObject(val) {

return Object.prototype.toString.call(val) === '[object Object]';

}

// 判断是否是数组

function isArray(val) {

return Object.prototype.toString.call(val) === '[object Array]';

}

// 判断是否是null

function isNull(val) {

return Object.prototype.toString.call(val) === '[object Null]';

}

// 判断是否是undefined

function isUndefined(val) {

return Object.prototype.toString.call(val) === '[object Undefined]';

}

2、如何显示/隐藏一个DOM元素?

使用display属性来显示/隐藏一个DOM元素：

// 显示一个DOM元素

document.getElementById("myElement").style.display = "block";

// 隐藏一个DOM元素

document.getElementById("myElement").style.display = "none";

3、JavaScript 中如何对-个对象进行深度clone？

使用JSON.parse()和JSON.stringify()方法来实现对象的深度克隆：

// 将对象转换成字符串var objStr = JSON.stringify(object);// 将字符串转换成对象var cloneObj = JSON.parse(objStr);

4、写出以下代码打印顺序

setTimeout(() => {
   console. log('hello world A')
}，0)
console.log('hello world B');
new promisel(resolve) => (
     console. log('hello world C');
     resolve ()
}).then(() => {
     console.log('hello world D');
}). then(()=>{
      console.log('hello world E')
})

//hello world B
//hello world C
//hello world D
//hello world E
//hello world A

5.清除浮动的几种方法

父元素设置clear：both；

给浮动元素设置clear：both；

给浮动元素设置overflow：hidden；

给父元素设置zoom：1；

给父元素设置position：relative；

给父元素设置display：table；

给父元素设置display：inline-block；

给父元素设置display：flex；

6.css选择器有哪些？哪些属性可以继承？css选择器的优先级规则是什么？

CSS选择器有： 1. 元素选择器：根据元素标签名称来选择元素； 2. id选择器：根据元素的id属性来选择元素； 3. 类选择器：根据元素的class属性来选择元素； 4. 属性选择器：根据元素的属性来选择元素； 5. 伪类选择器：根据元素的状态来选择元素； 6. 伪元素选择器：根据元素的特定部分来选择元素； 7. 组合选择器：根据元素的组合来选择元素。可以继承的CSS属性有： - font-family - font-size - font-style - font-weight - color - line-height - letter-spacing - text-align - text-indent - text-transform - direction - white-space - word-spacing - list-style - background CSS选择器优先级规则： 1. 内联样式（style属性）优先级最高； 2. ID选择器优先级次之； 3. 类选择器、属性选择器和伪类选择器的优先级相同，比ID选择器低； 4. 元素选择器和伪元素选择器的优先级最低。

7.div水平垂直居中的几种方式？

1. 使用CSS的margin属性：
div {
    margin: 0 auto;
}
2. 使用CSS的position属性：
div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
3. 使用CSS的flex属性：
div {
    display: flex;
    justify-content: center;
    align-items: center;
}
4. 使用CSS的grid属性：
div {
    display: grid;
    justify-content: center;
    align-items: center;
}