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

开发 前端
JavaScript 是一种多功能且功能强大的编程语言,广泛用于前端和后端开发。

JavaScript 是一种多功能且功能强大的编程语言,广泛用于前端和后端开发。

作为一名 JavaScript 开发人员,不断提高您的技能并了解该语言的最新进展非常重要。

实现这一目标的一种方法是探索简洁的一行代码示例,这些示例展示了 JavaScript 的优雅和高效。

因此,在今天这篇文章中,我们将深入研究 21 个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() 方法从键值对数组创建一个对象。

通过探索这些简洁的一行代码示例,您可以提高 JavaScript 技能并学习编写高效、优雅代码的新方法。

尝试将这些片段合并到您的项目中以增强您的开发工作流程。

请记住始终努力提高代码的可读性和可维护性,平衡简洁性和清晰度。 

责任编辑:华轩 来源: web前端开发
相关推荐

2022-11-28 23:44:26

JavaScript技巧程序员

2022-12-28 17:20:03

JavaScript解决方案

2024-03-28 14:29:46

JavaScript编程

2024-01-30 08:54:05

JavaScript技巧代码

2023-05-04 23:54:02

JavaScrip代码技巧

2022-08-28 19:03:18

JavaScript编程语言开发

2023-02-15 16:19:59

JavaScript技巧API

2019-07-31 10:24:16

JavaScript浏览器口袋妖怪

2013-07-22 10:01:03

JavascriptWeb

2023-05-30 15:11:16

JavaScrip开发功能

2022-12-19 15:23:51

JavaScrip开发语言

2022-10-20 15:16:23

JavaScript数组技能

2023-06-19 15:36:30

JavaScrip技巧开发

2023-10-10 16:20:38

JavaScript代码技巧

2020-08-06 16:34:48

Python开发工具

2022-05-10 10:28:21

JavaScript代码

2022-09-02 23:08:04

JavaScript技巧开发

2023-06-14 15:51:48

JavaScript

2023-03-13 16:08:00

JavaScript数组函数

2023-08-01 14:36:00

JavaScript开发
点赞
收藏

51CTO技术栈公众号