【持续更新】JavaScript常见面试题整理

小说:手机棋牌作者:道开文更新时间:2018-11-20字数:34541

【持续更新】JavaScript常见面试题整理



【重点提前说】这篇博客里的问题涉及到了JS中常见的的基础知识点,也是面试中常见的一些问题,建议初入职场的园友Mark收藏,本文会持续更新~

1、 引入JS的三种方式

1、在HTML标签中直接使用,直接内嵌JS(但是不提倡使用);
>>>不符合W3C关于内容和行为分离的要求;
2、在HTML页面中使用<scrip> </script>标签包裹JS代码;
>>>script标签可以放到页面的各种位置;
3、引入外部的JS文件使用<script> </script>标签;

2、 JS中的变量声明

 

3、 JS中变量的数据类型


4、 常用的数值函数

parseInt()只能转字符串,转其他的类型都是NAN;而Number()能转所有的数据类型;


5、 运算符注意事项


6、 判断水仙花数

 

7、 If结构,循环结构,支持的判断结果:

 

8、 循环控制语句:

 

9、 斐波那契数列:1,1,2,3,5,8,13,21……

 

10、 JS中函数的调用方式/事件的绑定方式

 

11、 window对象的常用方法

 


12、 DOM操作的相关方法

 

 


13、 键盘事件&确定键盘按键

 

14、 DOM2 兼容写法:


15、 事件冒泡&事件捕获&阻止默认事件

 

16、 数组常用方法:

 

17、 引用数据类型&基本数据类型:

 

18、 Number类常用方法:

 

19、 String类常用方法:


20、 Date类:

 

21、 杨辉三角:

 

22、 正则表达式声明:

 

23、 正则表达式常用规则:

 

24、 正则中的testexec方法:

 

25、 foreach与each的区别?

forEach是js中的方法(针对数组),而each是jquery中的方法(针对jquery对象,即$( );
 
1.forEach方法:如下图所示

输出结果:

2.each方法:如下图所示

输出结果:

26、document load 和document ready的区别

Document.onload 是在结构和样式加载完才执行js
window.onload:不仅仅要在结构和样式加载完,还要执行完所有的样式、图片这些资源文件,全部加载完才会触发window.onload事件
Document.ready原生种没有这个方法,jquery中有 $().ready(function)

27、什么是CSS Hack?怎么表示?

CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
简单的说,CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然,我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。
方式一 条件注释法 方法二 类内属性前缀法 方式三:选择器前缀法

28、Javascript中callee和caller的作用?

arguments.callee:获得当前函数的引用
caller是返回一个对函数的引用,该函数调用了当前函数;
callee是返回正在被执行的function函数,也就是所指定的function对象的正文。

29、简述创建函数的几种方式

第一种(函数声明):
function sum1(num1,num2){
   return num1+num2;
}
第二种(函数表达式):
var sum2 = function(num1,num2){
   return num1+num2;
}
匿名函数:
function(){}:只能自己执行自己
 第三种(函数对象方式):
var sum3 = new Function("num1","num2","return num1+num2");

30、把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别?浏览器会如何解析它们?

如果说放在body的封闭之前,将会阻塞其他资源的加载
如果放在body封闭之后,不会影响body内元素的加载

31、iframe的优缺点?

优点:
1. 解决加载缓慢的第三方内容如图标和广告等的加载问题
2. Security sandbox安全沙盒
3. 并行加载脚本
缺点:
1. iframe会阻塞主页面的Onload事件
2. 即使内容为空,加载也需要时间
3. 没有语意

32、请你谈谈Cookie的弊端?

缺点:
1.`Cookie`数量和长度的限制。
每个domain最多只能有20条cookie,每个cookie长度不能超过4KB,否则会被截掉。
2.安全性问题。
如果cookie被人拦截了,那人就可以取得所有的session信息。即使加密也与事无补,因为拦截者并不需要知道cookie的意义,他只要原样转发cookie就可以达到目的了。
3.有些状态不可能保存在客户端。
例如,为了防止重复提交表单,我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端,那么它起不到任何作用。

33、js延迟加载的方式有哪些?

1. defer和async
2. 动态创建DOM方式(创建script,插入到DOM中,加载完毕后callBack)
3. 按需异步载入js

34、documen.write和 innerHTML 的区别?

document.write 只能重绘整个页面
innerHTML 可以重绘页面的一部分

35、哪些操作会造成内存泄漏?

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0(没有其他对象引用过该对象),或对该对象的惟一引用是循环的,那么该对象的内存即可回收。
1. setTimeout 的第一个参数使用字符串而非函数的话,会引发内存泄漏。
2. 闭包
3. 控制台日志
4. 循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)

36、JS是一门什么类型的语言?

JS可以模拟实现继承和封装,但是不能模拟实现多态,故js是基于事件的,基于对象的轻量级脚本语言。

37、语言有哪几种类型?各有什么特点?

1、语言的分类:
①、面向机器:汇编语言。
②、面向过程:C语言
③、面向对象:Java、C++、PHP等。
2、面向过程与面向对象:
①、面向过程:专注于如何去解决一个问题的过程步骤,编程的特点是由一个个的函数去实现每一步的过程步骤,没有类和对象的概念。
②、面向对象:专注于由哪一个对象来解决这个问题,编程特点是出现了一个个的类,从类中拿到对象
【面向对象的三大特征】 继承、封装、多态
【区别】
对于调用者来说,面向过程需要调用者自己去实现各种函数,
而面向对象,只需要告诉调用者对象中具体方法的功能,不需要调用者去了解方法中的实现细节。

38、JavaScript中类和对象的关系:

类是抽象的,对象是具体的
类是对象的抽象化,对象是类的具体化;
★类是一个抽象的概念,只能说类有属性和方法,但是不能给属性和方法赋具体的值。
例如:人类有身高,但是不能说出具体数值
★对象是一个具体的个例,是将类中的属性进行具体赋值而来的个体;
例如:张三是人类中的一个个体,身高180cm。

39、实现继承的三种方式?

1、使用call bind apply来实现继承。
2、通过扩展object来实现继承。
3、使用原型实现继承。

40、 什么叫封装?有什么方法和特点?

① 方法的封装: 将类内部的函数进行私有化处理,不对外提供调用接口,无法在类外部使用的方法,称为私有方法,即方法的封装。
② 属性的封装: 将类中的属性进行私有化处理,对外不能直接使用对象名访问(私有属性)。 同时,需要提供专门用于设置和读取私有属性的set/get方法,让外部使用我们提供的方法,对属性进行操作。 这就叫属性的封装。
封装不是拒绝访问,而是限制访问。 要求调用者,必须使用我们提供的set/get方法进行属性的操作,而不是直接拒绝操作。
因此,单纯的属性私有化,不能称为封装!必须要私有化之后,提供对应的set/get方法。

41、 原生JS对象与JQuery对象之间的相互转化方式有哪些?

① 使用$("")选中的是JQuery对象,只能调用JQuery函数,而不能使用元素的JS事件与函数;
② 原生的JS对象转为 JQuery对象
可以使用$() 包裹即可以转为JQuery对象
var p = document.getElementsByTagName("p");
$("p").click(); √ 原生的JS对象已经转为 JQuery对象;
③ JQuery转为原生JS对象:
使用get(index)或者[index]
$("#p").get(0).onclick() = function () {}; √
$("#p").[0].onclick() = function () {}; √

42、JS常用的内置对象有哪些?它们各自的一些方法有哪些?:

1、Boolean类、Number类:、String类、Date日期类、
2、常用方法:
Number类:
.toString() 将数值类型转换成字符串类型;
.toLocaleString()将数值按照本地格式顺序转换成字符串,一般从右开始,三个一组加都好分隔开;
.toFixed(n);将数字保留n位小数,并将其转换为字符串格式;
.toPrecision(n):将数字格式化为指定长度。n表示不含小数点的位数长度。如果n<原数字长度,则用科学计数法表示。
.valueOf() 返回Number对象的基本数字值;
String类:
str.length 返回字符串的长度,即为字符数;
str.toLowerCase()将字符串所有的字符转成小写;
str.UpLowerCase()将字符串所有的字符转成大写;
str.charAt(N)截取数组的第N个字符,相当于str[N];
str.indexOf("srt",index)查找子串在字符串中出现的位置,如果没有找到返回-1,其他同数组的indexOf方法;
str.lastIndexOf()同数组。
str.subString (begin,end) 截取数组中的某一部分并返回截取的字符串
>>>传入一个参数,表示是开始的区间,默认将截取到字符串末尾;
>>>传入两个参数,表示开始和结束的下标,是一个左闭右开区间;
str.split(分隔符)将字符串以指定分隔符分隔存入数组中,
str.replace(old,new)将字符串中的字符进行替换;
Date日期类:
1、new Date();返回当前最新时间;
new Date("2017,08,29,12:33:29") 返回指定时间;

43、什么是Jquery中的文档就绪函数

文档就绪函数防止文档在未完全加载之前,运行JQuery代码;
$(document).ready(function() {
//JQuery代码
});
简写形式如下:
$(function(){});
[文档就绪函数&window.onload的区别]
① window.onload必须等到网页中的所有内容(包括图片视频)加载完成后才能执行代码;
文档就绪函数只需要在 网页DOM结构加载完成之后,就可以执行代码;
② window.onload只能写一个,写多个之后只会执行最后一个;
文档就绪函数可以写多个,而且不会覆盖。

44、常用的CSS的预处理器有哪些?

less
sass 常用的编译方式
它们之间的区别:
SCSS中的嵌套:选择器嵌套 属性嵌套 伪类嵌套
混合宏、继承、占位符:
① 混合宏:使用@mixin声明混合宏,在其他选择器中使用@include调用混合宏
② 继承 :声明一个普通的class,在其他的选择器中使用extend 继承这个class;
③ 占位符 :使用%声明%占位符,在其他选择器中使用@extend 继承占位符;

45、简述下JS中的事件分类

1、鼠标事件: click/dblclick/onmouseon/onmouseover.....
2、HTML事件: onload/onscroll/onsubmit/onchange/onfocus....
3、键盘事件:
keydown:键盘按下时触发
keypress:键盘按住时触发
keyup:键盘抬起时触发
【确定触发的按键】
① 在触发的函数中传入一个参数e,表示键盘事件;
② 使用e.keyCode,取到按键的Ascii码值,进而确定触发按键;
③ 所有浏览器的兼容写法(一般并不需要)

46、浅谈JavaScript的优点和缺点:

优点:
  • 性能:由于JavaScript运行在客户端,节省了web服务器的请求时间和带宽
  • 轻量级的脚本语言,比较容易学习
  • 运行在用户机器上,运行结果和处理相对比较快。
  • 可以使用第三方附加组件来检查代码片段。
缺点:
  • 安全问题:由于JavaScript在客户端运行,可能被用于黑客目的。
  • 渲染问题:在不同浏览器中的处理结果可能不同。

47、浅谈jQuery的优点和缺点:

使用jQuery最大的好处是少量的代码做更多的事情。
Write Less Do More
看个简单例子,获取元素的值,使用JavaScript:
Javascript代码
  1. document.getElementById(‘elementid").value
 
使用jQuery:
Jquery代码
  1. $(‘#elementid").val();
与JavaScript相比,jQuery的语法更加简单。通过jQuery,可以很容易地浏览文档、选择元素、处理事件以及添加效果等,同时还允许开发者定制插件。
优点:
  • jQuery消除了JavaScript跨平台兼容问题。
  • 相比其他JavaScript和JavaScript库,jQuery更容易使用。
  • jQuery有一个庞大的库/函数。
  • jQuery有良好的文档和帮助手册。
  • jQuery支持AJAX。
缺点:
  • 由于不是原生JavaScript语言,理解起来可能会受到限制。
  • 项目中需要包含jQuery库文件。如果包含多个版本的jQuery库,可能会发生冲突。

48、浅谈angular优缺点

简介:angularjs是一个javascript框架。通过script脚本引入,他是一个用Javascript编写的库。angularjs通过指令扩展了HTML,通过表达式绑定数据到HTML中。AngularJS主要考虑的是构建CRUD(增删改查)应用。幸运的是,至少90%的WEB应用都是CRUD应用。
优点:
1. 改变操作dom的方式
将传统的JQuery的先选择元素,在操作的方式改变成了直接对于元素本身的操作。
这依赖于强大的Html Parser的能力和directive灵活。
2. 后端MVC前端化
3. 数据操作
缺点:
1、框架略笨重
2、不适合页面复杂的网站类型开发:
内容网站,需要SEO的。(SEO目前也有了prerender解决方案) https//prerender.io
交互频繁的,如游戏之类交互体验网站。

49、什么叫做事件委派?有什么作用?(优点)

Jq中的事件委派on
>>>将原本需要绑定到子元素上的事件,绑定到其祖先节点乃至根节点上面,再委派给子元素节点,生效!
eg: $("p").on("click",function(){});
事件委派 如下:
$(document).on("click","p",function(){});
 
>>>作用:
不使用事件委派的绑定方式,只能将事件绑定到初始化时的子元素标签上,
当页面新增同类型标签时,这些新增的标签上,没有之前绑定的事件。
而使用 事件委派时 ,当页面新增更同类型标签时,这些新增的事件也具有之同类型前标签所绑定的事件!
off()取消事件绑定
$("p").off("click"):取消单事件绑定
$("p").off("click mouseover dbclick"):取消多事件绑定
$(document).off("click","p"):取消委派事件绑定
$("p").off()取消所有的事件绑定

50、详细介绍下 CSS的动画

1、 css的transition transition抓住了所设置变化属性的起始态和完成态,通过设定的速度曲线来完成动画。可以涉及到各种变化的css属性,默认为all,则所有变化的属性都会在出发时,以动画的形式展现出来。
tips:transform是一种变化属性,该属性允许我们对元素进行旋转、缩放、移动或倾斜。可以作为transition中需要变化的属性。
2.css3的animation属性
使用animation属性制作动画可以更加灵活的设置动画帧,通过不同keyframe(动画帧)的设置,实现很多优雅的效果,keyframe中的百分数是动画完成总时间的比例。
animation是设置总的动画效果,而keyframe中设置上相应的动画名字,然后在keyframe中设置具体的动画效果。
JS中的动画
3.原生js动画
原生js动画利用js代码,将动画一步以函数的方式写出来,可以实现多种动画样式,而且可以自己做兼容性处理,自己设立每一步的动画效果,并且能够完成比较复杂的效果,但是代码量很大。

51、Jquery与jQuery UI 有啥区别?

*jQuery是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等。
*jQuery UI则是在jQuery的基础上,利用jQuery的扩展性,设计的插件。
提供了一些常用的界面元素,诸如对话框、拖动行为、改变大小行为等等

52、jquery 中如何将数组转化为json字符串,然后再转化回来?

jQuery中没有提供这个功能,所以你需要先编写两个jQuery的扩展:
   $.fn.stringifyArray = function(array) {
        return JSON.stringify(array)
    }
    $.fn.parseArray = function(array) {
        return JSON.parse(array)
    }
    然后调用:
    $("").stringifyArray(array)

我要说两句: (0人参与)

发布