前端知识点重点整理

高度塌陷（父元素不设置高度，子元素浮动）

1. 给父元素添加overflow：hidden；

• 优点：简单易记
• 缺点：如果内容有溢出会被裁切

2. 给float的元素下边添加一个空div，div设置clear：both；height：0；overflow：hidden；

• 优点：溢出内容不会被裁切
• 缺点：不利于SEO（搜索引擎的优化)

3. 万能清除法

	父元素：after{
	content：“”；
	display：block；
	clear：both；
	height：0；
	overflow：hidden；
	visibility：hidden；
	}

• 优点：内容溢出不会被裁切，有利于SEO
• 缺点：不利于记忆

4. 给父元素设置高度

bfc

1. bfc

• 块级格式化
• BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block­level box（块）参与， 它规定了内部的Block­level Box如何布局，并且与这个区域外部毫不相干。

2. BFC的布局规则

• 内部的Box会在垂直方向，一个接一个地放置。
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
• 每个元素的margin box的左边， 与包含块border box的左边相接触
• BFC的区域不会与float box重叠。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
• 计算BFC的高度时，浮动元素也参与计算

3. 哪些元素或属性能触发BFC

• 根元素
• float属性不为none
• position为absolute或fixed
• display为inline­block, table­cell, table­caption, flex, inline­flexoverflow不为visible

4. bfc的应用

• 两栏布局(左边固定. 两边自适应）：
• 【第一种全部float利用calc函数】
• 【第二种，第一个float，第二个overflow：hidden；】
• 【第三种左右. 中间overflow：hidden；（跟顺序有关）】
• 【利用定位position】（无顺序要求）
• 如何实现三栏布局（左右固定，中间自适应），要求先加载中间区域在加载左右

闭包

1. 闭包：外层函数套内层函数，内层函数作为外层函数的return语句的返回值。

• 在外层函数里声明一个局部变量， 在内层函数里操作并返回这个局部变量。外层函数自调用将返回值也就是内层函数的引用赋值给一个变量（ 内层函数）。此时调用该变量就等价于调用内层函数， 也就可以操作原本外层函数的局部变量了。并且想要获取或操作刚刚那个局部变量， 执行内层函数将是唯一的一个途径。

2. 闭包缺陷:因为该局部变量不会被JS的垃圾回收机制所自动回收，

• 所以当大量使用闭包并且闭包内得的局部变量足够多时， 就容易爆掉用户的内存（ 内存泄漏）。# 继承

	<script >
	//	生产对象的模具
	//不是真实的构造函数， 只是具备了构造函数的功能。
	function Person(name, age, sex) {
		let o = {};
		o.name = name;
		o.age = age;
		o.sex = sex;
		return o;
	}
	let wdw = Person("王大伟", 18, "男")
	
	function Person(name, age, sex) {
		this.name = name;
		this.age = age;
		this.sex = sex;
	}
	Person.prototype.type = "灵长类";
	Person.prototype.sayName = function() {
		alert(this.name)
	}
	
	let wdw = new Person("王大伟", 18, "男");
	
	//面向对象的三大特性： 封装， 继承， 多态。
	
	
	//Person类 父类
	
	function Person(name, age, sex) {
		this.name = name;
		this.age = age;
		this.sex = sex;
	}
	
	// SuperMan类  子类
	function SuperMan() {
	
	}
	
	</script>

call和apply

• call:帮助我们调用一个函数，是函数独有的方法。可以改变本次执行函数的this指向。
• apply: 作用与call是一样的， 不过它最多只有2个参数， 第二个参数是一个数组， 该数组代表了传入的实参集合。

递归算法

• 优点：
• 代码简洁、清晰，并且容易验证正确性。
• 缺点：

1. 它的运行需要较多次数的函数调用，如果调用层数比较深，每次都要创建新的变量，需要增加额外的堆栈处理，会对执行效率有一定影 响，占用过多的内存资源。
2. 递归算法解题的运行效率较低。在递归调用的过程中系统为每一层的返回点、局部变量等开辟了栈来储存。递归次数过多容易造成栈溢出 等

• 注意：递归就是在过程或函数里调用自身；使用递归策略时要注意的几个条件

1. 必须有一个明确的递归结束条件，称为递归出口。
2. 递归需要有边界条件、递归前进段和递归返回段。
3. 当边界条件不满足时，递归前进。当边界条件满足时，递归返回。

• 循环算法：
• 优点：速度快，结构简单。
• 缺点：并不能解决所有的问题。有的问题适合使用递归而不是循环。如果使用循环并不困难的话，最好使用循环

一种强大的去重方法

var arr=[1,4,2,1,5,3,6,2,5,'g','r',3,1,'r']
   //利用hasOwnProperty去重(filter()过滤配合去重)
   function fn(arr){
   	var obj={}
   	return arr.filter(function(item,index,arr){
   		return obj.hasOwnProperty(typeof item+item)?false:(obj[typeof item+item]=true)
   	})
   }
   console.log(arr)
   console.log(fn(arr))

一种偷懒去重写法

• 不算去重 但可实现去重效果[…new Set(arr)]-----偷懒写法

递归去重

var arr=[1,4,2,1,5,3,6,2,5,'g','r',3,1,'r']
   function fn(arr){
   	var array=arr
   	var len=array.length
   	array.sort(function(a,b){
   		return a-b
   	})
   	function loop(index){
   		if(index>=1){
   			if(array[index]===array[index-1]){
   				array.splice(index,1)
   			}
   			loop(index-1)//递归loop,然后去重
   		}
   	}
   	loop(len-1)
   	return array
   }
   console.log(arr)
   console.log(fn(arr))

Map方法去重

• 创建一个空Map数据结构，遍历需要去重的数组，把数组的每一个元素作为key存到Map中。由于Map中不会出现相同的key值，所以最终得到的就是去重后的结果。

var arr=[1,4,2,1,5,3,6,2,5,'g','r',3,1,'r']
   function fn(arr){
   	let map= new Map()
   	let array=new Array()
   	for(var i=0;i<arr.length;i++){
   		if(map.has(arr[i])){//如果有key值
   			map.set(arr[i],true)
   		}else{//如果没有key值
   			map.set(arr[i],false)
   			array.push(arr[i])
   		}
   	}
   	return array
   }
   console.log(arr)
   console.log(fn(arr))