前端面试题

目录

1、Vue的优点和Vue的缺点

2、为什么说Vue是一个渐进式框架

3、为什么data中是一个函数并且返回的对象呢？

4、使用过哪些修饰符呢？

5、组件之间的传值方法有哪些呢

6、路由模式有哪些，又有什么不同

7、 v-if和v-show有何区别？

8、 computed和watch有何区别？

9、Vue的生命周期

10、Vuex的有哪些属性

11、watch有哪些属性

12、你使用过Vuex吗？

H5 移动 web 开发

1、H5 的新特性有哪些？C3 的新特性有哪些？

2、如何使一个盒子水平垂直居中？

3、如何实现双飞翼（圣杯）布局？

4、CSS的盒模型

5、CSS 中选择器的优先级以及 CSS 权重如何计算？

JavaScript基础

1、JavaScript的基本数据类型有哪些，引用数据类型有哪些？null和undefined的区别

2、如何判断JavaScript的数据类型？

3、简述创建函数的几种方式？

4、JavaScript创建对象的几种方式？

5、请指出JavaScript宿主对象和原生对象的区别?

6、JavaScript 内置的常用对象有哪些？并说说他们的用法

7、=== 和 == 的区别？

8、null和undefined的区别

9、JavaScript中什么情况下会返回undefined值

10、如何区分数组和对象

11、多维数组降维的几种方式

12、列举三种强制类型转换和两种隐类型转换？

13、JavaScript中怎么获取当前日期的月份

14、什么是伪数组，如何将其转换为真实的数组

15、如何遍历对的属性

16、如何使用原生JavaScript给一个按钮绑定两个点击事件

17、JavaScript中的作用域

18、什么是作用域链

19、如何延长作用域链

20、判断一个值是什么类型有哪些方法

21、src和href的区别是？

WebAIP

1、什么是dom

2、dom节点的Attribute和Property有何区别？

3、dom结构操作怎么样添加、移除、移动、复制、创建和查找节点

4、dom事件模型

5、什么是事件冒泡，它是如何工作的，如何组织事件冒泡

6、JavaScript 动画和 CSS3 动画有什么区别？

7、event对象常见应用？

8、DOM和BOM的区别

9、事件三要素

10、获取元素位置

11、绑定事件和接触事件的区别

12、事件委托的理解

13、javaScript中的定时器有哪些，他们的区别以及用法

14、document.write 和 innerHTML 的区别？

15、什么是window对象？什么是 document 对象？

16、描述浏览器的渲染过程，DOM树和渲染树的区别

JavaScript高级

1、typeof 和 instanceof的区别

2、js中使用typeof能得到的哪些类型

3、解决下什么是回调函数

4、什么是闭包？

5、什么是内存泄漏

6、哪些操作会造成内存泄漏

7、说说原型（prototype）的理解

8、介绍下原型链

9、常见的 js 中的继承方法有哪些

10、this的各种情况

11、数组中forEach和map的区别

12、for in和for of 的区别

13、call 和 apply，bind 的区别

14、EventLoop 事件循环机制

15、js防抖和节流

16、new 操作符具体干了什么呢？

jQuery

1、jQuery 的$(document).ready(function () {})，$(function ()

2、jQuery 的常用的方法增、删、复制、改、查**

3、简单的讲叙一下 jQuery 是怎么处理事件的，你用过哪些事件？

4、你使用过 jQuery 中的动画吗，是怎样用的？

5、你在 jQuery 中使用过哪些插入节点的方法，它们的区别是什么？

6、jQuery 中如何来获取或设置属性？

7、jQuery 如何设置和获取 HTML、文本和值？

8、有哪些查询节点的选择器？

9、$(this)和 this 关键字在 jQuery 中有何不同？

10、jQuery 中 attr()和 prop()的区别

11、jQuery 库中的$()是什么？

Ajax

1、什么是 Ajax，Ajax 的原理，Ajax 都有哪些优点和缺点？

2、常见的 HTTP 状态码以及代表的意义

3、请介绍一下 XMLHTTPrequest 对象及常用方法和属性

4、Ajax 的实现流程是怎样的？

5、Ajax 接收到的数据类型有哪些，数据如何处理？

6、请解释一下 JavaScript 的同源策略

ES6新语法

1、ES5和ES6的区别，说几个ES6的新增方法

2、ES6 的继承和 ES5 的继承有什么区别

3、var、let、const 之间的区别

4、module、export、import 有什么作用

5、使用箭头函数应注意些什么、箭头函数和普通函数的一些区别

6、ES6 的模板字符串有哪些新特性？并实现一个类模板字符串的功能

7、介绍下Set、和Map的区别

8、setTimeout、Promise、Async/Await 的区别

9、Promise 有几种状态，什么时候会进入 catch？

10、ES6 怎么写 class ，为何会出现 class

11、日常前端代码开发中，有哪些值得用 ES6 去改进的编程优化或者规范

Vue

1、Vue的最大的优势什么

2、Vue 生命周期总共分为几个阶段？

3、第一次加载页面会触发哪几个钩子

4、请说下封装Vue组件的过程

5、Vue的组件如何进行传值的？

6、组件中name选项有什么作用

7、Vue组件data为什么是一个函数

8、Vue常用的修饰符都有哪些

9、Vue常用的指令都有哪些

---

1、Vue的优点和Vue的缺点

1. 优点：Vue的框架是渐进式的，不用操作真实DOM，而是虚拟DOM，Vue还是响应式，单页面程序开发,数据与视图是分开的。

2. 缺点：兼容性问题，不支持IE8以下的浏览器，首屏加载时间比较长

2、为什么说Vue是一个渐进式框架

1. 渐进式：通俗易懂来说渐进式就是，你想用啥就拿啥，不强求你，想用Vuex就用Vuex，不想用也可以

3、为什么data中是一个函数并且返回的对象呢？

1. data总之所以是一个函数，是因为一个组件可能会多次进行调用，而每一次调用就会执行data函数并返回的新数据对象，这样避免了很多数据污染

4、使用过哪些修饰符呢？

1. .lazy:作用是，改变输入框的值时value不会改变，当鼠标光标离开输入框时，v-model绑定的值value才会改变

2. .trim: 作用类似于javaScript中的trim()方法，作用是把v-module绑定的值首位空格全部去掉

3. .number: 作用就是将值转为数字

4. .stop : 组织事件冒泡

5. .prevent 作用是组织默认行为，比如a链接跳转

5、组件之间的传值方法有哪些呢

1. 父组件传递给子组件，父组件用自定义属性设置值，子组件用props去接受

2. 子组件传值给父组件，使用自定义事件，子组件使用$emit+事件，父组件使用子组件声明的事件来触发事件处理函数

3. 使用$refs获取DOM元素，也可以获取组件实例，获取数据

4. 使用Vuex进行数据管理和操作

5. 使用eventBus进行跨组件触发事件，进而传递数据

6. 使用本地存储，列如 localStorage

6、路由模式有哪些，又有什么不同

1. hash模式。通过#号后面的内容的更改，触发hashchange事件，实现路由切换

2. history模式，通过pushState和reqplaceState 切换url，来实现路由的切换

7、 v-if和v-show有何区别？

1. v-if 是通过控制DOM元素的添加和删除来实现显示和隐藏的，每一次显示和隐藏都会使当前组件的声明钩子重新跑一遍

2. v-show 是通过控制DOM元素的css样式来决定显示和隐藏，不会销毁

3. 频繁的切换，使用v-show，否则就用v-if

8、 computed和watch有何区别？

1. computed是计算属性，用来解决逻辑比较复杂的的代码，列如求和，全选功能，而且computed是具有缓存机制的，当依赖值不变的情况下，直接从缓存机制里进行复用，而且还不能进行异步操作

2. watch 是侦听器，是用来监听某一个值发生变化，并且执行相应的回调函数，watch可以进行异步操作

9、Vue的生命周期

1. beforeCreate：Vue实例创建，但还没有对数据进行创建，在这个函数里拿不到数据

2. created：数据已经完成了创建，在这里可以访问到数据，也可以进行数据修改

3. beforMount：Vue挂载，还没有将真实的数据挂载到el身上

4. mounted :在这个函数，完成了挂载，真实数据渲染到页面DOM上了

5. beforeUpdate ：数据更新，其实数据已经是更新完成，但是页面上没有渲染更新后的数据

6. update ：这个函数将更新后的数据渲染到视图区域，并且可以访问更新后的数据

7. beforDestroy：实例销毁之前，在这一步，依然可以访问到数据

8. destroyed：实例销毁后，所有的指令都被解除，包括事件监听，也不能访问到数据

10、Vuex的有哪些属性

1. State：可以存数数据，设置默认的初始状态

2. Mutation：可以操作State里面存储的数据，且必须是同步函数

3. Action：用于提交mutation，不能直接修改state中值，可以包含异步操作

4. Getter：它是Vuex中的计算属性，当store数据源发生变化时，Getter的返回值会自动更新

5. Module：将不同的数据和方法，进行了模块的封装，每个模块都是独立的，都有自己的数据和方法

6. 

11、watch有哪些属性

1. 当我们监听基本数据类型的时候，可以直接函数

2.当我们监听一个引用数据类型的时候，需要转换为对象格式，进行深度侦听

12、你使用过Vuex吗？

1. Vuex是vue数据管理的模式，每一个vuex应用的核心就是store，当相遇是一个容器，来存储一些数据，状态

2.vuex的状态存储是响应式的，当Vue组件从store中修改数据的时候，则对应的页面则会更新

3.主要包括以下几个模块:

• State：定义数据结构和应用状态

• Getter:允许组件从Store中获取数据，相当于计算属性，当Getter数据修改，则返回新数据

• Mutation：是唯一更改store中状态的方法，且必须是同步函数

• Action：不能直接修改state里的数据，必须通过commit触发mutation方法来修改state中数据，action可以包含异步操作

• mudule：将Store拆分为很多个，分为不同的模块

H5 移动 web 开发

1、H5 的新特性有哪些？C3 的新特性有哪些？

1. H5 新特性

   1. 拖拽释放(Drap and drop) API ondrop

   2. 自定义属性 data-id

   3. 语义化更好的内容标签(header,nav,footer ,aside, article, section)

   4. 音频 ,视频(audio, video) 如果浏览器不支持自动播放怎么办? 在属性中添加autoplay(谷歌浏览器不支持音频自动播放，但是视频支持静音自动播放)

   5. 本地离线存储 localStorage用于长久保存整个网站的数据，保存的数据没有过

      期时间，直到手动去删除

   6. sessionStorage 该数据对象临时保存同一窗口(或标签页)的数据，在关闭窗口或

      标签页之后将会删除这些数据

   7. 表单控件 calendar , date , time , email , url , search , tel , file number

   8. 新的技术 webworker, websocket , Geolocation

2. CSS3 新特性

   1. 颜色: 新增 RGBA , HSLA 模式

   2. 文字阴影(text-shadow)

   3. 边框: 圆角(border-radius) 边框阴影 : box-shadow

   4. 盒子模型: box-sizing

   5. 背景:background-size background-origin background-clip

   6. 渐变: linear-gradient , radial-gradient

   7. 过渡 : transition 可实现属性的渐变

   8. 自定义动画 animate @keyfrom

   9. 媒体查询

   10. border-image图片边框

   11. 2D转换/3D转换

   12. 自体图标

   13. 弹性盒子布局

2、如何使一个盒子水平垂直居中？

1. 使用定位

2. flex布局

3. 利用transform

3、如何实现双飞翼（圣杯）布局？

1. 利用定位实现两侧固定中间自适应

   1. 父盒子设置左右 padding 值

   2. 给左右盒子的 width 设置父盒子的 padding 值,然后分别定位到 padding 处.

   3. 中间盒子自适应

2. 利用 flex 布局实现两侧固定中间自适应

   1. 父盒子设置 display:flex;

   2. 左右盒子设置固定宽高

   3. 中间盒子设置 flex:1

4、CSS的盒模型

1. 盒子模型（Box Modle）可以用来对元素进行布局，包括内边距，边框，外边距，和实际内容这几个部分

盒子模型分为两种

1. 第一种就是标准盒模型（）content + border + padding + margin

2. 第二种就是IE标准的盒模型（怪异盒模型）

5、CSS 中选择器的优先级以及 CSS 权重如何计算？

正在上传…重新上传取消

JavaScript基础

1、JavaScript的基本数据类型有哪些，引用数据类型有哪些？null和undefined的区别

1. 基本数据类型：

   1. Number

   2. String

   3. Boolean

   4. nul

   5. undefined

2. 引用数据类型有哪些

   1. Function

   2. Obeject

   3. Array

• null 和 undefined的区别

  1. null：表示的是一个空对象指针

  2. undefained：表示的是生命了变量但没有给值

2、如何判断JavaScript的数据类型？

1. 判断方法：可以使用typeof的方法来判断数据类型，还有instanceof也可以进行判断对象的类型

2. typeof不能识别null，但可以使用 === 来去判断它的类型是否等于null

3、简述创建函数的几种方式？

1. 函数声明的方式

2. 函数表达式方式

3. 函数对象方式

4、JavaScript创建对象的几种方式？

1. 使用对象字面量的方式来进行创建对象

2. 用function函数来模拟class

3. 可以使用构造函数

4. 使用工厂函数来进行创建

5. 原型对象

5、请指出JavaScript宿主对象和原生对象的区别?

1. 原生对象：

   1. 原生对象定义为“独立于宿主环境的ECMAScript实现提供的对象”

2. 宿主对象：

   1. 宿主对象就是我们当前网浏览器运行的坏境和操作系统所有非本地的对象就是宿主对象，所有DOM和BOM欧式宿主对象

6、JavaScript 内置的常用对象有哪些？并说说他们的用法

1. length 属性 动态获取一个数组的长度

2. join() 将一个数组转为字符串，返回的是一个字符串

3. revesrse（）将数组中的元素颠倒排序

4. shift() 删除数组中第一个元素，并且长度减1

5. pop() 删除数组中最后的一个元素，并且长度减1

6. unshift() 往数组最前面添加元素

7. push() 往数组的末尾添加元素

8. splice() 插入、或者删除、修改指定元素

9. sort() 对数组元素进行排序

10. toString()将数组转为一个字符串

7、=== 和 == 的区别？

1. ===为等同符，是比较两边的值和类型是否相同，如果值相同为ture，类型不同返回false

2. == 为等值符，是直接比较两边的值是否相等，如果类型不同，则会i自动转换， 转换为相同的类型再做比较，也就是说两个==只比较值

8、null和undefined的区别

1. undefined表示的是没有赋值，就是说声明了，但是没有赋值，就会等于undefined

2. null表示一个对象被定义了，但是这个值位空值

9、JavaScript中什么情况下会返回undefined值

1. 声明了一个变量，但是没有给值，则会返回undefined

2. 访问不存在的属性

3. 访问任何值被设置为undefined值的变量

10、如何区分数组和对象

1. 通过ES6中的Array.isArray来识别

2. 通过instanceof来识别

3. 通过调用 constructor 来识别

4. 通过 Object.prototype.toString.call 方法来识别

11、多维数组降维的几种方式

1. 数组字符串化

2. 递归

12、列举三种强制类型转换和两种隐类型转换？

1. 强制：

   1. 转换成字符串：toString、String

   2. 转换为数字 Number、parseInt、parseFloat

   3. 转换为布尔型：Boolean

2. 隐士转换：

   1. 拼接字符串

13、JavaScript中怎么获取当前日期的月份

1. 使用new Date这个内置对象，一些进阶操作，也是基于这个内置对象

14、什么是伪数组，如何将其转换为真实的数组

1. 伪数组：

   1. 具有length属性

   2. 按照索引方法获取数据

   3. 不具有真数组的一些方法

2. 伪数组转真数组

   1. 使用Array.from() -- ES6

15、如何遍历对的属性

1. 可以使用for...in去遍历对象的属性

2. Object.keys()方法

16、如何使用原生JavaScript给一个按钮绑定两个点击事件

• 可以使用addEventListener这个方法可以给按钮绑定两个点击事件

17、JavaScript中的作用域

1. 全局作用域：最外层定义的变量就拥有全局作用域，对于任何函数内部都可以访问到全局作用域中的变量

2. 局部作用域：局部作用域一般只能在固定代码片段内部可以访问，然而对于外部是无法访问的

3. 块级作用域：块级作用域一般都是用｛｝包裹起来的就是块级作用域，包括if和for后面的｛｝

18、什么是作用域链

1. 当代码在一个环境中执行时，会创建变量对象的一个作用域链

2. 由子级作用域返回父级作用域中寻找变量，就叫做作用域链

19、如何延长作用域链

1. 执行环境的类型有两种，全局和局部函数，但是有些语句可以在作用域链的前端临时增加一个变量对象，该变量对象会在执行后被移除

2. try-catch 语句的catch块， 会创建一个新的变量对象，包含的是被抛出的错误对象

3. with语句

20、判断一个值是什么类型有哪些方法

1. typeof 运算符

2. instanceof 运算符

21、src和href的区别是？

1. src：指向的是外部资源的位置，指向的外部内容会嵌入到指定src位置

2. href：指向的是网络资源所在的位置

WebAIP

1、什么是dom

1. dom是 W3C的标准，是文档对象模型

2、dom节点的Attribute和Property有何区别？

1. Attribute:可以设置或修改dom元素的自定义属性

3、dom结构操作怎么样添加、移除、移动、复制、创建和查找节点

1. 创建新节点：

   1. createElement() 创建元素

2. 添加、移除、替换、插入

   1. appendChild() 添加

   2. removeChild() 移除

   3. replaceChild() 替换

   4. insertBefore() 插入

3. 查找

   1. getElementsByTagName() //通过标签名称

   2. getElementsByName() //通过元素的 Name 属性的值(IE 容错能力较强，

   3. getElementById() //通过元素 Id，唯一性

4、dom事件模型

1. dom事件模型分为两种，事件捕获，和事件冒泡

2. 事件冒泡：从里面的元素依次往外触发事件

3. 事件捕获：跟事件冒泡相反，从根元素以此往里触发事件

5、什么是事件冒泡，它是如何工作的，如何组织事件冒泡

1. 事件冒泡是一个对象里触发某一个事件，比如点击事件，这个事件会依次向这个父级元素触发，一层一层的网父级元素触发事件。直到达到了最顶层的那个对象，window对象

2. 阻止事件冒泡：可以使用事件对象里的e 方法. stopPropagation();但它不会阻止事件的默认行为

6、JavaScript 动画和 CSS3 动画有什么区别？

1. css动画优点：浏览器对动画进行了优化，代码相对来说比较简单，缺点：运行过程控制较弱，不能添加事件的回调函数

2. js动画：优点：js动画控制能力很强，可以在动画执行的时候，进行控制，开始、暂停，回放灯都是可以做到的。缺点：js在浏览器执行的是主线程去执行，而主线程还有其他代码要执行，js脚本、样式计算、会导致主线程出现堵塞，代码复杂程度也高于css动画

7、event对象常见应用？

1. event.preventDefault() 阻止事件默认行为

2. event.stopPropagation() 阻止事件冒泡

8、DOM和BOM的区别

1. BOM是浏览器对象模型 ，它没有相关标准，BOM根本对象就是window

2. DOM是文档对象模型，它是W3C 的标准，DOM最根本的对象就是document

9、事件三要素

1. 事件源

2. 事件类型

3. 事件处理函数

10、获取元素位置

1. 可以通过offsetLeft和offsetTop可以获取当前元素 在浏览器所在的位置

11、绑定事件和接触事件的区别

1. 事件绑定：一个事件可以加多次，且不会覆盖

2. 绑定方法：addEventListener

3. 接触绑定事件：removeeEvent

12、事件委托的理解

1. 把事件添加到子元素的父元素身上，这样就避免事件添加到多个子元素身上，相当于相当于给父元素注册事件委托子元素处理

2. 优点：减少了事件注册，节省了内存

13、javaScript中的定时器有哪些，他们的区别以及用法

1. seTimeoput() ：临时定时器，不需要手动清除定时器，到了规定的时间，就会自动清除定时器

2. setInterval()：永久计时器：需要手动清除定时器，如果不清除，该方法会一直调用

14、document.write 和 innerHTML 的区别？

1. document.write 是直接写入到页面的内容

2. innerHTML 是 添加到DOM页面元素的一个属性,该内容可以解析带有标签的文本，渲染到页面上去

15、什么是window对象？什么是 document 对象？

1. document是window对象的一个属性，window表示浏览器中打开的窗口，所有的全局函数和方法都属于window对象里的属性和方法,window对象是最顶层的对象

2. document 对象是显示于窗口或框架内的一个文档的属性

16、描述浏览器的渲染过程，DOM树和渲染树的区别

1. 浏览器的渲染过程:

   1. 解析 HTML 构建 DOM(DOM 树)，并行请求 css/image/js

   2. CSS 文件下载完成，开始构建 CSSOM(CSS 树)

   3. 计算每个节点在屏幕的位置

   4. 通过显卡来显示在屏幕上

JavaScript高级

1、typeof 和 instanceof的区别

1. typeof是用来判断一个变量的类型，可以使用typeof

2. instanceof 是用来判断某个对象是否是某个构造函数的实力对象

2、js中使用typeof能得到的哪些类型

1. typeof只能区分值类型

2. typeof undefined // undefined

3. typeof null // object

3、解决下什么是回调函数

1. 回调函数就是一个作为参数传递给另一个函数的，被称为回调函数

4、什么是闭包？

1. 一个作用域访问另一个作用域函数内部局部变量，则就是闭包，也可以说一个函数访问另一个函数中的局部变量

5、什么是内存泄漏

1. 内存泄漏也是存储泄漏，用动态存储函数开辟的空间，使用完后没有释放，结果导致一直占据空间，一直到程序结束， 就是内存泄漏（说白了就是，该内存空间使用完后，没有及时的回收）

6、哪些操作会造成内存泄漏

1. setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏

2. 闭包

7、说说原型（prototype）的理解

1. 在javscript中，每个函数都有自己的原型，而原型也是对象，可以通过原型实现继承，原型的主要作用就是实现继承和扩展对象

8、介绍下原型链

1. 在javascript中每个函数都有一个属性是原型对象，当我们访问一个对象的属性的时候，都会去它的原型身上去查找，如果没有找到，则会去它的proto的原型上去查找，还有它的构造函数的prototype，如果没有找到，就还会往上继续去寻找构造函数的原型

9、常见的 js 中的继承方法有哪些

1. 原型继承

2. 组合继承

3. class继承

4. 混合式继承

10、this的各种情况

1. 以普通的函数调用的时候，则this是指向的window

2. 以方法的形式进行调用，则this就指向方法调用的对象

3. 以构造函数的形式调用，this就是指向创建的那个空对象

4. 使用call和apply调用，this就是指向指定的那个对象

5. 箭头函数它本身是没有this的，它的this是看上级作用域是否有函数，如果有，则this就是指向外上级作用域的this，如果没有，则箭头函数的this就是指向window

11、数组中forEach和map的区别

1. 共同点：都是循环数组里的每一项，都有三个参数，分别是item（每一项）index（索引值），arr（原数组）

2. map方法返回的是一个新数组，forEach方法是用来调用数组里的每一个元素，然后将元素传递给回调函数

12、for in和for of 的区别

1. for in 是用来遍历对象的，而for of 是用来遍历数组的

2. for in 循环出的key就是对象里的每一个属性，for of 循环出的value就是数组里的每一个元素

3. for of 不能循环普通的对象，需要配合object keys()搭配

13、call 和 apply，bind 的区别

1. 共同点：

   1. 都是用来修改this的指向的

   2. 第一个参数都是this要修改的那个指向

2. 不同点：三者传参的方式不同

   1. call是用于单个传参，apply是传一个数组或者是伪数组

   2. 执行机制也不同，call和apply会立即执行，bind不会立即执行

14、EventLoop 事件循环机制

1. javascript的事件分为两种，宏仁务和微任务

2. 宏仁务整体代码包括定时器，script

3. 微任务包括：promise.then()

4. 同步任务直接放到主线程中执行，异步任务放到任务队列里去等待执行，同步任务执行完毕后，在通过事件循环去任务队列里去寻找异步任务代码，一个一个的放在主线程中去执行

15、js防抖和节流

1. 防抖：当持续出发一个事件时，一定时间段内没有再次触发事件，才会执行事件处理函数一次

2. 节流：持续的触发一个事件的时候，一段时间内只触发一次事件处理函数

16、new 操作符具体干了什么呢？

1. 创建了一个空对象，并且this指向了这个空对象，还继承了函数的原型

2. 设置原型链，空对象还指向了这个构造函数的圆形对象

3. 修改了函数的this指向，并执行了函数体

4. 把对象进行返回

jQuery

1、jQuery 的$(document).ready(function () {})，$(function ()

{})与原生 JS 的 window.onload 有什么不同？

1.执行时间

window.onload 必须等到页面内包括图片、音频、视频在内的所有元素加载完毕后才能执行

$(document).ready()是 DOM 结构绘制完毕后就执行，而无需对图像或外部资源加载的等待，从

而执行起来更快

2、jQuery 的常用的方法增、删、复制、改、查**

1. 插入

   1. append：将内容插入到指定的元素后面

   2. prepend：将内容插入到指定的元素最前面

2. 删除

   1. empty() 将内容清空标签还在

   2. remove() 指定的标签和内容都移除

3. 复制

   1. clone：true则就是克隆该元素所有的子元素包括事件，如果为false，则克隆该元素

4. 替换

   1. replaceWith（）

5. 查找

   1. eq(index) ：查找指定的下表

   2. filter：过滤匹配的class选择器

   3. next() 查找元素的下一个元素

   4. prev() 查找指定元素的上一个元素

   5. parent： 查找当前元素的父元素

3、简单的讲叙一下 jQuery 是怎么处理事件的，你用过哪些事件？

1. 首先页面去加载文档，等页面加载完毕后，浏览器会通过javascript为DOM元素去添加事件

2. JQuery常用的事件

   1. click() 鼠标单击事件

   2. dblclick() 双击触发事件

   3. ......

4、你使用过 jQuery 中的动画吗，是怎样用的？

1. 使用hide()和show()同时修改多个样式属性，像高度，宽度，不透明

2. fadeIn()和 fadeOut()fadeTo()只改变不透明度

3. slideUp()和 slideDown()slideToggle()只改变高度；

4. animate()属于自定义动画的方法.

5、你在 jQuery 中使用过哪些插入节点的方法，它们的区别是什么？

1. append()

2. appendTo()

3. prepend()

4. prependTo()

5. after()

6、jQuery 中如何来获取或设置属性？

1. jQuery中可以用attr()方法来获取和设置元素的属性，removeAttr()方法是用来删除元素的属性的

7、jQuery 如何设置和获取 HTML、文本和值？

1. html() 可以设置、获取元素的值，也可以解析带标签的字符串内容，解析成文本渲染到DOM上

2. text()方法可以设置、获取元素的内容

3. val()方法也可以获取、设置元素的值

8、有哪些查询节点的选择器？

1. eq(index) 查询下标

2. even查询偶数

3. odd查询奇数

9、$(this)和 this 关键字在 jQuery 中有何不同？

1. $(this) 是返回的jQuery对象，而this是原生的方法，不能对原生的this去使用jQuery语法

10、jQuery 中 attr()和 prop()的区别

1. 对于元素本身就有固定的属性，比如src、herf、value等待这些属性都可以使用prop()方法

2. 元素本身没有的属性，然后自己去自定义一个属性，比如data属性，就是可以使用attr

11、jQuery 库中的$()是什么？

1. $()是Jquery函数的别称，$()函数是将任何对象包裹成jQuery对象，通过$()方法可以使用jQuery里的多个不同的方法

Ajax

1、什么是 Ajax，Ajax 的原理，Ajax 都有哪些优点和缺点？

1. 什么是ajax

   1. ajax是一种客户端与服务器交互的一种技术，可以在不必刷新整个浏览器的情况下，与服务器进行异步操作

   2. ajax原理

      1. 通过 XMLHTTPRequest 对象来向服务器发异步请求，从服务器获得数据，然后用 javascript

      来操作 DOM 而更新页面。这其中最关键的一步就是从服务器获得请求数据。

   3. ajax的优点

      1、最大的一点是页面无刷新，用户的体验非常好。

      2、使用异步方式与服务器通信，具有更加迅速的响应能力

2、常见的 HTTP 状态码以及代表的意义

1. 200（表示请求成功）

2. 300（表示重定向）

3. 400（客户端发生错误）

4. 404（表示请求失败，找不到页面）

5. 500（服务器发生错误）

3、请介绍一下 XMLHTTPrequest 对象及常用方法和属性

1. XMLHTTPrequest 对象

   1. Ajax 的核心是 XMLHTTPRequest。它是一种支持异步请求的技术。XMLHTTPRequest 使您可以使用 JavaScript 向服务器提出请求并处理响应，可以在页面加载以后进行页面

      的局部更新

4、Ajax 的实现流程是怎样的？

1、创建 XMLHTTPRequest 对象,也就是创建一个异步调用对象.

2、创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息

3、设置响应 HTTP 请求状态变化的函数

4、发送 HTTP 请求.

5、获取异步调用返回的数据.

6、使用 JavaScript 和 DOM 实现局部刷新

5、Ajax 接收到的数据类型有哪些，数据如何处理？

1. 接收到的数据类型

   1. String / JSON 字符串 / 二进制数据流

   2. JSON 字符串反序列化后， 转成引用类型使用

   3. String 直接使用

6、请解释一下 JavaScript 的同源策略

1. 同源策略是客户端脚本的重要的安全度量标准。其目的是防止某个文档或脚本从多个不同

源装载。所谓同源指的是：协议，域名，端口相同，同源策略是一种安全协议，指一段脚本只能

读取来自同一来源的窗口和文档的属性。

ES6新语法

1、ES5和ES6的区别，说几个ES6的新增方法

1. 区别

   1. ES6是继承ES5之后的一次改进，相对于ES5语法更加简洁，提高了开发效率

2. ES6的新增方法

   1. ES6新增的方法

      1. 新增了 let 和const:

         1. let 和const 都是块级作用域。

         2. 不存在变量提升，只能先声明在使用

         3. const 声明的是一个只读的常量，声明之后就要赋值

      2. 新增了模板字符串

         1. 用一对``标识，就党走普通的字符串使用

      3. 新增了箭头函数

         1. 写法：函数名 = (形参) => {}

         2. 特点：箭头函数中的this指向不同，主要看外层有没有this，如果有就指向外层指向的那个this，如果没有就指向window

      4. import和export

         1. 模块化的导入导出

2、ES6 的继承和 ES5 的继承有什么区别

1. ES5的继承是通过原型或者是构造函数机制来实现

2. ES6用过class关键字定义类，里面有构造函数

3、var、let、const 之间的区别

1. var声明变量可以重复声明，而let不可以重复声明

2. var 是不受块级作用域，而let是受限于块级

4、module、export、import 有什么作用

1. export和import 是前段模块化的导入导出的实现方案

   1. import是引入模块的静态加载

   2. export是导出模块的资源，然后用import进行一个导入，他两是一个接口值动态绑定的关系

5、使用箭头函数应注意些什么、箭头函数和普通函数的一些区别

1. 区别

   1. 使用了箭头函数，它的this指向就不是winodw，而是看上级作用域的this指向是谁，上级作用域指向哪个，那么箭头函数的this就指向那个

   2. 不能使用new命令，否则会报错

6、ES6 的模板字符串有哪些新特性？并实现一个类模板字符串的功能

1. 它是使用``进行一个拼接字符串，想要在模版字符串实现字符串拼接，就可以在模板字符串里使用${}里面写值

7、介绍下Set、和Map的区别

1. Set是用于数据的去重，Map是用于数据的存储

2. Set：

   1. 去掉重复的数据

   2. 只有键值，没有键名

3. Map

   1. 本质上是键值对的集合，类似于集合

   2. 可以遍历，可以跟各种数据进行转换

8、setTimeout、Promise、Async/Await 的区别

1. 事件循环中分为宏仁务和微任务队列

   1. 宏仁务主要包括：定时器。。

   2. 微任务主要包括：promise、$nextTick

2. setTimeout、Promise、Async/Await 的区别

   1. seTimeout的回调函数会放到宏仁务队列里去执行，等到执行站清空了在执行

   2. Promise.then方法里的回调函数会放到微任务队列里去执行，先执行微任务，在执行宏仁务

   3. Async函数里会遇到异步代码，await后面会跟一个表达式，async方法执行，遇到await会立即执行，然后await后面的代码放到微任务队列里去执行

9、Promise 有几种状态，什么时候会进入 catch？

1. Promise有几种状态

   1. 三个状态pending、fulfilled、reject

   2. 两个过程：padding -> fulfilled、padding -> rejected

2. Promise什么是会进入catch

   1. 当pending为rejected时，会被catch捕获

10、ES6 怎么写 class ，为何会出现 class

1. ES6的class只不过是一个语法糖，绝大部分可以用ES5来做到，新的class只是让对象的原型更加清晰，更加向面向对象编程的语法

11、日常前端代码开发中，有哪些值得用 ES6 去改进的编程优化或者规范

1. 常用的let去取代var

2. 常用数组对象的结构赋值

3. 用 class 类取代传统的构造函数，来生成实例化对象

Vue

1、Vue的最大的优势什么

1. Vue是一个渐进式框架，数据驱动，Vue还可以进行组件化开发，使代码编写量大大减少

2. Vue最大的优势就是可以对数据进行一个双向绑定

3. Vue是单页面应用程序，使得页面局部的刷新

4. Vue使用路由可以使页面不用刷新页面

2、Vue 生命周期总共分为几个阶段？

1. Vue从创建到销毁的过程就是生命周期，一共分为四个阶段和十一个生命周期

2. beforCreate

   1. 初始化Vue前，在这个函数里data和method等一些数据没有进行一个创建，所以无法访问到数据

3. Created

   1. 初始化Vue后，在这个函数里，data和method的一些数据已经完成了初始化创建，并且可以访问到里面的数据

4. beforMount

   1. 在挂载前，在这个函数里，将数据挂载到$mount 或者el 身上，但还没渲染到试图上

5. Mounted

   1. 挂载后，数据已经挂载到视图上去了，可以看到数据，并且也可以拿到DOM节点，进行一些操作

6. beforUpdata

   1. 数据更新前，数据发生更新变化，视图上的数据还没进行一个渲染，但数据在data中是已经发生了变化，在这个函数里还没有将更新后的数据渲染到视图上，但可以通过$nextTick()函数可以拿到更新后的数据

7. updated

   1. 数据更新后，在这个函数里，当data中的数据发生了变化，页面上的数据也会随着发生变化，数据发生了更新

8. activated

   1. keep-alive组件激活状态

9. deactivated

   1. keep-alive 组件停用调用

10. beforeDestoroy

    1. 销毁前，在这个钩子函数组件还没有进行一个完全的销毁，还可以拿到数据进行一些操作

11. destroyed

    1. Vue的实例销毁后，调用后，组件里所有的东西都将会被解除绑定，无法使用

12. errorCaptured

    1. 当捕获一个来自子组件发生错误的时候调用

3、第一次加载页面会触发哪几个钩子

1. 当页面加载会触发四个钩子函数

   1. beforCreate

   2. Created

   3. beforMount

   4. Mounted

4、请说下封装Vue组件的过程

1. 可以在组件内部的component方法中注册组件，子组件需要数据，需要从父组建传递过来，子组件用props进行接收，而子组件修改好的数据，想要把数据传递给父组建，子组件可以通过this.$emit方法传递给父组建数据，父组建用自定义事件去接收那个值

2. 如果需要给组件传入模版，则定义一个插槽slot

5、Vue的组件如何进行传值的？

1. 父组建向子组件传递数据

   1. 在父组建可以通过自定义属性向子组件进行传值，而子组件用props进行接收

2. 子组件向父组建进行一个传值

   1. 子组件通过$emit触发事件，第一个参数是函数名，第二个参数是要传递给父组建的数据，然后父组建用自定义事件进行一个接收，触发自定义事件处理函数

6、组件中name选项有什么作用

1. 项目使用keep-alive时候，可搭配组件name进行一个缓存过滤

2. 在使用Vue的调试工具的时候，显示的名称也是nane定义的

7、Vue组件data为什么是一个函数

1. Vue每个组件都有个自己的Vue实例，因为每个组件之间是要进行复用的，data如果是一个对象的话，将会导致数据污染，如果data是一个函数的话，data中的数据才是自己组件的

8、Vue常用的修饰符都有哪些

1. .prevent：阻止元素默认行为，刷新页面

2. .stop:阻止冒泡

9、Vue常用的指令都有哪些

1. v-model :用于表单元素实现双向数据的绑定

2. v-for：循环数据

3. v-show：现实与隐藏（给元素添加了display属性）

4. v-if：显示与隐藏（给元素创建或销毁）

5. v-else-if ：必须和v-if连用

6. v-else ：必须和v-if连用

7. v-bind：属性绑定，对元素的数据进行更改

8. v-on：给元素绑定事件，简写为@

9. v-text：给元素添加文本（但会覆盖原标签上的内容）

10. v-html：给元素添加文本（会解析字符串上带有标签的内容）

11. v-bind:class 三种绑定方法 1、对象型 '{red:isred}' 2、三元型 'isred?"red":"blue"' 3、数组型 '[{red:"isred"},{blue:"isblue"}]

12. v-once：进入页面时，只渲染一次，不在进行渲染

13. v-cloak 防止闪烁

14. v-pre 把标签内部的元素原位输出