JavaScript 中的类型转换机制
JavaScript是一种动态弱类型语言，它具有一套自动类型转换机制，用于将一个数据类型转换为另一个数据类型。以下是JavaScript中常见的类型转换机制：
1. 隐式类型转换（Implicit Conversion）
在某些情况下，JavaScript会自动进行类型转换，以满足需要。例如，使用"+"运算符时，如果其中一个操作数是字符串，JavaScript会将其他操作数转换为字符串进行拼接。
console.log(5 + "10"); // 输出 "510"
2. 显式类型转换（Explicit Conversion）
也称为强制类型转换，开发人员可以使用内置函数或语法来显式地转换类型。
- 使用Number()函数将值转换为数字类型：
console.log(Number("10")); // 输出 10 console.log(Number("Hello")); // 输出 NaN
- 使用String()函数将值转换为字符串类型：
console.log(String(5)); // 输出 "5" console.log(String(true)); // 输出 "true"
- 使用Boolean()函数将值转换为布尔类型：
console.log(Boolean(0)); // 输出 false console.log(Boolean("")); // 输出 false console.log(Boolean("Hello")); // 输出 true
还有其他一些更专门的类型转换函数，比如parseInt()和parseFloat()用于将字符串转换为整数和浮点数。
需要注意的是，类型转换可能会导致一些意想不到的结果和错误，因此在进行类型转换时需要谨慎，并且要确保转换后的结果符合预期。
什么是防抖和节流？有什么区别？如何实现？
防抖（Debounce）和节流（Throttle）是两种常用于优化前端性能的技术。
1. 防抖
防抖的目的是减少函数的调用次数。
当一个事件触发后，如果在指定的时间间隔内又触发了该事件，那么就会重新计时。只有当指定的时间间隔过去后，才会执行函数。这样可以避免频繁实时的触发计算或渲染的操作，提升性能。
实现防抖的一种常见方式是使用setTimeout函数和clearTimeout函数配合使用，具体实现如下：
function debounce(func, delay) { let timeoutId; return function(...args) { clearTimeout(timeoutId); timeoutId = setTimeout(() => { func.apply(this, args); }, delay); }; } // 使用防抖函数包装事件处理函数 const debouncedHandler = debounce(handleInput, 300); element.addEventListener('input', debouncedHandler);
2. 节流
节流的目的是减少函数的执行次数。
当一个事件触发后，只会在指定的时间间隔内执行一次函数。间隔期间的额外触发会被忽略，以避免过于频繁的执行函数。
实现节流的一种常见方式是使用时间戳（记录上次执行的时间）和定时器（设置下次执行的时间）配合使用，具体实现如下：
function throttle(func, delay) { let lastExecutionTime = 0; let timeoutId; return function(...args) { const currentTime = Date.now(); const remainingTime = delay - (currentTime - lastExecutionTime); clearTimeout(timeoutId); if (remainingTime <= 0) { func.apply(this, args); lastExecutionTime = currentTime; } else { timeoutId = setTimeout(() => { func.apply(this, args); lastExecutionTime = Date.now(); }, remainingTime); } }; } // 使用节流函数包装事件处理函数 const throttledHandler = throttle(handleScroll, 500); window.addEventListener('scroll', throttledHandler);
区别：
- 防抖是在指定的时间间隔后执行函数，如果在此期间内再次触发事件，会重新计时。而
节流是在指定的时间间隔内，每隔一段时间执行一次函数。 - 防抖适合在用户输入实时搜索、拖拽调整窗口大小等需要延迟执行的场景。
节流适合在滚动事件、窗口大小改变事件等需要控制执行频率的场景。
需要根据实际需求选择使用防抖或节流来优化函数的执行频率，提升性能和用户体验。
Event Loop 看 JS 的运行机制
JavaScript引擎遵循的运行机制被称为Event Loop（事件循环）。
它控制着JavaScript代码的执行顺序和异步操作的处理。
下面是Event Loop的主要组成部分和运行流程：
1. 调用栈（Call Stack）
JavaScript代码在执行过程中使用调用栈来跟踪函数调用的位置。所有的同步任务都会按照执行顺序进入调用栈中执行。
2. 任务队列（Task Queue）
任务队列用于存储异步任务的回调函数。当异步任务完成时，会将其回调函数放入任务队列中等待执行。
3. 事件循环（Event Loop）
事件循环是一个持续运行的循环，它不断地检查调用栈和任务队列，按照特定的顺序将任务移动到调用栈中执行。
事件循环的运行流程如下：
- 首先，JavaScript引擎会执行调用栈中的同步任务，直到调用栈为空。
- 当遇到异步任务时（如定时器、事件监听器、网络请求等），会将其回调函数放入任务队列中，而不是立即执行。
- 当调用栈为空时，事件循环会检查任务队列。
- 如果任务队列中有待执行的任务，事件循环就会将其中的一个任务（根据具体算法决定顺序）移出任务队列，并将其回调函数推入调用栈中执行。
- 当任务被执行完毕后，可能会产生新的异步任务，它们会被添加到任务队列中等待执行。
- 上述步骤不断重复，形成事件循环，保证JavaScript代码的持续执行和异步操作的处理。
需要注意的是，由于JavaScript是单线程的，事件循环机制让我们能够处理异步任务而不会阻塞主线程的执行。
总结来说，Event Loop是控制JavaScript代码执行顺序和处理异步操作的机制，通过调用栈和任务队列来实现。它使得JavaScript能够处理异步任务而不会阻塞主线程的执行，从而提供了更好的用户体验和性能。
Map与常规对象有什么区别？
Map和常规对象（普通对象）是JavaScript中两种不同的数据结构，它们具有一些区别和适用场景。
下面是一个表格，用于对比Map和常规对象的特点：
| 特点 | 常规对象 | Map |
| 键的类型 | 字符串或符号 | 任意数据类型 |
| 键值对顺序 | 不确定的 | 插入顺序保持一致 |
| 遍历和迭代 | for…in循环 | 迭代器和forEach方法 |
| 大小的获取 | 手动计算 | 使用size属性 |
| 继承 | 可以继承自其他对象 | 不继承自其他对象 |
| 性能 | 一般性能 | 在大量键值对场景下有优势 |
根据上述特点，可以根据具体的需求来选择使用常规对象或Map来存储和操作键值对。
- 键的类型：在常规对象中，键只能是字符串或符号（Symbol）类型，而在Map中，键可以是任意数据类型，包括基本类型和对象引用等。
- 键值对的顺序：在常规对象中，键值对的顺序是不确定的，因为对象是无序的。而在Map中，键值对会按照插入的顺序进行存储，并且可以通过迭代器按照插入顺序进行遍历。
- 遍历和迭代：在常规对象中，可以通过for…in循环遍历键值对，但是遍历的顺序是不确定的。而在Map中，提供了迭代器（Iterator）和forEach方法来遍历键值对，保证了顺序的一致性。
- 大小的获取：在常规对象中，要获取对象中属性的数量，需要手动计算。而在Map中，可以使用size属性直接获取Map中键值对的数量。
- 继承：常规对象可以继承自其他对象，从而继承了原型链上的属性和方法。而Map不是继承自其他对象，它是一个独立的数据结构。
- 性能：在大量键值对需要增删改查的场景下，Map相比于常规对象的性能更佳。
适用场景：
- 如果需要根据特定的键进行查找、增加、删除和修改操作，并且不关心键值对的顺序，常规对象是一个不错的选择。
- 如果需要保持键值对的顺序、迭代顺序可预测，或者键的类型不仅限于字符串或符号，使用Map更为合适。
需要根据具体的需求选择使用常规对象或Map来存储和操作键值对，以满足不同的场景和要求。
