前端面试题目总结1

数据类型

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

值类型：number、string、boolean、Symbol、undefined

引用类型：null、数组、对象

使用typeof能用来干什么

1. 判断是否是值类型

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

1. 判断是否是函数

typeof obj === 'function'

1. 判断是否是引用类型

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

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

类型转换

1. 字符串拼接
2. ==
3. 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中，作用域一共有三种

1. 全局
2. 函数
3. 块级

自由变量

1. 一个变量在当前作用域没有被定义，但被使用
2. 若当前作用域找不到该变量则向上层作用域寻找，层层向上，直到找到为止
3. 若全局作用域也没找到，则操作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();

闭包

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

1. 函数作为参数传递
2. 函数作为返回值

闭包在实际开发中的应用

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

// 在这个例子中，无论怎样都无法去直接获取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

1. 作为普通函数被调用
2. 使用call、apply、bind改变this指向
3. 作为对象方法被调用
4. 在class的方法中被调用
5. 箭头函数，其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形式。

异步的使用场景

1. 网络请求
2. 定时任务

异步的出现会出现一个问题就是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

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

同源策略

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

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

localStorage和sessionStorage

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

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

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

其中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 最好在这个方法里面
})

性能优化

原则：

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

从何入手

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="width: 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>

如何捕获异常

1. try...catch
2. 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"}