20 个 JavaScript 单行代码助你写出专业代码

2025-05-26

20 个 JavaScript 单行代码助你写出专业代码

JavaScript 不断发展，为
市场上新的“技术极客”打开了大门，因为它是最容易上手的语言之一。（真的是这样吗？）

确实，JavaScript 可以做很多令人惊叹的事情！而且还有很多东西需要学习。

无论您是 JavaScript 新手还是专业开发人员，学习新知识总是有益的。

我将介绍一些非常有用的单行代码（20 +奖励），它们可以帮助您提高工作效率并有助于调试代码。

单行代码到底是什么？

单行代码是一种代码实践，我们只用一行代码即可执行某些功能。

01 - 获取随机布尔值

此函数将使用 Math.random() 方法返回布尔值（true 或 false）。Math.random
会创建一个介于 0 到 1 之间的随机数，然后我们会检查它是否大于或小于 0.5。
这意味着返回 true 或 false 的概率是 50%。

const getRandomBoolean = () => Math.random() >= 0.5;

console.log(getRandomBoolean());
// a 50/50 chance of returning true or false
Enter fullscreen mode Exit fullscreen mode

02 - 检查日期是否为周末

通过此功能，您将能够检查所提供的日期是工作日还是周末。

const isWeekend = (date) => [0, 6].indexOf(date.getDay()) !== -1;

console.log(isWeekend(new Date(2021, 4, 14)));
// false (Friday)
console.log(isWeekend(new Date(2021, 4, 15)));
// true (Saturday)
Enter fullscreen mode Exit fullscreen mode

03 - 检查数字是偶数还是奇数

简单的实用函数，用于检查数字是偶数还是奇数。

const isEven = (num) => num % 2 === 0;

console.log(isEven(5));
// false
console.log(isEven(4));
// true
Enter fullscreen mode Exit fullscreen mode

04 - 获取数组中的唯一值

一个非常简单的方法，可以从数组中删除所有重复值。此函数将数组转换为 Set，然后再转换回数组。

const uniqueArr = (arr) => [...new Set(arr)];

console.log(uniqueArr([1, 2, 3, 1, 2, 3, 4, 5]));
// [1, 2, 3, 4, 5]
Enter fullscreen mode Exit fullscreen mode

05 - 检查变量是否为数组

一个简洁易懂的方法来检查一个变量是否是数组。

当然，还有其他方法 😉

const isArray = (arr) => Array.isArray(arr);

console.log(isArray([1, 2, 3]));
// true
console.log(isArray({ name: 'Ovi' }));
// false
console.log(isArray('Hello World'));
// false
Enter fullscreen mode Exit fullscreen mode

06 - 生成两个数字之间的随机数

这将以两个数字作为参数，并在这两个数字之间生成一个随机数！

const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);

console.log(random(1, 50));
// could be anything from 1 - 50
Enter fullscreen mode Exit fullscreen mode

07 – 生成随机字符串（唯一 ID？）

也许您需要为某些东西创建一个临时的唯一 ID，这里有一个技巧，您可以使用它随时生成随机字符串。

const randomString = () => Math.random().toString(36).slice(2);

console.log(randomString());
// could be anything!!!
Enter fullscreen mode Exit fullscreen mode

08 - 滚动到页面顶部

window.scrollTo ()方法接受一个x和y坐标作为滚动目标。
如果我们分别将这两个值设置为零，我们就会滚动到页面顶部。

const scrollToTop = () => window.scrollTo(0, 0);

scrollToTop();
Enter fullscreen mode Exit fullscreen mode

09 - 切换布尔值

切换布尔值是一个非常基本的编程问题，可以用很多不同的方法来解决。与其使用 if 语句来确定要将布尔值设置为什么值，不如使用函数中的!
“非” 运算符来翻转当前值。

// bool is stored somewhere in the upperscope
const toggleBool = () => (bool = !bool);
Enter fullscreen mode Exit fullscreen mode

10 - 交换两个变量

下面的代码是交换两个变量的较简单的方法之一，无需使用第三个变量，只需一行代码。

[foo, bar] = [bar, foo];
Enter fullscreen mode Exit fullscreen mode

11 - 计算两个日期之间的天数

要计算两个日期之间的天数，
我们首先找到两个日期之间的绝对值，然后将其除以 86400000（等于一天中的毫秒数），最后对结果进行四舍五入并返回。

const daysDiff = (date, date2) => Math.ceil(Math.abs(date - date2) / 86400000);

console.log(daysDiff(new Date('2021-05-10'), new Date('2021-11-25')));
// 199
Enter fullscreen mode Exit fullscreen mode

12 - 将文本复制到剪贴板

PS：您可能需要添加检查以查看navigator.clipboard.writeText是否存在

const copyTextToClipboard = async (text) => {
  await navigator.clipboard.writeText(text);
};
Enter fullscreen mode Exit fullscreen mode

13 - 合并多个数组的不同方法

合并数组有几种方法。其中一种是使用“concat”方法。另一种是使用扩展运算符（“…”）。

PS：我们还可以使用“Set”对象从最终数组中取出任何重复项。

// Merge but don't remove the duplications
const merge = (a, b) => a.concat(b);
// Or
const merge = (a, b) => [...a, ...b];

// Merge and remove the duplications
const merge = [...new Set(a.concat(b))];
// Or
const merge = [...new Set([...a, ...b])];
Enter fullscreen mode Exit fullscreen mode

14 - 获取 JavaScript 原语的实际类型

人们有时会使用库来查找 JavaScript 中某些东西的实际类型，这个小技巧可以节省您的时间（和代码大小）。

const trueTypeOf = (obj) => {
  return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
};

console.log(trueTypeOf(''));
// string
console.log(trueTypeOf(0));
// number
console.log(trueTypeOf());
// undefined
console.log(trueTypeOf(null));
// null
console.log(trueTypeOf({}));
// object
console.log(trueTypeOf([]));
// array
console.log(trueTypeOf(0));
// number
console.log(trueTypeOf(() => {}));
// function
Enter fullscreen mode Exit fullscreen mode

15 - 在末尾截断字符串

需要从末尾截断字符串，没问题！

const truncateString = (string, length) => {
  return string.length < length ? string : `${string.slice(0, length - 3)}...`;
};

console.log(
  truncateString('Hi, I should be truncated because I am too loooong!', 36),
);
// Hi, I should be truncated because...
Enter fullscreen mode Exit fullscreen mode

16 - 从中​​间截断字符串

那么如何从中间截断字符串呢？

这个函数将一个字符串作为第一个参数，然后将我们需要的字符串大小作为第二个参数，最后将我们需要的从开始到结束的字符数作为第三个和第四个参数。

const truncateStringMiddle = (string, length, start, end) => {
  return `${string.slice(0, start)}...${string.slice(string.length - end)}`;
};

console.log(
  truncateStringMiddle(
    'A long story goes here but then eventually ends!', // string
    25, // total size needed
    13, // chars to keep from start
    17, // chars to keep from end
  ),
);
// A long story ... eventually ends!
Enter fullscreen mode Exit fullscreen mode

17 - 将字符串大写

好吧，不幸的是，JavaScript 没有内置函数来将字符串大写，但这种解决方法可以帮助您实现目标。

const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);

console.log(capitalize('hello world'));
// Hello world
Enter fullscreen mode Exit fullscreen mode

18 - 检查当前选项卡是否在视图/焦点中

这个简单的辅助方法根据选项卡是否处于视图/焦点中返回 true 或 false

const isTabInView = () => !document.hidden;  // Not hidden

isTabInView();
// true/false
Enter fullscreen mode Exit fullscreen mode

19 - 检查用户是否使用 Apple 设备

如果用户使用的是 Apple 设备，则返回 true

const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform);

console.log(isAppleDevice);
// true/false
Enter fullscreen mode Exit fullscreen mode

20 - 三元运算符

当您想在一行中编写if..else语句时，这是一个很好的代码保存器。

// Longhand
const age = 18;
let greetings;

if (age < 18) {
  greetings = 'You are not old enough';
} else {
  greetings = 'You are young!';
}

// Shorthand
const greetings = age < 18 ? 'You are not old enough' : 'You are young!';
Enter fullscreen mode Exit fullscreen mode

奖励 - 短路求值速记

将一个变量的值赋给另一个变量时，可能需要确保源变量不为 null、undefined 或空。
您可以编写一个包含多个条件的长if语句，也可以使用短路求值。

// Longhand
if (name !== null || name !== undefined || name !== '') {
  let fullName = name;
}

// Shorthand
const fullName = name || 'buddy';
Enter fullscreen mode Exit fullscreen mode

好了，各位！希望这篇文章对你有帮助，别忘了把你的邮箱添加到我网站的邮件列表中😉

文章来源：https://dev.to/ovi/20-javascript-one-liners-that-will-help-you-code-like-a-pro-4ddc
Devto 翻译
PREV
数据库命名标准介绍表名列名总结
NEXT
在 React 中正确排序导入