2023面试题记录

1、js怎么判断对象为空？

判断对象是否为空的一个简单方法是检查对象的所有可枚举属性。如果一个对象没有可枚举属性，那么我们可以认为它是空的。你可以使用 Object.keys() 函数来获取对象的所有可枚举属性，然后检查得到的数组的长度。如果长度为0，那么对象是空的。

function isEmpty(obj) {  
    return Object.keys(obj).length === 0 && obj.constructor === Object;  
}  
  
var myObj = {};  
  
if (isEmpty(myObj)) {  
    console.log("对象是空的");  
} else {  
    console.log("对象不是空的");  
}

2、最新的 url 参数获取的 API

对于获取URL参数的API，你可以使用JavaScript的URLSearchParams接口

const urlParams = new URLSearchParams(window.location.search);  
const myParam = urlParams.get('myParam');

3、新版本发布后，怎么用技术手段通知用户刷新页面？

新版本发布后，你可以使用Web Push通知用户刷新页面。

if ('serviceWorker' in navigator) {  
  navigator.serviceWorker.register('/service-worker.js')  
    .then(() => console.log('Service Worker Registered'))  
    .catch(err => console.log('Service Worker Registration Failed: ', err));  
}

4、Vue 项目怎么提高项目性能？

懒加载：使用Vue的异步组件和Webpack的代码拆分功能，将大型依赖文件拆分成小块，根据需要动态加载。
代码拆分：将大型Vue组件拆分成多个小型组件，减少渲染时间和内存占用。
优化图片：使用压缩和优化工具，例如TinyPNG和ImageOptimizer，减少图片大小和加载时间。

5、缓存

5.1、强缓存

强制浏览器在一定时间内直接从本地缓存读取数据，不向服务器发送请求。强缓存可以通过设置响应头信息实现，常见的响应头有 Expires 和 Cache-Control。

5.2、协商缓存

在强缓存失效时，浏览器会向服务器发送请求，询问服务器该资源在最后一次访问后是否有修改。如果没有修改，服务器会返回 304 状态码，告诉浏览器可以继续使用本地缓存，否则会返回新的资源内容。协商缓存可以通过设置响应头信息实现，常见的响应头有 Last-Modified 和 ETag。

5.3、浏览器缓存的主要流程可以概括为以下几个步骤：

            5.3.1、浏览器收到 HTTP 请求时，会根据 URL 判断该资源是否已经被缓存。如果已经被缓存，则直接从本地缓存读取资源。
            5.3.2、如果未被缓存或者缓存已经过期，浏览器会向服务器发送请求，并在请求中带上一些信息，例如上次访问时间、Etag 等。
服务器收到请求后，根据请求中的信息判断资源是否有更新。如果资源没有更新，则返回一个 304 响应码，告诉浏览器可以继续使用本地缓存；如果资源已经更新，则返回新的资源内容和一些缓存相关的头信息。
            5.3.3、浏览器收到响应后，会根据响应头信息来更新本地缓存，并将新的资源内容展示给用户

6、new一个构造函数的过程

创建一个空对象。
将这个新对象的原型指向构造函数的prototype属性。
执行构造函数，并且将this指向新创建的对象。
如果构造函数没有返回值或者返回一个非对象值，则返回新创建的对象。如果构造函数返回一个对象，则返回这个对象。

function myNew(ctor, ...args) {
	// 创建一个新对象，并将该对象的原型指向构造函数的原型对象
	const obj = Object.create(ctor.prototype);

	// 调用构造函数，并将新对象作为 this 参数传递进去
	const result = ctor.apply(obj, args);

	// 如果构造函数返回了一个非空对象，则返回该对象；否则，返回创建的新对象
	if (typeof result === 'object' && result !== null) {
		return result;
	}
	return obj;
}
// 测试：
function Person(name, age) {
	this.name = name;
	this.age = age;
}

const person = myNew(Person, '张三', 18);
console.log(person.name); // 输出：张三
console.log(person.age); // 输出：18

7、EventLoop

代码开始执行，创建一个全局调用栈，script作为宏任务执行
执行过程过同步任务立即执行，异步任务根据异步任务类型分别注册到微任务队列和宏任务队列
同步任务执行完毕，查看微任务队列
- 若存在微任务，将微任务队列全部执行(包括执行微任务过程中产生的新微任务)
- 若无微任务，查看宏任务队列，执行第一个宏任务，宏任务执行完毕，查看微任务队列，重复上述操作，直至宏任务队列为空
- 宏任务（script、定时器、ajax、I/O）；微任务（promise.then、async await、MutationObserve 监听dom变化）

8、什么是js原型链

JavaScript中的每个对象都有一个原型，也就是它们继承属性和方法的对象。而这个原型又可以有自己的原型，形成了所谓的“原型链”。
当我们访问一个JavaScript对象的属性或方法时，首先会在该对象本身查找是否存在该属性或方法。如果不存在，它会沿着该对象的原型链向上查找，一直到Object.prototype为止。如果还没有找到，则返回undefined。

因此，通过原型链，我们可以实现继承和代码复用。例如，我们可以创建一个基础对象，并将其作为其他对象的原型，使得后者能够共享基础对象的属性和方法。

9、防抖&节流

// 防抖-多次点击，只执行一次
function debounces(fn, time) {
	let timer
	
	return function() {
		if(timer) {
			clearTimeout(timer)
		}

		timer = setTimeout(() => {
			fn.apply(this, arguments);  
		}, time)
	}
}

// 节流-一定时间内，只执行一次
function throttle(fn, time) {
	let timer
	return function() {
		if (timer) {
			timer = setTimeout(() => {
				fn.apply(this, arguments)
				timer  = null
			}, time)
		}
	}
}

今天先到这块，持续更新...