博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端经典面试题(持续更新)
阅读量:4071 次
发布时间:2019-05-25

本文共 20742 字,大约阅读时间需要 69 分钟。

经典面试题

1、vue的特点是什么?

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

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

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

父传子:

第一步:父组件在引用组件是,通过属性绑定(v-bind: ) 的形式,把需要传递给子组件的数据,传递到子组件内部,供子组件使用

第二步:把父组件传递过来的数据,在props数组中定义一下
1.组件中的所有props 中的数据,都是通过父组件传递给子组件的

  1. 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
// 2、属性Hack. test{co1or: #0909; /* ForIE8+ */*color:#f00; /* ForIE7 andearlier */_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布局

    
垂直居中

JS部分面试题

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

alert('typeof~‘'nu17``);`l / objectalert(  'typeof`‘undefined); ``l/ undefinedalert( `typeof``NaN); `l/ / numberalert(NaN == undefined); ``// falsealert(NaN == NaN);`// falsevar` `str = "123abc"`;alert( 'typeof` ‘str++);`l/ numberalert(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元素事件属性中使用

2、构造函数中使用

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

3、input点击,获取值

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

转载地址:http://afrji.baihongyu.com/

你可能感兴趣的文章
Android自定义apk名称、版本号自增
查看>>
adb command not found
查看>>
Xcode 启动页面禁用和显示
查看>>
【剑指offer】q50:树中结点的最近祖先
查看>>
二叉树的非递归遍历
查看>>
【leetcode】Reorder List (python)
查看>>
【leetcode】Linked List Cycle (python)
查看>>
【leetcode】Candy(python)
查看>>
【leetcode】Sum Root to leaf Numbers
查看>>
【leetcode】Pascal's Triangle II (python)
查看>>
java自定义容器排序的两种方法
查看>>
如何成为编程高手
查看>>
本科生的编程水平到底有多高
查看>>
备忘:java中的递归
查看>>
Solr及Spring-Data-Solr入门学习
查看>>
python_time模块
查看>>
python_configparser(解析ini)
查看>>
selenium学习资料
查看>>
<转>文档视图指针互获
查看>>
从mysql中 导出/导入表及数据
查看>>