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

这篇具有很好参考价值的文章主要介绍了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 技能并学习编写高效、让代码变优雅新方法。

更多前端精彩视频欢迎B站搜索“千锋教育” 

千锋前端浠浠呀老师HTML+CSS教程,零基础web前端开发入门必看视频文章来源地址https://www.toymoban.com/news/detail-716146.html

到了这里,关于21 个简洁的 JavaScript单行代码技巧的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 协众信息 Web前端入门技巧

          编程思维     学习web前端开发核心在于一个“编程思维”,因为每段代码都不一样,都需要分别去看,所以只要你掌握了学习web前端的编程思维,那么写程序对于你来说,就只是先分析业务,然后编码就可以了。     代码量     任何一个web前端开发高手都是大

    2024年02月08日
    浏览(39)
  • Web前端-JavaScript

    目录 1 概述 2 HTML嵌入JS代码三种方式 2.1 第一种方式 2.2 第二种方式 2.3 第三种方式 3 变量 4 数据类型 4.1 概述 4.2 Number数据类型  4.3 几个值得注意的函数 4.4 Boolean数据类型  4.5 String数据类型 4.6 关于Object类型 4.7 NaN、undefined、null的区别 4 函数 5 事件 5.1 JS中有哪些常用的事件

    2024年02月09日
    浏览(63)
  • 前端vue入门(纯代码)21_vuex

    努力不一定成功,但是,不努力一定很轻松!!! 【 23.Vuex 】 [可以去官网看看Vuex3文档](Vuex 是什么? | Vuex (vuejs.org)) 问题1:Vuex是什么? 【官方理解1】:Vuex 是一个专为 Vue.js 应用程序开发的 状态【数据】管理模式 。它采用集中式存储管理应用的所有组件的状态,并以相应

    2024年02月13日
    浏览(55)
  • Web前端 Javascript笔记3

     内存中的生命周期         1、内存分配         2、内存使用(读写)         3、内存回收,使用完毕之后,垃圾回收器完成         内存泄漏:该回收的,由于某些未知因素,未释放,叫做内存泄漏 栈:数据存在其中会自动释放 堆:对象,根据程序员的操作来决定释

    2024年04月15日
    浏览(47)
  • web前端框架Javascript之JavaScript 异步编程史

    早期的 Web 应用中,与后台进行交互时,需要进行 form 表单的提交,然后在页面刷新后给用户反馈结果。在页面刷新过程中,后台会重新返回一段 HTML 代码,这段 HTML 中的大部分内容与之前页面基本相同,这势必造成了流量的浪费,而且一来一回也延长了页面的响应时间,总

    2024年02月14日
    浏览(58)
  • web前端Javascript—7道关于前端的面试题

    本文主要是web前端Javascript—的面试题,附上相关问题以及解决答案,希望对大家web前端Javascript闭包的学习有所帮助。 每个JavaScript 程序员都必须知道闭包是什么。在 JavaScript 面试中,你很可能会被问到的问题 以下是 7 个有关 JavaScript的面试题,比较有挑战性。不要查看答案

    2024年02月03日
    浏览(101)
  • web前端javascript笔记——(13)事件(1)

    鼠标/键盘属性 altKey               返回当事件被触发时,“ALT”是否被按下。 button               返回当事件被触发时,哪个鼠标按钮被点击 clientX               返回当事件被触发时,鼠标指针的水平坐标。 clientY               返回当事件被触

    2024年01月25日
    浏览(52)
  • web前端javaScript笔记——(11)DOM

    属性                                     此事件发生在何时 onabort 图像的加载被中断。 onblur                                   元素失去焦点。 anchange                                 域的内容被改变 onclick  当用户点击某

    2024年01月19日
    浏览(60)
  • HTTPS是如何保证安全的,web前端开发工程师,前端开发自学技巧

    非对称加密 浏览器发送给服务端 一系列加密方法 服务端发送给浏览器 加密方法以及公钥 之后浏览器通过公钥将数据加密传输给服务端,服务端收到数据使用私钥进行解密。服务端给浏览器发送数据,则使用私钥进行加密,浏览器收到服务端发送过来的数据,使用公钥进行

    2024年04月13日
    浏览(47)
  • 2023年web前端开发之JavaScript进阶(一)

    接上篇博客进行学习,通俗易懂,详细 博客地址: 2023年web前端开发之JavaScript基础(五)基础完结_努力的小周同学的博客-CSDN博客 学习 作用域 、变量提升、 闭包 等语言特征,加深对 JavaScript 的理解,掌握变量赋值、函数声明的简洁语法, 降低代码的冗余度 。 理解作用域对程序

    2024年02月03日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包