前端面试题整理

1.JavaScript是一门什么样的语言,它有哪些特点?

javascript是  一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能。JavaScript兼容于ECMA标准,因此也称为ECMAScript。

Javascript的特点:

一、简单性:

JavaScript是一种基于Java基本语句和控制流之上的简单而紧凑的设计,从而对于学习Java是一种非常好的过渡。它的变量类型是采用弱类型,并未使用严格的数据类型。

二、动态性:

 avaScript是动态的,它可以直接对用户或客户输入做出响应,无须经过Web服务程序。它对用户的反映响应,是采用以事件驱动的方式进行的。所谓事件驱动,就是指在主页(Home Page)中执行了某种操作所产生的动作,就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后,可能会引起相应的事件响应。

三、跨平台性:

JavaScript是依赖于浏览器本身,与操作环境无关,只要能运行浏览器的计算机,并支持JavaScript的浏览器就可正确执行。从而实现了“编写一次,走遍天下”的梦想。

四、安全性:

JavaScript是一种安全性语言,它不允许访问本地的硬盘,并不能将数据存入到服务器上,不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。

2.JavaScript的数据类型都有什么?

基本数据类型:String,boolean,Number,Undefined

引用数据类型:Object(Array,Date,RegExp,Function,Null)

那么问题来了,如何判断某变量是否为数组数据类型?

方法一.判断其是否具有“数组性质”,如slice()方法。可自己给该变量定义slice方法,故有时会失效

方法二.obj instanceof Array 在某些IE版本中不正确

方法三.方法一二皆有漏洞,在ECMA Script5中定义了新方法Array.isArray(), 保证其兼容性,最好的方法如下:

dBrdo1HkSAS9gjOTyfDydVGxMd4A3ZeZsWdicc9J

3.已知ID的Input输入框,希望改变文本框的背景颜色,怎么做?(原生JS)

1240

4.希望获取到页面中所有的checkbox怎么做?(原生JS)

dBrdo1HkSAS9gjOTyfDydbV07aibUEeBQGRNiayv

5.Html事件绑定有几种方式?

直接在DOM里绑定事件:

这种方式称为原生事件或者属性事件

在JS里通过onclick绑定:xxx.onclick = test

Dom标准通过事件添加进行绑定:addEventListener("click",test, false) //第三个参数为是否支持事件捕捉

IE事件:attachEvent("onclick",test)

那么问题来了,Javascript的事件流模型都有什么?

“事件捕捉”:事件由最不具体的节点先接收,然后逐级向下,一直到最具体的

目标事件

“事件冒泡”:事件开始由最具体的元素接受,然后逐级向上传播

“DOM事件流”:三个阶段:事件捕捉,目标阶段,事件冒泡

IE事件流:目标事件和事件冒泡

阻止事件冒泡的方式:

dBrdo1HkSAS9gjOTyfDyddDJG7KpwnGLzP0cLEZn

阻止事件的默认行为:

dBrdo1HkSAS9gjOTyfDydW6zwPczeAFcwBG4icvR

6.看下列代码,将会输出什么?(变量声明提升)

dBrdo1HkSAS9gjOTyfDydaEOgib2ibXnNicj8N5t

上面的代码经过变量提升后,等价于下面的代码

dBrdo1HkSAS9gjOTyfDydTicc2TlS6dDJDKib0DZ

再看下面的输出结果:

dBrdo1HkSAS9gjOTyfDydYdW8Pfcurcngv8yibYh

此时打印a函数,不会打印1,因为下面是一个函数表达式,跟变量声明一样,只会把var a;提升到最前面,a=function(){}保留,会覆盖前面的a=1;因此打印函数。

此题目,我再百度面试的时候问到过。

7.掌握样式的优先级。

!important > style(内联) > Id(权重100) > class(权重10) > 标签(权重1) 同类别的样式,后面的会覆盖前面的。

百度视频部门一道面试题是这样的:

dBrdo1HkSAS9gjOTyfDydeTZZ6pEYHC1c4fe3hRO

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

1)创建新节点

createDocumentFragment() //创建一个DOM片段

createElement() //创建一个具体的元素

createTextNode() //创建一个文本节点

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

appendChild() //添加

removeChild() //移除

replaceChild() //替换

insertBefore() //插入

3)查找

getElementsByTagName() //通过标签名称

getElementsByName() //通过元素的Name属性的值

getElementById() //通过元素Id,唯一性

9.用js写一个正则匹配标签中是否包含一个class(百度面试题)

dBrdo1HkSAS9gjOTyfDydZJYxlAcquMbjbw9atqQ

10.事件循环绑定,输出结果(考察闭包)

dBrdo1HkSAS9gjOTyfDydcmDT2sN6VfCL38RK4vN

通过闭包封装后的代码:

dBrdo1HkSAS9gjOTyfDydVLTNicARgfCibLowXl7

闭包我所知道的两个作用:

a.通过闭包可以把局部变量传递出来,就是通过闭包可以访问函数内部的变量,比如下面的代码:

dBrdo1HkSAS9gjOTyfDydRicpLic0YogXwb89yca

通过闭包就可以访问函数内部的局部变量,并且实现数量累加。

b.使用闭包可以避免空间污染,闭包内部的变量都只能在内部使用,这样有效避免和外部变量的混淆。(个人理解)

11.js数组去重。

dBrdo1HkSAS9gjOTyfDydfWDAlg3hNF2F5iaWhMi

12.两个div标签,如何控制标签左边固定,右边自适应,左边div标签的宽度为100px(滴滴面试题)

dBrdo1HkSAS9gjOTyfDydeuNgt1icr4sLsicfCW1

滴滴面试起初问我,现在有并排的三个Div框,如何实现三个div都自适应,我当时就懵了,这个考察的是display:table的使用

dBrdo1HkSAS9gjOTyfDydfib6iadIg1uEhdmicRF

dBrdo1HkSAS9gjOTyfDydZIoegp1axbs58RbJh9b

13.实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制

考察点1:对于基本数据类型和引用数据类型在内存中存放的是值还是指针这一区别是否清楚

考察点2:是否知道如何判断一个变量是什么类型的

考察点3:递归算法的设计

dBrdo1HkSAS9gjOTyfDydaLBD5wrvZcpgvJGMroL

14.继承的使用

dBrdo1HkSAS9gjOTyfDydeaAs69DGXlscH1YaOwn

15.请评价以下代码并给出改进意见

dBrdo1HkSAS9gjOTyfDydWibUesthujOoKic6M3K

评价:

不应该在if和else语句中声明addListener函数,应该提前先声明,定义全局变量;

不需要使用window.addEventListener或document.all来进行检测浏览器,应该使用能力检测;

由于attachEvent在IE中有this指向问题,所以调用它时需要处理一下

改进如下:

dBrdo1HkSAS9gjOTyfDydS8QXEiaLg1Eq9B7uhcS

16.对作用域上下文和this的理解,看下列代码:

dBrdo1HkSAS9gjOTyfDydQYvKg16fyOUsEqdqeGX

原文地址:https://www.cnblogs.com/chenmiaosong/p/8320652.html