15个值得收藏的JavaScript函数

15个值得收藏的JavaScript函数

介绍

在网页应用程序中,JavaScript是常用的编程语言之一。它有许多有用的函数,可以提高程序的效率和交互性。在这篇文章中,我们将介绍“15个值得收藏的JavaScript函数”,这些函数涵盖了从日期和时间到字符串和数学的各个方面。希望这篇文章能够帮助您提高JavaScript编程能力。

日期和时间

1. getCurrentDate()

这个函数可以获取当前的日期时间,返回一个字符串。

function getCurrentDate() {
  const now = new Date();
  const year = now.getFullYear();
  const month = now.getMonth() + 1;
  const date = now.getDate();
  const hours = now.getHours();
  const minutes = now.getMinutes();
  const seconds = now.getSeconds();
  const formattedDate = `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;
  return formattedDate;
}

const currentDate = getCurrentDate();
console.log(currentDate);
// 2022-10-14 15:05:31

2. getDaysDiff()

这个函数可以返回两个日期相差的天数。

function getDaysDiff(startDate, endDate) {
  const oneDay = 1000 * 60 * 60 * 24;
  const diffInTime = endDate.getTime() - startDate.getTime();
  const diffInDays = Math.ceil(diffInTime / oneDay);
  return diffInDays;
}

const startDate = new Date('2022-10-01');
const endDate = new Date('2022-10-14');
const daysDiff = getDaysDiff(startDate, endDate);
console.log(daysDiff);
// 14

数字

3. formatNumberDecimal()

这个函数可以格式化数字为指定小数位数。

function formatNumberDecimal(number, numOfDecimals) {
  const divisor = 10 ** numOfDecimals;
  const formattedNumber = Math.floor(number * divisor) / divisor;
  return formattedNumber;
}

const number = 3.1415926;
const formattedNumber = formatNumberDecimal(number, 2);
console.log(formattedNumber);
// 3.14

4. getRandomNumber()

这个函数可以返回指定范围内的随机整数。

function getRandomNumber(min, max) {
  const randomNumber = Math.floor(Math.random() * (max - min + 1) + min);
  return randomNumber;
}

const randomNumber = getRandomNumber(1, 10);
console.log(randomNumber);
// 随机输出范围为1到10之间的整数

字符串

5. capitalizeFirstLetter()

这个函数可以将字符串的首字母转换为大写。

function capitalizeFirstLetter(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

const inputStr = 'hello world';
const capitalizedStr = capitalizeFirstLetter(inputStr);
console.log(capitalizedStr);
// Hello world

6. countOccurrences()

这个函数可以计算字符串中特定字符的出现次数。

function countOccurrences(str, character) {
  const regex = new RegExp(character, 'g');
  const matches = str.match(regex);
  const count = matches ? matches.length : 0;
  return count;
}

const inputStr = 'hello world';
const character = 'o';
const occurrences = countOccurrences(inputStr, character);
console.log(occurrences);
// 2

数组

7. findMax()

这个函数可以返回数组中的最大值。

function findMax(arr) {
  const maxVal = Math.max(...arr);
  return maxVal;
}

const arr = [1, 3, 5, 2, 4];
const maxVal = findMax(arr);
console.log(maxVal);
// 5

8. shuffleArray()

这个函数可以将数组的元素随机排序。

function shuffleArray(arr) {
  const shuffledArr = arr.sort(() => Math.random() - 0.5);
  return shuffledArr;
}

const arr = [1, 2, 3, 4, 5];
const shuffledArr = shuffleArray(arr);
console.log(shuffledArr);
// 示例输出 [4, 1, 5, 3, 2] or [2, 4, 3, 5, 1] 等随机顺序

对象

9. objectToArray()

这个函数可以将对象转换为包含键值对的数组。

function objectToArray(obj) {
  const arr = Object.entries(obj);
  return arr;
}

const obj = { name: 'Alice', age: 30 };
const arr = objectToArray(obj);
console.log(arr);
// [['name', 'Alice'], ['age', 30]]

10. mergeObjects()

这个函数可以将多个对象合并为一个对象。

function mergeObjects(obj1, obj2, obj3) {
  const mergedObject = { ...obj1, ...obj2, ...obj3 };
  return mergedObject;
}

const obj1 = { name: 'Alice' };
const obj2 = { age: 30 };
const obj3 = { location: 'New York' };
const mergedObject = mergeObjects(obj1, obj2, obj3);
console.log(mergedObject);
// { name: 'Alice', age: 30, location: 'New York' }

函数

11. debounce()

这个函数可以防抖,指定时间(如2000ms)之后才会执行函数。

function debounce(func, delay) {
  let timeout;
  return function () {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
}

function search(query) {
  console.log(`Searching for ${query}...`);
}

const debouncedSearch = debounce(search, 2000);
debouncedSearch('JavaScript');
// 执行search函数将会在2秒后触发打印输出

12. throttle()

这个函数可以节流,参考自lodash.throttle函数,指定时间内(如1000ms)间隔执行函数。

function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function () {
    const context = this;
    const args = arguments;
    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(function () {
        if (Date.now() - lastRan >= limit) {
          func.apply(context, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
}

function logMousePosition(e) {
  console.log(`Mouse position (x: ${e.clientX}, y: ${e.clientY})`);
}

const throttledLogMousePosition = throttle(logMousePosition, 1000);
document.addEventListener('mousemove', throttledLogMousePosition);
// 鼠标移动时,每隔1秒打印输出一次鼠标位置

数学

13. getAverage()

这个函数可以计算数组中数值的平均值。

function getAverage(arr) {
  const sum = arr.reduce((acc, curr) => acc + curr, 0);
  const avg = sum / arr.length;
  return avg;
}

const arr = [1, 2, 3, 4, 5];
const avg = getAverage(arr);
console.log(avg);
// 3

14. convertDegreeToRadian()

这个函数可以将角度转换为弧度。

function convertDegreeToRadian(degrees) {
  const radian = (Math.PI / 180) * degrees;
  return radian;
}

const degrees = 90;
const radian = convertDegreeToRadian(degrees);
console.log(radian);
// 1.5708 (弧度制下的90度)

15. getSum()

这个函数可以返回任意数量参数的和。

function getSum(...args) {
  const sum = args.reduce((acc, curr) => acc + curr, 0);
  return sum;
}

const sum = getSum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
console.log(sum);
// 55

结论

这篇文章介绍了15个有用的JavaScript函数,这些函数可以用于日期,数字,字符串,数组,对象,函数和数学。使用这些函数可以提高JavaScript编程效率,并实现更好的用户体验。请阅读示例代码并在自己的应用程序中使用它们。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:15个值得收藏的JavaScript函数 - Python技术站

(0)
上一篇 2023年5月18日
下一篇 2023年5月18日

相关文章

  • JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例

    JavaScript 斐波那契数列 倒序输出 斐波那契数列 斐波那契数列是指从 0 和 1 开始,之后的数都是前面两个数之和。例如: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, … 斐波那契数列在计算机科学中有广泛的应用,例如在算法分析、密码学等领域。 倒序输出 倒序输出指将正序输出的序列反转,例如将 [1, 2, 3] 输出为 […

    JavaScript 2023年5月28日
    00
  • 使用script的src实现跨域和类似ajax效果

    使用script的src属性实现跨域和类似ajax效果,是一种常见的解决网页数据获取和展示的方式。下面就具体讲解如何实现。 利用script的src属性解决跨域问题 当在网页中使用script的src属性加载跨域资源时,会受到同源策略的限制,无法直接获取资源。但我们可以通过一些技巧来绕过同源策略的限制,从而实现跨域。 JSONP JSONP是一种常用的跨域解…

    JavaScript 2023年6月11日
    00
  • Javascript Array join 方法

    以下是关于JavaScript Array join方法的完整攻略。 JavaScript Array join方法 JavaScript Array join方法用于将数组中的所有元素转换为一个字符串。该方法将数组中的每个元素转换为字符串,并使用指定的分隔符将它们连接起来。如果没有指定分隔符,则默认使用逗号作为分隔符。 下面是一个使用join方法的示例: …

    JavaScript 2023年5月11日
    00
  • 使用JavaScript正则表达式如何去掉双引号

    当我们需要使用JavaScript去掉字符串中的双引号时,可以使用正则表达式来实现。下面是具体的步骤: 1. 使用正则表达式替换方式 JavaScript的字符串replaceAll()方法可以接收两个参数,第一个参数表示需要替换的字符串,第二个参数则表示用来替换的字符串。我们可以将第二个参数设置为空字符串,就可以实现去掉双引号的效果。 下面是一个示例: c…

    JavaScript 2023年6月10日
    00
  • vscode 对 typescript代码调试的步骤

    下面是详细讲解“vscode 对 TypeScript 代码调试的步骤”的完整攻略: 步骤一:安装插件 在使用 vscode 进行 TypeScript 调试之前,我们需要先安装一个适合于 TypeScript 的插件:Debugger for Chrome。 安装方式如下: 在 vscode 左侧侧边栏的面板中选择 Extensions 按钮; 搜索 De…

    JavaScript 2023年6月11日
    00
  • javascript 选择文件夹对话框(web)

    当我们需要让用户选择文件夹时,可以使用 JavaScript 提供的 webkitdirectory 属性,以展示一个选择文件夹的对话框。下面是具体的步骤: HTML 首先,在 HTML 中添加按钮或其他操作元素,以触发选择文件夹的对话框。 <button onclick="openFolder()">选择文件夹</bu…

    JavaScript 2023年5月27日
    00
  • JavaScript常用标签和方法总结

    针对这个话题,我准备了以下完整攻略。 JavaScript常用标签和方法总结 标签 在JavaScript中,我们通常使用以下标签: \<script> – 嵌入JavaScript代码的标签,可以放在HTML的\<head>或\<body>中。 \<button> – 创建一个按钮元素,可以用JavaScri…

    JavaScript 2023年5月18日
    00
  • Js+Jq获取URL参数的集中方法示例代码

    获取 URL 参数是前端开发中经常用到的操作,下面是使用 JavaScript 和 jQuery 获取 URL 参数的示例代码及详细说明。 JavaScript 获取 URL 参数 1. 使用 split 方法和正则表达式分隔字符串 JavaScript 中可以使用 split 方法和正则表达式来截断字符串,然后将获取到的参数与对应的值存储在一个对象中。示例…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部