前端开发面试题(自己当笔记用)

CSS transition的实现效果和有哪些属性？

实现过度效果，

属性：transition-property transition-duration transition-timing-function transition-delay

flex的属性？

flex是一个弹性布局属性。 flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。

CSS 实现沿Y轴旋转360度？

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

自适应

实现视口单位的相应操作，媒体查询可以实现自适应，给定视口单位范围执行相对应的自适应

也可以使用js文件封装自适应视口

比如常见的自适应视口单位为rem，移动端用的比较多，他是依赖与根元素改变时，rem才会发生改变

Less与css区别

1、Less是一门CSS预处理语言，css是一种用来表现HTML或XML等文件样式的计算机语言。

2、less扩展了CSS语言，增加了变量、Mixin、函数等特性。

3、css可以被浏览器直接识别，less需要先编译为css。

BFC

定义：BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

CSS样式的优先级

!important > 内联样式（style） > ID选择器（id） > 类选择器(class) > 标签选择器

说一下浮动？

脱离文档流，盒子塌陷，影响其他元素排版

作用：

1.设置了浮动的块级元素可以排列在同一行

2.特点： -设置了浮动，该元素脱标。元素不占位置

JS 基本数据类型有哪些？用什么判断JS 基本数据类型？

js中常用有5种数据类型：Undefined、Null、Boolean、Number和String。 typeof 判断数据类型

数组怎么判断？

使用instanceof方法

引用类型和基本类型的区别？

基本类型 1.基本类型的值是不可变得： 2.基本类型的比较是值的比较： 3.基本类型的变量是存放在栈区的（栈区指内存里的栈内存） 引用类型 1.引用类型的值是可变的 2.引用类型的值是同时保存在栈内存和堆内存中的对象 3.引用类型的比较是引用的比较

什么是栈？什么是堆？

1.方法内定义的变量将会逐个放入这块栈内存里，随着方法的执行结束，这个方法的内存栈也将自然销毁了。 2.堆内存中的对象不会随方法的结束而销毁，即使方法结束后，这个对象还可能被另一个引用变量所引用 （方法的参数传递时很常见），则这个对象依然不会被销毁，

手写 翻转字符串

https://juejin.cn/post/6952083081519955998 网站地址

新问题

行内元素与块级元素的区别

如何理解JavaScript中的this

常用的浏览器内核有哪些

清楚浮动有哪些方法

原始类型宇引用类型有什么区别

如何深度克隆一个对象

数组去除重复元素有哪些方法

同步与异步的区别

区别：同步是所有的操作都做完，才返回给用户结果；即写完数据库之后，再响应用户，用户体验不好。而异步不用等所有操作都做完，就相应用户请求；即先响应用户请求，然后慢慢去写数据库，用户体验较好。

跨越请求有哪些方案

垃圾回收机制https://segmentfault.com/a/1190000018605776

js实现异步的方法

回调函数、事件监听、setTimeout、Promise、生成器Generators/yield、async/await

什么是闭包（closure），为什么要用它？

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。  闭包的特性：  1.函数内再嵌套函数 2.内部函数可以引用外层的参数和变量 3.参数和变量不会被垃圾回收机制回收  //li节点的onclick事件都能正确的弹出当前被点击的li索引  <ul id="testUL">  <li> index = 0</li>  <li> index = 1</li>  <li> index = 2</li>  <li> index = 3</li> </ul> <script type="text/javascript">  var nodes = document.getElementsByTagName("li");  for(i = 0;i<nodes.length;i+= 1){  nodes[i].onclick = function(){  console.log(i+1);//不用闭包的话，值每次都是4  }(i);  } </script>    执行say667()后,say667()闭包内部变量会存在,而闭包内部函数的内部变量不会存在 使得Javascript的垃圾回收机制GC不会收回say667()所占用的资源 因为say667()的内部函数的执行需要依赖say667()中的变量 这是对闭包作用的非常直白的描述   function say667() {  // Local variable that ends up within closure  var num = 666;  var sayAlert = function() {  alert(num);  }  num++;  return sayAlert; }   var sayAlert = say667();  sayAlert()//执行结果应该弹出的667

如何判断一个对象是否属于某个类？

 使用instanceof （待完善）  if(a instanceof Person){  alert('yes');  }

typeof 也是判断类型的属性

总结

用于数据类型的判断，返回值有number、string、boolean、function、undefined、object 六个。

instance的意思是实例，因此可以知道instanceof的作用就是判断该对象是谁的实例，我们也就知道了instanceof是对象运算符。

总之，typeof 和 instanceof 都是用来判断变量类型的，区别在于： 1、typeof判断所有变量的类型，返回值有number、string、boolean、function、object、undefined。 2、typeof对于丰富的对象实例，只能返回object，导致有时候得不到真实的数据类型。

3、instanceof用来判断对象，代码形式（obj1 instanceof obj2）（判断obj1是否为obj2的实例），obj2必须为对象，否则会报错。返回的是布尔值。 4、instanceof可以对不同的实例对象进行判断，判断方法是根据对象的原型链依次向下查询，如果obj2的原型属性存在于obj1的原型链上，（obj1 instanceof obj2）值为true。

说一说JavaScript有几种方法判断变量的类型？

JavaScript有4种方法判断变量的类型，分别是typeof、instanceof、Object.prototype.toString.call()（对象原型链判断方法）、 constructor (用于引用数据类型)

1. 常用于判断基本数据类型，对于引用数据类型除了function返回’function‘，其余全部返回’object'。

2. intanceof(根据原型链判断),原生数据类型不能判断

3. constructor.name(根据构造器判断)，不能判断null数据类型

4. Object.prototype.toString.call()（用Object的toString方法判断）所有类型数据都能判断,记住判断结果打印为：'[object Xxx]'

数组去重都有哪些方法？

对象属性、new Set() 、indexOf、filter

实现原理：new的实现代码就知道了：

1. 创建了一个空对象

2. 把空对象的原型指向构造函数的prototype

3. 执行构造函数并返回结果

4. 判断返回结果是否是空对象，如果是空对象返回新对象，否则就直接返回。

es6中箭头函数

箭头函数 没有this,从外部获取，不能new,没有arguments,没有原型和super

super和this很类似

特点：

1.箭头函数有两种写法，当函数体是单条语句的时候可以省略{}和return。

2.没有this，this是从外部获取，就是继承外部的执行上下文中的this

缺点：没有this关键字所以箭头函数也不能作为构造函数

怎么实现css水平垂直居中

用相对定位和绝对定位

方法一：父级给个相对定位，子级给个绝对定位，然后上下左右为0，外边距默认

还可以用flex在父级上用display: flex;justify-content: center;align-items: center;

清除浮动方法

方法一：使用带clear属性的空元素 clear: both;

方法二：使用CSS的overflow属性 overflow: hidden;

区别：

clear可使用<br class="clear" />或<hr class="clear" />来进行清理。简单，代码少，浏览器兼容性好

overflow属性在 IE6 中还需要触发 定义（hasLayout）

响应式布局的4种方法

媒体查询

使用@media可以根据不同的屏幕定义不同的样式

百分比

百分比是相对于包含块的计量单位，通过对属性设置百分比来适应不同的屏幕

有没有用过css框架

用过Bootstrap

当你在浏览器中输入url中间发生什么事情

向服务器发送请求

服务器接收请求浏览器响应数据

说一下web前端的优化策略

减少请求

压缩图片

vue的生命周期

总得来说就是实例的创建和销毁这段时间的一个机制吧。也是vue框架的数据间的交互通信。

v-if和v-show的区别

v-show严格意义来说其实是条件隐藏，跟display属性为none一样的

v-if严格意义来说就是条件判断，符合就加载DOM(对象模型)元素，不符合就不显示。切换一次就要重新走一次生命周期

vue组件间通信六种方式

• (1)props/$emit

• (2)$eimt $on

• (3)Vuex

• (4)Vuex + localstorage

• (5)$attrs $listeners

• (6)provide/inject

• (7)$parent / $children与 ref

https://blog.csdn.net/weixin_51962708/article/details/120639914

vue里store的用法是什么

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

什么是reactive?

• reactive是Vue3中提供实现响应式数据的方法.

• 在Vue2中响应式数据是通过defineProperty来实现的.

• 而在Vue3响应式数据是通过ES6的Proxy来实现的

v-hooks

vue3中的hooks其实是函数的写法，就是将文件的一些单独功能的js代码进行抽离出来，放到单独的js文件中。这样其实和我们在vue2中学的mixin比较像。

Computed 和 Watch 的区别

computed计算属性

1.解决模板中放入过多的逻辑

2.它支持缓存，只有依赖的数据发生了变化，才会重新计算。

3.不支持异步，如果有异步操作，无法监听数据的变化。

4.默认使用get方法

5.computed的值会默认走缓存

使用场景：

computed：是多对一，多个数据影响一个。

watch监听器

1.它不支持缓存，数据变化时，它就会触发相应的操作。

2.支持异步监听

3.监听data或者props传来的数据，发生变化时会触发相应操作。

使用场景：

watch：是一对多，一个数据发生变化，执行相应操作会影响多个数据。

js中两个等于号和3个等于号的区别

1、两个等于号：== 它在作比较时会尝试自动转换

2、三个等于号：===：它在作比较时不会进行自动转换

js中的深拷贝和浅拷贝的区别

区别：浅拷贝是拷贝了对象的引用，当原对象发生变化的时候，拷贝对象也跟着变化；深拷贝是另外申请了一块内存，内容和原对象一样，更改原对象，拷贝对象不会发生变化。

vue中lodash可以实现深拷贝

import cloneDeep from 'lodash/cloneDeep'

//由于数据结构当中存在对象里面套数组，数组里面有套都像，因此需要深拷贝解决这类问题

vue中的浅拷贝

{...arr}

什么是闭包?

闭包是指可以访问另一个函数作用域变量的函数，一般是定义在外层函数中的内层函数。

为什么需要闭包？

防止造成全局污染。

什么是伪元素

css伪元素代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。

面向对象

面向对象（OOP） 面向对象把事务分解成一个一个对象，然后事务之间分工合作 面向对象不再以步骤来划分事务，而是以功能来进行拆分，适合多人合作的大项目 面对对象特性： 封装，继承，多态

数组去重

第一种方式

const _deleteRepeat = array => {  ``// 补全代码  ``let set = ``new` `Set(array)  ``return` `[...set]  ``}

第二种方式

//利用新数组.indexOf(数组元素)如果返回时 -1就说明 新数组里面没有元素 function unique(arr){ var newArr=[]; for (var i =0; i<arr.length;i++){ if(newArr.indexOf(arr[i])=== -1){ newArr.push(arr[i]); }

 }  return newArr;  }  var demo = unique([1,2,3,3,4,1,1,2,2])  console.log(demo);

innerText和innerHTML的区别

1.innerText 不识别HTML标签

2.innerHTML 识别HTML标签 w3c标准 保留空格和换行

sessionstorage存储一段时间

在会话期间保存

localstorage长期存储

能够长期保存

padding与margin有什么不同

作用对象不同

单页面与多页面的区别

单页面，切换到其他页面时不会返回一个新的HTML文件

优点:页面切换块。

缺点:首屏渲染较慢,SEO差

多页面，切换到其他页面时后台服务器都会返回一个新的HTML文件

优点:首屏时间块，seo好。

缺点:页面切换较慢。

undefined与null的区别

1. undefined是定义未赋值，有分配内存。

2. null表示没有，是空的。

定义

1.null表示为空，代表此处不应该有值的存在，?个对象可以是null，代表是个空对象，?null本身也是对象。

1.NULL： ①用作函数的参数，表示该函数的参数不是对象。 ②用作对象原型链的终点。

2.undefined表示『不存在』

undefined： ①函数没有返回值时，默认返回undefined。 ②变量已声明，没有赋值时，为undefined。 ③对象中没有赋值的属性，该属性的值为undefined。 ④调用函数时，应该提供的参数没有提供，该参数等于undefined。

什么是多线程

多线程（multithreading），是指从软件或者硬件上实现多个线程并发执行的技术。

什么是响应式

数据变了，页面也跟着变

节流与防抖

12：显示卡顿现象

正常：事件触发非常频繁，而且每一次的触发，回调函数都会去执行（如果时间很短，而回调函数内部有计算，那么很可能出现浏览器卡顿）

节流：

在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发

是规定时间段执行一次，不会频繁执行，应用场景轮播图

防抖：

前面的所有的触发被取消，最后一次执行在规定的时间之后才会触发回调，也就是说如果连续快速的触发

只会执行一次,也就是说当用户输入完成之后才会执行，应用场景输入框

实现原理：

节流与防抖都用到了lodash函数完成节流与防抖,如果是原生js就得用闭包+延迟器来实现

总结：

防抖：用户操作很频繁，但是只是执行一次

节流：用户操作很频繁，但是把频繁的操作变为少量操作【可以给浏览器有充分的时间解析代码】,就是规定时间段执行一次，不会频繁执行

面试题:token相关的面试

https://blog.csdn.net/weixin_48255917/article/details/110622736

1、在第一次登录的时候前端调用后端的接口，把用户名和密码传给后端。

2、后端收到请求，验证用户名和密码，验证成功后，返回给前端一个token值。

3、前端收到后端传给的token值，将token存储在本地 loaclStorage和vuex中。（本次项目用的是vue框架，使用了vuex全局状态管理）注意vuex不是持久化的

4、前端每次路由跳转，就判断localStorage中是否有token，如果没有就跳转登录页面，如果有就跳转到相应的页面。

5、分装一公用的请求接口方法，每次请求调用后端接口，都在请求头中带上token

6、后端判断请求头中是否有token，如果有token就拿到token并且验证token,验证成功返回数据，验证失败(例如token过期)，就返回给前端一个状态码，一般是401，请求头中没有token也返回401 （第6步是后端做，前端只要根据后端返回都状态做相应都处理就行了）

7、如果前端拿到后台返回都状态码是401，就清除token并跳转登录页面。

Promise的三种状态

初始态pending

成功态resolved--也叫fulfilled

失败态rejected

路由懒加载

更高效了

component: () => import("@/pages/Home"),

直接在component调用一个函数然后import

axios是同步还是异步

默认是异步请求数据的，如果需要同步获取数据的话，需要进行设置。

Vue2.0双向绑定的原理与缺陷

1. Vue响应式指的是：组件的data发生变化，立刻触发视图的更新

2. 实现原理： Vue 采用数据劫持结合发布者-订阅者模式的方式来实现数据的响应式，通过Object.defineProperty来劫持数据的setter，getter，在数据变动时发布消息给订阅者，订阅者收到消息后进行相应的处理。

缺陷：只能够监听初始化实例中的data数据，动态添加值不能响应，要使用对应的Vue.set()。