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 timerreturn function() {if(timer) {clearTimeout(timer)}timer = setTimeout(() => {fn.apply(this, arguments); }, time)}
}// 节流-一定时间内,只执行一次
function throttle(fn, time) {let timerreturn function() {if (timer) {timer = setTimeout(() => {fn.apply(this, arguments)timer = null}, time)}}
}
今天先到这块,持续更新...