前端面试题

1. 如何快速判断变量a为undefined/Null/NaN/Number/String/Boolean，并将变量a转为整型。

抛开这道题，来谈谈typeof和Object.prototype.toString.apply()两种检测变量的手段，前者是操作符，后者是原型上的方法。看结果可见后者更加精确。

<script> function judge() { console.log(typeof undefined);//undefined console.log(typeof 'asd');//string console.log(typeof function name(params) { });//function console.log(typeof { a: 'a' });//object console.log(typeof Date);//function console.log(Object.prototype.toString.apply(undefined));//[object Undefined] console.log(Object.prototype.toString.apply('asd'));//[object String] console.log(Object.prototype.toString.apply(function name(params) { }));//[object Function] console.log(Object.prototype.toString.apply({ a: 'a' }));//[object Object] console.log(Object.prototype.toString.apply(Date));//[object Function] /* 上面部分,对于undefined，string，function，object，Date两种方法返回结果没有差异*/ /* Object.prototype.toString.apply()返回的是字符串，如果要拿结果来做判断 */ /* 需要自己使用subsrting或者substr再进行字符串截取 */ /* 两种方法对于null和数组的判断，typeof就显得不够精确 */ console.log(typeof null)//object console.log(Object.prototype.toString.apply(null));//[object Null] console.log(typeof ['a', 'b']);//object console.log(Object.prototype.toString.apply(['a', 'b']));//[object Array] /*，对于NaN，123，Infinity都会返回number类型需要再加一层判断 */ console.log(typeof NaN);//number console.log(typeof 123);//number console.log(typeof Infinity);//number console.log(Object.prototype.toString.apply(NaN));//[object Number] console.log(Object.prototype.toString.apply(123));//[object Number] console.log(Object.prototype.toString.apply(Infinity));//[object Number] /*，对于NaN，123，Infinity都会返回number类型需要再加一层判断 */ /* 判断完是number类型后可以用如下两个方法 */ console.log(isNaN(NaN));//true console.log(isFinite(Infinity));//false } judge(); </script>

将变量转为整型则使用parseInt() 与之相关的方法Number(),parseFloat().不再具体展开。

2. 谈谈你对响应式设计的理解

响应式设计（RWD，Responsive Web Design）是页面布局可以「响应」不同尺寸屏幕的设计方法。通常我们说起响应式设计都是针对网页设计的。同一个页面，随着屏幕尺寸的改变，自适应地改变页面布局。 细节可以看下这篇文章响应式设计

3. 谈谈深拷贝浅拷贝

ES6中的扩列符实现的深拷贝，并不是真正意义上的深拷贝，只能完成一层深拷贝，就是对象里面再套个对象，只是对里面的对象实现了浅拷贝而已。详细内容已经补充在深拷贝及浅拷贝中。

4. 谈谈JS的事件模型

JavaScript事件模型主要分为3种：原始事件模型、DOM2事件模型、IE事件模型。 详见事件模型

5. 一个整数，加上100后是一个数的完全平方数，再加上168又是另一个数的完全平方数，请找出改数。（JS编程实战）

<script> function search() { var arr = [];//将符合条件的n存储在arr中 var x, y; for (let n = 0; n < 100000; n++) { x = Math.sqrt(n + 100); y = Math.sqrt(n + 268); if (((String(x).indexOf('.') == -1)) && (String(y).indexOf('.') == -1)) { //将x,y转换成字符串,检验里面有无小数的.号，如果x，y都没有则不是小数 //则存储当前n arr.push(n) } } return arr; } var arr = search(); console.log(arr); </script>

6. 请简述js中undefined和null的区别

console.log(null==undefined)//true console.log(null===undefined)//false null： Null类型，代表“空值”，代表一个空对象指针，使用typeof运算得到 “object”，该处不应该有值。

undefined： Undefined类型，当一个声明了一个变量未初始化时，得到的就是undefined，undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。例如：

（1）变量被声明了，但没有赋值时，就等于undefined。

（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

（3）对象没有赋值的属性，该属性的值为undefined。

（4）函数没有返回值时，默认返回undefined。

7. CSS有哪些选择器

1.ID选择器（如：id=”name”,id=”name_txt”） 2.类选择器（如：class=”head”,class=”head_logo”） 3.标签选择器（如：body,div,p,ul,li） 4.全局选择器（如：*号） 5.组合选择器（如：.head .head_logo,注意两选择器用空格键分开） 6.继承选择器（如：div p,注意两选择器用空格键分开） 7.伪类选择器（如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。）

9. 介绍一下CSS的盒子模型

盒子模型分两种

box-sizing: content-box W3C标准盒子模型 在标准的盒子模型中，width指content部分的宽度 box-sizing: border-box IE盒子模型 在IE盒子模型中，width表示content+padding+border这三个部分的宽度

10. 请简单阐述一下你对原型链的了解

转载javascript——原型与原型链

11. 请简单阐述一下Promiese对象特性

Promies对象的状态不受外界影响。Promise对象同步立即执行，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败），三种状态之间不可逆，即一种状态到另一种状态之后（pending变成fulfilled或者rejected）就不会再发生改变。Promise.then 的then为异步操作。