面试题总结

1.this关键字(指向)

• 在浏览器里，在全局范围内this 指向window对象；
• 在函数中，this永远指向最后调用他的那个对象；
• 构造函数中，this指向new出来的实例本身；
• call、apply、bind中的this被强绑定在指定的那个对象上；
• 箭头函数中this始终指向父级上下文(就是父级的作用域)

前四种方式都是调用时确定,而箭头函数的this指向是声明的时候就已经确定了下来。

2.事件模型：事件委托、代理？如何让事件先冒泡后捕获？

事件委托：又名事件代理。事件委托就是利用事件冒泡，就是把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡，那么委托也就没法实现了。
好处：提高性能，减少了事件绑定，从而减少内存占用

事件先冒泡后捕获：

给一个元素绑定两个addEventListener(里se ner)，其中一个的第三个参数设置为false，另一个第三个参数设置为true，调整它们的代码顺序，将设置为false的监听事件放在设置为true的监听事件前面即可。
语法： addEventListener(事件类型，function，布尔值(默认为false：冒泡，true为捕获))

当为事件捕获(true)时,先执行body的事件,再执行div的事件
当为事件冒泡(false)时,先执行div的事件,再执行body的事件
在向上执行过程中，已经执行过的捕获事件不再执行，只执行冒泡事件。

window.onload = function(){
    oBox.addEventListener("click",function(){
    	alert(1);   //触发
    },false)//冒泡
	oBox.addEventListener("click",function(){
	alert(2);   //触发
	},true)//捕获
}

3.对象和面向对象

对象：

属性和方法的集合叫做对象（万物皆对象）。

面向对象：

首先就是找对象，如果该对象不具备所需要的方法或属性，那就给它添加。面向对象是一种编程思维的改变。通过原型的方式来实现面向对象编程。

面向对象是模型化的,其中包括三大特性：

• 封装:数据封装的实体就是对象,对象就是类的实例化,低耦合高内聚
• 继承:继承是面向对象的重要特点,可以提高代码的复用性
• 多态:重载和重写

4.for…in和for…of的区别

1. 从遍历数组角度来说，for···in遍历出来的是key(即下标)，for···of遍历出来的是value(即数组的值)；
2. 从遍历字符串的角度来说，同数组一样。
3. 从遍历对象的角度来说，for···in会遍历出来的为对象的key(对象的键名)，但for···of会直接报错(obj is not iterable)。
4. 如果要使用for…of遍历普通对象，需要配合Object.keys()一起使用。

var EXO={
    name:'DO',
    age:27,
    locate:{
        country:'China',
        city:'beijing',
    }
}
for(var key of Object.keys(EXO)){
    //使用Object.keys()方法获取对象key的数组
    console.log(key+" : "+EXO[key]);//name: DO,age: 27,locate: [object Object]
}

5.window的onload事件和domcontentloaded事件

onload

等页面的内容全部加载完毕，包含页面的 DOM 元素、图片、css 等，才会触发onload事件

DOMCOntentLoaded（楼得特）

当初始的HTML文档被完全加载和解析完成之后，即dom加载完成，不用考虑其他资源，例如图片,才会触发DOMContentLoaded事件

onload事件会被样式表、图像和子框架阻塞，而onDOMContentLoaded不会

6.函数柯里化（卡瑞化、加里化）

概念：

把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数而且返回结果的新函数的技术。

简单理解：

Currying概念其实很简单，只传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数（主要是利用闭包实现的）。

特点：

①接收单一参数，将更多的参数通过回调函数来搞定；
②返回一个新函数，用于处理所有的想要传入的参数；
③需要利用call/apply与arguments对象收集参数；
④返回的这个函数正是用来处理收集起来的参数。

作用：

能进行部分传值，而传统函数调用则需要预先确定所有实参。如果你在代码某一处只获取了部分实参，然后在另一处确定另一部分实参，这个时候柯里化和偏应用就能派上用场。

7. iframe的优缺点有哪些？

优点：

①iframe能够原封不动的把嵌入的网页展现出来；
②如果有多个网页引用iframe(艾夫瑞母)，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
③网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
④如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

缺点：

①会产生很多页面不易管理；
②iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
③代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
④很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
⑤iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。

8.垃圾回收机制

原理：

垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。
为此，垃圾收集器会按照固定的时间间隔（或代码执行中预定的收集时间），周期性地执行这一操作。

只有函数内的变量才可能被回收
垃圾：一般来说没有被引用的对象就是垃圾，就是要被清除，有个例外如果几个对象引用形成一个环，互相引用，但根访问不到它们，这几个对象也是垃圾，也要被清除

在 JS 中，我们讨论的垃圾回收算法有两种 —— 引用计数法和标记清除法。

9.数组扁平化

数组扁平化就是将一个多维数组转换为一个一维数组

实现方法：
var arr = [1,2,[3,4,[5,6,[7,8,[9,10]]]]];
第一种：

function flatten(arr){
	var box = []
	arr.map(v => {
		if(Array.isArray(v)){
			box = box.concat(flatten(v))
		}else{
			box.push(v)
		}
	})
	return box
}
console.log(flatten(arr))//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

第二种：

function flatten(arr){
	console.log(arr.join(","))
	return arr.join(",").split(",").map(v => {
		return parseInt(v)
	})
}
console.log(flatten(arr))//1,2,3,4,5,6,7,8,9,10

10.查找数组重复项

查找该元素首次出现的位置和最后出现的位置下标是否相同，同时判断新数组中是否不存在该元素，如果都满足则添加进新数组中去。
第一种：

var arr = [1,2,45,44,45,2,89,1,1,2,1,2,44];
Array.prototype.unique = function(){
	var arr = this;
	var box = [];
	for(var str of arr){
		if(arr.indexOf(str) != arr.lastIndexOf(str) && box.indexOf(str) == -1){
			box.push(str);
		}
	}
	return box;
}
console.log(arr.unique());

第二种:

var findRepect = function (arr = []) {
    var result = [];
    // 遍历数组
    arr.forEach(item => {
        // 如果 item 首次出现的位置和最后出现的位置的下标不同，则说明该 item 至少重复出现1次
        if (arr.indexOf(item) !== arr.lastIndexOf(item) && !result.includes(item)) {
            result.push(item)
        }
    })
    return result
}
var arr = [1, 2, 45, 44, 45, 2, 89, 1, 1, 2, 1, 2, 44];
console.log(findRepect(arr)); // [1, 2, 45, 44]