25 个 JavaScript 实用级语句 进阶

2023-11-19

1.复制内容到剪贴板

为了提高网站的用户体验,我们经常需要将内容复制到剪贴板,以便用户粘贴到指定的地方。

const copyToClipboard = (content) => navigator.clipboard.writeText(content)
copyToClipboard("Hello fatfish")

2.获取鼠标选择

您以前遇到过这种情况吗?

我们需要获取用户选择的内容。

const getSelectedText = () => window.getSelection().toString()
getSelectedText()

3.打乱数组

打乱数组?这在彩票项目中很常见,但它并不是真正随机的。

const shuffleArray = array => array.sort(() => Math.random() - 0.5)
shuffleArray([ 1, 2,3,4, -1, 0 ]) // [3, 1, 0, 2, 4, -1]

4. 将rgba转换为十六进制

我们可以将 RGBA 和十六进制颜色值相互转换。​​​​​​​

const rgbaToHex = (r, g, b) => "#" + [r, g, b].map(num => parseInt(num).toString(16).padStart(2, '0')).join('')
rgbaToHex(0, 0 ,0) // #000000rgbaToHex(255, 0, 127) //#ff007f

5.十六进制转换为rgba​​​​​​​

const hexToRgba = hex => {  const [r, g, b] = hex.match(/\w\w/g).map(val => parseInt(val, 16))  return `rgba(${r}, ${g}, ${b}, 1)`;}
hexToRgba('#000000') // rgba(0, 0, 0, 1)hexToRgba('#ff007f') // rgba(255, 0, 127, 1)

6.获取多个数的平均值

使用reduce我们可以非常方便的得到一组数组的平均值。​​​​​​​

const average = (...args) => args.reduce((a, b) => a + b, 0)
average(0, 1, 2, -1, 9, 10) // 3.5

7.检查数字是偶数还是奇数

如何判断一个数是奇数还是偶数?​​​​​​​

const isEven = num => num % 2 === 0
isEven(2) // trueisEven(1) // false

8.删除数组中的重复元素

要删除数组中的重复元素,使用 Set 将变得非常容易。​​​​​​​

const uniqueArray = (arr) => [...new Set(arr)]
uniqueArray([ 1, 1, 2, 3, 4, 5, -1, 0 ]) // [1, 2, 3, 4, 5, -1, 0]

9.检查一个对象是否为空对象

判断一个对象是否为空容易吗?​​​​​​​

const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object
isEmpty({}) // trueisEmpty({ name: 'fatfish' }) // false

10.反转字符串​​​​​​​

const reverseStr = str => str.split('').reverse().join('')
reverseStr('fatfish') // hsiftaf

11.计算两个日期之间的间隔​​​​​​​

const dayDiff = (d1, d2) => Math.ceil(Math.abs(d1.getTime() - d2.getTime()) / 86400000)
dayDiff(new Date("2023-06-23"), new Date("1997-05-31")) // 9519

12.查找该日期是一年中的第几天

今天是2023年6月23日,那么今年是什么日子呢?​​​​​​​

const dayInYear = (d) => Math.floor((d - new Date(d.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24)
dayInYear(new Date('2023/06/23'))// 174

13.将字符串的第一个字母大写​​​​​​​

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
capitalize("hello fatfish")  // Hello fatfish

14.生成指定长度的随机字符串​​​​​​​

const generateRandomString = length => [...Array(length)].map(() => Math.random().toString(36)[2]).join('')
generateRandomString(12) // cysw0gfljoyxgenerateRandomString(12) // uoqaugnm8r4s

15.获取两个整数之间的随机整数​​​​​​​

const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
random(1, 100) // 27random(1, 100) // 84random(1, 100) // 55

16.指定数字四舍五入​​​​​​​

const round = (n, d) => Number(Math.round(n + "e" + d) + "e-" + d)
round(3.1415926, 3) //3.142round(3.1415926, 1) //3.1

17.清除所有cookie

const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`))

18.检测是否为深色模式​​​​​​​

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
console.log(isDarkMode)

19.滚动到页面顶部​​​​​​​

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

20.判断是否为苹果设备​​​​​​​

const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform)
isAppleDevice()

21.随机布尔值​​​​​​​

const randomBoolean = () => Math.random() >= 0.5
randomBoolean()

22.获取变量的类型​​​​​​​

const typeOf = (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase()
typeOf('')     // stringtypeOf(0)      // numbertypeOf()       // undefinedtypeOf(null)   // nulltypeOf({})     // objecttypeOf([])     // arraytypeOf(0)      // numbertypeOf(() => {})  // function

23.判断当前选项卡是否处于活动状态

const checkTabInView = () => !document.hidden

24. 检查某个元素是否获得焦点

const isFocus = (ele) => ele === document.activeElement

25.随机IP​​​​​​​

const generateRandomIP = () => {  return Array.from({length: 4}, () => Math.floor(Math.random() * 256)).join('.');}
generateRandomIP() // 220.187.184.113generateRandomIP() // 254.24.179.151
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

25 个 JavaScript 实用级语句 进阶 的相关文章

  • chrome 调试器承诺在暂停时不会解析?

    也许我没有正确调试承诺 但基本上 如果您在断点处停止并运行异步代码 它实际上不会完成 直到您恢复执行为止 这是一个问题 调试器允许您快速试验多个 api 方法 但如果您恢复它 您就不能 debugger now type the follo
  • Oo 任何 IDE 中的 javascript 代码补全

    你知道有什么IDE可以自动完成这种代码吗 我这里有一个 javascript 类生成器 function var core bind function method scope if method instanceof Function t
  • React-native:将场景绑定到导航栏

    我正在整理这个提问 回答应用程序 并遇到了这个障碍 我想从导航栏触发场景中的功能 与登录应用程序类似 我在导航栏中有一个用于提交答案的按钮 RightButton route navigator index navState if rout
  • 用隐藏单元格补充 colspanned 表格有什么不好吗?

    我一直在表格上开发一些排序和选择功能 我发现在具有跨单元格的表格中定位非常困难 我只是添加了跨区单元格并将其隐藏 它看起来不错 它与我的 js 一起工作 非常适合索引 但我想知道这是否是合法的方法 stuffing display none
  • VBA / HTML / jQuery 选择自动完成 - 在列表中选择

    我正在尝试使用 Excel 中的 VBA 在网站的列表中选择一个值 这不是一个 正常列表 该网站使用 jQuery 选择自动完成 如下所示 example http davidwalsh name demo jquery chosen ph
  • 使用 moment.js 检查输入日期是否为星期一

    好吧 我想检查日期是否是星期一 例如 var myDate new Date moment myDate DD MM YYYY dayIs monday 在我的国家 一周的第一天是星期一 所以 我真的想检查输入日期是否是一周的开始 我尝试使
  • 动画进度元素值

    我有一个progress元素 该元素如下所示 div class container div div div
  • 如何使用canvas.toDataURL()将画布保存为图像?

    我目前正在构建一个 HTML5 Web 应用程序 Phonegap 本机应用程序 我似乎不知道如何将画布保存为图像canvas toDataURL 有人可以帮我吗 这是代码 有什么问题吗 我的画布被命名为 canvasSignature J
  • Ember.js 处理 View 事件后转换到路由

    Setup 我有一个 Ember 应用程序 支持使用 Imgur API 上传图像 我已经有一个工作路线和模板来处理任何 Imgur ID 但我想在上传新图像后转换到此路线 使用返回的 Imgur ID 这是该应用程序的相关部分 http
  • 即使我可以监视其他方法,也无法监视事件处理程序

    我想使用 Jest Jasmine Enzyme 测试 React 中的事件处理程序 MyComponent js import React from react class MyComponent extends React Compon
  • jquery window.open 在 ajax 成功中被阻止

    尝试在我的 ajax 成功调用中打开一个新的浏览器窗口 但是 它被阻止为弹出窗口 我做了一些搜索 发现用户事件需要绑定到 window open 才能避免这种情况发生 我还找到了这个解决方案 您可以在 ajax 之前打开一个空白窗口 然后在
  • 在闪亮的数据表中为每个单元格显示工具提示或弹出窗口?

    有没有什么方法可以为 r闪亮数据表中的每个单元格获取工具提示 有很多方法可以获取悬停行或列 但我找不到一种方法来获取行和列索引并为每个单元格显示不同的悬停工具提示 任何人都可以修改以下代码吗 library shiny library DT
  • JavaScript 中数组的 HTML 数据列表值

    我有一个简单的程序 它必须从服务器上的文本文件中获取值 然后将数据列表填充为输入文本字段中的选择 为此 我想要采取的第一步是我想知道如何动态地将 JavaScript 数组用作数据列表选项 我的代码是
  • 是否有任何非轮询方式来检测 DOM 元素的大小或位置何时发生变化?

    很长一段时间以来 我一直在寻找一种方法来检测 DOM 元素的大小或位置何时发生变化 这可能是因为窗口调整了大小 或者因为向该元素添加了新的子元素 或者因为在该元素周围添加了新元素 或者因为 CSS 规则已更改 或者因为用户更改了浏览器的字体
  • 如何在 Angular 中从父组件访问子组件?

    I have mat paginator在子组件a中 如下所示 子组件 html
  • JS用正则表达式替换数字

    我有元素的标识符 如下所示 form book 1 2 3 我想要的是用其他值替换该标识符中的第二个数字 我将函数 match 与以下正则表达式一起使用 var regexp d d d 但它返回我包含的数组 1 2 3 2 因此 当我尝试
  • 当用户单击链接时,如何记录 MixPanel 事件?

    当用户单击某种类型的链接时 我试图在 MixPanel 中记录一个事件 我正在使用 JQuery 不引人注意地完成此操作 据我所知 我需要添加一个回调函数 以便在记录事件后将用户带到 URL 这是我正在使用的代码 不幸的是
  • JavaScript 代码在不使用 ActiveX 的情况下截取网站屏幕截图

    我有一个用户与之交互的 JavaScript 应用程序 我需要保存当前界面的外观 裁剪出我需要的部分 或者通过指定div只拍摄我需要的部分 然后发送回服务器 显然任何外部服务都无法做到这一点 我需要一个 JavaScript 或Flash
  • Jquery - 通过在字符串中构建 id 的 id 获取元素

    我在使用 jquery 元素时遇到问题 我正在 var 中构造名称 例如 var myId myGotId myId attr title changed myId 返回空 我想通过 id 获取我的元素 但动态构建我的 Id 连接字符串 编
  • KeyboardAvoidingView - 隐藏键盘时重置高度

    我正在使用 React NativeKeyboardAvoidingView设置我的高度View当显示键盘时 但是当我关闭应用程序中的键盘时 视图的高度不会变回原来的值

随机推荐

  • STL : vector 矢量容器

    目录 Vector Capacity Elements access Modifiers Allocator Non member Notice overloads Template specializations Vector inclu
  • 业务流程图怎么画?3步+8张案例,5分钟教你快速上手!

    业务流程图能很好地帮助我们梳理业务 高效表达需求 尤其是产品经理在梳理业务时 经常会用到业务流程图 业务流程图会在产品经理画原型图前 帮助梳理产品业务流程 避免做无用功 今天从业务历程图的基本介绍 常用场景和绘制方法三方面介绍 让大家对业务
  • C11头文件声明了创建和管理线程,信号,条件变量的函数

    作者Danny Kalev 是通过以色列系统分析师协会认证的系统分析师 并且是专攻C 的软件工程师 Kalev 写了多本C 的书籍 同时给不同的软件开发者站点投搞C 文章 他是C 标准委员会的成员 还获得了通用语言学的硕士学位 原始鏈接 h
  • TypeError: can only concatenate list (not "str") to list

    类型错误 只能将list类型和list类型联系起来 而不是str类型 出现上述类型错误 判断一下需要连接的两个变量的类型 如果是将str类型加入list用append添加 如果是移除用pop或remove
  • Ubuntu 10.10下安装TFTP的步骤 tftp-hpa版本

    背景 由于想要在tq2440板子上用tftp下载kernel 所以要在自己的PC机的Ubuntu 10 10上安装tftp服务 所以就去网上找了些教程 但是很悲剧 按照那些教程去操作 结果还都是无法正常运行tftp服务 最后还是从一个外国人
  • 自己动手写CSDN博客提取器,提取文件保存支持PDF、doc、txt三种格式

    转载自 http blog csdn net w397090770 article details 7760907 下载地址http download csdn net detail w397090770 4438566 不需要积分 下面有
  • npm配置及.npmrc文件

    一 npm配置 1 npm cli 提供了npm config 命令进行npm相关配置 通过npm config ls l 可查看npm的所有配置 包括默认配置 2 npm config set 进行配置项修改 使用命令配置后会把配置文件中
  • POJ - 1129 Channel Allocation(染色问题)

    题意 AC代码 When a radio station is broadcasting over a very large area repeaters are used to retransmit the signal so that
  • Oracle RAC FailOver配置

    Oracle RAC FailOver配置 Oracle RAC主要为数据库的应用提供了HA High Available 的环境 HA体现在负载均衡 loadbalance 和容错 failover 两个方面 Oracle RAC 的Fa
  • Scala 的 Set集合详解

    目录 一 不可变长Set集合 1 Set的声明与遍历 2 Set的几个常用方法 intersect diff 操作符 filter过滤 二 可变长Set集合 三 Set的其他方法 Set集合的特点 元素存放无序 且不可重复 一 不可变长Se
  • c++:多态案例,电脑组装

    需求 include
  • 【Ansible初识】Linux系统之Ansible的基本介绍

    Ansible初识 Linux系统之Ansible的基本介绍 一 Ansible的介绍 1 Ansible简介 2 Ansible的特点 3 Ansible的原理 二 Ansible的架构 1 Ansible的架构图 2 Ansible的核
  • oracle数据库分区的几种方式

    范围分区 每个分区都由一个分区键值范围指定 对于一个以日期列作为分区键的表 2005 年 1 月 分区包含分区键值为从 2005 年 1 月 1 日 到 2005 年 1 月 31 日 的行 列表分区 每个分区都由一个分区键值列表指定 对于
  • IOS 访问系统粘贴板

    粘贴板提供了一种核心OS特性 用于跨应用程序共享数据 用户可以跨应用来复制粘贴 也可以设置只在本应用中复制粘贴用来保护隐私 UIPasteboard类允许访问共享的设备粘贴板以及内容 下面代码返回一般的系统粘贴板 它适合大多数一般的复制粘贴
  • 百度智能云章淼:详解企业级七层负载均衡开源软件BFE

    随着云计算和云原生的发展 七层负载均衡得到了越来越多的关注 同时也出现了很多不同的解决方案 BFE是基于Go语言编写的七层负载均衡开源软件 在2020年6月被CNCF接受为 沙盒项目 成为中国第一个网络方向的CNCF开源项目 2022年7月
  • Open3D 计算模型的表面积和体积

    函数解析 def get surface area self 计算物体表面积 def get volume self 计算物体体积 完整的代码 import open3d as o3d print 绘制立方体 mesh box o3d ge
  • android解决方法数超过65536问题,(满则溢)Android AS打包提示方法数超65536的解决方法...

    满则溢 平常大家喝饮料啥的都知道一个杯子的容量 如果超出就溢出 这个时候只能在加个杯子装了 Android开发也是如此 当方法数超过65536的时候就需要分包 为啥出现 项目当中添加的依赖和架包太多了 方法数超过65536还是很正常的 所以
  • flutter可以开发HTML5,Flutter建立JsBridge用于webview与h5通信

    项目背景 随着项目的不断完善 需要做一些运营活动 通常是H5页面 在app中打开这些H5页面就需要引入WebView 有时候H5需要客户端提供一些内部的接口 这时候我们就需要建立JSBridge用于客户端与H5之间的通讯 使用 1 安装we
  • 宝可梦虚拟银行服务器连接不上,更多宝可梦!《精灵宝可梦:太阳/月亮》虚拟银行将开启...

    任天堂近日宣布3DS 精灵宝可梦 太阳 月亮 Pok mon Sun Moon 将在一月下旬开启 宝可梦虚拟银行 这个功能主要是让游戏与整个 口袋妖怪 系列进行联动 进行寄存或领出各种宝可梦 宝可梦虚拟银行 从1月下旬起对应 精灵宝可梦 太
  • 25 个 JavaScript 实用级语句 进阶

    1 复制内容到剪贴板 为了提高网站的用户体验 我们经常需要将内容复制到剪贴板 以便用户粘贴到指定的地方 const copyToClipboard content gt navigator clipboard writeText conte