经典面试题

1、vue的特点是什么?

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

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

父传子：

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

2. 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

1. 引用类型

· 基础类型包括：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 请求

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

post 请求

1. 创建一个XMLHttpRequest对象
2. 调用该对象的open方法
3. 调用setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
4. 设置回调函数onreadystatechange = callback
5. 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）创建新节点

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

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

1. appendChild() //添加
2. removeChild() //移除
3. replaceChild() //替换
4. insertBefore() //插入
5. insertAfter() //添加

3）查找

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

4）属性操作

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

5）复制

1. Node.cloneNode() //浅克隆，只复制标签本身
2. 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、简单描述下微信小程序的相关文件类型?

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的异同?·都是用来描述页面的结构;

• 都由标签、属性等构成;
• 标签名字不一样，且小程序标签更少，单—标签更多;
• 多了一些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切换到其他页面或小程序切入后台等。.
  处理网络请求

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