前端入门到入土？

最新推荐文章于 2024-05-31 16:59:51 发布

鋜斗

最新推荐文章于 2024-05-31 16:59:51 发布

阅读量157

点赞数

分类专栏：前端面试文章标签：前端

本文链接：https://blog.csdn.net/weixin_68537796/article/details/134216281

版权

前端面试专栏收录该内容

28 篇文章 0 订阅

订阅专栏

文章目录

前言
什么是柯里化函数?
Web Worker 是什么？
ransition和animation的区别?
后言

前言

hello world欢迎来到前端的新世界

😜当前文章系列专栏：前端面试
🐱‍👓博主在前端领域还有很多知识和技术需要掌握，正在不断努力填补技术短板。(如果出现错误，感谢大家指出)🌹
💖感谢大家支持！您的观看就是作者创作的动力

什么是柯里化函数?

柯里化（Currying）是一种将接受多个参数的函数转换成一系列接受单个参数的函数的过程。这种转换过程使得原始函数能够部分应用（Partial Application）和复用，从而提供更大的灵活性和可读性。

在柯里化中，原始函数的每个参数都被逐个传递给一系列新函数，每个新函数只接受一个参数，并返回一个新的函数，用于接收下一个参数。这个过程可以持续到所有参数都被传递完毕，最后返回原始函数的结果。

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function (...nextArgs) {
        return curried.apply(this, args.concat(nextArgs));
      };
    }
  };
}

使用该柯里化函数，可以将一个接受多个参数的函数转换为逐个接收参数的函数序列。如下所示：

function add(a, b, c) {
  return a + b + c;
}

const curriedAdd = curry(add);
const result = curriedAdd(1)(2)(3); // 输出 6

在上述示例中，curry函数接受一个函数作为参数，并返回一个柯里化的版本。通过调用curriedAdd并逐个传递参数，可以逐步应用函数的参数并最终得到结果。

柯里化函数的优势在于它能够通过部分应用参数来创建新的函数，从而提供更大的灵活性和可复用性。它可以帮助我们更容易地构建函数组合、实现高阶函数和创建数据转换管道等功能。并且，柯里化也有助于代码的可读性和简洁性。

Web Worker 是什么？

Web Worker 是 HTML5 标准中提供的一项技术，它可以让 JavaScript 脚本在后台线程运行，从而避免阻塞 UI 线程。Web Worker 可以创建一个独立的线程来执行脚本，从而使得主线程可以专注于用户交互和响应。

特点

独立线程：Web Worker 可以在独立的线程中运行 JavaScript 代码，从而避免了在主线程中运行耗时任务的风险。
沙箱环境：Web Worker 运行的 JavaScript 代码在一个受限的沙箱环境中，不能访问与主线程共享的 DOM、全局变量等资源，从而保证了数据安全性和代码稳定性。
事件通信：Web Worker 可以通过事件来与主线程进行通信，从而实现线程间的数据传递和同步操作。

应用场景

大量计算密集型任务：任何需要进行大量计算的任务都可能会阻塞主线程，导致应用变得不流畅或无响应。通过将这些计算密集型任务放在 Web Worker 中执行，可以确保主线程的响应性，并提供更好的用户体验。
图像处理：对图像进行处理、裁剪、缩放等操作通常需要大量的计算资源和时间。将这些操作放在 Web Worker 中，可以在后台进行处理，同时保持主线程的即时响应。
数据解析和转换：当需要解析大型数据文件（如 CSV、JSON、XML 等）或执行复杂的数据转换时，这些操作可能会导致主线程的阻塞。通过在 Web Worker 中进行解析和转换，可以避免阻塞主线程，同时提高应用的性能和响应能力。
后台网络请求：如果需要进行大量的后台网络请求、数据获取或数据处理，可以考虑将这些任务放在 Web Worker 中执行。这样可以避免阻塞主线程，并允许应用保持响应，同时还可以提高网络请求的并发性能。

使用方式以及api

创建 Web Worker：
可以通过 new Worker() 构造函数创建一个 Web Worker 对象。例如，以下代码创建了一个 worker.js 文件来执行后台任务

var worker = new Worker('worker.js');

发送消息和接收消息：
Web Worker 与主线程之间的通信是通过消息传递实现的。在 Web Worker 中使用 postMessage() 方法向主线程发送消息，主线程可以通过 onmessage 事件监听这些消息。例如，在 Web Worker 中发送消息：

postMessage('Hello, main thread!');

在主线程中监听消息：

worker.onmessage = function(e) {
  console.log('Received message: ' + e.data);
};

关闭 Web Worker：
当不再需要 Web Worker 时，可以使用 terminate() 方法关闭它。例如，以下代码在 Web Worker 中调用 close() 方法关闭自身：

self.close();

异常处理：
Web Worker 运行时可能会出现异常，可以通过 onerror 事件处理这些异常。例如，在 Web Worker 中抛出一个异常：

throw new Error('An error occurred in the worker!');

在主线程中监听异常：

worker.onerror = function(e) {
  console.error('Error in worker: ' + e.message);
};

需要注意的是，Web Worker 不能直接访问 DOM 元素，它们与主线程之间通过消息传递进行通信。因此，在 Web Worker 中不能使用 alert()、prompt() 等方法，也不能操作 DOM 元素。

ransition和animation的区别?

transition（过渡）：

应用方式：transition属性用于在状态改变时平滑地过渡元素的样式。它通常是通过定义初始状态和结束状态之间的差异来实现。
控制方式：使用transition属性，你可以指定哪些属性应用过渡效果（如color、width等），以及过渡的持续时间、延迟时间、过渡效果的速度曲线等。
适用场景：transition适合于简单的状态改变，比如当鼠标悬停在一个元素上时改变其颜色或宽度。它也适用于一些简单的元素交互效果，如展开折叠菜单、切换选项卡等。

animation（动画）：

应用方式：animation属性允许你创建复杂的动画效果，通过定义一系列关键帧（@keyframes）来描述元素在不同时间点的样式。每个关键帧定义了元素在动画序列中的某个特定状态。
控制方式：使用animation属性，你可以定义动画的名称、持续时间、延迟时间、播放次数、动画速度曲线以及是否反向播放等。
适用场景：animation适用于复杂的动态效果，例如元素的旋转、缩放、移动等复杂变换。通过使用关键帧，你可以控制元素在动画过程中的每个详细状态，从而实现更多样化和复杂的动画效果。

总结：