20+ 个实用的 JavaScript 函数,助您简化代码 | JavaScript 教程

2025-06-08

20+ 个实用的 JavaScript 函数,助您简化代码 | JavaScript 教程

JavaScript 是一种函数式编程语言,函数在其中扮演着至关重要的角色。它们允许你封装可重用的代码并执行特定的任务。以下是一些函数的简单示例,可以让你的工作更轻松:

常规函数

function sum(a, b) {
  return a + b;
}
Enter fullscreen mode Exit fullscreen mode

函数表达式

const sum = function (a, b) {
  return a + b;
};
Enter fullscreen mode Exit fullscreen mode

箭头函数

const sum = (a, b) => {
  return a + b;
};
// OR
const sum = (a, b) => a + b;
Enter fullscreen mode Exit fullscreen mode

生成器函数

function* indexGenerator() {
  let index = 0;
  while (true) {
    yield index++;
  }
}
const g = indexGenerator();
console.log(g.next().value); // => 0
console.log(g.next().value); // => 1
Enter fullscreen mode Exit fullscreen mode

创建一个从 1 到 n 的数字数组

const range = (n) => Array.from({ length: n }, (_, i) => i + 1);
console.log(range(10)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Enter fullscreen mode Exit fullscreen mode

创建一个从 1 到 n 的数字数组,步长为

const range = (n, step = 1) => Array.from({ length: n }, (_, i) => i * step);
console.log(range(10, 2)); // [1, 3, 5, 7, 9]
Enter fullscreen mode Exit fullscreen mode

创建一个数组并用一个值填充它

const fill = (len, value) => Array(len).fill(value);
console.log(fill(3, 0)); // [0, 0, 0]
Enter fullscreen mode Exit fullscreen mode

打乱数组

const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());
console.log(shuffleArray([1, 2, 3, 4])); // [3, 2, 1, 4]
Enter fullscreen mode Exit fullscreen mode

从数组中删除重复项

const removeDuplicated = (arr) => [...new Set(arr)];
console.log(removeDuplicated([1, 2, 3, 3, 4, 4, 5, 5, 6])); // Result: [ 1, 2, 3, 4, 5, 6 ]

const removeDuplicate = (arr) =>
  Object.values(arr.reduce((a, b) => (a[b] ? a : { ...a, [b]: b }), {}));
console.log(removeDuplicate([1, 2, 3, 3])); // Result: [ 1, 2, 3, ]
Enter fullscreen mode Exit fullscreen mode

生成随机数

const random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
console.log(random(1, 10)); // Result: 1 ~ 10
Enter fullscreen mode Exit fullscreen mode

查找最大的数字

const findLargest = (arr) => arr.map((subArr) => Math.max(...subArr));
console.log(
  findLargest([
    [4, 5, 1, 3],
    [13, 27, 18, 26],
    [32, 35, 37, 39],
    [1000, 1001, 857, 1],
  ])
); // [5, 27, 39, 1001]
Enter fullscreen mode Exit fullscreen mode

查找最小的数字

const findSmallest = (arr) => arr.map((subArr) => Math.min(...subArr));
console.log(
  findSmallest([
    [4, 5, 1, 3],
    [13, 27, 18, 26],
    [32, 35, 37, 39],
    [1000, 1001, 857, 1],
  ])
); // [1, 18, 32, 857]
Enter fullscreen mode Exit fullscreen mode

从数组中选择一个随机元素

const pick = (arr) => arr[Math.floor(Math.random() * arr.length)];
console.log(pick([1, 2, 3, 4])); // 2
Enter fullscreen mode Exit fullscreen mode

将数组转换为对象

const toObject = (arr) => ({ ...arr });
console.log(toObject(["a", "b"])); // { 0: 'a', 1: 'b' }
Enter fullscreen mode Exit fullscreen mode

查找两个数组的交集

const intersection = (arr1, arr2) => {
  const set = new Set(arr1);
  return arr2.filter((x) => set.has(x));
};
console.log(intersection([1, 2, 3], [2, 3, 4])); // [2, 3]
Enter fullscreen mode Exit fullscreen mode

从数组中删除虚假值

const compact = (arr) => arr.filter(Boolean);
console.log(compact([0, 1, false, 2, "", 3, "a", "e" * 23, NaN, "s", 34])); // [1, 2, 3, 'a', 's', 34]
Enter fullscreen mode Exit fullscreen mode

反转字符串

const reverseString = (str) => str.split("").reverse().join("");
console.log(reverseString("hello")); // olleh
Enter fullscreen mode Exit fullscreen mode

字符串是回文吗

const isPalindrome = (str) => str === str.split("").reverse().join("");
console.log(isPalindrome("madam")); // true
Enter fullscreen mode Exit fullscreen mode

检查对象是否为空

const isEmpty = (obj) => Object.keys(obj).length === 0;
console.log(isEmpty({})); // true
Enter fullscreen mode Exit fullscreen mode

查找一个月的天数

const getDaysInMonth = (date) =>
  new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
console.log(getDaysInMonth(new Date())); // 31
Enter fullscreen mode Exit fullscreen mode

生成随机颜色

const getRandomColor = () =>
  `#${Math.floor(Math.random() * 16777215).toString(16)}`;
console.log(getRandomColor()); // #f0f0f0

const randomHex = () =>
  `#${Math.floor(Math.random() * 0xffffff)
    .toString(16)
    .padEnd(6, "0")}`;
console.log(randomHex()); // #f0f0f0
Enter fullscreen mode Exit fullscreen mode

如果你还没有读过

更多内容请访问Dev.to
关注我

Youtube Github LinkedIn Medium Stackblitz Hashnode HackerNoon

鏂囩珷鏉ユ簮锛�https://dev.to/devsmitra/20-handy-javascript-functions-to-simplify-your-code-javascript-tutorial-i0e
PREV
React 最佳实践和模式以减少代码 - 第 3 部分
NEXT
如何创建完美的自由职业者个人资料的5个技巧