21 个简洁的 JavaScript单行代码技巧

JavaScript 发展至今已经变得越来越强大，且广泛用于前端和后端开发。

作为一名前端程序员，不断的学习精进技巧，了解JS的最新发展也是非常必要的，而简洁的一行代码示例就是很好的方法。

今天，我们有 21 个JavaScript单行代码技巧，增强我们对 JavaScript 的理解并帮助您编写更简洁、更有效的代码。展示 JavaScript 的优雅和高效。

1. 检查变量是否是数组：

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

Array.isArray() 方法检查给定变量是否是数组。

2. 获取数组中的最后一项：

const lastItem = array => array.slice(-1)[0];

通过使用负数组索引和 slice() 方法，我们可以轻松检索数组中的最后一项。

3. 生成一个范围内的随机数：

const randomNumber = (min, max) => Math.floor(Math.random() * (max - min 1)) m

使用 Math.random()、Math.floor() 和一点算术，我们可以生成指定范围内的随机数。

4. 合并两个数组：

const mergedArray = (array1, array2) => [...array1, ...array2];

扩展运算符 (...) 允许我们将两个数组合并为一个数组。

5. 从数组中删除重复项：

const uniqueArray = array => [...new Set(array)];

通过使用 Set 对象和展开运算符，我们可以轻松地消除数组中的重复值。

6. 将字符串的第一个字母大写：

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

这个简洁的代码片段将给定字符串的第一个字母大写。

7. 检查字符串是否包含子字符串：

const containsSubstring = (string, substring) => string.includes(substring);

使用includes()方法，我们可以快速判断一个字符串是否包含特定的子字符串。

8. 查找数组中的最大数字：

const maxNumber = array => Math.max(...array);

使用扩展运算符和 Math.max() 方法，我们可以轻松找到数组中的最大数字。

9. 计算数字数组的总和：

const sumArray = array => array.reduce((total, num) => total num, 0);

reduce() 方法允许我们通过迭代地将每个元素添加到运行总计中来计算数组的总和。

10. 反转字符串：

const reverseString = string => string.split('').reverse().join('');

此单行代码使用 split()、reverse() 和 join() 方法来反转给定的字符串。

11. 打乱数组：

const shuffleArray = array => array.sort(() => Math.random() - 0.5);

通过提供生成随机值的自定义排序函数，我们可以对数组的元素进行打乱。

12. 从数组中删除假值：

const truthyValues = array => array.filter(Boolean);

filter() 方法与布尔构造函数一起允许我们从数组中删除假值（例如 null、undefined 和 false）。

13. 截断字符串并在超过指定长度时添加省略号：

const truncateString = (string, maxLength) => string.length > maxLength ? string.slice(0, maxLength) '...' : string;

此单行将字符串截断为指定长度，并在超过该长度时附加省略号。

14. 查找数组中元素第一次出现的索引：

const indexOfElement = (array, element) => array.indexOf(element);

indexOf() 方法返回数组中给定元素第一次出现的索引。

15. 检查字符串是否为回文：

const isPalindrome = string => string === string.split('').reverse().join('');

这个简洁的代码片段通过将字符串与其反转版本进行比较来检查字符串是否为回文。

16. 将字符串转换为字符数组：

const stringToArray = string => Array.from(string);

Array.from() 方法将可迭代对象（例如字符串）转换为数组。

17. 生成指定范围内的数字数组：

const rangeArray = (start, end) => Array.from({length: end - start 1}, (_, i) => start i);

使用 Array.from() 方法和箭头函数，我们可以生成给定范围内的数字数组。

18. 删除字符串开头和结尾的空格：

const trimString = string => string.trim();

Trim() 方法删除字符串两端的空格。

19. 求一组数字的平均值：

const average = array => array.reduce((total, num) => total num, 0) / array.length;

通过将数组的总和除以它的长度，我们可以计算出数字的平均值。

20. 检查数字是否为偶数：

const isEven = number => number % 2 === 0;

这个简洁的代码片段通过验证数字除以 2 的余数是否为零来检查数字是否为偶数。

21. 从键值对数组创建对象：

const objectFromPairs = pairs => Object.fromEntries(pairs);

Object.fromEntries() 方法从键值对数组创建一个对象。

怎么样？这些简洁的一行代码示例，有没有让你瞬间get新技能呢？提高 JavaScript 技能并学习编写高效、让代码变优雅新方法。

最后，想要前端相关的什么知识点文章可以直接留言给我们！会在之后的发文中安排上！

让优秀的教育资源不再孤芳自赏，与你共享！

——千锋数字智慧大前端