js常见的面试题

css 选择符有哪些

通配选择符 *
类选择符 class
id选择符 id
属性选择符 input[name=button]
包含选择符 类似 div span
子对象选择符 类似 div > span

apply() 和 call()的区别  ==和===的区别  null和undefined的区别

apply和call参数不同 call可以传多个参 apply只能传二个参

双等号只要值相等就为真

三等号 值和类型必须都相同才为真

null 指向了一个空的对象 可以看做一个空指针 不占用内存

undefined 当声明一个未初始化的变量的时候 值为undefined 会占用内存 只不过值为undefined

js的事件模型有哪些

dom0事件模型  原始事件模型

dom2事件模型  分为三个阶段  目标阶段、捕获阶段、冒泡阶段

dom3事件模型  只不过是在原来的事件上增加了一些事件类型

简述异步编程模式

对于在浏览器中频繁操作会阻碍浏览器的响应速度 通过异步编程的模式可以加快浏览器的响应速度 这种模式被称为异步编程
（实现异步编程的有好多 譬如ajax、promise、deffer等都是采用异步编程来实现的）

for for in  for of之间的区别

其实三者的区别并不大 都是用来遍历数组或者对象的  只不过实现方式不同
for in 是以key -value的形式实现的
for of 是以iterator的形式实现的

深拷贝和浅拷贝的实现

//浅拷贝
function extendCopy(p){
       var c = {};
       for(var i in p){
         c[i] = p[i];
       }
       return c;
     }

//深拷贝
function deepCopy(p,c){
       var c = c || {};
       for(var i in p){
         if(typeof p[i] === "object"){
           c[i] = (p[i].constructor == Array) ? [] : {};
           deepCopy(p[i],c[i]);
         }else{
           c[i] = p[i];
         }
       }
       return c;
     }

排序

//这里只使用冒泡排序作为例子
var arr = [2,1,4,7];
     for(var i = 0;i<arr.length;i++){
       for(var j = 0;j<arr.length-1-i;j++){
         var temp;
         if(arr[j]>arr[j+1]){
           temp = arr[j+1];
           arr[j+1] = arr[j];
           arr[j] = temp;
         }
       }
     }

数组去重

//这里只用一种方式来实现 还有好多方法大家自己去看吧
function duplicateArr(arr){
       var temp = [];
       for(var i = 0;i<arr.length;i++){
         if(arr.indexOf(arr[i]) == i){
           temp.push(arr[i]);
         }
       }
       return temp;
     }

html和html5的区别

1.文档声明不同

2.结构语义化不同

 document.write和innerHTML的区别

1.write是DOM方法,向文档写入HTML表达式或JavaScript代码，可列出多个参数，参数被顺序添加到文档中 ；innerHTML是DOM属性,设置或返回调用元素开始结束标签之间的HTML元素。
2.两者都可向页面输出内容,innerHTML比document.write更灵活。
当文档加载时调用document.write直接向页面输出内容，文档加载结束后调用document.write输出内容会重写整个页面。通常按照两种的方式使用 write() 方法：一是在使用该方在文档中输出 HTML，二是在调用该方法的的窗口之外的窗口、框架中产生新文档（务必使用close关闭文档）。
在读模式下，innerHTML属性返回与调用元素的所有子节点对应的HTML标记，在写模式下，innerHTML会根据指定的值创建新的DOM树替换调用元素原先的所有子节点。
3.两者都可动态包含外部资源如JavaScript文件
通过document.write插入<script>元素会自动执行其中的脚本；
大多数浏览器中，通过innerHTML插入<script>元素并不会执行其中的脚本。

而且document.write 有个最大的缺点就是会阻塞浏览器的解析和渲染速度（因为docume.write 在全局是同步的并且浏览器是无法预加载的）

请试运行下面的例子就可以看到结果了：

<script>
        document.addEventListener("DOMContentLoaded", function(){
          alert("执行异步渲染、绑定事件等操作")
        })
        document.write("<script src=http://www.twitter.com><\/script>")
        </script>

var let const的区别:

1.var 可以挂载到window对象上 其它二个不会

var a = 100;
console.log(a,window.a);    // 100 100

let b = 10;
console.log(b,window.b);    // 10 undefined

const c = 1;
console.log(c,window.c);    // 1 undefined

2.var 有变量提升的概念   let 和const没有

console.log(a); // undefined  ===>  a已声明还没赋值，默认得到undefined值

var a = 100;

console.log(b); // 报错：b is not defined  ===> 找不到b这个变量

let b = 10;

console.log(c); // 报错：c is not defined  ===> 找不到c这个变量

const c = 10;

3.let 和const 会形成块级作用域  只能够在if代码块中访问到let声明的变量

if(1){
    var a = 100;
    let b = 10;
}

console.log(a); //
console.log(b)  // 报错：b is not defined  ===> 找不到b这个变量

4.同一作用域下let和const不能声明同名变量，而var可以

var a = 100;
console.log(a); //

var a = 10;
console.log(a); //

let a = 100;
let a = 10;

//  控制台报错：Identifier 'a' has already been declared  ===> 标识符a已经被声明了。

5.const

/*
* 　　1、一旦声明必须赋值,不能使用null占位。
*
* 　　2、声明后不能再修改
*
* 　　3、如果声明的是复合类型数据，可以修改其属性
*
* */

const a = 100; 

const list = [];
list[0] = 10;
console.log(list);　　// [10]

const obj = {a:100};
obj.name = 'apple';
obj.a = 10000;
console.log(obj);　　// {a:10000,name:'apple'}

6.var 会涉及到一个层级的查找  如果函数内部 不带var 关键字创建一个同名的变量的话 会层级查找 直到 windows对象上 才结束查找

var a = 100;
    function aa(){
      a = 10;
      console.log(a); //
    }
    aa();
    console.log(a);//

var a = 100;
    function aa(){
    //如果带var 关键字的话就是一个全局变量和一个局部变量
      var a = 10;
      console.log(a);// 10
    }
    aa();
    console.log(a); //100

js宏任务和微任务的概念

setTimeout(function(){
      console.log(4);
    })
    new Promise(function(resolve,reject){
      resolve();
      console.log(1);
    }).then(function(){
      console.log(2);
    })
    console.log(3); //具体的思路请看链接 点击打开链接// 1  3  2  4

简述打开浏览器输入地址到页面展示的流程

1、当我们在浏览器的地址栏出输入一个地址 浏览器开始向地址所在的服务器发送http请求 紧接着 对应的服务器会响应浏览器的请求

2、浏览器解析、下载、呈现

浏览器是从上到下解析html文档的 先解析文档的声明  如果头部有js css等会先下载 加载这些文件 （js 图片 css等都会向服务器发送请求 下载资源）

等到解析到body节点时  会创建 dom节点树 =》创建css rules=》将之前下载下来的css文件作用到dom节点树上 形成dom渲染树=》 然后在通知浏览器去绘制dom渲染树 =》最后形成真实dom呈现给用户。

以上过程会涉及到css 和 js的阻塞 阻塞是怎么产生的呢？

js 阻塞

当把js放到header里面的话 会先下载并执行js的操作  但这样一来会阻塞其他资源的下载 而后面dom的呈现也会受到影响

 css阻塞

CSS本来是可以并行下载的，在什么情况下会出现阻塞加载了(在测试观察中，IE6下CSS都是阻塞加载）

当CSS后面跟着嵌入的JS的时候，该CSS就会出现阻塞后面资源下载的情况。而当把嵌入JS放到CSS前面，就不会出现阻塞的情况了。

根本原因：因为浏览器会维持html中css和js的顺序，样式表必须在嵌入的JS执行前先加载、解析完。而嵌入的JS会阻塞后面的资源加载，所以就会出现上面CSS阻塞下载的情况。

怎么加载js才不会对用户的呈现出现问题 （有阻塞解决这个问题）

1、放在底部，虽然放在底部照样会阻塞所有呈现，但不会阻塞资源下载。

2、如果嵌入JS放在head中，请把嵌入JS放在CSS头部。

3、ie使用defer属性  w3c 使用async

4、不要在嵌入的JS中调用运行时间较长的函数，如果一定要用，可以用`setTimeout`来调用

Javascript无阻塞加载具体方式 （无阻塞解决这个问题）

1、ie使用defer属性  w3c 使用async （这二种需要高浏览器支持）

2、利用js动态创建script标签 将它挂载到头部

3、利用事件监听 dom是否加载完毕 然后在下载js

<script>
    var script=document.createElement("script");
    script.type="text/javascript";
    script.src="file.js";
    document.getElementsByTagName("head")[0].appendChild(script);
</script>

这里相当于给head下面插入了一个script的标签。当script.src所对应的文件下载以后，再往后执行。

此技术的重点在于：无论何时启动、下载和运行都不会阻塞页面中其他部分的解析和呈现

数据的可变性和不可变性

所谓可变和不可变就是 直接改变数据和间接改变数据

直接改变数据对于复杂的特性不易于实现 譬如 追踪数据的历史记录 整个对象树都需要从新遍历一次

而间接改变数据只要发现对象变成了一个新对象 我们就可以说这个对象发生改变了

简述react

react是JavaScript的一种第三方框架库 react最显著的语法就是函数和jsx

jsx是JavaScript是一种表达式 可以作为变量赋值 也可以作为参数传入 还可以作为函数返回

多个jsx组合成react元素 react元素组合形成组件 然后通过reactDOM渲染成dom结构

react元素与浏览器的dom元素不同  react元素是创建开销极小的普通对象 reactDOM会负责更新dom于react元素保持一致

（很晚了后续在补充。。。）