分享7个杀手级JS小技巧

目录
  • 一、数组乱序
  • 二、复制到剪贴板
  • 三、数组去重
  • 四、检测黑暗模式
  • 五、滚动到顶部
  • 六、滚动到底部
  • 七、生成随机颜色

一、数组乱序

在使用需要某种程度的随机化的算法时，你会经常发现洗牌数组是一个相当必要的技能。下面的片段以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小技巧内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 交互式可视化js库gojs使用介绍及技巧

    交互式可视化js库gojs使用介绍及技巧

    目录 1. gojs 简介 2. gojs 应用场景 3. 为什么选用 gojs: 4. gojs 上手指南 5. 小技巧(非常实用哦) 6. 实践:实现节点分组关系可视化交互图 最后 1. gojs 简介 gojs 是一个用于构建交互式可视化图的 js 库,使用可自定义的模板和布局构建复杂节点.链接和组,从而构建出简单到复杂的各类图,如流程图.脑图.组织图.甘特图等.而且提供了许多用于用户交互的高级功能,例如拖放.复制和粘贴.就地文本编辑...... gojs 是 Northwoods Sof

  • JavaScript 数组常见操作技巧 (二)

    目录 一.出数组中的重复元素或非重复元素 二.数组扁平化 / 数组降维 二维数组:双重循环 二维数组:循环 + concat 二维数组:reduce + concat 二维数组:展开 / apply + concat 多维数组:toString + split 多维数组:forEach + 递归 多维数组:reduce + 递归 多维数组:while + some 不确定维数的数组: flat 前言: 数组是 JavaScript 中常见数据类型之一,关于它的一些操作方法,我在这里做一下简单记录

  • JavaScript 数组常见操作技巧

    目录 一.创建数组 二.判断是不是数组 三.类数组和数组的转换 四.数组去重 1.利用 set 去重 2.双重循环 + splice 3.新建数组 + includes 4.reduce + includes 5.新建数组 + sort 6.新建数组 + 利用对象属性 7.利用 map 8.filter + indexOf 本文主要包括: 创建数组 判断是不是数组 类数组和数组的转换 数组去重 各位看官可根据自身需求选择食用. 一.创建数组 创建数组是基本功,其方法主要包括以下几种: const

  • 分享5个JavaScript的写法小技巧

    分享5个JavaScript的写法小技巧

    目录 前言 过滤空值 数组对象解构 分隔数字 箭头函数直接返回对象 await 链条 总结 前言 JavaScript 易上手,但是难以全面掌握:它有许多“怪癖”,只有在长时间的使用它,才能逐渐揭开它神秘的面纱~ 本篇带来 JavaScript 几个片段代码,里面有些小技巧,肯定有你不知道~ 冲! 过滤空值 filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素. 注意: filter() 不会对空数组进行检测. 注意: filter() 不会改变原始数组.

  • 学习JavaScript一定要知道的3个小技巧

    目录 一.神奇的扩展运算符 1.拷贝数组 2.合并数组 3.展开对象 二.进行空检查的最佳方法 1.可选链操作符 2.空值合并运算符 三.使用 .map()..reduce() 和 .filter() 前言: 通常在 Angular 或 React 项目中,code review 时看到一些老式的 JavaScript 代码,就会将开发人员归类为初学者.但是,如果您知道以下 3 个技巧,您将被视为现代 JavaScript 的尤达大师.那么,让我们开始我们的旅程吧! 一.神奇的扩展运算符 扩展运

  • 20个JS简写技巧提升工作效率

    目录 当同时声明多个变量时,可简写成一行 利用解构,可为多个变量同时赋值 巧用三元运算符简化if else 使用||运算符给变量指定默认值 使用&&运算符简化if语句 使用解构交换两个变量的值 适用箭头函数简化函数 使用字符串模板简化代码 多行字符串也可使用字符串模板简化 对于多值匹配,可将所有值放在数组中,通过数组方法来简写 巧用ES6对象的简洁语法 使用一元运算符简化字符串转数字 使用repeat()方法简化重复一个字符串 使用双星号代替Math.pow() 使用双波浪线运算符(~~)

  • 四十九个javascript小知识实用技巧

    目录 一.js整数的操作 二.重写原生alert,记录弹框次数 三.数字交换不声明中间变量的方法 四.万物皆对象 五.If语句的变形 六.使用===,而不是＝＝ 七.使用闭包实现私有变量 八.创建对象的构造函数 九.小心使用typeof.instanceof和constructor 十.创建一个自调用函数(Self-calling Funtion) 十一.从数组中获取一个随机项 十二.在特定范围内获取一个随机数 十三.在0和设定的最大值之间生成一个数字数组 十四.生成一个随机的数字字母字符串 十

  • JavaScript解构赋值的实用技巧指南

    目录 一.基本概念 二.解构分类 1. 对象的解构赋值 2. 数组的解构赋值 (1)字符串 (2)数组 (3)集合 (4)Map 三.嵌套解构 四.使用技巧 1. 函数解构 (1)解构函数参数 2. 循环中的解构 3. 动态属性解构 4. 交换变量 5. 数组拷贝 四.解构赋值注意点 总结 一.基本概念 为什么需要解构呢,先来看一个例子: const student = { name: 'ZhangSan', age: 18, scores: { math: 19, english: 85, c

  • 分享7个杀手级JS小技巧

    目录 一.数组乱序 二.复制到剪贴板 三.数组去重 四.检测黑暗模式 五.滚动到顶部 六.滚动到底部 七.生成随机颜色 一.数组乱序 在使用需要某种程度的随机化的算法时,你会经常发现洗牌数组是一个相当必要的技能.下面的片段以O(n log n)的复杂度对一个数组进行就地洗牌. const shuffleArray = (arr) => arr.sort(() => Math.random() - 0.5) // 测试 const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9

  • 分享常用的3个C++小技巧

    目录 1.头文件是引用<iostream.h>还是<iostream>? 2.逗号分割表达式 3.在main函数之前运行代码 1.头文件是引用<iostream.h>还是<iostream>? 编码中依旧有程序员依旧使用<iostream.h>而不是<iostream>库.实际上,这两个库是有区别的: 首先针对用.h作为标准头文件已经明确不推荐使用. 其次,在功能方面,<iostream>包括IO类,且同时支持窄字符和宽字

  • 分享一些非常实用的Python小技巧

    目录 1.唯一性 2.变位词(相同字母异序词) 3.内存 4.字节大小 5.打印N次字符串 6.首字母大写 7.列表细分 8.压缩 9.计数 10.链式比较 11.逗号分隔 12.元音计数 13.首字母小写 14.展开列表 15.寻找差异 16.输出差异 17.链式函数调用 18. 19.将两个列表转换为字库 20.出现频率最高的元素 21.回文(正反读有一样的字符串) 22.不用if-else语句的计算器 23.随机排序 24.展开列表 1.唯一性 以下方法可以检查给定列表是否有重复的地方,可

  • 分享python数据统计的一些小技巧

    最近在用python做数据统计,这里总结了一些最近使用时查找和总结的一些小技巧,希望能帮助在做这方面时的一些童鞋.有些技巧是很平常的用法,平时我们没有注意,但是在特定场景,这些小方法还是能带来很大的帮助. 1.在字典中将键映射到多个值上面 {'b': [4, 5, 6], 'a': [1, 2, 3]} 有时候我们在统计相同key值的时候,希望把所有相同key的条目添加到以key为键的一个字典中,然后再进行各种操作,这时候我们就可以使用下面的代码进行操作: from collections im

  • 分享五个有用的jquery小技巧

    下文里技巧实现的效果虽然并不新鲜,但通过jQuery的封装,HTML实现了很大的清洁.清爽简洁又高效的代码任何时候都是开发者所醉心追求的终极目标,也许它简单,但是它能量巨大.一起来看看我们小编推荐给大家的五个非常实用的jQuery技巧. 1.禁用鼠标右键 $(document).ready(function() { $(document).bind("contextmenu", function(e) { return false; }); }); 当然jquery1.7版本以后bin

  • 分享一些iOS开发实用的小技巧

    分享一些iOS开发实用的小技巧

    1.设置navigationbar title颜色 UIColor *whiteColor = [UIColor whiteColor]; NSDictionary *dic = [NSDictionary dictionaryWithObject:whiteColor forKey:NSForegroundColorAttributeName]; [self.navigationController.navigationBar setTitleTextAttributes:dic]; 2.获取

  • $()JS小技巧

    在我们写javascript的时候经肯定会经常用到 document.getElementById() 这个方法,这么长一串很容易写错,而且其中getElementById又有大小写之分.   其实prototype.js里提倡的一个方法就是使用$()简写,通过以下的函数,你可以用$('id')来实现document.getElementById('id') 这个功能,怎么样,很爽吧! 复制代码 代码如下: function $()   {     var elements = new Arra

  • js小技巧--自动隐藏红叉叉

    当文章中链接的图片失效时,就会看到令人讨厌的红叉叉,虽然图片有alt属性可以补救一下该图的意义,但都给人不友好的感觉.  如果给图片加一个判断,当加载失败时就不显示,这样可以产生更令用户满意的体验.  代码如下: <img src='none.gif' onerror="this.parentNode.removeChild(this)" style="display:none" onload="this.style.display='block'&

  • JS 4个超级实用的小技巧 提升开发效率

    目录 1.短路判断 2.可选链操作符 ( ? ) 3.空值合并操作符 ( ?? ) 4.return终止函数 1.短路判断 当只需要简单的if条件时,可使用此方法 let x = 0; let foo = () => console.log('执行了'); if(x === 0){ foo() } 通过使用&&运算符来实现同样的if功能,如果&&之前的条件为false,则&&之后的代码将不会执行. let x = 0; let foo = () =&g

随机推荐