前端面试题

JS

1.数据类型

基本数据类型：null undefined string boolen number  symbol

复杂数据类型：object function array

2.数据检测的方法1. typeof 2. instanceof 3. constructor 4.Object.prototype.toString.call（）

（1）typeof检测复杂数据类型有bug，null 和function显示的是object

（2）可以正确判断对象 数组 函数   不能检测undefined和null

（3）可以检测其他类型但是不能检测undefined和null 

（4）都可以检测   ====牛  

3.typeof NaN的结果是啥？

答：不是一个数，但它隶属于数字类型所以检测出来是number  NaN==NaN是false

4.判断是不是数组方法？

（1）.Object.prototype.toString.call（）

（2）.通过原型链判断

（3）.es6新增的方法Array.isArray（[ ]）

（4）.通过instanceof做判断[ ] instanceof Array

（5）.通过Array.prototype isPrototypeOf([ ])

5.字符串+拼接

答：+号两边只要有一个是字符串类型，则执行字符串拼接，否则执行数字加法

6.object.js与==和===的区别

答：==如果检测两边类型不一样，会强制转换，都会转换为数字进行比较，再去进行比较两个等号是两边只要值相等，不用管类型。===会检查类型和两边值是否都相等， 不会进行强制转换

col（+0===-0）==》true    col（NaN===NaN）==》false

col（object.js（+0，-0））false   col（object.js（NaN,NaN））true 

7.如何进行隐式转换？

答：如果加法两边有一个字符串类型，结果就是字符串拼接 例如：1+false等于1 ，

"1"+false等于1fasle。

如果两边是-，*，/操作运算符都会转换为数字

8.深拷贝和浅拷贝

浅拷贝：复制的是地址，一个发生改变，另外一个也发生改变 object.assign 或者...

深拷贝：拷贝的值，开辟新的地址，一个发生改变，另外一个不影响 json.parse(json.stringify())

9.JavaScript 的作用域的理解。什么是作用域链？

局部作用域：只能在函数内部访问到

全局作用域：在整个网页所有的函数都可以访问到

作用域链：当查找变量的时候，会先从当前上下文的变量去查找，如果没有，就会从父级执行的上下文去找

10.防抖和节流？

答：防抖是不停的触发一个操作，当停下后达到一定的时间间隔才会执行函数

       节流是不停的触发一个操作，会在固定的时间执行一次

11.同源策略

答：协议 域名 端口号 

12.第一次页面加载会触发哪几个钩子函数？

答：beforecreate  created   beforeMoute mouted  

13.route和router的区别？

答：1.router是跳转路由 属性有replace（跳转不能后退） push（跳转可以后退） go 

        2.route是可以接收跳过来的参数 this.$route.params

14.http和https的区别

答：1.端口号不同  http端口号80 https端口号443

       2.https需要ca证书，费用高

      3.http是超文本传输  https是加密传输

15：逐渐增强和优雅降级

答：逐渐增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后在高版本浏览器进行效果，交互等改进。

       优雅降级：一开始构建完整的功能，然后对低版本浏览器进行兼容。

16.闭包

答：闭包的好处：可以读取函数内部的变量   可以让变量始终保存在内存中  可以封装对象的私有属性和私有方法

       坏处：栈溢出 内存泄露

17.this指向问题

答：全局中this指向window  函数中谁调用指向谁  严格模式下是undifind new关键字中，this指向new出来的对象

18.map和forEach的区别？

答：map有返回值 返回一个新的数组  forEach没有返回值

19.箭头函数和普通函数的区别？

答：1.箭头函数没有this指向，里面的this指向上下文

        2.箭头函数不可以使用arguments对象

        3.箭头函数不可以使用yield命令

        4.箭头函数没有new关键字

20.如何解决跨域？

答：jsonp   cors  nginx

21.严格模式下的限制？

答：1.this指向undifine2.变量必须先声明后使用3.不能使用with语句

22.es6新增

答：1.模板字符串  2.箭头函数 3.let const  4.symbol 5.class类6.for-of7.promise 8.引入module模块

23.let const var的区别

答：1.var声明的变量和函数有变量提升2.var声明的变量会挂载在window上

        const和let没有变量提升 不能重复声明  const声明的是常量不能修改 

24.异步编程有哪些方法？

答：1.callback 2.promise 3.generator 4.async await

25.说说面向对象的编程思想？

答：基本思想是使用对象，类，继承，封装等基本概念进行程序设计

        优点：易维护 易扩展  缩短开发周期

26.项目性能优化

答：使用cdn 避免重定向  图片懒加载  减少dom操作 使用iconfont

27.什么是原型 原型链？

答：原型：每个函数都有prototype属性。原型链：每个对象都有_proto_属性

28.js垃圾回收方式？

答：有两种方法：标记清除法  引用计数法

29.什么是垃圾回收机制？

答：为了防止内存泄露，垃圾回收机制会不停的寻找不再使用的变量，释放内存。

30.重绘和回流？

答：回流:当部分或者全部元素的尺寸，结构或某些属性发生改变时，浏览器重新渲染部分的过程称为回流。

导致回流的操作：1.浏览器窗口大小发生改变2.元素字体大小改变3.元素尺寸大小发生改变4.添加或者删除dom元素

重绘：当页面元素样式改变但是不行行在文档流的位置

导致重绘的操作：color、background-color

回流一定导致重绘 重绘不一定导致回流

31.什么是seo优化？

答：1.设置meta标签 2.设置页面的h1-h6 3.为图片添加title和alt属性4.购买外链5.不要在页面出现空链接

32.改变this的指向？

答：1.call 可以自动执行 有无数个参数

        2.bind 可以自动执行 apply只有两个参数 第二个参数为数组

        3.apply 不会自动执行 需要手动调用 有无数个参数

33.如何把伪数组转换为一个数组？

答：通过遍历将伪数组里元素放入到一个新的数组里，通过call改变数组slice方法里的this指向

34.for-in和for-of区别？

答：for-in遍历对象，for-of遍历数组

for-in可以遍历到对象的键名，数组的索引

for-of可以遍历得到对象的键值，数组的元素

35.http三次握手？

答：第一次握手是客户端给服务端发送请求，请求建立连接

       第二次是服务端给客户端发送请求，表示收到客户端的请求，同意建立连接

       第三次是客户端给服务端发送请求，表示确认收到服务端发送的信息

36.讲下js的堆和栈？以及深拷贝怎么解决？

答：堆用来存放引用数据类型。例如对象，数组，函数

栈是用来存放基本数据类型

答：1.lodash插件 2.递归解决3.json.parse（json.stringfy（））

37.图片懒加载是怎么实现的？

答：lazy-load

38.vue2和vue3有啥不一样？

答：1.vue2和vue3的双向绑定原理不一样2.生命周期的变化3.vue2和vue3的diff算法4.v-if和v-for的优先级

39.创建对象的方法?

答：字面量创建 和 new一个对象

40.说说你对执行上下文的理解？

答：1.全局执行上下文 --全局执行上下文只有一个，就是window对象，我们能在全局作用域通过this直接访问到。

41.函数执行上下文--函数执行上下文可存在无数个，每一个函数被调用的时候都会创建一个函数上下文

3.执行上下文栈

42.什么是内存泄露？

答：不在用的内存没有被及时的释放出来，导致该段内存无法被使用就是内存泄漏。

43.变量和函数怎样进行提升的？

答：对变量进行提升，只提升不赋值。

对函数进行变量提升--开辟堆空间 存储内容 将赋值给变量

44.为什么要使用模块化开发？

答：1.防止命名冲突2.更好的复用性3.更高的维护性

45.状态码

答：200成功   301重定向  403跨域   404请求资源不存在    500服务器错误

46.vue父子组件的生命周期？

答：渲染的过程 父beforeCreate->父created->父beforeMount-子beforeCreate->子created->子beforeMount->子mounted->父mounted

47.

Vue

1.vue的优点

答：低耦合 可复用性  组件化开发 轻量级 速度快

2.vue父--子，子--父传递数据

答：父-子用props    子-父用$emit

3.v-show和v-if的区别

答：v-show是频繁切换 操作的是css的display属性

       v-if是操作的dom节点

4.如何让css只在当前组件里面使用

答：scoped

5.keep-alive的作用？

答：对于频繁切换的组件进行缓存，不需要重新渲染页面

6*.如何获取dom？

答：给dom元素加ref=“refname”，然后通过this.$refs.refname进行获取dom元素

7：vue-loader是什么？用途是啥？

答：将template/js/style转化为js模块

        用途：js可以写es6、style样式

----------------------------------------------------------------------------------------------------------------

8.vue的双向绑定是如何实现的？

答：vue2是通过数据劫持、组合、发布订阅的方式来实现  核心是通过object.definePrototype()方法。

Vue.js 3.0, 放弃了Object.defineProperty ，使用更快的ES6原生 Proxy (访问对象拦截器, 也称代理器)

9.SPA首屏加载慢如何解决？

答：1.安装懒加载插件2.使用cdn

10.vue更新数组时触发视图更新的方法？

答：push()  pop() shift()  unshift()  splice()  sort()  sort() reverse()

11.vue获取数据一般在哪个生命周期？

答：created  beforeMount mounted

12.created和mounted的区别？

答：created是在模板渲染成html前调用     mounted是在模板渲染成html后调用

13.vuex是什么？

答：全局状态管理

14.vuex的属性？

答：state，getters，mutation，action，modules

15.v-for和v-if的优先级？

答：在vue2里 v-for比v-if的优先级高  在vue3里v-if比v-for优先级高

16.vue常用的修饰符？ 事件触发

答：.stop===阻止冒泡   相当于调用了event.preventPropagation方法  里-外

       .prevent===阻止默认行为   相当于调用了event.preventDefault方法

       .once===事件只会触发一次

       .capture===事件捕获 外-里

       .self===只当在 event.target 是当前元素自身时触发处理函数

 17.v-model的修饰符？表单里面用

答： .lazy ===当光标离开标签时，才会将值赋值给value

        .number===自动将用户的输入值转为数值类型

        .trim ===过滤掉两边的空格

18.vue常用指令？

答：v-model v-if v-show  v-for v-on v-bind v-text v-html

19.computed和watch的区别？

答：copmuted有缓存  变量写在computed里面

       watch没有缓存 变量写在data里面

20.filter过滤器的使用？

答：对时间和数字等进行格式化处理

21.怎样理解vue的数据单向流？

答：数据有父组件传到子组件，子组件可以用父组件传递过来的值，但是不能修改

22.vuex页面刷新数据丢失怎么解决？

答：可以使用本地存储的方法来保存数据

23.vue中使用了哪些设计模式？

1.工厂模式2.单例模式3.发布订阅模式4.观察者模式5.策略模式

24.query和params有啥不同？

答：1.params传参后面是name query传参后面加path

       2.params传参需要在路由配置参数名  query不需要

       3.params传参相当于是post请求参数地址不会显示在地址栏  query请求会显示在地址栏中

25.CSS3新增的特性？

答：1.border-radius（圆角）2.box-shadow（阴影）3.transform（旋转）4.rgba（多背景）5.媒体查询 6.多栏布局

26.box-sizing盒模型：1.border-box  2.content-box

border-box ===

27.HTML5的新特性？

答：音频视频 表单控件  语义化标签

28.get和post区别？

答：1.get请求在地址栏可见  post请求在地址栏不可见

        2.get请求有缓存 post请求没有缓存

        3.get一般传输的数据大小不超过1024kb post没有要求

29.vue中data为啥是一个函数？

答：为了保证组件的独立性和可复用性。如果data是个函数的话，每复用一次组件就会返回新的data，相当于给每个组件创造一个私有的空间，保证各自数据不受影响。

31.v-for中key的作用？

答：1.提高v-for渲染的效率2.提高渲染功能3.避免数据混乱

32.vue-route的两种模式？

答：1.history2.hash

33.你所理解的MVVM？

答：M（model数据）、V（view试图）、VM（viewModel控制数据的改变和控制试图）
html部分相当于View层，可以看到这里的View通过通过模板语法来声明式的将数据渲染进DOM元素，当ViewModel对Model进行更新时，通过数据绑定更新到View。 Vue实例中的data相当于Model层，而ViewModel层的核心是Vue中的双向数据绑定，即Model变化时VIew可以实时更新，View变化也能让Model发生变化

34.如何自定义指令？

答：

35.js是单线程还是多线程？

答:js是单线程，同一个时间只能做一件事

36.token的理解？

答:token是令牌，客户端使用账号和密码登录，服务器收到请求，验证用户名和密码，验证成功后会返回一个token。

37.git如何防止冲突？

答:1.在每次修改代码之前先pull 2.如何遇到公共文件需要修改可以和同事商量写

38.created和mounted的区别？

答：

39.vue.nextTick的作用？

答：在data中修改完数据，页面无法获取data修改后的数据，使用nextTick时，当data中的数据修改完后，可以实时渲染页面

41.什么阶段可以访问dom？

答：mounted

42.vue-route怎样定义动态路由？

答：在路由后面加/：id

43.vue-router的模式

答：hash history

44.虚拟dom的优缺点？

答：缺点：首次渲染大DOM时，由于多了一层虚拟DOM的计算，会比innnerHTML插入慢

       优点：减少dom操作 减少回流和重绘 保证性能的下限

45.axios和ajax的区别？

答：axios是通过promise实现对ajax技术的一种封装。简单来说，ajax技术是实现了网页的局部数据刷新，axios实现了对ajax的封装。

46.vue项目怎么打包？

答：1.先用webpack，npm run build2.用Hbuilder新建H5+App项目3.把第一步打包出来的dist放入导入项目4.在mainfest.json文件中进行打包配置5.点击Hbuilder工具菜单栏发行的中的原生App云打包。

47.

html

1.display:none和visibility的区别？

答：

2.