面试题学习笔记（一）

扩展运算符…

…是es6新增的运算符，作用是扩展对象。

var a = ['1','2','3']
var b = ['4','5','6']
var z = function(){
	let num = '2'
	console.log(num)
}
//现在有一个需求，合并两个数组 和一个函数
//如果直接赋值
var e = [a, b] // [[a],[b]] 
//如果用es5，可以这样
var c = a.concat(b) //['1','2','3','4','5','6']
//如果使用es6的扩展运算符，就写成这样
var d = [...a,...b]  //['1','2','3','4','5','6']

filter过滤函数

filter 是一个过滤函数，针对于数组过滤 ，返回值是一个经过处理的数组，不改变原数组

var a = ['1','2','3']
var b = a.filter(function(x){
return  x == '1'
})
console.log(b)// ['b']
//如果使用es6的箭头函数，可以这么写
var b = a.filter(x=>return x == '1')
//如果需要封装该filter方法 它接收两个参数，一个是要处理的数组，一个是状态
filterData = function(arr,state){
	return arr.filter(x => return x == 'state' )
}

vue计算属性如何传参

//html
{{com(this.aa)}}

//computed
computed:{
	com(){
		return function(data){
			return	this.filterData(data,ture)
		}
	}
}
//js
data(){
	return{
		aa:[false,true,true]
	}
}

重绘与重排

浏览器的运行机制 构造DOM树（HTML）- 构建渲染树（CSS） - 布局渲染树 - 绘制渲染树
重绘的触发机制：一个元素的外观改变 例如 backgound-color 改变了
重排的触发机制：当渲染树的一部分因为元素的规格尺寸、布局、隐藏等改变需要重新重绘和重排，每次页面必会重排一次，就是在页面第一次加载的时候
重排一定触发重绘，重绘不一定会触发重排
重排会有耗时与导致浏览器卡顿
如何优化？

1. 直接改变元素的className
2. display:none ;先设置元素为display:none ，然后进行页面布局等操作，设置完成后再display:block，这样就只触发两次重绘和重排
3. 将需要多次重排的元素进行position:absolute或者fixed，这样脱离文档流，它的变化就不会影响到其它元素
4. 如果需要创造多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document

方法4的代码：

var fragment = document.createDocumentFragment()
for (let i =0;i<1000;i++){
	let li = document.createElement('li')
	li.innerHtml = 'apple'+ i
	fragment.appendChild(li)
}
document.getElementById('frult').appendChild(fragment)