面试题

（1）CSS3 新增伪类有那些？

CSS3 新增伪类举例：

p:first-of-type 选择属于其父元素的首个<p>元素。

p:last-of-type 选择属于其父元素的最后<p>元素。

p:only-of-type 选择属于其父元素唯一<p>元素。

p:only-child 选择属于其父元素的唯一<p> 元素。

p:nth-child(2) 选择属于其父元素的第二个<p>元素。

:enabled、:disabled 控制表单控件的禁用状态。

:checked，单选框或复选框被选中。

（2）浏览器标准模式和怪异模式之间的区别是什么?

盒子模型 渲染模式的不同

使用 window.top.document.compatMode 可显示为什么模式

 （3）CSS计数器counter-reset属性和counter-increment属性

 参考网址：https://blog.csdn.net/u011936353/article/details/47122387

（4）怎样添加、移除、移动、复制、创建和查找节点

1）创建新节点
createDocumentFragment() //创建一个 DOM 片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2）添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的 Name 属性的值
getElementById() //通过元素 Id，唯一性

（5）写一个 function，清除字符串前后的空格。（兼容所有浏览器）

if (!String.prototype.trim) {
String.prototype.trim = function() {
return this.replace(/^\s+/, "").replace(/\s+$/,"");
}}
//测试
var str = " \t\n test string ".trim();
alert(str == "test string"); // alerts "true"

（6）以下哪个单词不属于 javascript 保留字：（B）

A.with
B.parent
C.class
D.void

（7）日期计算，写出函数 DateDemo 的返回结果，系统时间假定为今天？

function DateDemo(){
  var d, s="今天日期是：";
  d = new Date();
  s += d.getMonth() +1+ "/";
  s += d.getDate() + "/";
  s += d.getFullYear();
  return s;
}
结果：今天日期是：7/21/2016

（8）写出简单描述 html 标签（不带属性的开始标签和结束标签）的正则表达式，并将以下字符串中的 html 标签去除掉？

var str = “<div>这里是 div<p>里面的段落</p></div>”;
<scripttype=”text/javascript”>
var reg = /<\/?\w+\/?>/gi;
var str = “<div>这里是 div<p>里面的段落</p></div>”;
alert(str.replace(reg,”"));
</script>

（9）列举浏览器对象模型 BOM 里常用的至少 4 个对象，并列举 window 对象的常用方法至少 5 个

对象：window, document, location, screen, history, navigator
方法：alert(), confirm(), prompt(), open(), close()

（10）Javascript 如何实现继承？

1.构造继承法
2.原型继承法
3.实例继承法

（11）iframe 的优缺点？

优点：1. 解决加载缓慢的第三方内容如图标和广告等的加载问题；2. Security sandbox；3. 并行加载脚本

缺点：1. iframe 会阻塞主页面的 Onload 事件；2. 即时内容为空，加载也需要时间；3. 没有语意

（12）js 延迟加载的方式有哪些？

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

（13）documen.write 和 innerHTML 的区别？

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

（14）解释 jsonp 的原理，以及为什么不是真正的 ajax

动态创建 script 标签，回调函数
Ajax 是页面无刷新请求数据操作

（15）将数字 12345678 转化成 RMB 形式 如： 12,345,678？

//思路：先将数字转为字符， str= str + '' ;
//利用反转函数，每三位字符加一个 ','最后一位不加； re()是自定义的反转函数，最后再反转回去！
function re(str) {
  str += '';
  return str.split("").reverse().join("");
}
function toRMB(num) {
  var tmp='';
  for (var i = 1; i <= re(num).length; i++) {
    tmp += re(num)[i - 1];
    if (i % 3 == 0 && i != re(num).length) {
      tmp += ',';
    } }
    return re(tmp);
}

（16）生成 5 个不同的随机数

//思路：5 个不同的数，每生成一次就和前面的所有数字相比较，如果有相同的，则放弃当前生成的数字！
var num1 = [];
for(var i = 0; i < 5; i++){
  num1[i] = Math.floor(Math.random()*10) + 1; //范围是 [1, 10]
  for(var j = 0; j < i; j++){
    if(num1[i] == num1[j]){
      i--;
    } 
  } 
}

（17）JS 中的简单继承 call 方法！

//定义个父母类，注意：类名都是首字母大写的哦！
function Parent(name, money){
  this.name = name;
  this.money = money;
  this.info = function(){
  alert('姓名： '+this.name+' 钱： '+ this.money);
} }
//定义孩子类
function Children(name){
  Parent.call(this, name); //继承 姓名属性，不要钱。
  this.info = function(){
  alert('姓名： '+this.name);
} }
//实例化类
var per = new Parent('parent', 800000000000);
var chi = new Children('child');
per.info();
chi.info();

（18）bind(), live(), delegate()的区别

bind： 绑定事件，对新添加的事件不起作用，方法用于将一个处理程序附加到每个匹配元素的事件
上并返回 jQuery 对象。
live： 方法将一个事件处理程序附加到与当前选择器匹配的所有元素（包含现有的或将来添加的）的
指定事件上并返回 jQuery 对象。
delegate： 方法基于一组特定的根元素将处理程序附加到匹配选择器的所有元素（现有的或将来的）
的一个或多个事件上。

（19）如何优化自己的代码？

代码重用；
避免全局变量（命名空间，封闭空间，模块化 mvc..）；
拆分函数避免函数过于臃肿；
注释

（20）console.log( 8 | 1 ); 输出值是多少？

9
位运算 OR 由符号（|）表示，是直接对数字的二进制形式进行运算。
8的二进制形式是1000
1的二进制形式是0001
然后每个数字中的数位对齐进行比较,两两比较，只有有其中一个是1（true），比较的结果就是1（true）
1000和0001
第1位1|0 -> 1
第2位0|0 -> 0
第3位0|0 -> 0
第4位0|1 -> 1
最后得到的是1001，转为十进制是9

（21）alert(0.4*0.2);结果是多少？和你预期的一样吗？如果不一样该如何处理？
    有误差，应该比准确结果偏大。 一般我会将小数变为整数来处理。当前之前遇到这个问题时也上网查询发现有人用 try catch return 写了一个函数，当然原理也是一致先转为整数再计算。

（22）在 Javascript 中什么是伪数组？如何将伪数组转化为标准数组？

伪数组（类数组）：无法直接调用数组方法或期望 length 属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。
典型的是函数的 argument 参数，还有像调用getElementsByTagName,document.childNodes 之类的,它们都返回 NodeList 对象都属于伪数组。
可以使用 Array.prototype.slice.call(fakeArray)将数组转化为真正的 Array 对象。

（23）阐述一下异步加载。

1. 异步加载的方案： 动态插入 script 标签
2. 通过 ajax 去获取 js 代码，然后通过 eval 执行
3. script 标签上添加 defer 或者 async 属性
4. 创建并插入 iframe，让它异步执行 js

（24）什么是 Ajax 和 JSON，它们的优缺点

Ajax 是全称是 asynchronous JavaScript andXML，即异步 JavaScript 和 xml，用于在 Web 页面中实现异步数据交互，实现页面局部刷新。
优点：可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量，避免用户不断刷新或者跳转页面，提高用户体验
缺点：不能回退, 对搜索引擎不友好；要实现 ajax 下的前后退功能成本较大；可能造成请求数的增加跨域问题限制；
JSON 是一种轻量级的数据交换格式，ECMA 的一个子集
优点：轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）

（25）javascript 的本地对象，内置对象和宿主对象

本地对象为独立于宿主环境的 ECMAScript 提供的对象，包括 Array Object RegExp 等可以 new 实例化的对象
内置对象为 Gload，Math 等不可以实例化的(他们也是本地对象，内置对象是本地对象的一个子集)
宿主对象为所有的非本地对象，所有的 BOM 和 DOM 对象都是宿主对象，如浏览器自带的document,window 等对象

 （26）简述stopImmediatePropagation() 和 stopPropagation()的区别？

 可以使用DOM3级新增事件stopImmediatePropagation()方法来阻止事件捕获

 stopImmediatePropagation： 防止对事件流中当前节点中和所有后续节点中的事件侦听器进行处理（对当前节点第二次绑定事件时，不监听）；

 stopPropagation：防止对事件流中当前节点的后续节点中的所有事件侦听器进行处理；

e=e||window.event;     
if(e.stopPropagation){          
  e.stopPropagation();//其它浏览器        
}else{           
  e.cancelBubble=true;//IE浏览器       
}

（27）在 Javascript 中什么是伪数组？如何将伪数组转化为标准数组？

.  伪数组（类数组）：无法直接调用数组方法或期望 length 属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的 argument 参数，还有像调用getElementsByTagName,document.childNodes 之类的,它们都返回 NodeList 对象都属于伪数组。可以使用 Array.prototype.slice.call(fakeArray)将数组转化为真正的 Array 对象。假设接第八题题干，我们要给每个 log 方法添加一个”(app)”前缀，比如’hello world!’ ->’(app)hello world!’。方法如下：

function log(){
  var args = Array.prototype.slice.call(arguments); //为了使用 unshift 数组方法，将 argument 转化为真正的数组
  args.unshift('(app)');
  console.log.apply(console, args);
};