前端面试总结——持续更新

写在前面的话:

  • 写文目的:总结前端面试过程中没回答上来的点,深化印象,也方便日后温习。

  • 写文方法:写之前先自己看相关知识,理解好后过段时间根据记忆来写,最后对比纠正。

  • 目前笔者面试的职位是1-3年工作经验岗,阅读者可将此作为前端面试参考题目。

准备面试流程:

1.更新简历,多参考其他的优秀简历

2.复习面试题

笔者就是因为只更新了简历没有复习导致基础不过关,错过两家心仪的公司。

顺便说下,平时工作中的确很多时候用不到也不会去背某些面试中的问题,不过面试题中基础部分很重要,理解好基础才更轻松掌握新框架新知识。时不时去看看面试题也不失为一种巩固基础的方法。一般一面面基础,二面面项目,项目经验再多,一面过不了,什么戏也不会有。

被面过的面试题:

什么是闭包

闭包是由函数与创建该函数的环境所组成的

优点:减少全局变量污染

缺点:影响脚本性能

3==true 打印出什么

会打印出false,这里会将true转变成1

Number 和 String 或者 Bool 类型比较,会对String 或者 Bool 类型进行ToNumber()转换

Number(true) // 1
Number(false) // 0
1==true //true
1===true //false
3==true //false

变量声明提升

变量声明无论出现在代码的任何位置,都会在代码执行前处理。所以在代码的任何位置声明变量就好像在代码开头声明一样。

var a = 100;
function fn() {
    alert(a);
    var a = 200;
    alert(a);
}
fn();
alert(a);
var a;
alert(a); //这里alert出100
var a = 300;
alert(a);

判断变量是不是数组的几个方法

var a=[];
a.constructor===Array //true
a instanceof Array === true //true

⚠️ 注意:以上方法在跨frame时会有问题,跨frame实例化的对象不共享原型

var iframe = document.createElement('iframe');   //创建iframe  
document.body.appendChild(iframe);   //添加到body中  
xArray = window.frames[window.frames.length-1].Array;     
var arr = new xArray(1,2,3); // 声明数组[1,2,3]     
  
alert(arr instanceof Array); // false     
  
alert(arr.constructor === Array); // false   

解决:

Object.prototype.toString.call(a) // "[object Array]"
Array.isArray(a) //true

bind,call,apply用法与区别

用法:都是改变函数内this指向

bind:返回一个新的函数,调用新的函数才执行,新函数里this永久地被绑定到了bind的第一个参数上

而call与apply能直接执行

fuc.call(thisObj,a,b,c)

fuc.apply(thisObj,[a,b,c])

js三大组成部分

1.ECMAScript
2.dom
3.bom

http返回码100 200 300 400分别代表什么,即响应的5种类型

100:信息响应

200:成功

300:重定向

400:客户端错误

500:服务端错误

理解重定向

http无状态含义

解释三次握手,四次挥手

三次握手

1.客户端发syn包给服务端,等待服务器确认(syn:同步序列编号(Synchronize Sequence Numbers))

2.服务端发syn+ack包给客户端

3.客户端发确认包ack给服务端

四次挥手

中断连接端可以是Client端,也可以是Server端。

1.关闭主动方发送fin包

2.被动方发送ack包

3.被动方关闭连接,发送fin包

4.主动方发送ack包确认

自己实现个jQuery,可以传选择器进去,然后实现css()与height()方法

var myJquery4 = function (selector) {
        //console.log(this) //window
        return new jqNodes(selector) //new会创造一个对象实例,对象实例继承自构造函数的prototype,这里是jqNodes.prototype
    }

    var jqNodes = function (selector) {
        console.log(this)
        //1.以new调用时this指向即将创建的新对象 
        //2.直接调用则指向 window
        this._items = document.querySelectorAll(selector)
        return this
    }

    var myJqueryCore = {
        //放核心方法
        css: function () {
            console.log(this) //myJquery4('li').css('color') 这样调用时是作为new出来的对象原型里的方法调用的,this指向new出来的对象
            var prop = arguments[0],
                val = arguments[1]
            if (!val) return getComputedStyle(this._items[0]).getPropertyValue(prop);

            Array.prototype.map.call(this._items, function (c) {
                return c.setAttribute('style', prop + ':' + val)
            })
            return this
        }
    }

    jqNodes.prototype = myJqueryCore //关键

写个轮播图

之前感觉比较困扰的是从最后一页到第一页如何无缝滑动。无缝滑动的关键在于在第一页前放上最后一页,在最后一页后面再放上第一页。在最后一页点击后一页时,先滑动到放置在后边的第一页,滑动完成后立刻改变父元素的left值到排列在第二个的第一页。

html结构:

<div id="list" style="left: -600px;">
    <div>5</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>1</div>
</div>

关键js:

$('#list').animate({ left: newLeft }, function () {
    if (newLeft < -3000) {
        list.style.left = -600 + 'px';
    } else if (newLeft > -600) {
        list.style.left = -3000 + 'px';
    }
})

完整代码可点击下面链接:https://github.com/lujing2/jsexercise/tree/master/carousel

网上看的面试题&自己发现的面试知识点

注:自己发现的面试知识点一般是在工作学习中发现的基础重要但之前被自己忽略的知识点。

全等号优先级大于逻辑与

var a=1===2&&3?4:5

逗号操作符

逗号操作符 对它的每个操作数求值(从左到右),并返回最后一个操作数的值。

var x=(0,1) //x=1

比较对象

两个独立声明的对象永远也不会相等,即使他们有相同的属性,只有在比较一个对象和这个对象的引用时,才会返回true.

encodeURI encodeURIComponent

  • encodeURI
    encodeURI 会替换所有的字符,但不包括以下字符,即使它们具有适当的UTF-8转义序列:
类型       包含
保留字符    ; , / ? : @ & = + $
非转义的字符  字母 数字 - _ . ! ~ * ' ( )
数字符号    #

encodeURI自身无法产生能适用于HTTP GET 或 POST 请求的URI,例如对于 XMLHTTPRequests, 因为 "&", "+", 和 "=" 不会被编码,然而在 GET 和 POST 请求中它们是特殊字符。然而encodeURIComponent这个方法会对这些字符编码。

  • encodeURIComponent
    转义除了字母、数字、(、)、.、!、~、*、'、-和_之外的所有字符。

dangerouslysethtml会过滤掉__html属性里的 \ ,是因为用了encodeURI函数来避免xss攻击

encodeURI('/\/\//') -->”////“
encodeURI('\') --> Uncaught SyntaxError: Invalid or unexpected token
encodeURIComponent('/\/\//') -->"%2F%2F%2F%2F"
encodeURIComponent('/') --> "%2F"
encodeURIComponent('\') --> Uncaught SyntaxError: Invalid or unexpected token

xss

cross-site scripting,跨站脚本,属于代码注入的一种。它允许恶意用户将代码注入到网页上,其他用户在观看网页时就会受到影响。这类攻击通常包含了html以及用户端脚本语言。
攻击实例:用户A提交表单事加入类似以下代码,如果提交表单时没有做检测,而之后的结果页面是其他用户也能看到的,那么其他页面看到的结果页就会受到影响。

<script>
    document.write('...')
</script>

解决办法:不信赖用户输入,对特殊字符如”<”,”>”转义。

uri url

uri:统一资源标识符
url:统一资源定位符
url与urn是uri的子集。
让uri能成为url的是那个“访问机制”,“网络位置”。e.g. http:// or ftp://.。
urn是唯一标识的一部分,就是一个特殊的名字。

etag是什么

鉴于http很重要,深化下对http的认识

一级域名,二级域名

www.baidu.com为例子
最右边一个点右边的为顶级域名(一级域名)com
一级域名左边是二级域名 baidu

主域,子域

子域名域名系统等级中,属于更高一层域的域。比如,mail.example.com
和calendar.example.com是example.com的两个子域,而example.com
则是顶级域.com的子域

非技术问题

为什么换工作

不要说是因为钱少。上一家的薪资不要做假,因为公司可能会查。期望薪资可以要高点,说明原因,可能上家工资发放不合理之类的。

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

推荐阅读更多精彩内容

  • 1. 基础知识 1.1 3种常见的计算机体系结构划分 OSI分层(7层):物理层、数据链路层、网络层、传输层、会话...
    Mr希灵阅读 19,862评论 6 120
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,633评论 18 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,825评论 25 707
  • 果公司以近8000亿的市值牢牢占据着世界第一的宝座,后来,分别是互联网-谷歌,电商-亚马逊,软件-微软,社交-Fa...
    桥帮主阅读 396评论 0 2
  • 首先,你需要作息规律,清淡饮食,将运动变成日常习惯。 其次,感觉累的时候放松自己,喜欢这件事情强求不得,它是一种本...
    追梦人11阅读 223评论 0 0