服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - 12 个JavaScript常用技巧,让你看起来更像个专业人士

12 个JavaScript常用技巧,让你看起来更像个专业人士

2022-11-09 17:56web前端开发杨小爱 js教程

Javascript可以做很多令人惊奇的事情,我也还有很多东西要学,今天我们介绍12个简短而实用的代码片段,帮助你提升工作效率。

Javascript可以做很多令人惊奇的事情,我也还有很多东西要学,今天我们介绍12个简短而实用的代码片段,帮助你提升工作效率。

12 个JavaScript常用技巧,让你看起来更像个专业人士

1、判断一个数是奇数还是偶数

模运算符 % 做得很好。

const IsEven = num num % 2 === 0;console.log(IsEven(2));// Result: trueconsole.log(IsEven(3));// Result: false

2、判断日期是否为工作日

检查给定日期是否为工作日。

    const isWorkday = (date) => date.getDay() % 6 !== 0; console.log(isWorkday(new Date("2022/10/17"))); // Result: true (Monday)    console.log(isWorkday(new Date("2022/10/16")));    // Result: false (Sumday)

3、获取随机布尔值(真/假)

使用 Math.random() 会返回一个介于 0 和 1 之间的随机数,然后判断是否大于 0.5 会得到一个有 50% 概率为 True 或 False 的值。

const randomBool = () Math.random() >= 0.5;console.log(randomBool());

4、从日期对象获取时间

使用 Date 对象的 .toTimeString() 方法将其转换为时间字符串,然后截取该字符串。

const timeBeginDate = date date.toTimeString().slice(0, 8); console.log(timeBeginDate(new Date(2022, 8, 10, 15, 30, 21))); // Result: "15:30:21"    console.log(timeBeginDate(new Date()));    // Result: return current time

5、滚动到页面顶部

window.scrollTo() 会滚动到指定坐标,如果坐标设置为(0, 0),会返回到页面顶部。

    const toTop = () window.scrollTo(0, 0); toTop();

6、反转字符串

反转字符串的方法有很多,这里是最简单的一种,使用 split()、reverse() 和 join()

 const reverse = str str.split('').reverse().join(''); console.log(reverse('hello maxwell')); //Result: llewxam olleh

7、确定当前选项卡是否可见

浏览器可以打开很多标签,下面的代码段是判断当前标签是否为活动标签。

 const isBrowserTabInView = () document.hidden; isBrowserTabInView();

8、检查指定元素是否被聚焦

你可以使用 document.activeElement 来确定元素是否处于焦点中。

    const elementIsFocus = (el) => (el === document.activeElement);    elementIsFocus(anyElement)    // Returns True if it is in focus, otherwise returns False

9、判断当前用户是否支持触摸事件

const touchSupported = ()        ('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch);    } console.log(touchSupported()); // Returns True if touch events are supported, otherwise returns False

10、判断当前用户是否为 Apple 设备

你可以使用 navigator.platform 来确定当前用户是否是 Apple 设备。

const isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform);console.log(isAppleDevice);// If it is an Apple device it will return True otherwise it will return False

11、获取所有参数的平均值

reduce() 函数可用于计算所有参数的平均值。

  const average = (...args) => args.reduce((a, b) => var avg = average(6,10, 8, 12); console.log(avg); // Result: 9

12、转换华氏/摄氏度

不要再害怕处理温度单位了,下面两个函数就是两个温度单位的相互转换。

  const celsiusToFahrenheit = (celsius) => celsius * 9 / 5 + 32; const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5 / 9; // Examples    console.log(celsiusToFahrenheit(20));    // 68    console.log(celsiusToFahrenheit(0));    // 32    console.log(celsiusToFahrenheit(-15));    // 5    console.log(celsiusToFahrenheit(35));    // 95

写在最后

以上就是我今天跟你分享的全部内容,如果你觉得有用的话,请记得点赞,关注我,我将与你分享更多实用的开发技巧。

原文地址:https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649133706&idx=1&sn=9917064c388877ca9ebafb0c32b23143&chksm=be58b527892f3c312929aaae2da533db668659f4a66a8151191fe31874685d0e1d118e15d77f

延伸 · 阅读

精彩推荐
  • js教程五个必须知道的 JavaScript 数组方法

    五个必须知道的 JavaScript 数组方法

    数组非常适合存储相关数据,并且通常用作组织信息的一种方式。 我们中的大多数人每天都在使用它们,但是您知道 JavaScript 中还内置了一些非常简洁的数...

    七爪网4832022-10-18
  • js教程JavaScript实现点击出现子菜单效果

    JavaScript实现点击出现子菜单效果

    这篇文章主要为大家详细介绍了JavaScript实现点击出现子菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    weixin_551084226512022-01-19
  • js教程原生JavaScript实现幻灯片效果

    原生JavaScript实现幻灯片效果

    这篇文章主要为大家详细介绍了原生JavaScript实现幻灯片效果,文中安装步骤介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    清水拌墨茶4822022-01-21
  • js教程通过几行JavaScript就可以读取电脑上的所有数据?

    通过几行JavaScript就可以读取电脑上的所有数据?

    通过几行 JavaScript ,就可以读取到电脑/手机上的所有数据,浏览器中的网页可以读取你所有的密码,知道其他程序在干什么,这甚至不需要你写出来的程序...

    code秘密花园4282022-03-01
  • js教程详解JavaScript错误捕获

    详解JavaScript错误捕获

    这篇文章主要介绍了JavaScript错误捕获的相关资料,帮助大家更好的理解和学习使用JavaScript,感兴趣的朋友可以了解下...

    如沐春风x6992022-03-09
  • js教程TypeScript 安装使用及基本数据类型

    TypeScript 安装使用及基本数据类型

    这篇文章主要介绍了TypeScript 安装使用及基本数据类型,本文分步骤给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以...

    小明同学c6552022-02-19
  • js教程原生JS手写丝滑流畅的元素拖拽效果

    原生JS手写丝滑流畅的元素拖拽效果

    笔者因为之前有个小项目需要经常参考稿定设计,一直有留意其元素拖拽的效果(如下图),所以接下来我将以这种效果为蓝本,使用原生 JS 实现一个富有动...

    茶无味的一天10442022-11-03
  • js教程微信小程序实现多行文字滚动效果

    微信小程序实现多行文字滚动效果

    这篇文章主要介绍了微信小程序实现多行文字滚动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    Archer_yy5392022-02-19