掌握JavaScript 进阶秘诀：揭秘10个实用代码片段（第二部分）

2023-10-05 10:14:06

各位 JavaScript 爱好者，欢迎来到我们的进阶之旅！在第一部分中，我们揭开了 10 个实用的 JavaScript 代码片段。今天，我们将继续探索第二部分的 10 个代码片段，帮助你们进一步掌握 JavaScript 的奥秘。这些代码片段中大部分都是纯函数，让你们的代码更加简洁、高效。

纯函数的魅力

纯函数在 JavaScript 中扮演着重要的角色，它们具有以下特点：

给定相同输入，总是返回相同输出。
没有副作用，不会改变函数外部的状态。
易于测试和维护。

因此，使用纯函数可以提高代码的可预测性和可靠性。

代码片段大赏

现在，让我们一睹为快的代码片段吧！

计算数组元素的总和

const sum = (arr) => arr.reduce((a, b) => a + b, 0);

判断数组是否包含某元素

const includes = (arr, element) => arr.indexOf(element) !== -1;

返回数组中的最大值

const max = (arr) => Math.max(...arr);

返回数组中的最小值

const min = (arr) => Math.min(...arr);

将字符串转换为驼峰式

const toCamelCase = (str) => str.replace(/[-_](.)/g, (_, c) => c.toUpperCase());

将字符串转换为短横线分隔式

const toKebabCase = (str) => str.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);

克隆对象

const clone = (obj) => JSON.parse(JSON.stringify(obj));

深度克隆对象

const deepClone = (obj) => {
  const copy = {};
  for (const key in obj) {
    copy[key] = typeof obj[key] === "object" ? deepClone(obj[key]) : obj[key];
  }
  return copy;
};

延迟执行函数

const delay = (fn, ms) => setTimeout(fn, ms);

节流函数

const throttle = (fn, ms) => {
  let isThrottled = false;
  return (...args) => {
    if (!isThrottled) {
      fn(...args);
      isThrottled = true;
      setTimeout(() => {
        isThrottled = false;
      }, ms);
    }
  };
};