2021面试题

痛定思痛。 2023-01-03 01:22 442阅读 0赞

#### 1. javascript的typeof返回哪些数据类型. ####

答案：string,boolean,number,undefined,function,object

#### 2. 例举3种强制类型转换和2种隐式类型转换? ####

答案：强制（parseInt,parseFloat,number）
    	隐式（== ===）

#### 3. split() join() 的区别 ####

答案：前者是将字符串切割成数组的形式，后者是将数组转换成字符串

#### 4. 数组方法pop() push() unshift() shift() ####

push()尾部添加 
    	pop()尾部删除
    	unshift()头部添加
     	shift()头部删除

#### 5. IE和标准下有哪些兼容性的写法 ####

var ev = ev || window.event
    	document.documentElement.clientWidth || document.body.clientWidth
    	Var target = ev.srcElement||ev.target

#### 6. ajax请求的时候get 和post方式的区别 ####

一个在url后面 ，一个放在虚拟载体里面
    	get有大小限制(只能提交少量参数)
    	安全问题
    	应用不同 ，请求数据和提交数据

#### 7. call和apply的区别 ####

Object.call(this,obj1,obj2,obj3)
    	Object.apply(this,arguments)

#### 8. ajax请求时，如何解析json数据 ####

使用JSON.parse

#### 9. 事件委托是什么 ####

利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！

#### 10. 闭包是什么，有什么特性，对页面有什么影响 ####

闭包就是能够读取其他函数内部变量的函数,使得函数不被GC回收，如果过多使用闭包，容易导致内存泄露

#### 11. 如何阻止事件冒泡 ####

ie:阻止冒泡ev.cancelBubble = true;非IE ev.stopPropagation();

#### 12. 如何阻止默认事件 ####

(1)return false；
    	(2) ev.preventDefault();

#### 13. 添加 删除 替换 插入到某个接点的方法 ####

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

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

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

#### 15. document load 和document ready的区别 ####

document.onload 是在结构和样式,外部js以及图片加载完才执行js
    	document.ready是dom树创建完成就执行的方法，原生种没有这个方法，jquery中有 $().ready(function)

#### 16. == 和 === 的不同 ####

答案：前者会自动转换类型,再判断是否相等
    	后者不会自动类型转换，直接去比较

#### 17. 函数声明与函数表达式的区别？ ####

在Javscript中，解析器在向执行环境中加载数据时，对函数声明和函数表达式并非是一视同仁的，解析器会率先读取函数声明，
    	并使其在执行任何代码之前可用（可以访问），至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解析执行。

#### 18. 对作用域上下文和this的理解，看下列代码： ####

var User = { 
     count: 1,
     getCount: function() { 
      	return this.count;
     }
    };
    console.log(User.getCount()); // what?
    var func = User.getCount;
    console.log(func()); // what?
    问两处console输出什么？为什么？
    答案:是1和undefined。
    func是在window的上下文中被执行的，所以不会访问到count属性。

#### 19. 看下面代码，给出输出结果。 ####

for(var i = 1; i <= 3; i++) {   //建议使用let 可正常输出i的值
      	setTimeout(function(){ 
         	console.log(i);   
      }, 0); 
    };
    答案：4 4 4。
    原因：Javascript事件处理器在线程空闲之前不会运行。

#### 20. 当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做? ####

box.onlick= function(){ }
    box.addEventListener("click",function(){ },false);
    <button onclick="xxx()"></button>

#### 21. Javascript的事件流模型都有什么? ####

var a = null;
    alert(typeof a);
    答案：object
    解释：null是一个只有一个值的数据类型，这个值就是null。表示一个空指针对象，
    所以用typeof检测会返回”object”。

#### 23. 判断字符串以字母开头，后面可以是数字，下划线，字母，长度为6-30 ####

var reg=/^[a-zA-Z]\w{5,29}$/;

#### 24. 回答以下代码，alert的值分别是多少？ ####

#### 25. javaScript的2种变量范围有什么不同？ ####

全局变量：当前页面内有效
    	局部变量：函数方法内有效

#### 26. null和undefined的区别？ ####

null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。
    	
    	当声明的变量还未被初始化时，变量的默认值为undefined。 null用来表示尚未存在的对象
    	
    	undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：
    	
    	（1）变量被声明了，但没有赋值时，就等于undefined。
    	
    	（2）调用函数时，应该提供的参数没有提供，该参数等于undefined。
    	
    	（3）对象没有赋值的属性，该属性的值为undefined。
    	
    	（4）函数没有返回值时，默认返回undefined。
    	
    	null表示"没有对象"，即该处不应该有值。典型用法是：
    	
    	（1） 作为函数的参数，表示该函数的参数不是对象。
    	
    	（2） 作为对象原型链的终点。

#### 27. new操作符具体干了什么呢? ####

1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
    	
    	2、属性和方法被加入到 this 引用的对象中。
    	
    	3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

#### 28. js延迟加载的方式有哪些？ ####

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

#### 29. Flash、Ajax各自的优缺点，在使用中如何取舍？ ####

Flash ajax对比
    	
    	(1)Flash适合处理多媒体、矢量图形、访问机器；对CSS、处理文本上不足，不容易被搜索。
    	
    	(2)ajax对CSS、文本支持很好，支持搜索；多媒体、矢量图形、机器访问不足。
    	
    	共同点：与服务器的无刷新传递消息、用户离线和在线状态、操作DOM

#### 30. 写一个获取非行间样式的函数 ####

function getStyle(obj,attr) { 
    	if(obj.currentStyle) { 
    		return obj.currentStyle[attr];
    	}else{ 
    		getComputedStyle(obi,false)[attr] 
    	}
    }

#### 31. 希望获取到页面中所有的checkbox怎么做？(不使用第三方框架) ####

var inputs = document.getElementsByTagName("input");//获取所有的input标签对象
    var checkboxArray = [];//初始化空数组，用来存放checkbox对象。
    for(var i=0;i<inputs.length;i++){ 
      var obj = inputs[i];
      if(obj.type=='checkbox'){ 
         checkboxArray.push(obj);
      }
    }

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

String.prototype.trim= function(){ 
    	return this.replace(/^\s+/,"").replace(/\s+$/,"");
    }

#### 33. javascript语言特性中，有很多方面和我们接触的其他编程语言不太一样,请举例 ####

javascript语言实现继承机制的核心就是 1 (原型)，而不是Java语言那样的类式继承。
    	Javascript解析引擎在读取一个Object的属性的值时，会沿着 2 (原型链)向上寻找，如果最终没有找到，
    	则该属性值为 3 undefined；
    	如果最终找到该属性的值，则返回结果。与这个过程不同的是，
    	当javascript解析引擎执行“给一个Object的某个属性赋值”的时候，如果当前Object存在该属性，
    	则改写该属性的值，如果当前的Object本身并不存在该属性，则赋值该属性的值。

#### 34. Cookie在客户机上是如何存储的 ####

Cookies就是服务器暂存放在你的电脑里的文本文件，好让服务器用来辨认你的计算机。
    	当你在浏览网站的时候，Web服务器会先送一小小资料放在你的计算机上，
    	Cookies 会帮你在网站上所打的文字或是一些选择都记录下来。
    	当下次你再访问同一个网站，Web服务器会先看看有没有它上次留下的Cookies资料，有的话，
    	就会依据Cookie里的内容来判断使用者，送出特定的网页内容给你。

#### 35. 如何获取javascript三个数中的最大值和最小值？ ####

Math.max(a,b,c);//最大值
    	
    	Math.min(a,b,c)//最小值

#### 36. javascript是面向对象的，怎么体现javascript的继承关系？ ####

使用prototype原型来实现。

#### 37.form中的input可以设置为readonly和disable，请问2者有什么区别？ ####

readonly不可编辑，但可以选择和复制；值可以传递到后台
    	disabled不能编辑，不能复制，不能选择；值不可以传递到后台

#### 38. 列举javaScript的3种主要数据类型，2种复合数据类型和2种特殊数据类型。 ####

主要数据类型：string, boolean, number
    	
    	复合数据类型：function, object
    	
    	特殊类型：undefined，null

#### 39. 程序中捕获异常的方法？ ####

try{ 
     
    }catch(e){ 
     
    }finally{ 
     
    }

#### 40. Ajax原理 ####

(1)创建对象
    
    var xhr = new XMLHttpRequest();
    
    (2)打开请求
    
    xhr.open('GET', 'example.txt', true);
    
    (3)发送请求
    
    xhr.send(); 发送请求到服务器
    
    (4)接收响应
    
    xhr.onreadystatechange =function(){ }
    
    (1)当readystate值从一个值变为另一个值时，都会触发readystatechange事件。
    
    (2)当readystate==4时，表示已经接收到全部响应数据。
    
    (3)当status ==200时，表示服务器成功返回页面和数据。
    
    (4)如果(2)和(3)内容同时满足，则可以通过xhr.responseText，获得服务器返回的内容。

#### 41. 解释什么是Json: ####

(1)JSON 是一种轻量级的数据交换格式。
    	
    	(2)JSON 独立于语言和平台，JSON 解析器和 JSON 库支持许多不同的编程语言。
    	
    	(3)JSON的语法表示三种类型值，简单值(字符串，数值，布尔值，null),数组，对象

#### 42. js中的3种弹出式消息提醒（警告窗口，确认窗口，信息输入窗口）的命令式什么？ ####

alert
    	confirm
    	prompt

#### 43. 以下代码执行结果 ####

var uname = 'jack'
    	function change() {
    	    alert(uname) // ?
    	    var uname = 'lily'
    	    alert(uname)  //?
    	}
    	change()
    	分别alert出 undefined，lily，（变量声明提前问题）

#### 44. 浏览器的滚动距离： ####

可视区域距离页面顶部的距离
    	
    	scrollTop=document.documentElement.scrollTop||document.body.scrollTop

#### 45. 可视区的大小： ####

(1)innerXXX（不兼容ie）
    
    window.innerHeight 可视区高度，包含滚动条宽度
    
    window.innerWidth 可视区宽度，包含滚动条宽度
    
    (2)document.documentElement.clientXXX(兼容ie)
    
    document.documentElement.clientWidth可视区宽度，不包含滚动条宽度
    
    document.documentElement.clientHeight可视区高度，不包含滚动条宽度

### 46. 节点的种类有几种，分别是什么？ ###

(1)元素节点：nodeType ===1;
    	
    	(2)文本节点：nodeType ===3;
    	
    	(3)属性节点：nodeType ===2;

#### 47. innerHTML和outerHTML的区别 ####

innerHTML(元素内包含的内容）
    	
    	outerHTML(自己以及元素内的内容）

#### 48. offsetWidth offsetHeight和clientWidth clientHeight的区别 ####

(1)offsetWidth （content宽度+padding宽度+border宽度）
    	
    	(2)offsetHeight（content高度+padding高度+border高度）
    	
    	(3)clientWidth（content宽度+padding宽度）
    	
    	(4)clientHeight（content高度+padding高度）

#### 49. 闭包的好处 ####

(1)希望一个变量长期驻扎在内存当中(不被垃圾回收机制回收)
    	
    	(2)避免全局变量的污染
    	
    	(3)私有成员的存在
    	
    	(4)安全性提高

#### 50. 冒泡排序算法 ####

// 冒泡排序
    var array = [5, 4, 3, 2, 1];
    var temp = 0;
    for (var i = 0; i <array.length; i++) { 
    	for (var j = 0; j <array.length - i; j++) { 
    		if (array[j] > array[j + 1]) { 
    		temp = array[j + 1];
    		array[j + 1] = array[j];
    		array[j] = temp;
    	 	}
    	}
    }

#### 51、js 实现一个函数对javascript中json 对象进行克隆 ####

var oldObject ="sdf";
    var newObject = JSON.parse(JSON.stringify(oldObject));
    console.log(newObject);
    或者
    var a = 'dddd';
    function cp(a){ return JSON.parse(JSON.stringify(a))}
    console.log(cp(a));

#### 52、js 实现 ajax 请求或者submit请求时 锁屏功能以及开锁功能（请求时界面Loading以及元素不能点击，请求完成即消除Loading） ####

function(url, fn) { 
    var obj = new XMLHttpRequest(); // XMLHttpRequest对象用于在后台与服务器交换数据
    obj.open('GET', url, true);
    obj.onreadystatechange = function() { 
    if(obj.readyState == 4 && obj.status == 200||obj.status == 304) { 
    	  loading.style.display = "none"
          } else { 
             alert("不能点击,哈哈哈!");
          }
       };
       obj.send(null);
    }

#### 53、js 实现一个函数 获得url参数的值 ####

function getQueryString(name) {  
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
      var r = window.location.search.substr(1).match(reg); 
      if (r != null) return unescape(r[2]); 
      return null; 
    }

#### 54、请用js计算1-10000中出现的0 的次数 ####

new Array(10000).fill('').map(
    	(_, index) => index + 1).filter(item => 
    	/0/.test(item)).reduce(
    	(count, item) => {  
    		return count + (String(item).match(/0/g) || []).length
    		}, 
    	0)

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

function trim(str) { 
        if (str & typeof str === "string") { 
            return str.replace(/(^s*)|(s*)$/g,""); //去除前后空白符
        }
    }

#### 56、降维数组 ####

var arr=[[1,2],[3,4]];
    function Jw(obj){ 
         return Array.prototype.concat.apply([],obj);
    }
    Jw(arr);

#### 57、将url的查询参数解析成字典对象 ####

#### 58、判断一个字符串中出现次数最多的字符，统计这个次数 ####

#### 59、编写一个方法 求一个字符串的字节长度; ####

//假设一个中文占两个字节
    var str = '22两是';
    alert(getStrlen(str))
    function getStrlen(str){ 
        var json = { len:0};
        var re = /[\u4e00-\u9fa5]/;
        for (var i = 0; i < str.length; i++) { 
            if(re.test(str.charAt(i))){ 
                json['len']++;
            }
        };
        return json['len']+str.length;
    }

#### 60、数组去重方法 ####

#### 61、写出3个使用this的典型应用 ####

事件： 如onclick this->发生事件的对象
    	构造函数 this->new 出来的object
    	call/apply 改变this

#### 62、JavaScript中如何检测一个变量是一个String类型？请写出函数实现 ####

typeof(obj) == 'string'
    	obj.constructor == String;

#### 63、请解释一下什么是语义化的HTML。 ####

内容使用特定标签，通过标签就能大概了解整体页面的布局分布

#### 64、为什么利用多个域名来存储网站资源会更有效？ ####

确保用户在不同地区能用最快的速度打开网站，其中某个域名崩溃用户也能通过其他郁闷访问网站

#### 65、请说出三种减低页面加载时间的方法 ####

1、压缩css、js文件
    	2、合并js、css文件，减少http请求
    	3、外部js、css文件放在最底下
    	4、减少dom操作，尽可能用变量替代不必要的dom操作

#### 66、什么是FOUC？你如何来避免FOUC？ ####

由于css引入使用了@import 或者存在多个style标签以及css文件在页面底部引入使得css文件加载在html之后导致页面闪烁、花屏
    	用link加载css文件，放在head标签里面

#### 67、文档类型的作用是什么？你知道多少种文档类型？ ####

影响浏览器对html代码的编译渲染
    	html2.0
    	xHtml
    	html5

#### 68、浏览器标准模式和怪异模式之间的区别是什么？ ####

盒模型解释不同

#### 69、闭包 ####

子函数能被外部调用到，则该作用连上的所有变量都会被保存下来。

#### 70、请解释什么是Javascript的模块模式，并举出实用实例。 ####

js模块化mvc（数据层、表现层、控制层）
    	seajs
    	命名空间

#### 71、你如何组织自己的代码？是使用模块模式，还是使用经典继承的方法？ ####

对内：模块模式
    	对外：继承

#### 74、你如何优化自己的代码？ ####

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

#### 75、你能解释一下JavaScript中的继承是如何工作的吗？ ####

子构造函数中执行父构造函数，并用call\apply改变this
    	克隆父构造函数原型上的方法

#### 76、请尽可能详尽的解释AJAX的工作原理。 ####

创建ajax对象（XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)）
    	判断数据传输方式(GET/POST)
    	打开链接 open()
    	发送 send()
    	当ajax对象完成第四步（onreadystatechange）数据接收完成，判断http响应状态（status）200-300之间或者304（缓存）执行回调函数

#### 77、dom事件委托什么原理，有什么优缺点 ####

事件委托原理:事件冒泡机制
    	优点
    	1.可以大量节省内存占用，减少事件注册。比如ul上代理所有li的click事件就很不错。
    	2.可以实现当新增子对象时，无需再对其进行事件绑定，对于动态内容部分尤为合适
    	
    	缺点
    	事件代理的常用应用应该仅限于上述需求，如果把所有事件都用事件代理，可能会出现事件误判。即本不该被触发的事件被绑定上了事件。

#### 80、http的cache机制，以及200状态下怎么实现 from cache（表示接触最多的就是304的from cache）（用于优化，没有接触过，需要理解） ####

含义
    	定义：浏览器缓存（Browser Caching）是为了加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览。
    	
    	作用
    	cache的作用：
    	1、减少延迟，让你的网站更快，提高用户体验。
    	2、避免网络拥塞，减少请求量，减少输出带宽。
    	
    	实现手段
    	Cache-Control中的max-age是实现内容cache的主要手段，共有3种常用策略：max-age和Last-Modified（If-Modified-Since）的组合、仅max-age、max-age和ETag的组合。
    	
    	对于强制缓存，服务器通知浏览器一个缓存时间，在缓存时间内，下次请求，直接用缓存，不在时间内，执行比较缓存策略。
    	对于比较缓存，将缓存信息中的Etag和Last-Modified通过请求发送给服务器，由服务器校验，返回304状态码时，浏览器直接使用缓存。

#### 81、一个原型链继承的问题 ####

// 有一个构造函数A，写一个函数B，继承A
        function A (num) {
            this.titileName = num;
        }
        A.prototype = {
            fn1: function () {},
            fn2: function () {}
        }

#### 82、什么是虚拟dom ####

React为啥这么大？因为它实现了一个虚拟DOM（Virtual DOM）。虚拟DOM是干什么的？这就要从浏览器本身讲起
    	
    	如我们所知，在浏览器渲染网页的过程中，加载到HTML文档后，会将文档解析并构建DOM树，
    	然后将其与解析CSS生成的CSSOM树一起结合产生爱的结晶——RenderObject树，
    	然后将RenderObject树渲染成页面（当然中间可能会有一些优化，比如RenderLayer树）。
    	这些过程都存在与渲染引擎之中，渲染引擎在浏览器中是于JavaScript引擎（JavaScriptCore也好V8也好）分离开的，
    	但为了方便JS操作DOM结构，渲染引擎会暴露一些接口供JavaScript调用。由于这两块相互分离，
    	通信是需要付出代价的，因此JavaScript调用DOM提供的接口性能不咋地。
    	各种性能优化的最佳实践也都在尽可能的减少DOM操作次数。
    	
    	而虚拟DOM干了什么？它直接用JavaScript实现了DOM树（大致上）。
    	组件的HTML结构并不会直接生成DOM，而是映射生成虚拟的JavaScript DOM结构，
    	React又通过在这个虚拟DOM上实现了一个 diff 算法找出最小变更，再把这些变更写入实际的DOM中。
    	这个虚拟DOM以JS结构的形式存在，计算性能会比较好，而且由于减少了实际DOM操作次数，性能会有较大提升

#### 83、js基础数据类型和引用类型分别是什么？这个前提条件下写一个getType，返回相应的类型 ####

1.基本数据类型（自身不可拆分的）：Undefined、Null、Boolean、Number、String
    	2.引用数据类型（对象）：Object （Array，Date，RegExp，Function）
    	ES6基本数据类型多了个symbol 据说这道题刷了百分之二十的人 感谢Abbyshen提出
    	function gettype(nm){
    	    return Object.prototype.toString.call(nm);
    	}

#### 84、 dom选择器优先级是什么，以及权重值计算（一道老问题了） ####

1.行内样式 1000
    	2.id 0100
    	3.类选择器、伪类选择器、属性选择器[type="text"] 0010
    	4.标签选择器、伪元素选择器(::first-line) 0001
    	5.通配符*、子选择器、相邻选择器 0000

#### 85、vue双向数据绑定的原理是什么 ####

首先传输对象的双向数据绑定 
    	Object.defineProperty(target, key, decription),在decription中设置get和set属性
    	（此时应注意description中get和set不能与描述属性共存）
    	数组的实现与对象不同。
    	同时运用观察者模式实现wather，用户数据和view视图的更新

#### 86、 react和vue比较来说有什么区别 ####

1 component层面，web component和virtual dom
    	2 数据绑定（vue双向，react的单向）等好多
    	3 计算属性 vue 有，提供方便；而 react 不行
    	4 vue 可以 watch 一个数据项；而 react 不行
    	5 vue 由于提供的 direct 特别是预置的 directive 因为场景场景开发更容易；react 没有
    	6 生命周期函数名太长 directive

#### 87、git使用过程中，如果你在开发着业务，突然另一个分支有一个bug要改，你怎么办 ####

git stash       //将本次修改存到暂存区（紧急切换分支时）
    	git stash pop   //将所有暂存区的内容取出来

#### 88、 网页布局有哪几种，有什么区别 ####

静态、自适应、流式、响应式四种网页布局
    	静态布局：意思就是不管浏览器尺寸具体是多少，网页布局就按照当时写代码的布局来布置；
    	自适应布局：就是说你看到的页面，里面元素的位置会变化而大小不会变化；
    	流式布局：你看到的页面，元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
    	自适应布局：每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变。

#### 89、执行下面代码 ####

#### 91、不适用循环语句（包括map、forEach方法）实现一个100长度的数组，索引值和值相同的数组\[0,1,2,3,4,5…99\] ####

#### 92、下面语句执行结果输出 ####

#### 101、 sessionStorage和localstorage能跨域拿到吗？比如我在www.baidu.com设置的值能在m.baidu.com能拿到吗？为什么 ####

localStorage会跟cookie一样受到跨域的限制，会被document.domain影响

#### 102、 localstorage不能手动删除的时候，什么时候过期 ####

除非被清除，否则永久保存 clear()可清楚
    	sessionStorage 仅在当前会话下有效，关闭页面或浏览器后被清除

#### 103、登录状态的保存你认为可以保存在sessionstorage或者localstorage或者cookie或者你知道的哪种方式，存在了哪里？？为什么保存在那里 ####

#### 104、get和post有什么区别？get可以通过body传递数据吗 ####

把数据放到 body 里面，必须用 POST 方式取，这是 HTTP 协议限制的。

#### 105、封装一个函数，参数是定时器的时间，.then执行回调函数。 ####

function sleep (time) { 
      return new Promise((resolve) => setTimeout(resolve, time));
    }

#### 106、一行代码实现数组去重？ ####

[...new Set([1,2,3,1,'a',1,'a'])]

### 107、使用addEventListener点击li弹出内容，并且动态添加li之后有效 ###

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    var ulNode = document.getElementById("ul");
      		ulNode.addEventListener('click', function (e) { 
           if (e.target && e.target.nodeName.toUpperCase() == "LI") { 
               alert(e.target.innerHTML);
           }
       }, false);

#### 108、怎么判断两个对象相等 ####

JSON.stringify(obj)==JSON.stringify(obj);//true

#### 109、Vue router 除了 router-link 怎么实现跳转? ####

router.go(1)
    router.push('/')

#### 110、Vue router 跳转和 location.href 有什么区别？ ####

router 是 hash 改变
    	location.href 是页面跳转，刷新页面

#### 111、重排和重绘 ####

部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算。这被称为重排。
    	注意这里至少会有一次重排-初始化页面布局。
    	由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色时，屏幕上的部分内容需要更新。
    	这样的更新被称为重绘。

#### 112、什么情况会触发重排和重绘 ####

添加、删除、更新 DOM 节点
    	通过 display: none 隐藏一个 DOM 节点-触发重排和重绘
    	通过 visibility: hidden 隐藏一个 DOM 节点-只触发重绘，因为没有几何变化
    	移动或者给页面中的 DOM 节点添加动画
    	添加一个样式表，调整样式属性
    	用户行为，例如调整窗口大小，改变字号，或者滚动。

#### 113、js bind 实现机制？手写一个 bind 方法？ ####

#### 114、proto、prototype、Object.getPrototypeOf() ####

__proto__是指内部原型，和Object.getPrototypeOf()结果等价
    function f(){ }
    f.__proto__ === Object.getPrototypeOf(f); //true
    f.prototype === Object.getPrototypeOf(f); //false

#### 115、setTimeout 和 setInterval 细谈 ####

常问的点，前者是在一定时间过后将函数添加至执行队列，执行时间=延迟时间+之前函数代码执行时间+执行函数时间。
    后者是不管前一次是否执行完毕，每隔一定时间重复执行，用于精准执行互相没有影响的重复操作。
    如果需要控制前后执行顺序，最好使用setTimeout模拟setInterval
    var time = 400, times = 0, max = 10;
    	function func(){ 
    	  times++;
    	  if(times < max){ 
    	    //code here
    	    setTimeout(func, time);
    	  } else { 
    	    console.log("finished");
    	  }
    	}
    setTimeout(func, time);

#### 116、闭包相关 ####

什么是闭包
    闭包是指有权访问另一个函数作用域中变量的函数
    
    怎么创建闭包
    在函数内部嵌套使用函数
    
    function fn() { 
               for (var i = 0; i < 2; i++) { 
                   (function () { 
                       var variate = i;
                       setTimeout(function () { 
                           console.log("setTimeout执行后:"+variate);
                       }, 1000);
                   })();//闭包,立即执行函数,匿名函数
    
               }
              console.log(i);//2
              console.log(variate);//variate is not defined
           }
           fn();
    
    为什么用闭包
    因为在闭包内部保持了对外部活动对象的访问,但外部的变量却无法直接访问内部,避免了全局污染;
    可以当做私有成员,弥补了因js语法带来的面向对象编程的不足;
    可以长久的在内存中保存一个自己想要保存的变量.
    闭包的缺点
    可能导致内存占用过多,因为闭包携带了自身的函数作用域
    闭包只能取得外部包含函数中得最后一个值

#### 117、forEach和map的区别 ####

相同点
    	
    	都是循环遍历数组中的每一项
    	forEach和map方法里每次执行匿名函数都支持3个参数，参数分别是item（当前每一项）、index（索引值）、arr（原数组）
    	匿名函数中的this都是指向window
    	只能遍历数组
    	都有兼容问题
    	不同点
    	
    	map速度比foreach快
    	map会返回一个新数组，不对原数组产生影响,foreach不会产生新数组，
    	map因为返回数组所以可以链式操作，foreach不能

#### 118、浅拷贝和深拷贝 ####

jQuery.extend第一个参数可以是布尔值，用来设置是否深度拷贝的
    	
    	jQuery.extend(true, { a : { a : "a" } }, { a : { b : "b" } } );
    	jQuery.extend( { a : { a : "a" } }, { a : { b : "b" } } ); 
    	最简单的深拷贝
    	
    	aa = JSON.parse( JSON.stringify(a) )
    	浅复制--->就是将一个对象的内存地址的“”编号“”复制给另一个对象。
    	深复制--->实现原理，先新建一个空对象，内存中新开辟一块地址，把被复制对象的所有可枚举的(注意可枚举的对象)属性方法一一复制过来，
    	注意要用递归来复制子对象里面的所有属性和方法，直到子子.....属性为基本数据类型。
    	总结，深复制理解两点，1,新开辟内存地址，2,递归来刨根复制。

#### 119、js加载位置区别优缺点 ####

html文件是自上而下的执行方式，但引入的css和javascript的顺序有所不同，css引入执行加载时，程序仍然往下执行，而执行到<script>脚本是则中断线程，待该script脚本执行结束之后程序才继续往下执行。
    	所以，大部分网上讨论是将script脚本放在<body>之后，那样dom的生成就不会因为长时间执行script脚本而延迟阻塞，加快了页面的加载速度。
    	
    	但又不能将所有的script放在body之后，因为有一些页面的效果的实现，是需要预先动态的加载一些js脚本。所以这些脚本应该放在<body>之前。
    	
    	其次，不能将需要访问dom元素的js放在body之前，因为此时还没有开始生成dom，所以在body之前的访问dom元素的js会出错，或者无效
    	
    	script放置位置的原则“页面效果实现类的js应该放在body之前，动作，交互，事件驱动，需要访问dom属性的js都可以放在body之后

转载于https://www.jianshu.com/p/f1f39d5b2a2e