经典面试题

1、vue的特点是什么?

1.国人开发的一个轻量级框架。
2.双向数据绑定，在数据操作方面更为简单。
3.视图，数据，结构分离，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作。
4.组件化，方便封装和复用
5.虚拟DOM: dom操作是非常耗费性能的，不再使用原生的dom操作节点，极大解放dom操作

2、vue中父子组件是如何传值的?

父传子：

第一步:父组件在引用组件是，通过属性绑定(v-bind: ) 的形式，把需要传递给子组件的数据，传递到子组件内部，供子组件使用
第二步:把父组件传递过来的数据，在props数组中定义一下
1.组件中的所有props 中的数据，都是通过父组件传递给子组件的

props中的数据都是只读的，无法重新赋值
第三步:在该子组件中使用props数组中定义好的数据

子传父：

1.子组件创建并监听自定义事件，

2.在事件函数里面执行emiti函数，通过emit把想传的值传给父组件

3.父组件在子组件上监听emit定义的事件名称并绑定自身的函数，在函数的参数中接收子组件传递的参数。

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

共同点:都能控制元素的显示和隐藏。
不同点:实现本质方法不同。
v-show本质就是通过控制css中的display设置为none，控制隐藏，只会编译一次; v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。而且v-if不停的销毁和创建比较消耗性能。
总结:如果要频繁切换某节点，使用v-show(切换开销比较小，初始开销较大)。如果不需要频繁切换某节点使用v-if (初始渲染开销较小，切换开销比较大)

4、说出几种vue当中的指令和它的用法?

答: v-model双向数据绑定;v-for循环; v-if v-show显示与隐藏;
v-on事件;v-once:只绑定—次。

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

vue文件的一个加载器，将template/js/style转换成js模块。用途: js可以写es6、style样式可以scss或less、templateo力iade

6、axios是什么?怎么使用?

答:请求后台资源的模块。
npm install axios --save装好，js中使用import进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中。

7、单页面应用和多页面应用区别及优缺点

答:单页面应用(SPA)，通俗一点说就是指只有一个主页面的应用，浏览器—开始要加载所有必须的html, js,css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写(页面片段)，然后在交互的时候由路由程序动态载入。
多页面(MPA)，就是指一个应用中有多个页面，页面跳转时是整页刷新。
单页面的优点:用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小;前后端分离;页面效果会比较炫酷（比如切换页面内容时的专场动画)。
单页面缺点:不利于seo;导航不可用，如果一定要导航需要自行实现前进、后退。(由于是单页面不能用浏览

8、简述一下vue常用的修饰符和作用?

答:
.stop:等同于JavaScript中的event.stopPropagation()，防止事件冒泡
.prevent:等同于JavaScript中的event.preventDefault()，防止执行预设的行为(如果事件可取消，则取消该事件，而不停止事件的进—步传播);
.capture:与事件冒泡的方向相反，事件捕获由外到内;.
.self:只会触发自己范围内的事件，不包含子元素;
.once:只会触发一次。

9、谈谈你对MVVM开发模式的理解

MVM分为Model、View、ViewModel三者。
Model:代表数据模型，数据和业务逻辑都在Model层中定义;View:代表UI视图，负责数据的展示;
ViewModel:负责监听Model中数据的改变并且控制视图的更新
处理用户交互操作;

10、前端如何优化网站性能?

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LNUPddDO-1621943337643)(D:\前端分班\面试题\3.15（2）.png)]

2、控制资源文件加载优先级
浏览器在加载HTML内容时，是将HTML内容从上至下依次解析，解析到7ink或者script标签就会加载href或者src对应链接内容，为了第一时间展示页面给用户，就需要将cSS提前加载，不要受JS加载影响。
—般情况下都是CSS在头部，JS在底部。
3、利用浏览器缓存
浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。
4、减少DOM操作(vue这种减少操作DOM)
5、图标使用lconFont替换image标签

11.vue中样式绑定语法

1.对象方法v-bind:class=" { 'orange ' :isRipe，'green ' :isNotRipe}"
2.数组方法v-bind:class="[class1,class2]"
3.行内v-bind:sty1e="{color : color , fontsize:fontsize+'px '}”

13、简述vue中每个生命周期具体适合哪些场景?

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

14、如何避免回调地狱?

答:
模块化:将回调函数转换为独立的函数·使用流程控制库，例如[aync]
·使用Promise
使用aynclawait

15、使用NPM有哪些好处?

答:
1、通过NPM，你可以安装和管理项目的依赖，并且能够指明依赖项的具体版本号。
2、对于Node应用开发而言，你可以通过package.json文件来管理项目信息，配置脚本，以及指明依赖的具体版本
3、npm install xx -S和npm install -D的命令含义
4、npm uninstall xx是卸载插件
5、项目转换的时候，不会把node_modules包发过去，没有nodeModules目录的项目可以使用npm install安装所有的依赖

16、一般来说是针对不同的浏览器写不同的CSS,就是CSS Hack。

// 1、条件Hack
<!--[if IE]><style>.test{color:red;}</sty1e>
<! [endif]-->
// 2、属性Hack
. test{
co1or: #0909; /* ForIE8+ */
*color:#f00; /* ForIE7 and
earlier */_color:#ff0; /* For IE6 and earlier */
// 3、 选择符Hack
* htm1 . test{color :#090;}     /* For IE6 and earlier */
* + htm1 . test{color :#ff0;}      /* For IE7 */

17、如何消除一个数组里面重复的元素?

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

18、写一个function,清除字符串前后的空格。(兼容所有浏览器)

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

19、一次完整的HTTP事务是怎样的一个过程?

基本流程:
a.域名解析
b.发起TCP的3次握手
C.建立TCP连接后发起http请求
d.服务器端响应http请求,浏览器得到htm|代码
e.浏览器解析html代码，并请求html代码中的资源
f.浏览器对页面进行渲染呈现给用户

20、说一下自己常用的es6的功能?

1.使用 let/const，而非 var 来声明变量。
2.使用模板运算符，不必用++来嵌套连接字符串了。需要用反引号和字符串插值 ${}

const  first = 'Adrian';
const  last = 'Mejia';
console.log(`Your  name  is  ${first}  ${last}.`);

3.解构赋值

const  array = [1,  2,  3,  4];
const  [first,  ,third] = array;
console.log(first,  third);  // 1 3

4.类和对象

class  Animal  {constructor(name)  {this.name = name;}speak()  {console.log(this.name + ' makes a noise.');}
}const  animal = new  Animal('animal');
animal.speak();  // animal makes a noise.

5.Promise:用 promise 替代回调地狱

21、link和@import的区别

两者都是外部引用CSS的方式，但是存在—定的区别:
(1) link是XHTML标签，除了能够加载CSS，还可以定义RSS等其他事务;而@import属于CSS范畴，只可以加载cSs。
(2) link引用CSS时，在页面载入时同时加载;@import需要页面完全载入以后再加载。
(3) link是XHTML标签，无兼容问题;@import则是在CSS2.1提出的，低版本的浏览器不支持。

(4) link支持使用Javascript控制DOM改变样式;而@import不支持。

22、请描述一下cookies,sessionstorage和localStorage的区别?

cookie是网站为了标示用户身份而储存在用户本地终端(client side
上的数据（通常经过加密)。
cookie数据始终在同源的http请求中携带（即使不需要)，记会在浏览器和服务器间来回传递。
sessionstorage和loca1storage不会自动把数据发给服务器，仅在本地保存。

存储大小:
cookie数据大小不能超过4k。
sessionStorage和loca7Storage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

有期时间:
localstor age存储持久数据，浏览器关闭后数据不丢失除非主动删除数据;
sessionstorage数据在当前浏览器窗口关闭后自动删除。
cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

CSS面试题

1介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?

标准盒子模型:宽度=内容的宽度(content) + border + padding + margin低版本IE盒子模型:宽度=内容宽度(content+border+padding) + margin用来控制元素的盒子模型的解析模式，默认为content-box

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

2 CSS选择器有哪些?哪些属性可以继承?

Css选择符:id选择器(#myid)、类选择器(.myclassname)、标签选择器(div，h1，p)、相邻选择器(h1+p)、子选择器(u1 > li) .
后代选择器(1i a)、通配符选择器（*）、属性选择器(a[re7=“externa7”])、伪类选择器(a:hover ,li:nth-child)

可继承的属性: font-size， font-family, color
不可继承的样式: border , padding,margin，width，height优先级(就近原则): !important > [ id > class > tag ]!important比内联优先级高

3、cSS3有哪些新特性?

background-image background-origin(content-box/padding-box/border-box) background-sizebackground-repeat
word-wrap (对长的不可分割单词换行) wor d-wrap: break-word
文字阴影: text-shadow: 5px 5px 5px#FF0000;(水平阴影，垂直阴影，模糊距离，阴影颜色)
font-face属性:定义自己的字体
圆角(边框半径) : border-radius属性用于创建圆角
边框图片: border-image: ur1(border .png) 30 30 round盒阴影: box-shadow : 10px 10px 5px #888888
媒体查询:定义两套css，当浏览器的尺寸变化时会采用不同的属性

4、px和em的区别

px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

css：盒子垂直水平居中的几种方法

方法1:宽度和高度已知的。

思路：
给父元素相对定位
给子元素绝对定位
left: 50%;top: 50%;
margin-left: 负的宽度一半。
margin-top: 负的高度一半；

方法2：宽度和高度自己未知

意思就是说子盒子本身还是有宽度和高度的，只是自己未知。
思路：
给父盒子相对定位
给子盒子绝对定位
top、right、bottom、left全为0
margin: auto;

方法3：flex布局

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>垂直居中</title><style type="text/css">.box{width: 400px;height: 200px;background: #f99;}.box1{width: 200px;height: 100px;background: green;}.center{display: flex;justify-content: center;//实现水平居中align-items: center;//实现垂直居中}

JS部分面试题

1、JavaScript的typeof返回哪些数据类型?

alert('typeof~‘'nu17``);`l / object
alert(  'typeof`‘undefined); ``l/ undefined
alert( `typeof``NaN); `l/ / number
alert(NaN == undefined); ``// false
alert(NaN == NaN);`// false
var` `str = "123abc"`;
alert( 'typeof` ‘str++);`l/ number
alert(str); `// NaN

引用类型

· 基础类型包括：Number、String、Boolean、Null、Undefined、Symbol（该类型位 ES2015 中新增类型）

· 引用类型包括：Object typeof 运算符把类型信息以字符串形式返回，需要注意的是 typeof 返回的类型和 JavaScript 定义的类型有细微的差异。 typeof 返回七种可能的值：“number”、“string”、“boolean”、“object”、“symbol”、“function”和“undefined”。

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

1.强制类型转换:明确调用内置函数，强制把一种类型的值转换为另一种类型。强制类型转换主要有:Boolean、Number、String、parselnt、parseFloat
⒉隐式类型转换:在使用算术运算符时，运算符两边的数据类型可以是任意的，比如，一个字符串可以和数字相加。之所以不同的数据类型之间可以做运算，是因为JavaScript引擎在运算之前会悄悄的把他们进行了隐式类型转换。隐式类型转换主要有: +、-、==、!

3、JavaScript的事件流模型都有什么?

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

事件流包含三个阶段:·
事件捕捉阶段
处于目标阶段·
事件冒泡阶段
1.事件捕捉阶段:事件开始由顶层对象触发，然后逐级向下传播，直到目标的元素;
2.处于目标阶段:处在绑定事件的元素上;
3.事件冒泡阶段:事件由具体的元素先接收，然后逐级向上传播，直到不具体的元素;

4、BOM对象有哪些，列举window对象?

1.window对象，是JS的最顶层对象，其他的BOM对象都是window对象的属性;
2.document对象，文档对象;
3.location对象，浏览器当前URL信息;
4.navigator对象，浏览器本身信息;
5.screen对象，客户端屏幕信息;
6.history对象，浏览器访问历史信息;

5、请简述AJAX及基本步骤?

简述AJAX:AJAX即"Asynchronous Javascript And XML”(异步JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。
这意味着可以在
不重新加载整个网页的情况下，对网页的某部分进行更新。
AJAX基本步骤:
1.初始化ajax对象
2.连接地址，准备数据
3.发送请求
4.接收数据
5.接收数据完成

// 实例化一个xhr对象
let xhr = new XMLHttpRequest()
// 监听状态的变化
xhr.onreadystatechange = () =>{// 监听数据请求完毕  readyState 0=>初始化 1=>载入 2=>载入完成 3=>解析 4=>完成if(xhr.readyState === 4){// 判断状态码if( xhr.status === 200 ){//将数据转化成json对象alert(JSON.parse(xhr.responseText)) }                                       }
}
// 设置请求  GET是请求方式(要传递的参数可以写在url后面)  url是网址  true是异步请求数据改为false就是同步
xhr.open("GET",url,true);
// 发送数据 也可以发送post请求要传递参数
xhr,send(null)

get 请求

创建一个XMLHttpRequest对象
调用该对象的open方法
如果是get请求，设置回调函数onreadystatechange = callback
Send

post 请求

创建一个XMLHttpRequest对象
调用该对象的open方法
调用setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
设置回调函数onreadystatechange = callback
Send

6、HTTP状态消息200 302 304 403 404 500分别表示什么?

1.200:请求已成功，请求所希望的响应头或数据体将随此响应返回。
2.·302:请求的资源临时从不同的URI响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。只有在Cache-Control 或Expires 中进行了指定的情况下，这个响应才是可缓存的。
3.304:如果客户端发送了一个带条件的GET请求且该请求已被允许，而文档的内容(自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。304响应禁止包含消息体，因此始终以消息头后的第一个空行结尾。
4.403:服务器已经理解请求，但是拒绝执行它。
5.404:请求失败，请求所希望得到的资源未被在服务器上发现。
6.500:服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器端的源代码出现错误时出现。

7、GET和POST的区别，何时使用POST?

GET和POST的区别:
GET:一般用于查询数据，使用URL传递参数，由于浏览器对地址栏长度有限制，所以对使用get方式所发送信息的数量有限制，同时浏览器会记录（历史记录，缓存）中会保留请求地址的信息，包括地址后面的数据。get只能发送普通格式(URL编码格式)的数据。
POST:一般用于向服务器发送数据，对所发送的数据的大小理论上是没有限制，浏览器会缓存记录地址，但是不会记录post提交的数据。post 可以发送纯文本、URL编码格式、二进制格式的字符串，形式多样。
在以下情况中，请使用POST请求:
1.以提交为目的的请求（类似语义化，get表示请求，post表示提交);2.发送私密类数据（用户名、密码)(因为浏览器缓存记录特性);3.向服务器发送大量数据（数据大小限制区别);
4.上传文件图片时（数据类型区别);

8、js字符串操作函数?

1、charAt(索引值) //查找具体的位置

"tian-qin-bai".charAt(0);  //返回t

2、indexOf(searchValue[,fromIndex]) //返回字符串中一个子串第一处出现的索引，找不到时返回-1

"tian-qin-bai".indexOf("-");  //返回4
"tian-qin-bai-lucky".indexOf("-");  //返回4
"tian-qin-bai".indexOf("qin");  //返回5,即查找字符串的第一个位置
"micromajor".indexOf("-");  //返回-1

3、search(regexp) 返回匹配的位置，找不到返回-1

"tianbaiqin123".search(/[0-9]/);  //返回10
"tianbaiqin123".search(/[A-Z]/);  //返回-1

4、match(regexp) 返回匹配到的字符，以数组形式返回;找不到返回null

"tianbaiqin123".match(/[0-9]/);  //返回["1"]
"tianbaiqin123".match(/[0-9]/g);  //返回["1","2","3"]
"tianbaiqin123".match(/[A-Z]/);  //返回null

5、replace(regexp|substr,newSubstr) //找到并替换成相应的字符串

"tianbaiqin123".replace("123","###");  //返回"tianbaiqin###"
"tianbaiqin123".replace(/[0-9]/,"#");  //返回"tianbaiqin#23"
"tianbaiqin123".replace(/[0-9]/g,"#");  //返回"tianbaiqin###"
"tianbaiqin123".replace(/[0-9]/g,"");  //返回"tianbaiqin"

6、substring(indexA,indexB) //字符串截取准确的字符，indexA首位置（包含），indexB末尾位置（不包含）

"tianbaiqin".substring(5,7);  //返回"ai"
"tianbaiqin".substring(5);  //返回"aiqin"

7、slice(beginSlice,endSlice) //字符串截取，首末位置，与subString()大同小异，然后不同的是可以传入负值（负值是从末尾数负数）

"tianbaiqin".slice(5,7);  //返回"ai"
"tianbaiqin".slice(5);  //返回"aiqin"
"tianbaiqin".slice(1,-1);  //返回"ianbaiqi"
"tianbaiqin".slice(-3);  //返回"qin"

8、substr(index,length) //返回匹配的字符串

"tianbaiqin".substr(5,2);  //返回"ai"
"tianbaiqin".substr(5);  //返回"aiqin"

9、slipt(separator[,limit]) //分隔符函数，以数组方式返回分隔后的字符串

"tian qin".split(" ");  //返回["tian","qin"]
"tian qin".split(" ",1);  //返回["tian"]
"tian1qin2bai".split(/[0-9]/);  //返回["tian","qin","bai"]

10、toLowerCase() //将所有的字符串都转换为小写字母

"TianBaiQin".toLowerCase();   //返回"tianbaiqin"

11、toUpCase() //将所有的字符串都转换成大写字母

"TianBaiQin".toUpperCase();   //返回"TIANBAIQIN"

12、String() //转字符串

String(123);   //"123"
String(null);   //"null"

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

1）创建新节点

createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点

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

appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
insertAfter() //添加

3）查找

getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() / /通过元素Id，唯一性
getElementsByClassName() //通过元素class
querySelector() //获取指定元素
querySelectorAll() //获取所有元素

4）属性操作

getAttribute(key) //通过名称获取属性的值
setAttribute(key,value) //创建或改变某个新属性
hasAttribute(key) // 判断是否有指定的属性存在，如果存在返回 true，否则返回 false
removeAttribute(key) //删除指定的属性

5）复制

Node.cloneNode() //浅克隆，只复制标签本身
Node.cloneNode(true) //深克隆，复制标签本身以及所有后代

11、写出3个使用this的典型应用

1、在HTML元素事件属性中使用

<input type=”button” onclick=”showInfo(this);” value=”点击一下”/>

2、构造函数中使用

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

3、input点击，获取值

<input type="button" id="text" value="点击一下" /><script type="text/javascript">var btn = document.getElementById("text");btn.onclick = function() {alert(this.value);    //此处的this是按钮元素}
</script>

js中数组常用的方法总结，包括ES6

**1.push() 后增 **

push()方法可以向数组后添加一个新的元素，并返回新数组的长度。

末尾添加，返回长度，改变原数组

var a = [1,2,3]
var b = a.push(4)console.log(a)  // [1,2,3,4]
console.log(b)  // 4

2.unshift() 前增

unshift()可以向数组前添加一个或多个元素，并返回新的长度

首部添加，返回长度，改变原数组

var a = [2,3,4]
var b = a.unshift(0,1)console.log(a)  // [0,1,2,3,4]
console.log(b)  // 5

3.pop() 后删

pop() 用于删除并返回最后一个元素。

尾部删除，返回被删除的元素，改变原数组

var a = [1,2,3]
var b = a.pop()console.log(a) // [1,2]
console.log(b) // 3

4.shift() 前删

shift() 用于删除并返回首个元素

删除首部元素，返回被删元素，改变原数组

var a = [1,2,3]
var b = a.shift()console.log(a) // [2,3]
console.log(b) // 1

5.splice() 修改删除

var a = [1,2,3]
var b = a.splice(1,1,3,[2,3,4],5)console.log(a)  // [1,3,[2,3,4],5,3]
console.log(b)  // [2]

6.concat() 拼接

concat() 方法用来合并两个或多个数组

合并两个或多个数组，返回新数组，不会改变原数组

var a = [1,2,3]
var b = [4,5]
var c = a.concat(b)console.log(a) // [1,2,3]
console.log(b) // [4,5]
console.log(c) // [1,2,3,4,5]

7.slice() 剪切

slice(startIndex,endIndex) 返回从startIndex开始(包括)，到endIndex(不包括)之间的原属组成的数组

返回新数组，不改变原数组

var a = [1,2,3]
var b = a.slice(0,1)
// 不填参数则表示剪切整个数组
var c = a.slice()
console.log(a) // [1,2,3]
console.log(b) // [1]
console.log(c) // [1,2,3]
console.log(a===c)  // false // 注意 a !== c // 负数表示从后往前数
var d = a.slice(-1,-2)
console.log(d) // []   从左向右截取，所以说为[]var e = a.slice(-1)
console.log(e)  // [3]

8.join()

join() 方法用来将数组转换为字符串

不改变原数组，返回转换后的字符串

var a = [1,2,3,4,5]console.log(a.join(','))  // 1,2,3,4,5
console.log(a)  // [1,2,3,4,5]

9.sort() 排序

按ascii码排序

改变原数组，返回排序后的数组

var a = ['a','b','d','c']console.log(a.sort())  // ['a','b','c','d']
console.log(a)  // ['a','b','c','d']

10.reverse() 颠倒顺序

reverse() 方法用于颠倒数组中元素的顺序。

返回的是颠倒后的数组，会改变原数组。

var a  = [1,3,2,7,6]console.log(a.reverse())  // [6,7,2,3,1]
console.log(a)  // [6,7,2,3,1]

11.indexOf()和lastIndexOf()

indexOf(某元素,startIndex) 从startIndex开始，查找某元素在数组中的位置，若存在，则返回第一个位置的下标,否则返回-1

lastIndexOf(某元素，startIndex) 和indexOf()相同，区别在于从尾部向首部查询

不会改变原数组，返回找到的index,否则返回-1

若不使用下标，则一般通过includes()方法代替indexOf()

var a = [1,2,4,3,4,5]console.log(a.indexOf(4))  // 2
console.log(a.indexOf(4,3)) // 4

12.filter() 过滤

filter() 方法返回数组中满足条件的元素组成的新数组，原数组不变

filter()的参数是一个方法

var a = [1,2,3,4,11]
// 第一个参数为一个方法，有三个参数，current:当前值 index:当前值下标 array:这个数组对象
var b = a.filter(function(current,index,array){return current < 10
})console.log(b) // [1,2,3,4]
console.log(a) // [1,2,3,4,11]

13.map() 格式化数组

map() 方法来根据需求格式化原数组，返回格式化后的数组。原数组不变

var a = [1,2,3,4,5]
// 参数同filter方法
var b = a.map(function(current,index,array){return current + 1
})console.log(b) // [2,3,4,5,6]
console.log(a) // [1,2,3,4,5]

14.every()

对数组的每一项都运行给定的函数，若每一项都返回 ture,则返回 true

var a = [1,2,3,4,5]var b = a.every(function(current,index,array){return current < 6
})var c = a.every(function(current,index,array){return current < 3
})
console.log(b)  // true
console.log(c)  // false

15.some()

对数组的每一项都运行给定的函数，若存在一项或多项返回 ture,则返回 true

var a = [1,2,3,4,5]var b = a.some(function(current,index,array){return current > 4
})var c = a.some(function(current,index,array){return current > 5
})
console.log(b)  // true
console.log(c)  // false

16.forEach() 数组遍历

遍历整个数组，中途不能中断

var arr = ['a','b','c']
var copy = []
arr.forEach(function(item){copy.push(item)
})
console.log(copy)

返回新数组，不改变原数组var a = [1,2,3]
var b = a.slice(0,1)
// 不填参数则表示剪切整个数组
var c = a.slice()
console.log(a) // [1,2,3]
console.log(b) // [1]
console.log(c) // [1,2,3]
console.log(a===c)  // false // 注意 a !== c // 负数表示从后往前数
var d = a.slice(-1,-2)
console.log(d) // []   从左向右截取，所以说为[]var e = a.slice(-1)
console.log(e)  // [3]

ES6新增的方法

**1.find() **

找到数组中第一次满足条件的元素，并返回，若找不到则返回undefined。不改变原数组。

和filter()方法的区别在于：filter返回值是所有满足条件的元素组成的数组，

一般在需要使用找到的元素时，用find()方法

2.findIndex()方法

findIndex()的作用同indexOf()，返回第一个满足条件的下标，并停止寻找。

区别是findIndex() 的参数为一个回调函数,且一般用于对象数组

3.includes()

includes()方法,返回一个布尔值。参数是一个value,一般用于简单数组。

对于复杂数组，则可以使用some()方法替代includes()方法

4.Array.isArray()方法

用来判断一个元素是否为数组

13、js中call和apply的区别?

一、方法定义：

apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对象的方法。
call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法。
上面的定义看一遍是很懵的，不过自己遍写例子遍反复读的时候，会有种拨开云雾的感觉。

call 与 apply 的相同点：

方法的含义是一样的，即方法功能是一样的；
第一个参数的作用是一样的；
call 与 apply 的不同点：两者传入的列表形式不一样

call可以传入多个参数；
apply只能传入两个参数，所以其第二个参数往往是作为数组形式传入

14、闭包是什么，有什么特性，对页面有什么影响?

闭包是什么？

要理解闭包，首先要理解javascript的特殊的变量作用域。

闭包有3个特性：

①函数嵌套函数

②函数内部可以引用函数外部的参数和变量

③参数和变量不会被垃圾回收机制回收

有什么特性？

封闭性：外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非闭包主动向外界提供访问接口；
持久性：一般的函数，调用完毕之后，系统自动注销函数，而对于闭包来说，在外部函数被调用之后，闭包结构依然保存在

对页面有什么影响？

通过使用闭包，我们可以做很多事情。比如模拟面向对象的代码风格；更优雅、更简洁的表达出代码；在某些方面提升代码的执行效率。

15、js中的正则表达式

什么是正则表达式？

正则表达式是由一个字符序列形成的搜索模式。

当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。

正则表达式可以是一个简单的字符，或一个更复杂的模式。

正则表达式可用于所有文本搜索和文本替换的操作。

16 用js递归的方式写1到100求和?

递归我们经常用到，vue在实现双向绑定进行数据检验的时候用的也是递归，但要我们面试的时候手写一个递
归，如果对递归的概念理解不透彻，可能还是会有一些问题。

function add (num1 ,num2){
var num = num1+num2 ;
if (num2+1>100){
return num;
}e1se{
return add (num，num2+1)
}
}
var sum =add(1,2);

JQuery面试题

1、jQuery 库中的$()是什么?

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

2、如何找到所有HTML select标签的选中项?

$([name=selectname] :selected’)

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

(this)返回-个jQuery对象,你可以对它调用多个jQuery方法,比如用text()获取文本，用val() 获取值等等。而this代表当前元素，它是avaScript关键词中的一个，示上下文中的当前DOM元愫。你不能对它调用 jQuery方法，直到它被(this)返回−个jQuery对象,你可以对它调用多个jQuery方法,比如用text()获取文本，用val()获取值等等。而this代表当前元素，它是avaScript关键词中的一个，示上下文中的当前DOM元愫。你不能对它调用jQuery方法，直到它被()函数包裹，例如$(this)。

4、jquery怎么移除标签onclick属性?

获得a标签的onclick属性: ${“a”,attr(“onclick”)
删除onclick属性: $(“a”).removettr(“onclick”)
设置onclick属性: $“J"attr"onclick”,“tet);”)

6、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 , :selected

7、jQuery中的Delegate()函数有什么作用?

delegate()会在以下两个情况下使用到:
1)、如果你有一个父元素，需要给其下的子元素添加事件，这时你可以使用delegate()了，代码如下:$(“ul”).delegate(“li” , “click” , function(){ $(this).hide(); });
2)、当元素在当前页面中不可用时，可以使用delegate()

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

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

(2)、$(document).ready()方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数。

微信小程序面试题

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

wxml模板文件，是框架设计的一套标签语言，结合基础组件、事件系统、可以构建出页面的结构
wxss样式文件，是一套样式语言，用于描述WXML的组件样式
js 脚本逻辑文件，逻辑处理网络请求
json配置文件，小程序设置，如页面注册，页面标题及tabBar
app.json整个小程序的全局配置，包括:
pages:[所有页面路径]
网络设置(网络超时时间)界面表现(页面注册)
window:{背景色、导航样式、默认标题}。底部tab等
app.js监听并处理小程序的生命周期函数、声明全局变量
app.wxss全局配置的样式文件

2.请谈谈wxml与标准的html的异同?·都是用来描述页面的结构;

都由标签、属性等构成;
标签名字不一样，且小程序标签更少，单—标签更多;
多了一些wx:if这样的属性以及{{}}这样的表达式
WXML仅能在微信小程序开发者工具中预览，而HTML可以在浏览器内预览

3.请谈谈WXSS和CSS的异同?

都是用来描述页面的样子;
WXSS 具有CSS大部分的特性，也做了一些扩充和修改;
WXSS新增了尺寸单位，WXSS在底层支持新的尺寸单位rpx;
WXSS仅支持部分CSS 选择器;
WXSS 提供全局样式与局部样式
WXSS不支持window和dom文档流

4、小程序和Vue写法的区别?

①遍历的时候:小程序wx:for = “lists”,而Vue是v-for = “item in lists”

②调用data模型(赋值)的时候:

小程序: this.data.item 调用

this.setData({item:1}) 赋值

vue: this.item 调用
this.item =1 赋值

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

使用全局变量实现数据传递
页面跳转或重定向时，使用url带参数传递数据
使用组件模板template传递参数
使用缓存传递参数
使用数据库传递数据

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

onLoad()页面加载时触发，只会调用一次，可获取当前页面路径中的参数。
onShow()页面显示/切入前台时触发，一般用来发送数据请求;
onReady()页面初次渲染完成时触发,只会调用一次，代表页面已可和视图层进行交互。.
onHide()页面隐藏/切入后台时触发,如底部 tab切换到其他页面或小程序切入后台等。.
处理网络请求

json配置文件，小程序设置，如页面注册，页面标题及tabBar
app.json整个小程序的全局配置，包括:
pages:[所有页面路径]
网络设置(网络超时时间)界面表现(页面注册)
window:{背景色、导航样式、默认标题}。底部tab等
app.js监听并处理小程序的生命周期函数、声明全局变量
app.wxss全局配置的样式文件

2.请谈谈wxml与标准的html的异同?·都是用来描述页面的结构;

都由标签、属性等构成;
标签名字不一样，且小程序标签更少，单—标签更多;
多了一些wx:if这样的属性以及{{}}这样的表达式
WXML仅能在微信小程序开发者工具中预览，而HTML可以在浏览器内预览

3.请谈谈WXSS和CSS的异同?

都是用来描述页面的样子;
WXSS 具有CSS大部分的特性，也做了一些扩充和修改;
WXSS新增了尺寸单位，WXSS在底层支持新的尺寸单位rpx;
WXSS仅支持部分CSS 选择器;
WXSS 提供全局样式与局部样式
WXSS不支持window和dom文档流

4、小程序和Vue写法的区别?

①遍历的时候:小程序wx:for = “lists”,而Vue是v-for = “item in lists”

②调用data模型(赋值)的时候:

小程序: this.data.item 调用

this.setData({item:1}) 赋值

vue: this.item 调用
this.item =1 赋值

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

使用全局变量实现数据传递
页面跳转或重定向时，使用url带参数传递数据
使用组件模板template传递参数
使用缓存传递参数
使用数据库传递数据

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

onLoad()页面加载时触发，只会调用一次，可获取当前页面路径中的参数。
onShow()页面显示/切入前台时触发，一般用来发送数据请求;
onReady()页面初次渲染完成时触发,只会调用一次，代表页面已可和视图层进行交互。.
onHide()页面隐藏/切入后台时触发,如底部 tab切换到其他页面或小程序切入后台等。.
onUnload()页面卸载时触发，如redirectTo或navigateBack到其他页面时。

前端经典面试题（持续更新）相关推荐

2022初级前端必会面试题持续更新
01-html&css H5的新特性有哪些,C3的新特性有哪些 H5 新增语义化标签,header,nav,aside,article,section,footer 新增input表单元素类型 ...
前端常见笔试题(持续更新)
html+css 1.请列出CSS中可以继承的属性 1.字体系列属性 font-family:字体系列 font-weight:字体的粗细 font-size:字体的大小 font-style:字体的 ...
JavaScript前端经典面试题之ES6面试题汇总es6
推荐阅读: vue3面试题:最新vue3.0前端经典面试试题及答案(持续更新中--)_南北极之间的博客-CSDN博客打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%......使 ...
2018最新Web前端经典面试试题及答案
本篇收录了一些面试中经常会遇到的经典面试题以及自己面试过程中遇到的一些问题,并且都给出了我在网上收集的答案.马上就要过春节了,开年就是崭新的一年,相信很多的前端开发者会有一些跳槽的悸动,通过对本篇知识 ...
Web前端经典面试试题（二）
上次由于时间有限只分享了一部分的前端面试题,所以本篇继续分享前端经典面试试题一. 栈和队列的区别? 栈的插入和删除操作都是在一端进行的,而队列的操作却是在两端进行的. 队列先进先出,栈先进后出. 栈 ...
前端多图片上传怎么控制顺序_Web前端经典面试题有哪些如何能走向高薪之路...
Web前端经典面试题有哪些?如何能走向高薪之路?Web前端在近几年是越来越火热了,很多人看到了前端的高薪资,更看到了前端行业的发展前景,所以纷纷投入到学习前端技术学习中来.下面给大家总结整理一些Web ...
Web前端经典面试题-JavaScript
Web前端经典面试题-JavaScript 看看银行卡余额,看看工资条,看看房价,动力就来了,大二狗,加油~~ JavaScript 原型链.类.继承.作用域.闭包.js运行机制/单线程.js数据类型 ...
前端经典面试题（一）-李游Leo-专题视频课程
前端经典面试题(一)-89人已学习课程介绍在鱼龙混杂的前端行业中,面试一直是一门非常重要的课程,尤其是笔试题. 本课程精选了22道出现率颇高的经典的前端面试题,从浅入深的了解认知这 ...
前端经典面试题（二）-李游Leo-专题视频课程
前端经典面试题(二)-80人已学习课程介绍在鱼龙混杂的前端行业中,面试一直是一门非常重要的课程,尤其是笔试题. 本课程精选了14道出现率颇高的经典的前端面试题,从浅入深的了解认知这 ...
莫言经典语句（持续更新中。。。）
莫言经典语句(持续更新中...) 狗头上不了金盘. 心猿脱索,意马开缰. 马铃薯再打扮也是个土豆. 月明秃头亮,水涨轮船高. 树怕屎尿浇根,人怕酒肉灌心. 人不说废话,母狗也能生麒麟. 你现在的学习方 ...

前端经典面试题（持续更新）

经典面试题

1、vue的特点是什么?

2、vue中父子组件是如何传值的?

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

4、说出几种vue当中的指令和它的用法?

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

6、axios是什么?怎么使用?

7、单页面应用和多页面应用区别及优缺点

8、简述一下vue常用的修饰符和作用?

9、谈谈你对MVVM开发模式的理解

10、前端如何优化网站性能?

11.vue中样式绑定语法

13、简述vue中每个生命周期具体适合哪些场景?

14、如何避免回调地狱?

15、使用NPM有哪些好处?

16、一般来说是针对不同的浏览器写不同的CSS,就是CSS Hack。

17、如何消除一个数组里面重复的元素?

18、写一个function,清除字符串前后的空格。(兼容所有浏览器)

19、一次完整的HTTP事务是怎样的一个过程?

20、说一下自己常用的es6的功能?

21、link和@import的区别

22、请描述一下cookies,sessionstorage和localStorage的区别?

CSS面试题

1介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?

2 CSS选择器有哪些?哪些属性可以继承?

3、cSS3有哪些新特性?

4、px和em的区别

css：盒子垂直水平居中的几种方法

方法1:宽度和高度已知的。

方法2：宽度和高度自己未知

方法3：flex布局

JS部分面试题

1、JavaScript的typeof返回哪些数据类型?

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

3、JavaScript的事件流模型都有什么?

4、BOM对象有哪些，列举window对象?

5、请简述AJAX及基本步骤?

6、HTTP状态消息200 302 304 403 404 500分别表示什么?

7、GET和POST的区别，何时使用POST?

8、js字符串操作函数?

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

11、写出3个使用this的典型应用

js中数组常用的方法总结，包括ES6

ES6新增的方法

13、js中call和apply的区别?

14、闭包是什么，有什么特性，对页面有什么影响?

闭包是什么？

有什么特性？

对页面有什么影响？

15、js中的正则表达式

什么是正则表达式？

16 用js递归的方式写1到100求和?

JQuery面试题

1、jQuery 库中的$()是什么?

2、如何找到所有HTML select标签的选中项?

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

4、jquery怎 么移除标签onclick属性?

6、JQuery有几种选择器?

7、jQuery中的Delegate()函数有什么作用?

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

微信小程序面试题

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

2.请谈谈wxml与标准的html的异同?·都是用来描述页面的结构;

3.请谈谈WXSS和CSS的异同?

4、小程序和Vue写法的区别?

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

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

2.请谈谈wxml与标准的html的异同?·都是用来描述页面的结构;

3.请谈谈WXSS和CSS的异同?

4、小程序和Vue写法的区别?

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

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

前端经典面试题（持续更新）相关推荐

最新文章

热门文章

4、jquery怎么移除标签onclick属性?