【WEB】JS面试题涉及基础知识总结（二）

【WEB】JS面试题涉及基础知识总结（一）
http://blog.csdn.net/whuzxq/article/details/78122965
那么继续下面的分享。

四.异步和单线程

1.前端使用异步的场景：

• 定时任务：setTimeout.setInterval
• 网络请求：ajax请求，动态<img>加载
• 事件绑定

注：都是需要等待的场景

2.单线程的异步过程

• 执行第一行
• 遇到setTimeout后，传入setTimeout的参数会被暂存，不会立即执行（单线程的特点）
• 执行
• 待所有的程序执行完成后，处于空闲状态，会立马查看有木有暂存起来的要执行
• 发现有暂存的setTimeout，无需等待，立即执行

3.同步和异步的区别？
同步会阻塞代码而异步不会。

五.JS的API

1.日期
2.math.random()
3.数组API:forEach,every,some,sort,map,filter
4.对象API：for(key in obj)

经典面试题

1.获取长度一致的字符串
var random=Math.random()+'0000000000' var random=random.slice(1,10)
2.写一个能遍历数组和对象的forEach函数

function forEach(obj,fn){ var key if(obj instanceof Array){
obj.forEach(function(item,index){ fn(index,item); }) }else{
for(key in obj){
fn(key,obj[key]) } } }
3获取特定日期格式

六.JS-WEB-API

前五个部分讲解的都是基于ECMA 262标准，除了JS基础知识，前端还包括JS-WEB-API（W3C标准），只管定义用于浏览器中操作页面API和全局变量。

1.DOM
DOM的本质：浏览器把拿到的HTML代码结构化成一个浏览器能识别且JS可操作的模型。
DOM操作：获取DOM节点

• document.getElementById()
• document.getElementsByTagName()
• document.getElementsByClassName()
• document.querySelectorAll()

2.prototype:JS对象的标准属性
classname,setAttribute,getAttribute
3.DOM结构操作

新增节点：
var p=document.createElement(‘p’);
div.appendchild(p)//添加新节点

移动节点
var　ｐ＝document.getElementById(‘dd’);
div.appendchild(p)

获取父元素
div.parentElement
获取子元素
div.childNodes()
移除节点
div.removeChild(child[0])

4.BOM操作

**navigator:**userAgent
**screen:**screen.width/screen.height
location:
.href
.protocal//”http”
.pathname// /learn/199
.search //?后面的内容
.hash//#后面的内容
history
.back()
.forward()

经典面试题
检测浏览器类型： var na=navigator.userAgent var
isChrome=ua.indexof(‘chrome’)

5.事件
通用事件绑定

ele.addEventListener(type,fn)e.preventDefault()//阻止默认行为//关于IE的兼容：IE低版本使用attachEvent

事件冒泡：点击子节点，会触发父节点的绑定事件

具体应用：在父节点上绑定事件。e.target

经典面试题:

1.编写一个通用的事件监听函数

function bindEvent(elem,type,selector,fn){    ele.addEvenListener(type,function(e){    if(selector){    target=e.target    if(target.matches(selector){        fn.call(target,e);    })else{fn(e)}    }    })}

2.手动编写ajax,不依赖第三方库

var xhr=new XMLHTTPRequest();xhr.open("GET","/api",false);xhr.onreadystatechange = function(){    if(xhr.readyState==4){    if(xhr.status==200){    alert(xhr.responseText);}}}xhr.send(null);

6.状态码说明

readyState:
0-未发送
1-正在发送
2-载入完成
3-正在解析
4-响应内容完成
status:
2xx-请求成功
3XX:重定向
4XX：客户端请求错误
5XX：服务端错误

7.跨域{JSONP,服务器端设置http,header}
定义：不允许ajax访问其他域接口

跨域条件：协议，域名，端口，有一个不同就算跨域。

可跨域的标签：<img /> <link href=""> <script></script>

img可用于打点统计，统计网站可能是其他域
link.script可以使用CDN
script可用于jsonp

7.存储
cookie:

• 本身用于客户端和服务端通信
• 它有本地储存功能，于是被借用
• 使用document.cookie获取和修改

缺点：

• 存储量太小，只有4KB
• 所有http请求都带着，会影响获取资源的效率
• API简单，需要封装使用

locationStorage/sessionStorage

• 最大容量5M
• API简单易用
  locationStorage.setItem(key,value)
  locationStorage.getItem(key)
  ios隐藏模式下，localstorage和getitem都会报错，建议统一使用try-catch封装