13个JavaScript 一行程序,让你看起来就是个专家

目录
  • 1. 获得一个随机的布尔值(true/false)
  • 2. 检查所提供的日期是否为工作日
  • 3.反转字符串
  • 4.检查当前标签是否隐藏
  • 5. 检查一个数字是偶数还是奇数
  • 6. 从一个日期获取时间
  • 7. 保留 n 位小数
  • 8. 检查当前是否有元素处于焦点中
  • 9. 检查当前浏览器是否支持触摸事件
  • 10. 检查当前浏览器是否在苹果设备上
  • 11. 滚动到页面顶部
  • 12. 获取参数的平均数值
  • 13.华氏/摄氏转换

1. 获得一个随机的布尔值(true/false)

该函数使用Math.random()方法返回一个布尔值(true 或者 false)。Math.random创建一个0到1之间的随机数,我们只要检查它是否高于或低于0.5,就有50%机会得到true或false。

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

2. 检查所提供的日期是否为工作日

使用这种方法,我们能够检查在函数中提供的日期是否是工作日或周末的日子。

const isWeekday = (date) => date.getDay() % 6 !== 0;

console.log(isWeekday(new Date(2021, 7, 6)));
// true  因为是周五

console.log(isWeekday(new Date(2021, 7, 7)));
// false 因为是周六

3.反转字符串

有几种不同的方法来反转一个字符串。这是最简单的一种,使用split()、reverse()和join()方法。

const reverse = str => str.split('').reverse().join('');
reverse('hello world');
// 'dlrow olleh'

4.检查当前标签是否隐藏

Document.hidden (只读属性)返回布尔值,表示页面是(true)否(false)隐藏。

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

场外:无意间发现爱奇艺广告播放时间居然是在当前标签页激活的时候才会进行倒计时,离开当前标签页的时候,倒计时停止,百度一下发现document.hidden这个东东。

document.hidden是h5新增加api使用的时候有兼容性问题。

var hidden
if (typeof document.hidden !== "undefined") {
    hidden = "hidden";
} else if (typeof document.mozHidden !== "undefined") {
    hidden = "mozHidden";
} else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden";
} else if (typeof document.webkitHidden !== "undefined") {
    hidden = "webkitHidden";
}
console.log("当前页面是否被隐藏:" + document[hidden])

5. 检查一个数字是偶数还是奇数

const isEven = num => num % 2 === 0;
console.log(isEven(2));
// true
console.log(isEven(3));
// false

6. 从一个日期获取时间

const timeFromDate = date => date.toTimeString().slice(0, 8);

console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0)));
// "17:30:00"

console.log(timeFromDate(new Date()));
// 打印当前的时间

7. 保留 n 位小数

const toFixed = (n, fixed) => ~~(Math.pow(10, fixed) * n) / Math.pow(10, fixed);
// 事例
toFixed(25.198726354, 1);       // 25.1
toFixed(25.198726354, 2);       // 25.19
toFixed(25.198726354, 3);       // 25.198
toFixed(25.198726354, 4);       // 25.1987
toFixed(25.198726354, 5);       // 25.19872
toFixed(25.198726354, 6);       // 25.198726

8. 检查当前是否有元素处于焦点中

我们可以使用document.activeElement属性检查一个元素是否当前处于焦点。

const elementIsInFocus = (el) => (el === document.activeElement);
elementIsInFocus(anyElement)
// 如果在焦点中返回true,如果不在焦点中返回 false

9. 检查当前浏览器是否支持触摸事件

const touchSupported = () => {
  ('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch);
}
console.log(touchSupported());
// 如果支持触摸事件,将返回true,如果不支持则返回false。

10. 检查当前浏览器是否在苹果设备上

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

11. 滚动到页面顶部

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

12. 获取参数的平均数值

const average = (...args) => args.reduce((a, b) => a + b) / args.length;
average(1, 2, 3, 4);
// 2.5

13.华氏/摄氏转换

const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32;
const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5/9;
// 事例
celsiusToFahrenheit(15);    // 59
celsiusToFahrenheit(0);     // 32
celsiusToFahrenheit(-20);   // -4
fahrenheitToCelsius(59);    // 15
fahrenheitToCelsius(32);    // 0

到此这篇关于13个JavaScript 一行程序,让你看起来就是个专家的文章就介绍到这了,更多相关JavaScript 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • javascript实现点击按钮切换图片

    本文实例为大家分享了javascript实现点击按钮切换图片的具体代码,供大家参考,具体内容如下 效果图: 首先搭建基本的结构 <div id="div"> <p id="desc"></p> <!--默认显示第一张图片--> <img src="img/1.jpg" alt="加载失败" style="width: 800px;height: 400px;&qu

  • 用JavaScript实现轮播图效果

    本文实例为大家分享了JavaScript实现轮播图效果的具体代码,供大家参考,具体内容如下 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } ul { list-style: non

  • JavaScript中箭头函数与普通函数的区别详解

    本文为大家讲解了JavaScript中箭头函数与普通函数的区别,供大家参考,具体内容如下 箭头函数: let fun = () => { console.log('lalalala'); } 普通函数: function fun() { console.log('lalla'); } 箭头函数相当于匿名函数,并且简化了函数定义.箭头函数有两种格式,一种只包含一个表达式,连{ ... }和return都省略掉了.还有一种可以包含多条语句,这时候就不能省略{ ... }和return. 箭头函数是匿

  • JavaScript Canvas实现井字棋游戏

    本文实例为大家分享了JavaScript Canvas实现井字棋游戏的具体代码,供大家参考,具体内容如下 index.html <!DOCTYPE html> <html> <head> <title>Tic Tac Toe</title> <style> * { padding: 0; margin: 0; } body, html, #game { height: 100%; background: #FCFCFC; } #gam

  • JavaScript判断是否为数组的各种方法汇总

    目录 前言 Array.isArray constructor instanceof isPrototypeOf Object.prototype.toString typeof 总结 前言 我们在日常开发中,常常有判断某值类型的需求,今天我们总结一下常见的几种用来判断是否为数组的 JavaScript 方法. Array.isArray Array.isArray() 是ES5新增的方法,用于确定传递的值是否是一个数组,如果是数组,则返回  true,否则返回 false. let arr =

  • 详细谈谈JavaScript中循环之间的差异

    目录 前言 可枚举的属性 可迭代对象 在 forEach 与 map 方法 链式调用 性能 结论 前言 在 JavaScript 中使用循环时,需要正确定义两个关键内容:可枚举属性(enumerable properties)和可迭代对象(iterable objects). 可枚举的属性 可枚举对象的一个定义特征是,当我们通过赋值运算符将属性赋值给对象时,我们将内部可枚举标志(enumerable)设置为 true.这是默认值. 但是,我们可以通过将其设置为 false 来更改此行为. 经验法

  • javascript代码简写的几种常用方式汇总

    目录 前言 箭头函数 掌握数组常见操作方法 延展运算符 对象简写 解构赋值 掌握数据类型转换的方法 总结 前言 本文主要介绍一些工作中常用的JavaScript编码技巧.非常有用,建议大家看完赶快实践,keep it in your mind! 首先推荐一个vscode的插件,Quokka.js,调试代码神器,插件的作用是:立即执行你键入的JavaScript代码或者TypeScript代码 箭头函数 简写规则: 只有一个参数,小括号可以不写 返回值只有一个,花括号和return可以不写 let

  • 自定义swiper组件详解

    目录 效果展示 组件设置 步骤1 步骤2 步骤3 使用组件 步骤1 步骤2 步骤3 总结 效果展示 组件设置 步骤1 在pages目录下,新建文件夹components 步骤2 在components下建立新文件夹swiper 在swiper目录下,新建4个文件,分别为 swiper. jsswiper. jsonswiper.wxml swiper.wxss 各文件位置示意图如下: 注:此时编译会报错 错误显示在json那里 先不用管 后面把代码复制粘贴上去再编译就好了 步骤3 分别把下面代码

  • JavaScript实现烟花特效(面向对象)

    本文实例为大家分享了JavaScript实现烟花特效的具体代码,供大家参考,具体内容如下 本特效使用面向对象编程 分析 OOA 点击触发事件 烟花运动分成两个阶段 向上飞          爆炸 OOD class FireWork{ constructor(){ } bindEvent(){ let _this = this; ele.onclick = function(){ //fly结束再去调用boom函数 _this.fly(_this.boom); } } fly(boom){ }

  • 13个JavaScript 一行程序,让你看起来就是个专家

    目录 1. 获得一个随机的布尔值(true/false) 2. 检查所提供的日期是否为工作日 3.反转字符串 4.检查当前标签是否隐藏 5. 检查一个数字是偶数还是奇数 6. 从一个日期获取时间 7. 保留 n 位小数 8. 检查当前是否有元素处于焦点中 9. 检查当前浏览器是否支持触摸事件 10. 检查当前浏览器是否在苹果设备上 11. 滚动到页面顶部 12. 获取参数的平均数值 13.华氏/摄氏转换 1. 获得一个随机的布尔值(true/false) 该函数使用Math.random()方法

  • 13个JavaScript 一行程序,让你看起来就是个专家

    目录 1. 获得一个随机的布尔值(true/false) 该函数使用Math.random()方法返回一个布尔值(true 或者 false).Math.random创建一个0到1之间的随机数,我们只要检查它是否高于或低于0.5,就有50%机会得到true或false. const randomBoolean = () => Math.random() >= 0.5; console.log(randomBoolean()); 2. 检查所提供的日期是否为工作日 使用这种方法,我们能够检查在函

  • JavaScript基础教程——入门必看篇

    JavaScript他是一种描述性语言,其实他并不难学,只要用心学,一定会学好,我相信大家在看这篇文章的时候,一定也学过HTML吧,使用JavaScript就是为了能和网页有更好的交互,下面切入主题. 一. JavaScript 1.什么是JavaScript JavaScript是一种描述性语言,也是一种基于对象(Object)和事件驱动(Event Driven)的,并具有安全性的脚本语言. 2.JavaScript的特点 JavaScript主要用来向HTML页面添加交互行为. JavaS

  • 大型JavaScript应用程序架构设计模式

    PDF版的PPT下载地址:http://www.slideshare.net/jibyjohnc/jqquerysummit-largescale-javascript-application-architecture 注:在整理的过程中,发现作者有些思想是返来复去地说,所以删减了一部分,如果你的英文良好,请直接阅读英文的PPT. 以下是本文的主要章节: 1. 什么叫"JavaScript大型程序"? 2. 顾当前的程序架构 3. 长远考虑 4. 头脑风暴 5. 建议的架构 5.1 设

  • 17个JavaScript 单行程序

    目录 一.DOM & BOM 相关 1.检查元素是否获得焦点 2.获取元素的所有兄弟节点 3.获取选定的文本 4.返回上一个页面 5.清除所有 cookie 6.将 cookie 转换为对象 二.数组相关 7.比较两个数组 8.将对象数组转换为对象 9.按对象数组的属性计数 10.检查数组是否为空 三.对象相关 11.检查多个对象是否相等 12.从对象数组中提取属性的值 13.反转对象的键和值 14.从对象中删除所有空和未定义的属性 15.按属性对对象进行排序 16.检查一个对象是否是一个 Pr

  • 全面理解JavaScript中的继承(必看)

    JavaScript中我们可以借助原型实现继承. 例如 function baz(){ this.oo=""; } function foo(){ } foo.prototype=new baz(); var myFoo=new foo(); myFoo.oo; 这样我们就可以访问到baz里的属性oo啦.在实际使用中这个样不行滴,由于原型的共享特点(数据保存在了堆上), 所有实例都使用一个原型,一但baz的属性有引用类型就悲剧了,一个实例修改了其他实例也都跟着变了...wuwuwu 自

  • 利用4行Python代码监测每一行程序的运行时间和空间消耗

    Python是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言,其具有高可扩展性和高可移植性,具有广泛的标准库,受到开发者的追捧,广泛应用于开发运维(DevOps).数据科学.网站开发和安全.然而,它没有因速度和空间而赢得任何称赞,主要原因是Python是一门动态类型语言,每一个简单的操作都需要大量的指令才能完成. 所以这更加需要开发者在使用Python语言开发项目时协调好程序运行的时间和空间. 1.分析时间耗时 分析项目消耗的时间消耗,依托于line_profiler模块,其可以计

  • 一定有你会用到的JavaScript一行代码实用技巧总结

    目录 引言 一.日期处理 1. 检查日期是否有效 2. 计算两个日期之间的间隔 3. 查找日期位于一年中的第几天 4. 时间格式化 二.字符串处理 1. 字符串首字母大写 2. 翻转字符串 3. 随机字符串 4. 截断字符串 5. 去除字符串中的HTML 三.数组处理 1. 从数组中移除重复项 2. 判断数组是否为空 3. 合并两个数组 四.数字操作 1. 判断一个数是奇数还是偶数 2. 获得一组数的平均值 3. 获取两个整数之间的随机整数 4. 指定位数四舍五入 五.颜色操作 1. 将RGB转

  • Javascript 基础---Ajax入门必看

    Ajax 是现代Web 应用程序开发的一项关键工具.它让你能向服务器异步发送和接收数据,然后用 Javascript 解析. Ajax 是 Asynchronous JavaScript and XML (异步JavaScript 与XML)的缩写. Ajax 核心规范的名称继承于用来建立和发起请求的 Javascript 对象:XMLHttpRequest .这个规范有两个等级.所有主流浏览器都实现了第一级,它代表了基础级别的功能.第二级扩展了最初的规范,纳入了额外的事件和一些功能来让它更容易

  • 从JavaScript的函数重名看其初始化方式

    今天有个哥们问我要是JavaScript函数重名了会有什么后果?开始我没有细想,就说可能会出错吧,可是等我实验完了发现页面没有任何脚本错误提示,而且程序也运行了,只是对同名函数的调用执行了位置靠后的一个. 回头仔细一想,这个结果完全可以接受,因为脚本在页面里本身就是顺序执行下来的,包括函数的定义,但然如果只是定义 function foo(){} 这种形式,我们是跟踪不到函数初始化的.可是如果是定义类的方式,我们就可以明显地跟踪到函数的初始化顺序.比如: function foo() {}fun

随机推荐