前端面试题

微信小程序

1.简单描述一下微信小程序的相关文件类型

（1）.wxml模板文件，是框架设计的一套标签语言，结合基础组件，事件系统，可以构建出页面的结构

（2）.wxss样式文件，是一套样式语言，用于描述wxml的组件样式

（3）.js脚本逻辑文件，逻辑处理网络请求

（4）.json配置文件，小程序设置，如页面注册，页面标题及tabBar

（5）.app.json整个小程序的全局配置，包括

• pages：所有文件路径
• 网络设置（网络超时时间）
• 界面表现（页面注册）
• window（背景色、导航样式、默认标题）
• 底部tab等

（6）.app.js监听并处理小程序的生命周期函数，声明全局变量

（7）.app.wxss全局配置的样式文件

2.请谈谈wxml和标准的html的异同

（1）.都是用来描述页面的结构

（2）.都由标签、属性等构成

（3）.标签名字不一样，且小程序标签更少，单一标签更多

（4）.多了一些wx:if这样的属性以及{{}}这样的表达式

（5）.wxml仅能在微信小程序开发者工具中预览，而html可以在浏览器内预览

3.请谈谈wxss和css的异同

（1）.都是用来描述页面的样子

（2）.wxss具有css大部分的特性，也做了一些扩充和修改

（3）.wxss新增了尺寸单位，wxss在底层支持新的尺寸单位rpx

（4）.wxss仅支持部分css选择器

（5）.wxss提供了全局的样式与局部样式

（6）.wxss不支持window和dom文档流

4.小程序和vue写法的区别

（1）.遍历的时候

• 小程序：wx:for=“lists”
• vue：v-for=“item in lists”

（2）.调用data模型（赋值）的时候

• 小程序：（调用）this.data.item （赋值）this.setData({item:1})
• vue：（调用）this.item （赋值）this.item=1

5.小程序页面间有哪些传递数据的方法

（1）.使用全局变量实现数据传递

（2）.页面跳转或重定向时，使用url带参数传递数据

（3）.使用组件模板template传递参数

（4）.使用缓存传递参数

（5）.使用数据库传递数据

6.请谈谈小程序的生命周期函数

（1）.onLoad（）页面加载时触发，只会调用一次，可获取当前路径中的参数

（2）.onShow（）页面显示/切入前台时触发，一般用来发送数据请求

（3）.onReady（）页面初次渲染完成时触发，只会调用一次，代表页面已经可以和视图层进行交互

（4）.onHide（）页面隐藏/切入后台时触发，如底部tab切换到其他页面或小程序切入后台等

（5）.onUnload（）页面卸载时触发，如redirectTo或naviguteBack到其他页面时

jquery

1.jquery库中的$()是什么

  $()函数是jquery()函数的别称，$()函数用于将任何对象包裹成jquery对象，接着就会被允许调用定义在jquery对象上的多个不同的方法。你可以将一个选择器字符串传入$()函数，它会返回一个包含所有匹配的DOM元素数组的jquery对象

2.如何找到所有html select标签的选中项

$(‘[name=selectname]:selected’)

3.$(this)和this关键字在jquery中有何不同

$(this)返回一个jquery对象，你可以对它调用多个jquery方法，比如用text()获取文本，用val()获取值等等，而this代表当前元素，它是JavaScript关键词中的一个，表示当前的DOM元素，不能对它调用jquery方法

4.jquery怎么移除标签onclick属性

获得a标签的onclick属性：$(“a”).attr(“onclick”)

删除onclick属性：$(“a”).removeAtter(“onclick”)

设置onclick属性：$(“a”).attr(“onclick”,“test()”)

5.jquery有几种选择器

（1）.基本选择器：#id class element *

（2）.层次选择器：parent>child prev+next prev~siblings

（3）.基本过滤选择器： :first :last :not :even :odd :eq :gt :lt

（4）.内容过滤选择器： :contains :empty :has :parent

（5）.可见性过滤选择器： :hidden :visible

（6）.属性过滤选择器：

 [attribute]    [attribute=value]    [attribute!=value]     [attribute^=value]
 [attribute$=value]     [attribute*=value]

（7）.子元素过滤选择器： :nth-child :first-child :last-child :only-child

（8）.表单选择器： :input :text :password :radio :checkbox :submit 等

（9）.表单过滤选择器： :enabled :disabled :checked :selecred

6.jquery中的Delegate()函数有什么作用

delegate()会在以下两种情况下使用到：

（1）.如果你有一个父元素，需要给其下的子元素添加事件，这时你可以使用delegate（）了，代码如下：

（2）.当元素在当前页面中不可用时，可以使用delegate（）

7.$(document).ready()方法和window.onload有什么区别

（1）.window.onload方法是在网页中所有的元素（包括元素的所有关联文件）完全加载到浏览器后才执行

（2）.$(document).ready()方法可以在DOM载入时就对其进行操作，并调用执行绑定函数

JavaScript

1.javascript的事件流模型都有什么

事件流描述的是从页面接收事件的顺序，DOM结构是树形结构，当从页面的某一个元素触发了某个事件，事件会从最顶层的window对象开始，向下传播到目标元素，途径的祖先节点都会触发对应的事件，如果当前节点的该事件绑定了事件处理函数的话，则会执行该函数，当事件达到目标元素并执行绑定函数（如果有绑定的话）后，事件又会向上传播window元素，途径的祖先节点都会触发对应的事件（如果绑定事件处理函数的话）

事件流包含三个阶段：

事件捕捉阶段：事件开始由顶层对象触发，然后逐级向下传播，直到目标的元素

处于目标阶段：处于绑定事件的元素上

事件冒泡阶段：事件由具体的元素先接收，然后逐级向上传播，直到不具体的元素

2.BOM对象有哪些，列举window对象

（1）.window对象，js的最顶级对象，其他的BOM对象都是window对象的属性

（2）.document对象，文档对象

（3）.location对象 ，浏览器当前URL信息

（4）.navigator对象，浏览器本身信息

（5）.screen对象，客户端屏幕信息

（6）.history对象，浏览器访问历史信息

3.请简述AJAX及基本步骤

AJAX即"Asynchronous Javascript And Xml"(异步JavaScript和Xml)，是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新

AJAX基本步骤：

（1）.初始化ajax对象 var xhr-new xmlHttpRequest()

（2）.连接地址，准备数据 xhr.open(“方式”,“地址”,是否异步)

（3）.发送请求

（4）.接收数据（正在接收，尚未完成） xhr.οnlοad=function(){}

（5）.接收数据完成 xhr.send()

4.HTTP状态消息200 302 304 403 404 500分别表示什么

200：请求成功，请求所希望的响应头或数据体将随此响应返回

302：请求的资源临时从不同的URL响应请求，由于这样的重定向是临时的，客户端应当继续像原有的地址发送以后的请求，只有在Cache-Control或Expires中进行了指定的情况下，这个响应才是可以缓存的

304：如果客户端发送了一个带条件的get请求且该请求已被允许，而该文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码，304响应禁止包含消息体，因此始终以消息头后的第一个空行结尾

403：服务器已经理解请求，但是拒绝执行它

404：请求失败，请求所希望得到的资源未被服务器上发现

500：服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器的源代码出现错误时出现

5.GET和POST的区别，何时使用POST

区别：

GET一般用于查询数据，使用URL传递参数，由于浏览器对地址栏长度有限，所以对get方式所发送的信息的数量也有限制，同时浏览器会有记录（历史记录、缓存）中保留请求地址的信息，包括地址后面的数据，get只能发送普通格式（url编码格式）的数据

POST一般用于向服务器发送数据，对所发送的数据的的大小理论上没有限制，浏览器会缓存记录地址，但是不会记录post提交的数据，post可以发送纯文本、url编码格式、二进制格式的字符串，形式多样，在以下的情况中，会使用POST请求：

（1）.以提交为目的请求（类似于语义化，get表示请求，post表示提交）

（2）.发送私密类数据（用户名、密码），因为浏览器缓存记录特性

（3）.向服务器发送大量的数据（数据大小限制区别）

（4）.上传图片文件时（数据类型区别）

6.js中字符操作函数

方法	作用
concat（）	将两个或多个字符的文本组合起来，返回一个新的字符串
indexOf（）	返回字符串中一个子串第一次出现的位置的索引，如果没有匹配上，返回-1
charAt（）	返回指定位置的字符
lastindexOf（）	返回字符串中第一个子串最后一次出现的索引，如果没有匹配项，返回-1
substr（）	返回string的startpost位置，长度为length的字符串
slice（）	从下标为start开始截取，到下标end处结束（不包含end），并返回一个新的字符串
replace（）	用来查找匹配一个正则表达式的字符串，然后使用新的字符串代替匹配的字符串
split（）	通过将字符串划分成子串，将一个字符串做成一个字符串数组
lenght（）	返回字符串的长度，所谓字符串的长度是指其包含的字符的个数
toLowerCase（）	将整个字符串转换成小写字母
toUpperCase（）	将整个字符串转成大写字母

7.js中数组常用的方法

方法	作用
push（）	后增，可向数组后添加一个新的元素，并返回数组的长度
unshift（）	前增，首部添加，并返回长度，改变原数组
pop（）	后删，返回被删除的元素，改变原数组
shift（）	删除首部元素，返回被删除的元素，改变原数组
splice（）	对数组进行删除修改，返回被删除的元素组成的数组，改变原数组
concat（）	合并两个或多个数组，返回新数组，不会改变元原数组
slice（）	剪切，返回start到end（不包括）之间的元素组成的数组，不改变原数组
join（）	用来将数组转换为字符串，不改变原数组，返回转换后的字符串
sort（）	按ascil排序，改变原数组，返回排序后的数组
reverse（）	颠倒顺序，返回颠倒元素顺序后的数组，改变原数组
indexOf（）	查找某元素在数组中的位置，若存在，返回第一个位置的下标,否则返回-1
lastindexOf（）	和indexOf相同，区别在于从尾部向首部查询
includes（）	若不使用下标，一般通过includes（）方法代替indexOf（）
filter（）	过滤，返回数组中满足条件的元素组成的新数组，原数组不变
find（）	找到数组中第一次满足条件的元素并返回，若找不到则返回undefined，不改变原数组，和filter（）方法的区别在于：filter返回值是满足条件的元素组成的数组，一般在需要使用找到的元素时，用find（）方法
map（）	根据需求格式化数组，返回格式化后的数组，原数组不变
every（）	对数组的每一项都运行给定的函数，若存在，每一项true返回true，否则返回false
some（）	对数组的每一项都运行给定的函数，若存在一项或多项返回true，否则返回false
forEach（）	遍历整个数组，中途不能中断

8.怎样添加、移除、移动、复制、创建和查找节点

（1）.创建：createElement（）

（2）.添加：appendChild（）

（3）.移除：removeChild（）

（4）.查找：

• 通过标签名称，获取的是数组 document.getElementsByTagName()
• 通过元素的Name属性的值 document.getElementsByName()
• 通过元素id，唯一性 document.getElementById()
• 通过元素class document.getElementsByClass()
• 查找元素，唯一性 document.querySelector()
• 查找元素，获取的是数组 document.querySelectorAll()

9.写出3个使用this的典型应用

（1）.在html元素事件属性中使用，如：

<input type="button" onclick="showInfo(this)" value="点击">

（2）.构造函数

function Animal(name,color){this.name=name}

（3）.input点击，获取值

<input type="button" id="text" value="点击">
var btn=document.getElementById("text")
btn.onclick=function(){alert(this.value);}

10.js中call和apply的区别

定义：

apply：调用一个对象的一个方法，用另一个对象替换当前对象

B.apply(A,arguments);  //A对象应用B对象的方法

call：调用一个对象的一个方法，用另一个对象替换当前对象

B.call(A,args1,args2);   //A对象调用B对象的方法

相同点：

• 方法的含义是一样的，即方法的功能是一样的
• 第一个参数的作用是一样的

不同点：

两者传入的列表形式不一样，call可以传入多个参数，apply只能传入两个参数，所以其第二个参数往往是作为数组形式传入

11.闭包是什么，有什么特性，对页面有什么影响

闭包就是能够读取其他函数内部变量的函数，使得函数不被GC回收，如果使用过多闭包，容易导致内存泄漏

闭包的本质就是在一个函数内部创建另一个函数，它有3个特性：

• 函数嵌套函数
• 函数内部可以引用函数外部的参数和变量
• 参数和变量看不会被垃圾回收机制回收

好处：

• 保护函数内的变量安全，实现封装，防止变量流入其他环境变量发生命名冲突
• 在内存中维持一个变量，可以做缓存（但是用多了同时也是一项缺点，消耗内存）
• 匿名自执行函数可以减少内存消耗

坏处：

• 其中一点上面已经有体现了，就是被引用的私有变量不能被销毁，增大了内存消耗，造成了内存泄漏，解决办法是可以在使用完变量后手动为它赋值为null
• 其次由于闭包涉及到了跨域访问，所以会导致性能损失，我们可以通过把跨域作用域变量存储在局部变量中，然后直接访问局部变量，来减轻对执行速度的影响

12.js的正则表达式

13.let和const命名的区别和用法

let的用法：

（1）.let在全局环境中生命的话就是全局变量，在局部环境中声明就是局部变量（在{}内有效，{}外是无效的）

（2）.let只能先声明，再进行调用；var可以先调用再声明

（3）.在相同的作用域中let声明的变量是不可以重置的，也就是不可以重复的声明，但是var可以对之前声明的变量进行重置

let和const的区别：

（1）.let在声明的时候可以不用初始化，const在声明的时候必须要初始化

（2）.const声明的变量是不可以修改的，但是这不是绝对意义上面的不可以修改，注意const定义的常量的值不可以再进行赋值修改的，但是const定义的数组和对象是可以进行添加和修改其中的元素的，最最重要的是定义的数组和对象是不可以重新赋值的，let定义的变量的值是可以修改的

相同点：

（1）.在相同的作用域中，都是不可以进行重复声明的，不可以重置声明

（2）.用let、const声明的全局变量不归window所有

14.例举至少3种强制类型转换和2种隐式类型转换

（1）.强制类型转换：明确嗲平庸内置函数，强制把一种类型的值转换为另一种类型。强制类型转换主要有：Boolean、Number、String、parseInt、ParseFloat

（2）.隐式类型转换，在使用算术运算时，运算符两边的数据类型可以是任意的，比如，一个字符串可以和数字相加，之所以不同的数据类型之间可以做运算，是因为JavaScript引擎在运算之前会悄悄的把他们之间进行了隐式类型转换，隐式类型转换主要有：+ - == !

css

1.link和@import的区别

两者都是外部引用css的方式，但存在一定的区别：

（1）.link是XHTML标签，除了能够加载css，还可以定义RSS等其他事务，而@import属于css范畴，只可以加载css

（2）.link引用css时，在页面加载时同时加载；@import需要页面完全载入以后再加载

（3）.link是XHML标签，无兼容问题；@import则是在css2.1提出的，低版本的浏览器不支持

（4）.link支持使用JavaScript控制DOM改变样式；而@import不支持

2.介绍一下标准的css的盒子模型，与低版本的盒子模型有什么区别？

标准盒子模型：宽度=内容的宽度（content）+border+padding+margin

低版本IE盒子模型：宽度=内容宽度（content+border+padding）+margin

用来控制元素的盒子模型的解析模式，默认为content-box

content-box：w3c的标准盒子模型，设置元素的height/width属性指的是content部分的高/宽

border-box：IE传统盒子的模型，设置元素的height/width属性指的是border+padding+content部分的高/宽

3.css选择器有哪些？哪些属性可以继承？优先级？

相邻选择器	通配符	子选择器	属性选择器
后代选择器	伪类选择器	css选择器	id选择器
类选择器	标签选择器

（部分）可以继承的属性：font-size font-family color

不可以继承的属性：border padding margin width height

优先级（就近原则）：!important >id>class>tag //important比内联优先级高

4.css3有哪些新特性

background-image

background-origin：content-box/padding-box/border-box

background-size

background-repeat

word-wrap

对长的不可分割单词换行 word-wrap：break-word

文字阴影：text-shadow：5px 5px 5px #FF0000;(水平阴影，垂直阴影，模糊距离，阴影颜色)

font-face属性：定义自己的字体

圆角（边框半径）：border-radius

边框图片：border-image： url（border.png） 30 30 round

盒阴影：box-shadow：10px 10px 5px #888

媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性

5.px和em的区别

px和em都是长度单位，区别是px的值是固定的，计算比较容易，em的值不是固定的，并且em会继承父级元素的字体大小

浏览器的默认字体高都是16px，所以未经调整的浏览器都符合：1em=16px，那么12px=0.75em，10px=0.625em

6.一般来说，针对不同的浏览器写不同的css，就是css Hack

IE浏览器Hack一般又分为三种，条件Hack、属性级Hack，选择符Hack，例如

（1）.条件Hack

<!--[if IE]>
    <style>
         .test{
             color:red;
         }
    </style>
<![end if]-->

（2）.属性Hack

.tast{
    color:#0909;   /* For IE8 */
    *color:#f00;   /* For IE7 and earlier */
    _color:#ff0;   /* For IE6 and earlier */
}

（3）.选择符Hack

*html .test{ color:red; }  /* For IE6 and earlier */
*+html   .test{ color:$ff0; }   /* For IE7 */

vue

1.vue的特点

（1）.国人开发的一个轻量级框架

（2）.双向数据绑定，在数据操作方面更为简单

（3）.视图、数据、结构分离，不需要进行逻辑代码的修改，只需要操作数据就能完成相关的操作

（4）.组件化，方便封装和复用

（5）.虚拟DOM：dom操作是非常耗费性能的，不再使用原生dom操作节点，极大解放dom操作

2.vue父子组件是如何传值的

（1）.父组件向子组件传值

通过属性绑定（v-bind：）的形式，把需要传递给子组件的数据传递到子组件内部

子组件在props数组中定义一下，就可以使用定义好的数据了

• 组件中的props中的数据都是父组件传递给子组件的

• props中的数据无法重新赋值

（2）.子组件向父组件传值

子组件创建并监听自定义事件，在事件函数里面执行￥emit函数，通过emit把想传的值传给父组件，父组件在子组件上监听emit定义的事件名称并绑定自身函数，在函数的参数中接收子组件传递的参数

3.v-show和v-if指令的共同点和不同点

共同点：都能控制元素的显示和隐藏

不同点：实现本质方法不同

v-show本质就是通过控制css中的display设置为none，控制隐藏，只会编译一次；v-if是动态的向dom树内添加或删除DOM元素，若初始值为false，就不会编译了，而且v-if不停的销毁和创建比较消耗性能

总结：如果要频繁的切换某节点，使用v-show（切换开销较小，初始开销较大）。如果不需要频繁的切换某节点，使用v-if（初始渲染开销较小，切换开销比较大）

4.说出几种常用的vue指令和它的用法

（1）.v-bind：将data中的数据作为某个元素的值，属性可以是内置的，也可以是自定义的

（2）.v-model：在表单元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素

（3）.v-for：列表渲染，类似于foeeach循环

（4）.v-if：根据当前变量的值决定显示还是隐藏当前元素

（5）.v-show：作用和v-if一样，只是v-show是通过style的display来达到效果，v-if是通过操作DOM树删除渲染元素

5.vue-loader是什么？使用它的用途有哪些？

vue文件的一个加载器，将template/js/style转换成js模板

用途：js可以写es6、style样式、scess、less、template可以写jade

6.单页面应用和多页面应用区别及优缺点

单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的html、js、css，所有页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入

多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新

单页面的优点：用户体验好、快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小，前后端分离；页面效果会比较炫酷（比如切换页内容时的专场动画）

单页面的缺点：不利于seo；导航不可用，如果一定要导航，需要自行实现前进后退

7.简述一下vue常用的修饰符和作用

.stop：等同于Javascript中的event.sropproagation(),防止事件冒泡

.prevent：等同于Javascript中的event.preventDefault()，防止执行的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）

.captare：与事件冒泡的方向相反，事件捕捉由外到内

.self：只会触发自己范围内的事件，不包含子事件

.once：只会触发一次

8.对MVVM开发模式的理解

MVVM分为model view viewModel三者

model：代表数据模型，数据和业务逻辑都在model层中定义

view：代表VI视图，负责数据的展示

viewmodel：负责监听model中的数据的改变并且控制视图的更新，处理用户交互操作

model和view并无直接关联，而是通过viewmodel来进行联系的，model和viewmodel之间有着双向数据绑定的联系。因此当model中的数据改变时会触发view层的刷新，view中由于用户交互操作而改变的数据也会在model中同步

这种模式实现了model和view的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作

9.简述vue中每个生命周期具体适合哪些场景

• beforeCreate：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他东西都还没创建。在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化，不能在这个阶段使用data中的数据和methods中的方法
• created：data和methods都已经被初始化好了，如果要调用methods中的方法，或者操作data中的数据，最早可以在这个阶段中操作
• beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时页面还是旧的。
• mounted：执行到这个钩子的时候，就表示vue实例已经初始化完成了。此时组件脱离了创建阶段，进入了运行阶段。如果我们想要通过组件操作页面上的DOM节点，最早可以在这个阶段中进行
• beforeUpdate：当执行到这个钩子时，页面中显示的数据还是旧的，data中的数据是更新后的，页面还没有和最新的数据保持同步
• updated：页面中显示的数据和data中的数据已经保持同步，都是最新的。
• beforeDestory：vue实例从运行阶段到了销毁阶段，这个时候所有的data和methods、指令、过滤器……都是处于可用状态，还没有真正的被销毁
• destoryed：这个时候所有的data和methods、指令、过滤器……都处于不可用状态，组件已经被销毁

其他

1.axios是什么？怎么使用

请求后台资源的模块

npm install axios --save装好，js中使用import引进来，然后.get或.post，返回在.then函数中如果成功，失败则是在.catch函数中

2.前端如何优化网站性能

（1）.减少HTTP请求数量

可以通过精灵图、合并css和js文件、懒加载等方式来减少http请求

（2）.控制资源文件加载优先级

浏览器在加载HTTP内容时，是将HTML内容从上至下依次解析，解析到link或者script标签就会加载href或者src对应链接内容，为了第一时间展示页面给用户，就需要将css提前加载，不要受JS加载影响，一般情况下都是css在头部，JS在底部

（3）.利用浏览器缓存

浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求到该资源

（4）.减少DOM操作

（5）.图标使用Iconfont替换image标签

3.如何避免回调地狱

• 模板化，将回调函数转换成独立的函数

• 使用流程控制库，例如async

• 使用promise

• 使用async/await

4.数组去重

var arr1=[1,2,3,4,2,5,1,7,5,6,7],arr2=[];
for(var i=0,len=arr1.length;i<len;i++){
    if(arr2.indexOf（arr1[i]）<0){
        arr2.push(arr1[i])
    }
}
document.write(arr2);  //1,2,3,4,5,7,6

5.写一个function，消除字符串前后的空格（兼容所有的浏览器）

function  trim(str){
    if(str & typeof str === "string"){
        return str.replace(/(^s*)|(s*)$/g,"");  //去除前后的空白符
    }
}