前端面试总结

面试题链接地址

https://juejin.im/post/5cbff661e51d456e693f48ec#heading-8

https://github.com/yygmind/blog/issues/43

https://blog.csdn.net/Tracy_frog/article/details/88638619

https://blog.csdn.net/xiaoninvhuang/article/details/70257189

webpack面试题

打包优化?

来解决跨域问题?

跨域

react面试题

https://www.jianshu.com/p/712afe6360a6

http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html

补充:

父组件状态变化不影响子组件?答:React.memo(Catch)和React.PureComponent

React.PureComponent和React.memo(Catch)区别?答:Pure只能用在class中,memo还可以用到函数中。

redux中间件?

JSX组件首字母为什么大写?

setState触发了哪些生命周期?

什么是纯函数?

一个函数的返回结果只依赖于它的参数,并且在执行过程里面没有副作用,我们就把这个函数叫做纯函数。

为什么redures要定一个纯函数?

Redux只通过比较新旧两个对象的存储位置来比较新旧两个对象是否相同(译者注:也就是Javascript对象浅比较)。如果你在reducer内部直接修改旧的state对象的属性值,那么新的state和旧的state将都指向同一个对象。因此Redux认为没有任何改变,返回的state将为旧的state。

react性能优化使用shouldcomponentupdate防止多次渲染

shouldcomponentupdate性能优化

vue面试题

https://www.jianshu.com/p/2d154494613a

https://www.jianshu.com/p/08c613b534bd

补充:

路由守卫(是否登陆)

在使用 Vue 或者 Angular 的时候,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,就跳转到 404 或者登陆页面,比如 Vue 中的

vue路由守卫

computer和watch用法和区别?

computer:数据是可以进行简单的业务逻辑运算,是存在返回值的。计算出来的数据,是存在缓存中,只要依赖的数据不发生变化就不会重新计算。

computer用法

watch:监听数据的变化,没有返回值,只能通过重新赋值的方式来改变数据。

watch的用法

双向绑定的原理?

通过defineProperty()方法来获取函数内部的数据,例子如下:

数据双向绑定

js面试题(包括css)

一、css

less用法

居中的实现方式

(1)


(2)

2、什么圣杯布局、双飞翼布局

圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局,三个特点:三列布局,中间宽度自适应,两边定宽;中间栏要在浏览器中优先展示渲染;允许任意列的高度最高。

圣杯布局


双飞翼布局

3、常用css3哪些属性

动画

flex布局常用属性:父(justify-content:center;align-item:center;flex-wrap:wrap;flex-direction:vertical;)子(flex:flex-grow flex-shink flex-basis;父剩余大小比例分配  之和宽度超过父元素时,定义值越大减少该元素越多  宽度,但大于width权限)


二、js

http2.0优点?

哪些加密算法?

jsonp原理?

xss和sql注入?

字符串匹配出字符的个数?

去掉字符串两端的空白字符?

addeventlistener和onclick的区别?

bind原理实现?

1、基本类型:字符串、数字、布尔值、object、undefined、null

2、对闭包的理解,应用场景?

函数内部可以直接读取全局变量,但是在函数外部无法读取函数内部的局部变量。闭包就是能够读取其他函数内部变量的函数。


闭包1


闭包2


闭包3


闭包4

3、原型与原型链

其中每个函数对象都有一个prototype 属性,这个属性指向函数的原型对象


原型

在构造函数上都有一个原型属性 prototype,该属性也是一个对象;那么在原型对象上有一个 constructor 属性,该属性指向的就是构造函数;而实例对象上有一个 _proto_  属性,该属性也指向原型对象,并且该属性不是标准属性,不可以用在编程中,该属性用于浏览器内部使用。原型链:就是有限的实例对象和原型之间组成有限链,就是用来实现共享属性和继承的。

继承可以用原型链实现

原型链继承

4、ES6语法

var ,  let  ,  const  区别?

使用var声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象;使用let声明的变量,其作用域为该语句所在的代码块内,不存在变量提升;使用const声明的是常量,在后面出现的代码中不能再修改该常量的值。

箭头函数与普通函数的区别?

箭头函数没有它自己的this值,箭头函数内的this值继承自外围作用域。在箭头函数中调用 this 时,仅仅是简单的沿着作用域链向上寻找,找到最近的一个 this 拿来使用

处理异步的方法?

async.......await  和  promise

5、伪数组

何为伪数组?

伪数组(类数组):无法直接调用数组方法,也无法使用length属性实现什么特殊的行为,但是!可以使用真正数组遍历的方法(for循环配合数组下标)来遍历它们。

说的浅显一些,就是:存在着length属性,可以通过数组下标的方式进行每个元素的访问,但是不能够使用push等数组的方法。

常见的伪数组

arguments参数:arguments是一个对象,而非一个数组。

调用document.getElementsByTagName、getElementsByClassName等各类获取元素的方法。这些方法返回的是一个NodeList(节点列表),也并不是一个数组。

将伪数组转换为数组

可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

6、事件机制

理解事件机制?

假如我们点击一个div, 实际上是先点击document,然后点击事件传递到div,而且并不会在这个div就停下,div有子元素就还会向下传递,最后又会冒泡传递回document

事件机制

阻止冒泡:event.stopPropagation();    ie:  window.event.cancelBubble = true;

阻止捕获:event.stopImmediatePropagation();

为什么要用事件委托:

一般来说,dom需要有事件处理程序,我们都会直接给它设事件处理程序就好了,那如果是很多的dom需要添加事件处理呢?比如我们有100个li,每个li都有相同的click点击事件,可能我们会用for循环的方法,来遍历所有的li,然后给它们添加事件,那这么做会存在什么影响呢?

在JavaScript中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能,因为需要不断的与dom节点进行交互,访问dom的次数越多,引起浏览器重绘与重排的次数也就越多,就会延长整个页面的交互就绪时间,这就是为什么性能优化的主要思想之一就是减少DOM操作的原因;如果要用事件委托,就会将所有的操作放到js程序里面,与dom的操作就只需要交互一次,这样就能大大的减少与dom的交互次数,提高性能;

每个函数都是一个对象,是对象就会占用内存,对象越多,内存占用率就越大,自然性能就越差了(内存不够用,是硬伤,哈哈),比如上面的100个li,就要占用100个内存空间,如果是1000个,10000个呢,那只能说呵呵了,如果用事件委托,那么我们就可以只对它的父级(如果只有一个父级)这一个对象进行操作,这样我们就需要一个内存空间就够了,是不是省了很多,自然性能就会更好。

7、apply 和 call

作用与功能:

call和apply可以用来重新定义函数的执行环境

直白一点解释:obj夺舍了Function,拥有了执行Function的能力,并且this是指向obj的(个人认为夺舍这个词是很直观的-来源于网络)


改变了this的指向

它们的不同之处:

apply:最多只能有两个参数——新this对象和一个数组argArray。如果给该方法传递多个参数,则把参数都写进这个数组里面,当然,即使只有一个参数,也要写进数组里。如果argArray不是一个有效的数组或arguments对象,那么将导致一个TypeError。如果没有提供argArray和thisObj任何一个参数,那么Global对象将被用作thisObj,并且无法被传递任何参数。

call:它可以接受多个参数,第一个参数与apply一样,后面则是一串参数列表。这个方法主要用在js对象各方法相互调用的时候,使当前this实例指针保持一致,或者在特殊情况下需要改变this指针。如果没有提供thisObj参数,那么 Global 对象被用作thisObj。

实际上,apply和call的功能是一样的,只是传入的参数列表形式不同。


基本用法

8、回调机制

Javascript中的回调函数,相信大家都不陌生,最明显的例子是做Ajax请求时,提供的回调函数,

实际上DOM节点的事件处理方法(onclick,ondblclick等)也是回调函数。

 传递函数作为回调

  很容易把一个函数作为参数传递。

function fn(arg1, arg2, callback){

var num = Math.ceil(Math.random() * (arg1 - arg2) + arg2);

callback(num);  //传递结果

}

fn(10, 20, function(num){

console.log("Callback called! Num: " + num);

});    //结果为10和20之间的随机数

9、客户端登录添加token机制

      手机APP登录的时候发送用户名和密码到服务器,服务器验证用户名和密码,

如果成功,以某种方式比如随机生成32位的字符串作为token,存储到服务器中(创建Table),

并返回token到客户端,以后客户端再请求时,验证该token就可以了。将客户端保存的token与服务器存储的token比对,然后服务器端验证token,成功返回所需要的结果,失败返回错误信息,让其重新登录。

其中服务器上token设置一个有效期,每次客户端请求的时候都验证token和有效期。

10、ajax缓存解决有1,2,3种办法:

一、加个随机数 ASP随机函数

xmlHttp.open("GET", "ajax.asp?now=" + new Date().getTime(), true);

二、在要异步获取的asp页面中写一段禁止缓存的代码:

Response.Buffer =True

Response.ExpiresAbsolute =Now() - 1

Response.Expires=0

Response.CacheControl="no-cache"

三、在ajax发送请求前加上xmlHTTP.setRequestHeader("If-Modified-Since","0");可以禁止缓存

xmlHTTP.open("get", URL, true);

xmlHTTP.onreadystatechange = callHTML;

xmlHTTP.setRequestHeader("If-Modified-Since","0");

xmlHTTP.send();

11、跨域问题

跨域问题分享链接

12、缓存问题

缓存原因及方法

13、数组常用的哪些方法

一、push:增加一位,在数组最后

二、pop:删除数组最后一位

三、unshift:添加一位,在数组最前面

四、shift:删除数组第一位

五、join/split:join把数组拼接成字符串,split把字符串组合成数组

六、slice:从数组中返回特定项(可以把伪数组转成数组),是重新克隆一份

Array.prototype.slice.call(arguments)

七、concat:合并数组

四、笔试遇到的问题

图片发自简书App


图片发自简书App


图片发自简书App


图片发自简书App


图片发自简书App


图片发自简书App


克隆


发布订阅


this指向
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

  • 前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:...
    秀才JaneBook阅读 2,326评论 0 25
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,828评论 0 0
  • HTML篇 HTML标签 都表示斜体,如果这种斜体字对该浏览器不可用的话,可以使用高亮、反白或加下划线等样式。 l...
    Gopal阅读 318评论 0 1
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    程序员poetry阅读 114,222评论 24 450
  • 天空的暗,压抑的灰,死气沉沉的远山,那惊慌失措的飞鸟,在冒着雾气的林间狂飞乱叫,暴涨的河流湍急而又浑浊,连...
    陈清泓阅读 200评论 0 1