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编程效率，并实现更好的用户体验。请阅读示例代码并在自己的应用程序中使用它们。