JS面试题集—— 持续更新。。。

由来：在前端面试中，无论是笔试还是问答，JS题目都占据很大一部分，对JS的掌握程度决定了你的面试结果，所以学好JS很重要！

本篇博文会持续更新JS相关的面试题目!!!!

---

1. for、forEach 、for in、for of 循环的区别

• 1. for:是js中原始的写法它用来遍历数组

var arr = [1,2,3]
for(var i = 0 ; i< arr.length ; i++){
    console.log(arr[i]) // 1,2,3
}
复制代码

• 2. forEach: 是ES5中的语法，用来遍历数组，但是它不支持使用break、continue和return语句

let arr = ['a', 'b', 'c']
arr.forEach(function (value, index, arr) { // value是当前元素，index当前元素索引，arr数组
    console.log(value + ', index = ' + index) 
})
output：
a, index = 0
b, index = 1
c, index = 2
复制代码

• 3. for in: 遍历数组索引、对象的属性(循环不仅会遍历数组元素，还会遍历任意其他自定义添加的属性)

let obj = {name: 'LiMing', age: '18'}
obj.phone="13513513512"
for (let o in obj) {
    console.log(o,obj[o])
}
output:
name LiMing
age 18
phone 13513513512
复制代码

• 4. for of: 是ES6中新增加的语法,遍历数组，不支持遍历对象,支持return

let arr = ['A', 'B', 'C']
for (let o of arr) {
    console.log(o) //A, B, C
}

解决for of遍历对象：
let obj = {name: 'LiMing', age: '18'}
for (let o of Object.keys(obj)) {
    console.log(o,obj[o])
}
output:
name LiMing
age 18
复制代码

---

2. this的指向形式有哪些? 能改变this指向的方法有哪些?(如何确定this：看谁调用的，前面是谁，this就是谁！！！)

1)this的指向形式有：
    a.普通函数调用，此时 this 指向window
    b.在严格模式下"use strict",为undefined;
    c.构造函数调用， 此时 this 指向实例对象
    d.对象方法调用， 此时 this 指向该方法所属的对象
    e.通过事件绑定的方法， 此时 this 指向绑定事件的对象
    f.定时器函数， 此时 this 指向window
    
2)能改变this指向的方法：
     a.call
     b.apply
     c.bind
     d.var that=this;
     e.箭头函数 =>
复制代码

---

3. JS中如何阻止事件冒泡，事件捕获和事件默认行为

1)事件冒泡：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发;
复制代码

if(e.stopPropagation()){
    e.stopPropagation();
}else{
    e.cancelBubble = true; //兼容IE方法
}
复制代码

2)事件捕获：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定);
复制代码

 if(ele.addEventListener){
    ele.addEventListener("click", function (){...});
 }else{
    ele.attachEvent("onclick",function (){...}); // 兼容IE方法
 }
复制代码

3)事件默认行为：即浏览器本身自带的功能;
复制代码

 if (e.preventDefault) {
    e.preventDefault();
} else { 
    e.returnValue = false; // 兼容IE方法
};      
复制代码

---

4. 谈谈类型比较

1)如果两个值类型不相同，则它们不相等;
复制代码

var a1="val1";
var a2="val2";
console.log(a1==a2);//false

复制代码

2)如果两个值都是null或者都是undefined，则它们不相等;
复制代码

var a1=null;
var a2=null;
console.log(a1===a2);//true

var a3=undefined;
var a4=undefined;
console.log(a3===a4);//true

复制代码

3)如果两个值都是布尔值true或者都是布尔值false，则它们相等;
复制代码

var a1=true;
var a2=true;
console.log(a1===a2);//true

复制代码

4)如果其中一个值是NaN,或者两个值都是NaN,则它们不相等。NaN和其他任何值都是不相等的,包括它本身！通过x!==x来判断x是否为NaN，只是在x在NaN的时候,这个表达式的值才为true;
复制代码

var a1=NaN;
var a2=NaN;
console.log(a1===a2);//false
console.log(a1!==a2);//true

复制代码

5)如果两个;
复制代码

var a1=NaN;
var a2=NaN;
console.log(a1===a2);//false
console.log(a1!==a2);//true

复制代码

---

5. 谈谈浏览器window对象

1)window对象的方法：
    window.alert(msg);//警告框
    window.confirm(msg);//确认框
    window.prompt(msg,[,defaultText]);//提示框
    window.close();//关闭窗口
    window.print();//打印
    
    window.serIntval(表达式,毫秒);
    window.clearIntval(定时器对象);
    window.setTimeout(表达式,毫秒);
    window.clearTimeout(定时器对象);

2)window子对象-navigator(浏览器信息对象)
    appCodeName //内部代码
    appName //浏览器名称
    appVersion //浏览器版本
    platform //操作系统类型
    userAgent //用户代理信息
    cookieEnabled //是否支持cookie

3)window子对象-location(地址栏对象)
    host //主机
    port //端口
    href //地址
    pethname //路径
    protocal //协议
    search //查询字符串
    assign(url) //页面跳转

4)window子对象-history(历史记录)
    length //历史记录数目
    back(); //后退
    forward(); //前进
    go(); //跳转

5)window子对象-screen(屏幕对象)
    height //高度
    width //宽度
    avaiHeight //可用高度
    avaiWidth //可用宽度
    colorDepth //颜色
复制代码

---

6. js获取对象的样式方法

1) ele.style -只能获取内联的样式，其他的都无法获取到！
复制代码

<div style="width:300px;height:100px;" id="div1">测试</div>

var oDiv=document.getElementById("div1");
console.log(oDiv.style.width,oDiv.style.height); //300px,100px

复制代码

2)obj.currentStyle和window.getComputedStyle()
注意:只有IE(IE9以下)和Opera支持使用obj.currentStyle来获取HTMLElement的计算后的样式,标准浏览器中使用window.getComputedStyle(),IE9及以上也支持
window.getComputedStyle();

参数说明:
obj.currentStyle['attr'] //attr为属性名称
window.getComputedStyle(obj,null)['attr'] //obj为目标元素,attr为属性名称

考虑兼容性，封装函数
复制代码

function getStyle(el,attr){
    return el.currentStyle?el.currentStyle[attr]:window.getComputedStyle(el,null)[attr]
}

复制代码

---

7. 谈谈js之节点

1).根据 W3C HTML DOM 标准，HTML 文档中的所有事物都是节点：
    a).整个文档是文档节点
    b).每个HTML元素是元素节点
    c).HTML元素内的文本是文本节点
    d).每个HTML属性是属性节点
    e).所有注释是注释节点

2).节点访问关系
    a).parentNode //访问某个节点的父节点 
    b).childNodes //得到某个节点的所有子节点，IE9以下还会包含文本节点(空格和换行)
    c).children //得到某个节点中的所有元素子元素
复制代码

<ul id="uParent">
    <li>元素1</li>
    <li>元素2</li>
    <li>元素3</li>
</ul>

var oUl=document.getElementById("uParent");
console.log(oUl.childNodes.length) //7
console.log(oUl.children.length) //3
复制代码

    d).firstChild  // IE9及以上得到第一个元素节点，包含文本节点(空格和换行);IE9以下得到第一个元素节点;
    
    e).firstElementChild // IE9及以上得到第一个元素节点;IE9及以上得到第一个元素节点;
    
    f).lastChild //IE9及以上得到最后一个元素节点，包含文本节点(空格和换行);IE9以下得到最后一个元素节点;
    
    g).lastElementChild //IE9及以上得到最后一个元素节点;IE9以下不支持;
    
    h).nextSibling //IE9及以上获取后一个兄弟节点对象，包含文本节点(空格和换行);IE9以下获取后一个兄弟节点对象;
    
    j).nextElementSibling //IE9及以上获取后一个兄弟节点对象;IE9以下不支持;
    
    k).previousSibling //IE9及以上获取前一个兄弟节点对象，包含文本节点(空格和换行);IE9以下获取前一个兄弟节点对象;
    
    l).previousElementSibling //IE9及以上获取前一个兄弟节点对象;IE9以下不支持;
复制代码

---

8. 谈谈js之节点操作

    1)document.createElement() //在对象中创建一个对象,参数为元素的标签名
    
    2)document.createTextNode() //在对象中创建一个文本节点，参数为所要生成的文本节点的内容
    
    3)element.appendChild() //向节点的子节点列表的末尾添加新的子节点
    
    4)element.hasChildNodes() //返回一个布尔值，表示当前节点是否有子节点
    
    5)element.removeChild() //从子节点列表中删除某个节点
    
    6)element.cloneNode() //克隆某个元素
    
    7)element.insertBefore() //现有的子元素之前插入一个新的子元素
    
    8)element.replaceChild() //替换一个子元素
复制代码

    var aE = document.createElement("div");
    aE.className = "cla";
    var aT=document.createTextNode("1.这是创建添加元素");
    aE.appendChild(aT);
    document.body.appendChild(aE);
    
    console.log(aE.hasChildNodes("div")); //true
复制代码

---

转载于:https://juejin.im/post/5ceb93e2e51d454fa33b183e