前端面试题之JavaScript（七）

1.下面这段代码输出结果是? 为什么?

从Chrome开发者工具看出，先执行第七行代码，再执行第九行，最后执行第四行，前两个属于同步任务，最后一个属于异步任务，只有当同步任务完成后，才会执行异步任务。总之，setTimeout(fn,0)的含义是，指定某个任务在主线程最早可得的空闲时间执行，也就是说，尽可能早得执行。它在"任务队列"的尾部添加一个事件，因此要等到同步任务和"任务队列"现有的事件都处理完，才会得到执行。

2.下面这段代码输出结果是? 为什么?

没有输出。因为setTimeout会在当前代码执行队列结束后执行，本例中while循环结束后才会执行setTimeout中的函数，所以while循环的条件永远是true，会无限循环下去，而while中没有任何代码，所以打印flag没有任何输出

3.实现一个节流函数

函数节流就是不让一个函数执行的过于频繁而设置的。

    var timer
  function hiFrequency(){
      if(timer){
          clearTimeout(timer)
      }
        timer = setTimeout(function(){
             console.log('do something')
        }, 300)
  }

  hiFrequency()
  hiFrequency()
  hiFrequency()

改造，将上面所有东西封装成一个函数

function throttle(fn, delay) {
    var timer = null
    return function(){
        clearTimeout(timer)
        timer = setTimeout(function(){ 
            fn(arguments)
        }, delay)
    }
}

function fn(){
    console.log('hello ')
}

var fn2 = throttle(fn, 1000)
fn2()
fn2()
fn2()

4.简单解释单线程、任务队列、异步执行的概念

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。
任务队列分为两种
一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。
消息队列和任务队列的区别
消息队列和任务队列其实有很大的相似性，消息队列更着重的是消息，也就是告知，而任务队列着重与任务，也就是执行。所以说一般是外部发送消息通过消息队列所在的消息处理服务器，消息处理服务器再转发给相应任务所在的任务服务器并在任务队列中排队等待执行。
异步执行的运行机制如下。（同步执行也是如此，因为它可以被视为没有异步任务的异步执行。）
- （1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
- （2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
- （3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
- （4）主线程不断重复上面的第三步。

5.列出DOM 元素选取的 API

getElementById()
getElementsByClassName()：返回一个HTMLCollection动态集合（也可以说返回一个NodeList类数组对象）
getElementsByTagName()：返回一个HTMLCollection动态集合（也可以说返回一个NodeList类数组对象
getElementsByName()：返回一个动态NodeList类数组对象,最常用的场景是取得单选按钮。
querySelector()：接收一个参数：一个包含一个或多个CSS 选择器的字符串（多个选择器以逗号分隔），返回匹配指定CSS选择器的第一个元素节点（无法选中CSS伪元素），没有发现匹配的节点则返回null。
querySelectorAll()：接收一个参数：一个包含一个或多个CSS 选择器的字符串（多个选择器以逗号分隔），返回静态NodeList对象集合，该集合中包含匹配指定CSS选择器的所有节点，元素节点的变化无法实时反映在结果中；如果参数中包含CSS伪元素则返回一个空的对象集合。
elementFromPoint()：接收两个参数：分别是相对于当前窗口左上角的横纵坐标，单位为CSS像素，返回位于页面指定位置的元素，如果该元素不可返回（如滚动条）则返回它的父元素，如果坐标值无意义（如负值）则返回null。

6.如何操作DOM元素？

createElement()
createTextNode()
createDocumentFragment():虚拟片段
appendChild()

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);

insertBefore():

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);

replaceChild():replaceChild()接受两个参数：要插入的元素和要替换的元素

newDiv.replaceChild(newElement, oldElement);

removeChild()

parentNode.removeChild(childNode);

cloneNode()
用于克隆元素，方法有一个布尔值参数，传入true的时候会深复制，也就是会复制元素及其子元素（IE还会复制其事件），false的时候只复制元素本身

node.cloneNode(true);

7. 异步与回调

function f1(){
    setTimeout(function(){
        //做某件事，可能很久
        console.log('别急，开始执行f1')
        for(var i=0;i< 100000;i++){

        }
        console.log('f1执行完了');
    }, 0);

}
function f2(){
    console.log('执行f2');
}
function f3(){
    console.log('执行f3');
}
f1();
f2();
f3();

异步

原因： f2(),f3()是同步任务，f1(）是异步任务，所以后执行

function f1(callback){
    setTimeout(function(){
        //做某件事，可能很久
        console.log('别急，开始执行f1')
        for(var i=0;i< 100000;i++){

        }
        console.log('f1执行完了')

        callback()
    }, 10000);

}
function f2(){
    console.log('执行f2');
}
function f3(){
    console.log('执行f3');
}
f1(f2) //当f1执行完之后再执行 f2
f3()

回调

绑定onclick, Ajax,定时器

阮一峰单线程和任务队列