JavaScript面试题之14-15

一、简答题

1. 简述JavaScript的运行特点

JavaScript是一门基于对象、事件驱动的、弱类型的、跨平台的、解释型的、函数优先的、同时支持面向对象开发的、动态的编程语言

2. 简述JavaScript中的数据类型，以及它们各自的作用

JavaScript语法规范中主要分为三种类型

• 基本数据类型，描述信息的字符串String、描述数值的Number类型、描述真假的Boolean类型以及描述空值的Null类型和无效值的Undefined类型
• 引用数据类型，主要包含Array数组、Function函数以及Object对象
• 自定义类型，可以使用JavaScript提供的语法实现自定义数据类型并创建对应的对象

扩展：那Date、Math这些使用过的类型又属于类型？
它们都是JS的内建类型，都属于引用数据类型，一般情况下引用数据类型都直接或者间接属于Function函数类型或者Object对象类型

3. 什么是事件冒泡？为什么要阻止冒泡？

事件冒泡，JS语法中规定的当子元素上触发了某个事件，事件函数执行后会将相同事件继续向父元素触发，直到文档根节点
常用的网页特效中不需要依赖冒泡，冒泡机制会导致一些网页特效出现效果混乱的情况，所以需要阻止冒泡
比如在开发中使用到的多级树形菜单，子菜单的展开和收起需要阻止冒泡，否则内部任意子菜单的折叠会导致整个菜单出现折叠效果

4. 什么是事件默认行为？为什么要阻止默认行为？

事件默认行为，描述的就是网页中元素的默认行为
某些场景中我们需要在带有默认行为的元素上添加事件，当事件触发时我们一般不希望默认行为执行，所以需要阻止
如超链接上的点击事件、自定义右键菜单等等

5. 如何获取鼠标在浏览器中的位置？如何获取鼠标在点击的元素上的位置？

鼠标在浏览器中的位置：event.clienX和event.clientY
鼠标在元素上的位置：event.offsetX和event.offsetY

6. 如何获取一个元素在定位的父元素中的位置和自身的大小？

元素的位置和大小：ele.offsetLeft、ele.offsetTop、ele.offsetWidth、ele.offsetHeight

7. 什么是懒加载？如何判断网页中需要懒加载？

懒加载描述的就是元素延迟加载
主要是网页中需要加载的资源过多，考虑到客户端的网速可能会对页面加载产生影响，需要通过懒加载的方式提高页面渲染效率
如：首页网页加载，优先加载视窗中的图片

8. 什么是防抖？什么是节流？它们的区别是什么？

防抖 让用户在某个超时范围内，多次频繁的事件操作只生效一次，降低服务开销
节流 让用户在某个超市范围内，多次频繁的事件操作降低为间隔一定时间生效一次，降低服务开销；
防抖在超时范围内，多次频繁操作只会生效一次；节流在超时范围内，多次频繁操作有一个生效频率
如秒杀中的防抖、抢红包节流

9. 什么是回调函数？什么情况下需要使用回调函数？

回调函数，将函数作为参数传递给一个执行函数，当执行函数执行完后根据条件来调用传递的函数，这个传递的函数就是回调函数
当执行函数需要一定的延迟时间才能得到执行结果，此时为了保障执行顺序需要通过回调函数的方式固定操作步骤和顺序
如获取并加载首页商品数据的时候，就需要回调函数等待获取到商品数据后通过DOM操作将数据渲染到页面上

10. 什么是闭包函数？ 什么情况下需要使用闭包函数？

闭包函数就是在一个函数的内部声明了函数，可以将当前外层函数的作用域进行扩展并且在一定的情况下常驻内存

如多功能效果开发时，多个特效之间的变量或者函数名称可能出现全局污染，需要使用闭包来屏蔽全局污染；防抖和节流中也用到了闭包函数
但是需要注意的是，闭包函数使用后一定要审查代码，避免出现常驻内存的情况，会在运行一段之后导致内存溢出
内存溢出就是程序运行时申请的内存不够代码使用，导致程序崩溃的错误！

11. 简单写几种函数自执行的语法

(function() {} )()
(function() {} ())
~function() {} ()
-function() {} ()
0,function() {} ()
…

二、编程题

1. 函数递归实现计算斐波那契数列第n位数据

function feib(n){
    if (n == 1 || n == 2) return 1
    return feib(n-1) + feib(n-2)
}

2. 函数递归实现计算给定数值n的阶乘

funtcion jieChen(n) {
    if(n <= 1) return 1
    return n*jieChen(n-1)
}

3. JS代码实现一个输入账号、邮箱的验证

<input type="text" id="username"/>
正则：var reg = /^[A-Za-z]\w{6,18}$/ig
验证：if(reg.test(username.value)) {合法} else {不合法}

<input type="email" id="email"/>
正则：var reg = /^\w+@\w+(\.com|\.cn|\.com\.cn)$/ig
验证：if(reg.test(email.value)) {合法} else {不合法}

4. 两种方式，实现数组的自定义排序方式

arr.sort(function(a, b) {return a - b})

function bubbleSort(arr) {
    for(var i = 0; i < arr.length; i++) {
       for(var j = 0; j < arr.length - i 	- 1; j++) {
            if(arr[j] > arr[j+1]) {
                  var temp = arr[j]
                  arr[j] = arr[j+1]
                  arr[j+1] = temp
				}
			}
		}
	}

5. 页面中插入100个p标签，通过js代码实现隔行变色效果

for(var i = 0; i < 100; i ++) {
    var p = document.createElement("p")
    if(i % 2 == 0) {
    p.style.background = "yellow"
		} else {
        p.style.background = "orangered"
	}
	document.body.appendChild(p)
}