前端面试题（一）

1. 作用域

var num1 = 55;
var num2 = 66;
function f1(num, num1) {
	num = 100;
	num1 = 100;
	num2 = 100;
	console.log(num);
	console.log(num1);
	console.log(num2);
}
f1(num1, num2);
console.log(num1);
console.log(num2);
console.log(num);

2. 值类型引用类型的传递

function Person(name, age, salary) {
	this.name = name;
	this.age = age;
	this.salary = salary;
}
function f1(person) {
	person.name = 'ls';
	person = new Person('xx', 11, 11);
}
var p = new Person('zs', 18, 20);
console.log(p.name);
f1(p);
console.log(p.name);

3. 将字符串转为驼峰式命名

function strToCamel(str) {
	var arr = str.split('-');
	for (var i = 1; i < arr.length; i++) {
		arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substring(1);
	}
	return arr.join('');
}

4. 冒泡排序

function pupple(arr) {
	// 比较的轮数
	for( var i = 0; i < arr.length-1; i++) {
		// 每一轮比较的次数
		for (var j = 0; j < arr.length-1-i; j++) {
			if (arr[j] > arr[j+1]) {
				var temp = arr[j];
				arr[j] = arr[j+1];
				arr[j+1] = temp;
			}
		}
	}
	return arr;
}

5. 反转数据

function reverseArr(arr) {
	for (var i = 0; i < arr.length/2; i++) {
		var temp = arr[i];
		arr[i] = arr[arr.length-1-i];
		arr[arr.length-1-i] = temp;
	}
	return arr;
}

6. 去除数组中的重复元素

function delRepeat(arr) {
	for (var i = 0; i<arr.length;i++) {
		for(j = i+1; j<arr.length;j++) {
			if (arr[i] === arr[j]) {
				var del = j;
				arr.splice(j, 1);
			}
		}
	}
	return arr;
}

function delRepeat(arr) {
	var temp = [];
	for (var i = 0; i<arr.length;i++) {
		if (temp.indexOf(arr[i]) === -1) {
			temp.push(arr[i])
		}
	}
	return arr;
}

7. 1px物理像素实现

像素比=物理像素/css像素

<meta name="viewport" content="width=device-width,initial-scale=1,user-scable=no">

window.onload = function() {
	// 像素比
	var dpr = window.devicePixelRatio;
	// 缩放比例
	var scale = 1/dpr;
	var width = document.documentElement.clientWidth;
	var metaNode = document.querySelector('meta[name="viewport"]');
	metaNode.setAttribute('content', 'width=device-width,initial-scale='+scale+',user-scable=no');
	// 页面中元素宽度 高度 比例反向乘回来
	var htmlNode = document.querySelector('body');
	htmlNode.style.fontSize = width * dpr + 'px';
}

#box:before{
	content: "";
	posotion: absolute;
	left: 0;
	bottom: 0;
	height: 1px;
	background: #000;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
	#box:before {
		transform: scaleY(0.5);
	}
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
	#box:before {
		transform: scaleY(0.33333);
	}
}

8. 元素水平垂直居中

.wrap {
	width: 500px;
	heioght: 500px;
	background: grey;
	position: relative;
}
// 方法一
.wrap .content {
	width: 200px;
	width: 200px;
	background: pink;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}
// 方法二
.wrap .content {
	width: 200px;
	width: 200px;
	background: pink;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -100px;
	margin-left: -100px;
}
// 方法三
.wrap .content {
	width: 200px;
	width: 200px;
	background: pink;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
// 方法四
.wrap {
	width: 500px;
	heioght: 500px;
	background: grey;
	display: flex;
	justify-content: center;
	align-items: center;
}

9. css创建一个三角形

.box {
	width: 0;
	height: 0;
	border: 100px solid;
	border-top-color: red;  // 倒三角
	border-right-color: transparent;
	border-bottom-color: transparent;
	border-left-color: transparent;
}

10. rem适配

html根元素字体大小设置屏幕区域的宽

window.onload = function() {
	var width = document.documentElement.clientWidth;
	var htmlNode = document.querySelector('html');
	htmlNode.style.fontSize = width + 'px';
}

11. 背景图片起始源的位置是padding-box

background-origin: content-box;// 修改背景图片起始源的位置

12.

function Foo() {
	getName = function() {
		alert(1);
	}
	return this;
}
Foo.getName = function() {
	alert(2);
}
Foo.prototype.getName = function() {
	alert(3);
}
var getName = function() {
	alert(4);
}
function getName() {
	alert(5);
}

Foo.getName();
getName();
Foo().getName();
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();

解析：

function Foo() {
	getName = function() {
		alert(1);
	}
	return this;
}
var getName; // 和函数同名，函数声明覆盖变量声明
function getName() {alert(5);}
Foo.getName = function() {alert(2);}
Foo.prototype.getName = function() {alert(3);}
getName = function() {alert(4);}

Foo.getName(); // window.Foo.getName() ⇒ 2 this为window
getName(); // 4
Foo().getName(); // Foo函数中getName没有用var定义，因此去全局变量中查找，将getName = function() {alert(4) 修改为getName = function() {alert(1)，(Foo()).getName() ⇒ window.getName() ⇒ 1

function Foo() {
	getName = function() {
		alert(1);
	}
	return this;
}
function getName() {alert(5);}
Foo.getName = function() {alert(2);}
Foo.prototype.getName = function() {alert(3);}
getName = function() {alert(1);}

getName(); // 1
new Foo.getName(); //new (Foo.getName()) ⇒ new ( function() {alert(2);}) ⇒ 2
new Foo().getName(); // (new Foo()).getName() ⇒ foo.getName() ⇒ 3
new new Foo().getName(); // new ((new Foo().getName)() ==> new (foo.getName)() ⇒ new (function() {alert(3);}) ⇒ 3

13. 函数节流和防抖

函数节流： 限定一个函数在一段时间内只执行一次
函数防抖： 一个事件在触发后n秒内函数只执行一次，如果在n秒内又触发了事件，会重新计算函数执行的事件。即当一个事件连续触发，只执行最后一次。

函数防抖的应用场景：
搜索框搜索输入。只需用户最后一次输入完，再发送请求
手机号、邮箱验证输入检测
窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

函数节流的应用场景：
滚动加载，加载更多或滚到底部监听
谷歌搜索框，搜索联想功能
高频点击提交，表单重复提交

function throttle(fn, delay) {
	var lastTime = 0;
	return function() {
		var nowTime = Date.now();
		if (nowTime - lastTime > delay) {
		fn.call(this);
		lastTime = nowTime;
		}
	}
}

function debound(fn, delay) {
	var timer = null;
	return function() {
		clearTimeout(timer);
		timer = setTimeout(function() {
			fn.apply(this);
		}, delay)
	}
}

14. 跨域

**同源策略：**协议名、域名、端口号完全一致
**跨域：**违背了同源策略
解决跨域：
1. jsonp

// 创建script标签
var script = document.createElement('script')
// 设置回调函数
function getData(data) {
	// 数据请求回来会被触发的函数
}
// 设置script的src属性，设置请求地址
script.src = '请求地址'
// 让script生效
document.body.appendChild(script)

2. cors
3. 服务器代理

15. 输入url网址到页面渲染

1. DNS解析：将域名地址解析为ip地址
2. TCP连接：TCP的三次握手
   第一次握手：由浏览器发起，告诉服务器要发送请求了
   第二次握手：由服务器发起，告诉浏览器准备接收了，可以发送
   第三次握手：由浏览器发起，告诉服务器要发了，准备接收
3. HTTP发起请求
4. 服务器处理请求，浏览器接收HTTP响应
5. 渲染页面：
   遇见HTML标记，浏览器调用HTML解析器解析成token并创建dom树
   遇见style/link标记，浏览器调用css解析器，处理css标记并构建csm树
   遇见script标记，调用JavaScript解析器，处理script代码（绑定事件、修改dom、cssom树）
   将dom树和cssom树合并成一个渲染树
   根据渲染树计算布局，计算每个节点的几何信息
   将各个节点颜色会知道屏幕上（渲染）
6. 关闭TCP连接（四次挥手）
   第一次挥手：由浏览器发起，告诉服务器，
   第二次挥手：由服务器发起
   第三次挥手：由服务器发起
   第四次挥手：由浏览器发起

16. 闭包

function fun(n, o) {
	console.log(o);
	return {
		fun: function(m) {
			return fun(m, n);
		}
	}
}

var a= fun(0);
a.fun(1)

function fun(n, o) {
	var n = 0, o;
	console.log(o);
	return {
		fun: function(m) {
			var m = 1;
			return fun(m, n);
		}
	}
}

a.fun(2)
a.fun(3) // undefined 0 0 0

var b = fun(0).fun(1).fun(2).fun(3) // undefined 0 1 2

var c= fun(0).fun(1)
c.fun(2)
c.fun(3) //undefined 0 1 1

17. 读取页面中所有不重复的元素

[...new Set([...new Set(document.querySelectorAll('*'))].map(v => v.tagName))]

Array.from(new Set([...new Set(document.querySelectorAll('*'))].map(v => v.tagName)))