iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >分享7个杀手级JS小技巧
  • 912
分享到

分享7个杀手级JS小技巧

2024-04-02 19:04:59 912人浏览 安东尼
摘要

目录一、数组乱序二、复制到剪贴板三、数组去重四、检测黑暗模式五、滚动到顶部六、滚动到底部七、生成随机颜色一、数组乱序 在使用需要某种程度的随机化的算法时,你会经常发现洗牌数组是一个相

一、数组乱序

在使用需要某种程度的随机化的算法时,你会经常发现洗牌数组是一个相当必要的技能。下面的片段以O(n log n)的复杂度对一个数组进行就地洗牌。

const shuffleArray = (arr) => arr.sort(() => Math.random() - 0.5) 
// 测试
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(shuffleArray(arr))

二、复制到剪贴板

WEB应用程序中,复制到剪贴板因其对用户的便利性而迅速流行起来。

const copyToClipboard = (text) =>
  navigator.clipboard?.writeText && navigator.clipboard.writeText(text)
// 测试
copyToClipboard("Hello World!")

注意:根据caniuse,该方法对93.08%的全球用户有效。所以必须检查用户的浏览器是否支持该api。为了支持所有用户,你可以使用一个输入并复制其内容。

三、数组去重

每种语言都有自己的哈希列表的实现,在javascript中,它被称为Set。你可以使用Set数据结构轻松地从一个数组中获得唯一元素。

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

四、检测黑暗模式

随着黑暗模式的普及,如果用户在他们的设备中启用了黑暗模式,那么将你的应用程序切换到黑暗模式是非常理想的。幸运的是,可以利用媒体查询来使这项任务变得简单。

const isDarkMode = () =>
  window.matchMedia &&
  window.matchMedia("(prefers-color-scheme: dark)").matches
// 测试
console.log(isDarkMode())

根据caniuse的数据,matchMedia的支持率为97.19%。

五、滚动到顶部

初学者经常发现自己在正确滚动元素的过程中遇到困难。最简单的滚动元素的方法是使用scrollIntoView方法。添加行为。"smooth "来实现平滑的滚动动画。

const scrollToTop = (element) =>
  element.scrollIntoView({ behavior: "smooth", block: "start" })

六、滚动到底部

就像scrollToTop方法一样,scrollToBottom方法也可以用scrollIntoView方法轻松实现,只需将块值切换为结束即可

const scrollToBottom = (element) =>
  element.scrollIntoView({ behavior: "smooth", block: "end" })

七、生成随机颜色

你的应用程序是否依赖随机颜色的生成?不用再看了,下面的代码段可以满足你的要求

const generateRandomHexColor = () =>
  `#${Math.floor(Math.random() * 0xffffff) .toString(16)}`;

到此这篇关于7个杀手级js小技巧的文章就介绍到这了,更多相关JS小技巧内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 分享7个杀手级JS小技巧

本文链接: https://www.lsjlt.com/news/139521.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 分享7个杀手级JS小技巧
    目录一、数组乱序二、复制到剪贴板三、数组去重四、检测黑暗模式五、滚动到顶部六、滚动到底部七、生成随机颜色一、数组乱序 在使用需要某种程度的随机化的算法时,你会经常发现洗牌数组是一个相...
    99+
    2024-04-02
  • 7个Python中的隐藏小技巧分享
    目录前言1、功能属性2、不完整代码的占位符3、 eval() 函数4、在 Python 解析器中使用以下命令启动文件托管服务器5、无限参数6、Zip() 方法7、旋转列表前言 Pyt...
    99+
    2023-03-20
    Python隐藏技巧分享 Python隐藏技巧 Python技巧
  • 7个perl数组高级操作技巧分享
    1. 使用map函数对数组中的每个元素进行操作:```perlmy @array = (1, 2, 3, 4, 5);my @new_array = map { $_ * 2 } @array;# 输出:(2, 4, 6, 8, 10)...
    99+
    2023-08-09
    perl
  • 分享Python 的十个小技巧
      一. 列表、字典、集合、元组的使用  from random import randint, sample  # 列表解析  data = [randint(-10, 10) for _ in xrange(10)]  filter(l...
    99+
    2023-01-31
    小技巧 Python
  • 7个很棒的Vue开发技巧分享
    目录1.路由参数解耦2.功能组件3.样式范围4.watch的高级使用5.watch监听多个变量6.事件参数$event7.程序化事件监听器1.路由参数解耦 通常在组件中使用路由参数,...
    99+
    2023-02-08
    Vue开发技巧 Vue技巧
  • 分享JPA的几个小技巧
    目录1. 基本字段介绍2. 自定义ID生成器3. 自动填充字段4. End关系型数据库其实很讨人厌,尤其是在你使用数据库驱动的开发模式时。需要首先把表给创建好了,然后再使用代码生成器...
    99+
    2024-04-02
  • js异或运算符^小技巧分享
    目录js异或运算符^小技巧js中的位运算符(按位与、按位或、按位异或)使用总结js异或运算符^小技巧 这个运算符主要是在位运算的时候使用,但是在普通的数也能使用,且有一个转换过程,即...
    99+
    2023-05-17
    js异或运算符 js运算符 异或运算符^
  • 分享十八个杀手级JavaScript单行代码
    前言 JavaScript不断发展壮大,因为它是最容易上手的语言之一,因此为市场上的新成为技术怪才打开了大门。 而且,无论你是JavaScript的新手还是更多的专业开发人员,学习新...
    99+
    2024-04-02
  • 分享11个常用JavaScript小技巧
    目录1.通过条件判断向对象添加属性2.检查对象中是否存在某个属性3.解构赋值4.循环遍历一个对象的key和value5.使用可选链(Optionalchaining)避免访问对象属性...
    99+
    2024-04-02
  • 5个Python杀手级的自动化脚本分享
    目录1.文件传输脚本2.系统监控脚本3.Web 抓取脚本(最常用)4.电子邮件自动化脚本5. 密码管理器脚本Python 是一种功能强大的语言,广泛用于自动执行各种任务。无论您是开发...
    99+
    2023-01-29
    Python自动化脚本 Python自动化 Python 脚本
  • 常用的29个CSS小技巧分享
    本篇内容主要讲解“常用的29个CSS小技巧分享”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“常用的29个CSS小技巧分享”吧!1.清除图片下方出现几像素的空白间...
    99+
    2024-04-02
  • 分享5个JavaScript的写法小技巧
    目录前言过滤空值数组对象解构分隔数字箭头函数直接返回对象await 链条总结前言 JavaScript 易上手,但是难以全面掌握;它有许多“怪癖”,只有在长时...
    99+
    2024-04-02
  • 分享常用的3个C++小技巧
    目录1、头文件是引用<iostream.h>还是<iostream>?2、逗号分割表达式3、在main函数之前运行代码1、头文件是引用<iostream...
    99+
    2024-04-02
  • Python语言的10个小技巧分享
    这篇文章主要讲解了“Python语言的10个小技巧分享”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Python语言的10个小技巧分享”吧!10个Python小技巧1. 用ZIP处理列表假设...
    99+
    2023-06-16
  • JS数组实用技巧分享
    本篇内容介绍了“JS数组实用技巧分享”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!1. 删除数组的重复项2...
    99+
    2024-04-02
  • Python小技巧练习分享
    目录1.反转数字2.类的说明文档3.设置 Python 文件的编码4.旋转字符串5.实现控制台滚动条6.print 函数直接写入文件7.合并 2 个列表1.反转数字 问题场景: 把数...
    99+
    2024-04-02
  • 分享7个成为更好的Vue开发者的技巧
    目录1、脚本设置2、如何覆盖反应对象3、反应式 CSS4、全局组件5、组合 API 优于选项 API6、使用 v-once 或 v-memo 提高性能7、组件的异步加载1、脚本设置 ...
    99+
    2024-04-02
  • Vue中$once的两个实用小技巧分享
    目录前言清除定时器$once/$emit + async/await 实现 Dialog 同步执行总结前言 在 Vue 中有很多 API 都有很实用的地方,只是需要挖掘适用的场景,这...
    99+
    2024-04-02
  • JS利用map整合双数组的小技巧分享
    目录前言模拟数据合并后数据合并思路代码展示&解析第一步第二步第三步第四步全部代码总结前言 最近因公司业务需求编写ECharts图表展示相关公司阶段型业务相关数据变化,需要服...
    99+
    2024-04-02
  • 关于JavaScript中JSON的5个小技巧分享
    目录1.格式化2.隐藏字符串化数据中的某些属性3.使用toJSON创建自定义输出格式4.恢复数据5.使用revivers隐藏数据1. 格式化 默认的字符串化器还会缩小 JSON,看起...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作