前端面试题目总结1

数据类型

js中的数据类型有两类：值类型和引用类型

值类型：number、string、boolean、Symbol、undefined
引用类型：null、数组、对象

使用typeof能用来干什么

判断是否是值类型

typeof obj !== 'object' || typeof obj == null

判断是否是函数

typeof obj === 'function'

判断是否是引用类型

typeof obj === 'object'

值类型和引用类型的区别

每声明一个值类型的变量，就会去开辟一个新的内存空间去存储变量的值

// 值类型
let a = 10;  // 在内存中开辟一个空间给变量 a，a的地址为 100，值为 10
let b = a;  // 在内存中开辟一个空间给变量 b，b 的地址为 200，并且把 a 的值赋值给 b，为10
a = 20;  // 查找 a 的地址，并把 a 的值更改为20
console.log(a);  // 20，查找 a 的地址 100，然后找到对应的值 20
console.log(b);  // 10，查找 b 的地址 200，然后找到对应的值10

而引用类型的值，则是放在堆中的，在复制的时候引用的状态，

// 引用类型
// 在内存中开辟一个空间给变量 obj1，
// 然后在堆中创建一个对象 { age: 20 }, 并把堆中的这个对象的内存地址 600 赋值给 obj1
let obj1 = { age: 20 };  
// 在内存中开辟一个空间给变量 obj2，然后把 obj1 的值 地址600 赋值给 obj2，
// 而 obj1 存的是 对象 { age: 20 } 的地址，故 obj2 存的就是该对象的地址 600
let obj2 = obj1;
// obj1存的是地址，故 obj1.age = 30 修改的是 地址 600 的内容，修改为30
obj1.age = 30;
// 故打印出来的 obj1.age 和 obj2.age 都是 30
console.log(obj1.age);  // 30
console.log(obj2.age);  // 30

之所有引用类型是因为担心性能的问题，若一个对象的特别大，那么如果按照值类型的话，那么就特别占用内存。

类型转换

字符串拼接
==
if 语句和逻辑运算

字符串拼接

10 + '10' // 1010
10 + false // 10false

双等==

除了 == null 之外、其它一律使用 ===。
a == null 相当于 a === undefined || a === null

if语句和逻辑运算

在 js 中的 if 语句中的条件语句的值实际上是 truely 和 falsely，这和c语言可能有点不一样。
以下都是 falsely 变量，除此之外都是 truely 变量

!!0 === false
!!NaN === false
!!'' === false
!!null === false
!!undefined === false
!!false === false

深拷贝

因为引用的类型的存在，我们有时候需要赋值的不对原来的对象造成影响，那么我们就需要拷贝该引用对象。

function deepClone(obj) {
  // 判断是否是值类型以是否是null
  if (typeof obj !== 'object' || typeof obj == null) {
    // 只有当 obj 是值类型或者 obj 为 null 或者 undefined 时，才会直接返回
    return obj;
  }

  // 初始化返回值类型
  let result;
  if (obj instanceof Array) {
    result  = []
  } else {
    result = {}
  }

  // 递归遍历设置值
  for (let key in obj) {
    // 判断是否是自身的属性
    if (obj.hasOwnProperty(key)) {
      // 若是自身的属性就去赋值，并通知递归判断是否需要再次拷贝
      result[key] = deepClone(obj[key])
    }
  }

  return result;
}

// 测试
let obj1 = { age: 20 };  
let obj2 = deepClone(obj1);
obj1.age = 30;
console.log(obj1.age);  // 20
console.log(obj2.age);  // 30

如何准确判断一个变量是不是数组

instanceof

手写一个简易的jQuery，考虑插件和扩展性

class jQuery {
  constructor(selector) {
    const els = document.querySelectorAll(selector);
    const length = els.length;
    this.length = length;
    this.selector = selector;
    for (let i = 0; i < length; i++) {
      this[i] = els[i]
    }
  }
  
  html(val) {}

  css() {}

}

// 插件
jQuery.prototype.style = function() {}

// 扩展性
class myJquery extends jQuery {
  constructor(selector) {
    super(selector)
  }

  on() {}

  each() {}
}

原型

原型关系

每个构造函数都有一个现实原型prototype，每个实例都有一个隐式原型__proto__，每个实例的隐式原型指向其构造函数的显示原型。

基于原型的执行规则

获取属性或执行方法时，先在自身身上查找，倘若找不到就去隐式原型__proto__上去寻找，层层向上，直到null为止

class People {
  constructor(){}
  eat(){}
}

class Student extends People{
  constructor(name) {
    super();
    this.name = name;
  }
  study(){}
}

const stu = new Student('George');
// stu 自身上有study方法
stu.study();
// stu 自身上没有eat方法，故去 stu 的隐式原型__proto__上去寻找，
// stu.__proto__指向People.prototype，而People.prototype上有 eat 方法
stu.eat();
// stu 自身上没有toString方法，故去stu的隐式原型__proto__上去寻找,
// stu.__proto__指向People.prototype，而People.prototype上没有toString方法，
// 则继续去People.prototype.__proto__上去寻找，
// 而People.prototype.__proto__指向的是Object.prototype
// Object.prototype有toString方法，则找到
stu.toString();

作用域

在js中，作用域一共有三种

全局
函数
块级

自由变量

一个变量在当前作用域没有被定义，但被使用
若当前作用域找不到该变量则向上层作用域寻找，层层向上，直到找到为止
若全局作用域也没找到，则操作xxx is not defined

ps：自由变量的查找是在函数定义的作用域向上找，而不是执行的作用域

// 案例1
function foo() {
  let a = 2;
  function bar() {
    console.log(a);  // 2
  }
  bar();
}
foo();

// 案例2
function foo() {
  let a = 2;
  bar();
}
let a = 10;
function bar() {
  // 自由变量的查找是在函数定义的作用域向上找，而不是执行的作用域
  console.log(a);  // 10
}
foo();

闭包

闭包是作用域应用的特殊情况，有两种表现

函数作为参数传递
函数作为返回值

闭包在实际开发中的应用

闭包经常用来隐藏数据，做私有变量

// 在这个例子中，无论怎样都无法去直接获取data的值，只能通过方法去设置或获取对应的值
function store() {
  // 永远无法直接操作该数据 data
  const data = {};
  return  {
    get(key) {
      return data[key];
    }
    set(key, value) {
      data[key] = value;
    }
  }
}

const s = store();
s.set('a', 'asd');
console.log(s.get('a'));  // asd

闭包的影响

变量会常驻内存，得不到释放，所以闭包不要乱用

自由变量：内存会被释放

let a = 1;
function fn1() {
  let b = 10;
  function fn2() {
    let c = 20;
    function fn3() {
      let d = 30;
      return a + b + c + d;
    }
    fn3(); // 1. fn3执行完后 c、d 就被释放
  }
  fn2();  // 2. fn2执行完后 b 就被释放
}
fn1();  // 3. fn1执行完后 a 就被释放

函数作为返回值：内存不会被释放

function store() {
  // 永远无法直接操作该数据 data，data永远不会被释放
  const data = {};
  return  {
    get(key) {
      return data[key];
    }
    set(key, value) {
      data[key] = value;
    }
  }
}

const s = store();
s.set('a', 'asd');
console.log(s.get('a'));  // asd

this

作为普通函数被调用
使用call、apply、bind改变this指向
作为对象方法被调用
在class的方法中被调用
箭头函数，其this是上级作用域的值
this的指向实在函数执行的时候确定的，不是在函数定义的时候确定的，而作用域是在定义的时候确定的

function fn1() {
  console.log(this);  
}

fn1();  // this = window

fn1.call({ x: 100 });  // this = {x:100}
const fn2 = fn1.bind({ x: 200 })
fn2();  // this = { x: 200 }

const zhang = {
  name: 'zhang',
  sayHi() {
    console.log(this);   // 当前对象
  },
  wait() {
    console.log(this);  // 当前对象
    setTimeout(function() {
      console.log(this);  // window，这个函数是setTimeout调用的，而setTimeout指向的是window
    });
  },
  wait() {
    setTimeout(() => {
      console.log(this);  // 当前对象
    });
  }
};

class People {
  constructor(name) {
    this.name = name;
  }
  sayHi() {
    console.log(this); // People的实例对象
  }
}
new People().sayHi();

手写一个bind函数

Function.prototype._bind = function() {
  // 将arguments参数转换为数组
  const args = Array.prototype.slice.call(arguments);

  // 取出args中的第一个元素，这个元素作为this的范围，并删除第一个元素
  const cxt = args.shift();

  // 返回一个函数
  return function() {
    return this.apply(ctx, args)
  }
}

手写一个apply函数

// apply的第一个参数是上下文，第二个参数是数组
Function.prototype._apply = function() {
  // 将arguments参数转化为数组
  const args = Array.prototype.slice.call(arguments);

  // 取出args中的第一个元素，这个元素作为this的范围，并删除第一个元素
  const ctx = args.shift();
  
  // 当前this指向的是调用的函数，把this绑定到ctx即obj上
  // 将要当前调用的函数绑定到新的this上
  ctx._fn = this;

  // 通过ctx来执行_fn函数，此时的this指向的是ctx对象，此时foo的this就指向为obj对象，从而改变了this的指向
  // 执行调用的函数
  ctx._fn(...args[0]);

  // 删除ctx上的_fn删除
  // 删除调用的函数
  delete ctx._fn;
};

function foo(name, age) {
  console.log(this);  // 指向 obj 对象
  this.name = name;
  this.age = age;
}
const obj = { a: 2 };
foo._apply(obj, ["leo", 20]);

手写一个call函数【和apply的原理一样】

Function.prototype._call = function() {
  // 将arguments参数转化为数组
  const args = Array.prototype.slice.call(arguments);

  // 取出args中的第一个元素，这个元素作为this的范围，并删除第一个元素
  const ctx = args.shift();
  console.log(args);
  // 将this即foo函数绑定到ctx即obj上
  ctx._fn = this;
  // 通过ctx来执行_fn函数，此时的this指向的是ctx对象，此时foo的this就指向为obj对象，从而改变了this的指向
  ctx._fn(...args);
  // 删除ctx上的_fn删除
  delete ctx._fn;
};

function foo(name, age) {
  this.name = name;
  this.age = age;
}
const obj = { a: 2 };
foo._call(obj, "leo", 20);

单线程和异步

js是单线程的语言，只能同时做一件事，浏览器和nodejs已支持js启动进程，如web worker，js和dom渲染公用一个线程，因js可修改dom结构，遇到等待（请求、定义）不能卡住，使用异步的用调用callback形式。

异步的使用场景

网络请求
定时任务

异步的出现会出现一个问题就是callback hell，就会一直嵌套，如果有100个请求那就会嵌套100次

$.get(url， function(res) {
  $.get(url1， function(res1) {
    $.get(url2， function(res2) {
      $.get(url3， function(res3) {
        
      })
    })
  })
})

为了解决解决callback hell【地域回调】，现在最佳的方式是使用Promise，这样就不会出现地域回调的问题

$.get(url).then(res => {
  return $.get(url1)
}).then(res => {
  return $.get(url2)
}).then(res => {
  return $.get(url3)
})

JS Web API

在如今各种框架的盛行的时代，让开发人员手动操作DOM的机会越来越少，像Vue、React这样的框架，内部都封装了各种DOM操作，但是DOM操作一直都会是前端工程师的基础，也是必备的知识，只会Vue而不会DOM操作的前端工程师不会长久。

DOM（Document Object Model）是哪种数据结构（DOM的本质）

DOM是树形结构，所以在操作DOM的时候才会有各种方法，比如获取父节点、子节点、相邻的节点

DOM操作常见的API

节点操作
结构操作
property操作
attribute操作

DOM节点操作

document.getElementById()
document.getElementsByClassName()
document.getElementByTagName()
document.getElementByName()

property操作

通过js属性的形式操作样式，修改dom元素对应的js属性，不会提现到html结构中

div.style.width = '20px'

attribute操作

会修改html标签上的属性，会体现在html结构上

div.setAttribute('data-name', 'xxx');
console.log(div.getAttribute('data-name'));  // xxx

PS：通过property和attribute的方式，都会引起DOM渲染，但尽量使用property操作，attribute会改变页面的html结构，所以attribute一定会使页面宠幸渲染，而property可能会使页面重新渲染

DOM结构操作

1. 新增节点

const div = document.createElement('div')

2. 插入节点

document.body.appendChild(div)

3. 删除节点

document.body.removeChild(div)

4. 移动节点

// 未移动前的DOM结构
<div id="div1">
  <p id="p1">p1</p>
  <p>p2</p>
  <p>p3</p>
</div>
<div id="div2">
  <p>p4</p>
</div>

// 移动操作
<script>
  const p1 = document.getElementById('p1');
  const div2 = document.getElementById('div2');
  div2.appendChild(p1);  // 这里的p1是一个现有元素，故能够移动
</script>

// 移动后的DOM结构
<div id="div1">
  <p>p2</p>
  <p>p3</p>
</div>
<div id="div2">
  <p>p4</p>
  <p id="p1">p1</p>
</div>

5.获取子元素列表

div.childNodes

childNodes会获取各种节点，如元素节点、注释节点、文本节点。所以我们必须使用nodeName和nodeType属性来判断是不是你想要的元素

// 获取所有的元素节点
nodeList.filter(child => child.nodeType === 1)

6. 获取父元素

div.parentNode

DOM操作是十分昂贵的，所以应该避免频繁的DOM操作，对DOM查询进行缓存，将多次的操作转化为一次性操作。

<div id="div1">
  <p>p1</p>
  <p>p2</p>
  <p>p3</p>
</div>

<script>
	// 对div1缓存
	const div1 = document.getElementById("div1");
	// 缓存div1的子元素
	const children = Array.prototype.slice
		.call(div1.childNodes)
		.filter(child => child.nodeType === 1);
	// 缓存长度
	const length = children.length;
	for (let i = 0; i < length; i++) {
		console.log(children[i].innerHTML);
	}
        // 将多次的操作转化为一次性操作
	const fragment = document.createDocumentFragment();
	for (let i = 0; i < length; i++) {
		const p = document.createElement("p");
		p.id = "p" + i;
		p.innerHTML = "this is p " + i;
		fragment.appendChild(p);
	}
        // 一次性去操作DOM
	div1.appendChild(fragment);
</script>

BOM（Browser Object Model）操作

1. navigator

// 获取浏览器的信息
const ua = navigator.userAgent

2. screen

3. location

location.href // 全网址
location.protocal  // 协议
location.host  // 域名
location.search  // 查询参数
location.hash  // 井号后面的内容
location.pathname // 网站的路径，包括井号

4. history

5. window

6. document

事件冒泡

顺着DOM结构向上冒，事件源本身没有事件

<div id="div1">
	<a href="#">a1</a>
	<a href="#">a2</a>
	<a href="#">a3</a>
</div>
<script>
	const div1 = document.getElementById("div1");
	div1.addEventListener("click", function(ev) {
	    ev.preventDefault();  // 阻止默认行为，这里是a标签，a标签默认会跳转，这里阻止a的默认跳转行为
		console.log(ev.target);  // 点击什么元素，它就是什么元素
	});
</script>

事件代理

事件代理是在事件冒泡的机制上去实行的。其优点是代码简洁，减少浏览器的内存占用，但不要滥用。使用场景，比如有一个很长的列表，这时候要判断店家的是哪个item，这个时候就可以使用事件代理

<div id="div1">
	<a href="#">a1</a><br />
	<a href="#">a2</a><br />
	<a href="#">a3</a><br />
</div>
<button>add</button>
<script>
	const div1 = document.getElementById("div1");
	document.body.addEventListener("click", function(ev) {
		ev.preventDefault();
		const target = ev.target;
		const nodeName = target.nodeName;
		console.log(nodeName);
		if (nodeName === "A" || nodeName === "p") {
			console.log(target.innerHTML);
		} else if (nodeName === "BUTTON") {
			const fragment = document.createDocumentFragment();
			for (let i = 0; i < 5; i++) {
				const p = document.createElement("p");
				p.id = "p" + i;
				p.innerHTML = "this is p " + i;
				fragment.appendChild(p);
			}
			div1.appendChild(fragment);
		}
	});
</script>

编写一个通用的事件监听函数

  <body>
    <div id="div1">
	<a href="#">a1</a><br />
	<a href="#">a2</a><br />
	<a href="#">a3</a><br />
    </div>
    <button>add</button>
  </body>

// 事件监听和事件代理
function bindEvent(el, type, fn, selector, prevent) {
	el.addEventListener(type, ev => {
		if (prevent) {
			ev.preventDefault();
		}
		const target = ev.target;
		const nodeName = target.nodeName;
		if (selector) {
			if (
				typeof selector === "string" &&
				selector.toUpperCase() === nodeName
			) {
				// 将fn的this指向target
				fn.call(target, ev, target);
			}
		} else {
			fn.call(target, ev, target);
		}
	});
}
const div1 = document.getElementById("div1");
bindEvent(
	document.body,
	"click",
	function(ev) {
		console.log(this);
		console.log(this.innerHTML);
	},
	"a"
);

手写一个简易的ajax

function ajax({url, method, body, query, async = true}) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open(method.toUpperCase(), url, async) ;  // async表示是否异步，true为异步
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(xhr.responseText && JSON.parse(xhr.responseText));
        } else {
          reject(xhr)
        }
      }
    }
  xhr.send(body)
  })
}

xhr.readyState

未初始化，还未调用send()方法
载入完成，已调用send()方法，正在发送请求
交互，正在解析响应内容
完成，响应内容解析完成，可在客户端调用

同源策略

ajax请求时，浏览器要求当前网页和server必须同源（安全）
同源：协议、域名、端口，三者必须一致
加载图片、css、js可无视同源策略

跨域

所有的跨域，都必须经过server端的允许和配合
未经server端允许实现跨域，说明浏览器有漏洞，危险信号

JSONP基本源流

script可绕过跨域限制
服务器可以任意动态拼接数据返回
所以，script就可以用来回去跨域的数据，只要服务器愿意返回

window.cb = function(res) {
  console.log(res);  // 服务器返回的数据
}
<script src="xxx?user?callback=cb"></script>

// 服务器返回数据格式
cb({ name: "xxx" })

描述cookie和localStorage和sessionStorage的区别

从容量和API易用性角度。

cookie 本身用于浏览器和 server 通讯，被“借用”到本地存储
api为document.cookie，不够友好
容量最大为4kB
http请求时需要一同发送到服务器，增加了请求的数据量

localStorage和sessionStorage

专为本地存储而设计的，最大为5MB
API简单易用，setItem，getItem
不会随http请求发送出去
localStorage数据永久存储，除非被动删除
sessionStorage中存在当前会话，浏览器关闭后就会清空

从输入URL到渲染出页面的整个过程

DNS解析：域名 -> IP地址
浏览器根据IP地址向服务器发送http请求
服务器处理http请求，并返回给浏览器
根据html代码生成DOM树
根据CSS代码生成CSSOM
将DOM树和CSSOM整合成RenderTree
根据RenderTree渲染页面，遇到script标签则暂停渲染，优先加载脚本并执行js代码，完成后再继续。暂停是因为JS进程和渲染进程是公用一个线程的，js可能会改变DOM结构
直到渲染完成

其中link要放在head中，因为放在后面可能会造成再次渲染问题，js放在最后，是因为JS进程和渲染进程是公用一个线程的，而且有可能js加载时间很长，然后就会造成页面卡顿现象，img标签不会暂停渲染，不会阻塞DOM渲染，不会造成重排现象。

window.onload和DOMContentLoaded的区别

window.addEventListener('load', function() {
  // 页面全部资源加载完才会执行，包括图片、视频
  console.log('load');  // 后输出
})
document.addEventListener('DOMContentLoaded', function() {
  // DOM渲染完成即可执行，此时图片、视频可能还未加载完成
  console.log('DOMContentLoaded');  // 先输出，所以操作 js 最好在这个方法里面
})

性能优化

原则：

多使用内存、缓存
减少CPU计算，减少网络加载耗时
以空间换取时间

从何入手

1. 让加载更快

1.1 减少资源的体积：压缩代码
1.2 减少访问次数：合并代码、SSR渲染、缓存
1.3 使用更快的网络

2. 让渲染更快

2.1 css放在head部分，js放在body最后
2.2 尽早执行js，用DOMContentLoaded触发
2.3 懒加载：图片懒加载、上滑加载更多
2.4 对DOM查询缓存
2.5 频繁DOM操作，合并到一起插入DOM结构
2.6 节流和防抖

防抖debounce

场景：监听一个输入框的文字，变化后触发change事件，直接用keyup事件，则会频繁触发change事件，使用防抖，只有在用户输入结束或暂停的时候，才会触发change事件

<input type="text" id="input1" />

<script>
	function debounce(fn, delay = 300) {
		let timer = null;
		return function() {
			if (timer) {
				clearTimeout(timer);
			}
			timer = setTimeout(() => {
				fn.call(this, arguments[0]);
				timer = null;
			}, delay);
		};
	}
	const input = document.getElementById("input1");
	input.addEventListener(
		"keyup",
		debounce(function(e) {
			console.log(this.value, e);
		})
	);
</script>

节流throttle

场景：拖拽一个元素师，要随时拿到该元素的拖拽位置，直接用drag事件，则会频繁触发，很容易造成卡顿，此时使用节流的话，无论拖拽速度多快，都快每隔一段时间触发一次

<div
	id="div1"
	draggable="true"
	style=" 200px;height: 100px;background: rebeccapurple;"
/>

<script>
	function throttle(fn, delay = 100) {
		let timer = null;
		return function() {
			if (timer) {  // timer不为空就什么都不做
				return;
			}
			timer = setTimeout(() => {
				fn.call(this, arguments[0]);
				timer = null;
			}, delay);
		};
	}
	const div = document.getElementById("div1");
	div.addEventListener(
		"drag",
		throttle(function(e) {
			console.log(e.offsetX, e.offsetY);
		})
	);
</script>

如何捕获异常

try...catch
window.onerror = funtion(message, source, lineNumber, colNumber, error) {}

var 和let、const的区别

var是ES5语法，let和const是ES6语法，var有变量提升
var和let是变量，可修改，const是常量，不可改变
let和const有块级作用域，var没有

手写一个深度比较

// 判断是否是对象
function isObject(target) {
	return typeof target === "object" && target !== null;
}
function isEqual(source, target) {
	// 只要其中有一个不是对象，那就直接比较
	// 如 isEqual(1, { a: 2 })
	// 如 isEqual(1, 1)
	if (!isObject(source) || !isObject(target)) {
		return source === target;
	}
	// 如过两个都引用的是一个对象，直接比较
	// 如 isEqual(a, a)
	if (source === target) {
		return true;
	}
	//  两个都是对象或数组，而且不相等
	// 1. 先取出 source 和 target 的keys， 比较个数
	const sourceKeys = Object.keys(source);
	const targetKeys = Object.keys(target);
	if (sourceKeys.length !== targetKeys.length) {
		return false;
	}
	// 以 source 为基准，和 target 依次递归比较
	for (let key in sourceKeys) {
		const res = isEqual(source[key], target[key]);
		// 如果 res 中有一个为false，那就直接返回false
		if (!res) {
			return false;
		}
	}
	// 如果res都为true
	return true;
}
const a = { a: 1, b: 2, c: { x: 3, y: 4 } };
const b = { a: 1, b: 2, c: { x: 3, y: 4 } };
const c = { a: 1, b: 2, c: { x: 3, y: 4 }, d: 5 };
const d = { a: 1, b: 2, c: { x: 3, y: 44 } };

console.log(isEqual("aa", "aa")); // true
console.log(isEqual(11, 1)); // false
console.log(isEqual(a, b)); // true
console.log(isEqual(a, c)); // false
console.log(isEqual(a, d)); // false

获取URL参数

// 传统方法
function getURLQueryParams(_url) {
	const params = {};
	const url = _url || location.href; // _url 存在则用 _url， 不存在则用location.href
	const search = url.split("?");
	if (!search[1]) {
		return params;
	}
	const searches = search[1].split("&");

	searches.map(item => {
		const items = item.split("=");

		params[items[0]] = items[1];
	});
	return params;
}
console.log(getURLQueryParams("http:www.baidu.com?name=xxx&age=20")); // {name: "xxx", age: "20"}