学会这20+个JavaScript单行代码,让你像专业人士一样编写代码

本篇文章给大家介绍20+个javascript单行代码,可以帮助你像专业人士一样编写代码。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

学会这20+个JavaScript单行代码,让你像专业人士一样编写代码

JavaScript不断发展壮大,

因为它是最容易上手的语言之一,因此为市场上的新成为技术怪才打开了大门。(问号脸?)

的确,JavaScript可以做很多出色的事情!还有很多东西要学习。

立即学习“Java免费学习笔记(深入)”;

而且,无论你是JavaScript的新手还是更多的专业开发人员,学习新知识总是一件好事。

本文整理了一些非常有用的单行代码(20+),这些单行代码可以帮助你提高工作效率并可以帮助调试代码。

什么是单行代码?

单行代码是一种代码实践,其中我们仅用一行代码执行某些功能。

01-随机获取布尔值

此函数将使用Math.random()方法返回布尔值(真或假)。
Math.random创建一个介于0和1之间的随机数,然后我们检查它是否大于或小于0.5。
这意味着有50/50的机会会得到对或错。

1.png

const getRandomBoolean = () => Math.random() >= 0.5;console.log(getRandomBoolean());// a 50/50 chance of returning true or false

登录后复制

02-检查日期是否为周末

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

2.png

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)

登录后复制

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

简单的实用程序功能,用于检查数字是偶数还是奇数。

3.png

const isEven = (num) => num % 2 === 0;console.log(isEven(5));// falseconsole.log(isEven(4));// true

登录后复制

04-获取数组中的唯一值(数组去重)

从数组中删除所有重复值的非常简单的方法。此函数将数组转换为Set,然后返回数组。

4.png

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

登录后复制

05-检查变量是否为数组

一种检查变量是否为数组的干净简便的方法。

当然,也可以有其他方法

5.png

const isArray = (arr) => Array.isArray(arr);console.log(isArray([1, 2, 3]));// trueconsole.log(isArray({ name: 'Ovi' }));// falseconsole.log(isArray('Hello World'));// false

登录后复制

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

这将以两个数字为参数,并将在这两个数字之间生成一个随机数!

const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);console.log(random(1, 50));// could be anything from 1 - 50

登录后复制

07-生成随机字符串(唯一ID?)

也许你需要临时的唯一ID,这是一个技巧,你可以使用它在旅途中生成随机字符串。

7.png

const randomString = () => Math.random().toString(36).slice(2);console.log(randomString());// could be anything!!!

登录后复制

08-滚动到页面顶部

所述window.scrollTo()方法把一个X和Y坐标滚动到。
如果将它们设置为零和零,我们将滚动到页面顶部。

8.png

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

登录后复制

09-切换布尔

切换布尔值是非常基本的编程问题之一,可以通过许多不同的方法来解决。
代替使用if语句来确定将布尔值设置为哪个值,你可以使用函数使用!翻转当前值。非运算符。

9.png

// bool is stored somewhere in the upperscopeconst toggleBool = () => (bool = !bool);//orconst toggleBool = b => !b;

登录后复制

10-交换两个变量

下面的代码是不使用第三个变量而仅使用一行代码即可交换两个变量的更简单方法之一。

10.png

[foo, bar] = [bar, foo];

登录后复制

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

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

11.png

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

登录后复制

12-将文字复制到剪贴板

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

12.png

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

登录后复制

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

有两种合并数组的方法。其中之一是使用concat方法。另一个使用扩展运算符(…)。

PS:我们也可以使用“设置”对象从最终数组中复制任何内容。

13.png

// Merge but don't remove the duplicationsconst merge = (a, b) => a.concat(b);// Orconst merge = (a, b) => [...a, ...b];// Merge and remove the duplicationsconst merge = [...new Set(a.concat(b))];// Orconst merge = [...new Set([...a, ...b])];

登录后复制

14-获取javascript语言的实际类型

人们有时会使用库来查找JavaScript中某些内容的实际类型,这一小技巧可以节省你的时间(和代码大小)。

14.png

const trueTypeOf = (obj) => {  return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();};console.log(trueTypeOf(''));// stringconsole.log(trueTypeOf(0));// numberconsole.log(trueTypeOf());// undefinedconsole.log(trueTypeOf(null));// nullconsole.log(trueTypeOf({}));// objectconsole.log(trueTypeOf([]));// arrayconsole.log(trueTypeOf(0));// numberconsole.log(trueTypeOf(() => {}));// function

登录后复制

15-在结尾处截断字符串

需要从头开始截断字符串,这不是问题!

15.png

const truncateString = (string, length) => {  return string.length 

16-从中间截断字符串

从中间截断字符串怎么样?

该函数将一个字符串作为第一个参数,然后将我们需要的字符串大小作为第二个参数,然后从第3个和第4个参数开始和结束需要多少个字符

16.png

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, // 需要的字符串大小    13, // 从原始字符串第几位开始截取    17, // 从原始字符串第几位停止截取  ),);// A long story ... eventually ends!

登录后复制

17-大写字符串

好吧,不幸的是,JavaScript没有内置函数来大写字符串,但是这种解决方法可以实现。

17.png

const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);console.log(capitalize('hello world'));// Hello world

登录后复制

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

此简单的帮助程序方法根据选项卡是否处于视图/焦点状态而返回true或false

18.png

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

登录后复制

19-检查用户是否在Apple设备上

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

19.png

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

登录后复制

20-三元运算符

当你只想在一行中编写if..else语句时,这是一个很好的代码保护程序。

20.png

// Longhandconst age = 18;let greetings;if (age 

21-短路评估速记

在将变量值分配给另一个变量时,可能要确保源变量不为null,未定义或为空。
可以编写带有多个条件的long if语句,也可以使用短路评估。

21.png

// Longhandif (name !== null || name !== undefined || name !== '') {  let fullName = name;}// Shorthandconst fullName = name || 'buddy';

登录后复制

希望对你有所帮助!

英文原文地址:https://dev.to/ovi/20-javascript-one-liners-that-will-help-you-code-like-a-pro-4ddc

更多编程相关知识,请访问:编程入门!!

以上就是学会这20+个JavaScript单行代码,让你像专业人士一样编写代码的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2713207.html

(0)
上一篇 2025年3月7日 21:21:06
下一篇 2025年2月19日 12:46:09

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 浏览器如何运行javascript

    浏览器运行javascript的方法:首先打开一个网页;然后直接在网页上面右键,点击【检查】进入控制台;接着点击顶部菜单里面的Source标签;最后在新建的snippet的右边写JavaScript代码即可。 本文操作环境:Windows7…

    2025年3月7日 编程技术
    200
  • 如何使用JS.map()方法(数组方法)

    本篇文章给大家介绍一下javascript中的array.map()方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 有时,你可能需要获取一个数组并将一些操作应用于其子项,以便获得具有已修改元素的新数组。 无需使用循环…

    2025年3月7日
    200
  • javascript和java区别有什么

    区别:1、JavaScript由浏览器解释执行,Java程序则是编译执行。2、JavaScript提供丰富的内置对象供开发人员使用;Java不管开发程序简单与否,都必须设计对象。3、JavaScript是弱类型语言,Java则是强类型语言。…

    2025年3月7日
    200
  • javascript怎么删除数组元素

    删除方法:1、length属性从数组末尾删除元素,语法“数组名.length=值”;2、delete关键字删除指定元素,语法“delete 数组名[下标]”;3、splice()函数,语法“数组名.splice(开始位置, 删除数目)”。 …

    2025年3月7日
    200
  • javascript怎么删除对象的属性

    在javascript中,可以使用delete运算符来删除对象的属性,它的操作数应当是一个属性访问表达式;例“var obj={x:1};delete obj.x;”。delete运算符只能删除自由属性,不能删除继承属性。 本教程操作环境:…

    2025年3月7日
    200
  • javascript中时间怎么转时间戳

    转换方法:1、使用“Date.parse(new Date())”语句;2、使用“(new Date()).valueOf()”语句;3、使用“new Date().getTime()”;4、使用“Number(new Date())”。 …

    2025年3月7日
    200
  • javascript怎么进行类型强制转换

    强制转换方法:1、使用String()、Number()或toString()函数进行字符串与数字之间的显示类型转换;2、使用Boolean()函数将值转换为布尔值;3、使用“+”、“-”运算符进行字符串和数字之间的隐式类型转换。 本教程操…

    2025年3月7日
    200
  • javascript怎么将值转为字符串

    转换方法:1、使用“+”运算符结合空字符串,语法“值+””;2、使用模板字符串,语法“${值}”;3、使用“JSON.stringify(值)”语句;4、使用“值.toString()”语句;5、使用“String(值)”语句。…

    2025年3月7日
    200
  • JavaScript怎么实现打印操作

    在JavaScript中,可以使用Window对象的print()方法来实现打印操作,语法格式“window.print()”。print()方法用于打印当前窗口的内容;调用print()方法会产生一个打印预览弹框,让用户可以设置打印请求。…

    2025年3月7日
    200
  • javascript如何改变文本内容

    javascript改变文本内容的方法:首先使用“document.getElementById(id值)”语句获取文本元素对象;然后使用“文本元素对象.innerHTML= “新文本内容””语句进行修改即可。 本教…

    2025年3月7日
    200

发表回复

登录后才能评论