前端知识点重点整理

最新推荐文章于 2024-08-15 15:54:59 发布

Sinner_H

最新推荐文章于 2024-08-15 15:54:59 发布

阅读量286

点赞数

分类专栏：自学记录文章标签： javascript html5 vue.js jquery

本文链接：https://blog.csdn.net/Sinner_H/article/details/109826281

版权

自学记录专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

给父元素添加overflow：hidden；

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

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

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

万能清除法

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

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

给父元素设置高度

bfc

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

BFC的布局规则

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

哪些元素或属性能触发BFC

根元素
float属性不为none
position为absolute或fixed
display为inlineblock, tablecell, tablecaption, flex, inlineflexoverflow不为visible

bfc的应用

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

闭包

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

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

闭包缺陷:因为该局部变量不会被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个参数，第二个参数是一个数组，该数组代表了传入的实参集合。

递归算法

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

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

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

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

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

一种强大的去重方法

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))