今天分享几个少见却很有用的 JS 技巧

1. “返回”按钮

使用 history.back() 可以创建一个浏览器“返回”按钮。

<button onclick="history.back()">
    返回
</button> 

2. 数字分隔符

为了提高数字的可读性,您可以使用下划线作为分隔符:

const largeNumber = 1_000_000_000;

console.log(largeNumber); // 1000000000

3. 事件监听器只运行一次

如果你想添加一个事件监听器并且只运行一次,你可以使用 once 选项:

element.addEventListener('click', () => console.log('I run only once'), {
    once: true
});        

4. console.log 变量包装

您在 console.log() 的时候,将参数用大括号括起来,这样可以同时看到变量名和变量值。

5. 从数组中获取最小值/最大值

您可以使用 Math.min() 或 Math.max() 结合扩展运算符来查找数组中的最小值或最大值。

const numbers = [6, 8, 1, 3, 9];

console.log(Math.max(...numbers)); // 9
console.log(Math.min(...numbers)); // 1  

6. 检查 Caps Lock 是否打开

您可以使用 KeyboardEvent.getModifierState() 来检测是否 Caps Lock 打开。

const passwordInput = document.getElementById('password');

passwordInput.addEventListener('keyup', function (event) {
    if (event.getModifierState('CapsLock')) {
        // CapsLock 已经打开了
    }
});

7. 复制到剪贴板

您可以使用 Clipboard API 创建“复制到剪贴板”功能:

function copyToClipboard(text) {
    navigator.clipboard.writeText(text);
}     

8. 获取鼠标位置

您可以使用 MouseEvent 对象下 clientX 和 clientY 的属性值,获取鼠标的当前位置坐标信息。

document.addEventListener('mousemove', (e) => {
    console.log(`Mouse X: ${e.clientX}, Mouse Y: ${e.clientY}`);
});   

9. 缩短数组

您可以设置 length 属性来缩短数组。

const numbers = [1, 2, 3, 4, 5]

numbers.length = 3;

console.log(numbers); // [1, 2, 3]

10. 简写条件判断语句

如果仅在判断条件为 true 时才执行函数,则可以使用 && 简写。

// 普通写法
if (condition) {
    doSomething();
}

// 简写
condition && doSomething();

11. console.table() 打印特定格式的表格

语法:

// [] 里面指的是可选参数
console.table(data [, columns]);

参数:

data 表示要显示的数据。必须是数组或对象。

columns 表示一个包含列的名称的数组。

实例:

// 一个对象数组,只打印 firstName
function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
}

const john = new Person("John", "Smith");
const jane = new Person("Jane", "Doe");
const emily = new Person("Emily", "Jones");

console.table([john, jane, emily], ["firstName"]);

打印结果如下图:

12. 数组去重

const numbers = [2, 3, 4, 4, 2];

console.log([...new Set(numbers)]); // [2, 3, 4]

13. 将字符串转换为数字

const str = '404';

console.log(+str) // 404;

14. 将数字转换为字符串

连接空字符串。

const myNumber = 403;

console.log(myNumber + ''); // '403'

15. 从数组中过滤所有虚值

const myArray = [1, undefined, NaN, 2, null, '@denicmarko', true, 3, false];

console.log(myArray.filter(Boolean)); // [1, 2, "@denicmarko", true, 3]

16. 妙用 includes

const myTech = 'JavaScript';
const techs = ['HTML', 'CSS', 'JavaScript'];

// 普通写法
if (myTech === 'HTML' || myTech === 'CSS' || myTech === 'JavaScript') {
    // do something
}

// includes 写法
if (techs.includes(myTech)) {
    // do something
}

17. 妙用 reduce 对数组求和

const myArray = [10, 20, 30, 40];
const reducer = (total, currentValue) => total + currentValue;

console.log(myArray.reduce(reducer)); // 100

18. console.log() 样式

您知不知道可以使用 CSS 语句在 DevTools 中设置 console.log 输出的样式:

19. 元素的 dataset

使用 dataset 属性访问元素的自定义数据属性 ( data-* ):

<div id="user" data-name="John Doe" data-age="29" data-something="Some Data">
    John Doe
</div>

<script>
    const user = document.getElementById('user');

    console.log(user.dataset);
    // { name: "John Doe", age: "29", something: "Some Data" }

    console.log(user.dataset.name); // "John Doe"
    console.log(user.dataset.age); // "29"
    console.log(user.dataset.something); // "Some Data"
</script>

到此这篇关于今天分享几个少见却很有用的 JS 技巧的文章就介绍到这了,更多相关JS 技巧内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)

    我们在编写 JS 代码时,经常会遇到逻辑判断复杂的情况.一般情况下,可以用 if/else 或 switch 来实现多个条件判断,但会出现一个问题:随着逻辑复杂度的增加,代码中的 if/else 和 switch 会越来越臃肿.本文将带你尝试写出更优雅的判断逻辑. 比如说下面这样一段代码: const onButtonClick = (status) => { if (status == 1) { sendLog('processing') jumpTo('IndexPage') } else

  • 处理JavaScript值为undefined的7个小技巧

    前言 我刚刚开始学习JavaScript时,大约是八年前,当时我对于undefined 和 null 比较困惑 ,因为他们都表示空值. 他们有什么明确的区别吗?他们似乎都可以定义一个空值,而且 当你进行 在做null ===undefined 的比较时,结果是true. 现在的大多数语言,像Ruby, Python or Java,他们有一个单独的空值(nil 或 null),这似乎才是一个合理的方式. 而在JavaScript里,当你要获取一个变量或对象(未初始化)的值时,js引擎会返回 un

  • 帮你提高开发效率的JavaScript20个技巧

    目录 1. 申明和初始化数组 2.进行求和.最小值和最大值 3. 对字符串.数字或对象的数组进行排序 4. 是否需要从一个数组中过滤掉无用的值? 5. 为各种条件使用逻辑运算符 6. 删除重复的值 7. 创建一个计数器对象或Map 8. 三元运算符很酷 9. 与传统的once相比,for循环更快. 10. 合并两个对象 11. 箭头函数 12. 可选链式 13. 打乱一个数组 14. 空值合并运算符 15. Rest & Spread 运算符 16. 缺省参数 17. 将十进制转换为二进制或十六

  • 详解在Vue.js编写更好的v-for循环的6种技巧

    在VueJS中,v-for循环是每个项目都会使用的东西,它允许您在模板代码中编写for循环. 在最基本的用法中,它们的用法如下. <ul> <li v-for='product in products'> {{ product.name }} </li> </ul> 但是,在本文中,我将介绍六种方法来使你的 v-for 代码更加精确,可预测和强大. 让我们开始吧. 1.始终在v-for循环中使用key 首先,我们将讨论大多数Vue开发人员已经知道的常见最佳做

  • JS利用map整合双数组的小技巧分享

    目录 前言 模拟数据 合并后数据 合并思路 代码展示&解析 第一步 第二步 第三步 第四步 全部代码 总结 前言 最近因公司业务需求编写ECharts图表展示相关公司阶段型业务相关数据变化,需要服务端进行数据查询返回给前端进行数据展示.但是由于反回的数据不便于前端 ECharts展示所以需要进行数据整合,奈何本人经验不足只能请教公司大佬,在大佬帮助下完成了数据整合,并学到一个前所未闻的合并方法今天分享给大家. 模拟数据 下图是将要被合并的两数组 合并后数据 合并后数据要求以时间为唯一的key进行

  • nodejs代码执行绕过的一些技巧汇总

    在php中,eval代码执行是一个已经被玩烂了的话题,各种奇技淫巧用在php代码执行中来实现bypass.这篇文章主要讲一下nodejs中bypass的一些思路. 1. child_process 首先介绍一下nodejs中用来执行系统命令的模块child_process.Nodejs通过使用child_process模块来生成多个子进程来处理其他事物.在child_process中有七个方法它们分别为:execFileSync.spawnSync,execSync.fork.exec.exec

  • 今天分享几个少见却很有用的 JS 技巧

    1. "返回"按钮 使用 history.back() 可以创建一个浏览器"返回"按钮. <button onclick="history.back()"> 返回 </button> 2. 数字分隔符 为了提高数字的可读性,您可以使用下划线作为分隔符: const largeNumber = 1_000_000_000; console.log(largeNumber); // 1000000000 3. 事件监听器只运行

  • 分享一些不常见却很实用的JS技巧

    前言 编程语言通常暗藏着各种技巧,熟练使用这些技巧可以提高开发效率.JavaScript 就是一门技巧性很强的语言,掌握常见的语法技巧不但可以加深对语言特性的理解,还可以简化代码,提高编码效率. 下面是列出一些 JavaScript 有用的技巧,相信总有一天会对你有所帮助. 1.数组去重 const numbers = [1, 2, 3, 4, 4, 1] console.log([...new Set(numbers)]) // [1, 2, 3, 4] 2.从数组中过滤所有虚值 const 

  • 8 个有用的JS技巧(推荐)

    为了保证的可读性,本文采用意译而非直译. 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你! 这些技巧可能大家大部分都用过了,如果用过就当作加深点映像,如果没有遇到过,就当作学会了几个技巧. 1. 确保数组值 使用 grid ,需要重新创建原始数据,并且每行的列长度可能不匹配, 为了确保不匹配行之间的长度相等,可以使用Array.fill方法. let array = Array(5).fill(''); console.log(array); // outputs (5) [

  • 12个非常有用的JavaScript技巧

    在这篇文章中,我将分享12个非常有用的JavaScript技巧.这些技巧可以帮助你减少并优化代码. 1) 使用!!将变量转换成布尔类型 有时,我们需要检查一些变量是否存在,或者它是否具有有效值,从而将它们的值视为true.对于做这样的检查,你可以使用||(双重否定运算符),它能自动将任何类型的数据转换为布尔值,只有这些变量才会返回false:0,null,"",undefined或NaN,其他的都返回true.我们来看看这个简单的例子: function Account(cash) {

  • 分享很少见很有用的SQL功能CORRESPONDING

    目录 前言 使用CORRESPONDING 使用CORRESPONDING BY 前言 我最近偶然发现了一个标准的SQL特性,令我惊讶的是,这个特性在HSQLDB中实现了.这个关键字是CORRESPONDING ,它可以和所有的集合操作一起使用,包括UNION .INTERSECT .和EXCEPT . 让我们来看看sakila数据库.它有3个表: CREATE TABLE actor ( actor_id integer NOT NULL PRIMARY KEY, first_name var

  • 19个很有用的 JavaScript库推荐

    然而需要实现一些特定的功能,则可以选择功能更专一的轻量库,今天这篇文章与大家分享16个很有用的 JavaScript 库. Blackbird: Open Source JavaScript Logging UtilityBlackbird 是一款非常酷的 JavaScript 调试工具,带有一个漂亮的界面显示和过滤调试信息. Treesaver.jsTreesaver 是一个用于创建杂志布局的 JavaScript 框架. BibliotypeBibliotype 是一个简单的基于 HTML.

  • VBScript:Join 函数一个不太常用,却很有用的函数

    以前没有注意到这个函数,直到今天用起来才觉得这个函数很有用,确实不错 ,先记一下用法看看. Join 函数 返回一个字符串,此字符串由包含在数组中的许多子字符串联接创建. Join(list[,delimiter]) 参数 list 必选项.包含要联接的子字符串一维数组. Delimiter 可选项.在返回字符串中用于分隔子字符串的字符.如果省略,将使用空字符 ("").如果 delimiter 是零长度字符串,则在同一列表中列出全部项,没有分界符. 说明 下面的示例利用 Join 函

  • 分享Visual Studio原生开发的10个调试技巧(2)

    之前关于Visual Studio调试技巧的文章引起了大家很大的兴趣,以至于我决定分享更多调试的知识.以下的列表中你可以看到写原生开发的调试技巧(接着以前的文章来编号).这些技巧可以应用在VS2005或者更新版本中(当然有一些可以适用于旧版本).如果你继续,你可以知道每个技巧的详细信息. 技巧11:数据断点 当数据所在内存位置变化时,调试器将会中断.然而,这是唯一可能在一个时间创建4这样的硬件的数据断点.数据断点只能在编译的过程中添加,可以通过菜单(编译>新断点>新数据断点)或者通过断点窗口来

  • 分享Python 的24个编程超好用技巧

    目录 1.ALLORANY 2.BASHPLOTIB 3.COLLECTIONS 4.DIR 5.EMOJI 6.FROM_FUTURE_IMPORT 7.GEOPY 8.HOWDOI 9.INSPECT 10.JEDI 11.**KWARGS 12.LISTCOMPREHENSIONS 13.MAP 14.NEWSPAPER3K 15.OPERATOROVERLOADING(操作符重载) 16.PPRINT 17.QUEUE(队列) 18.sh 19.TYPEHINT(类型提示) 20.UUI

  • JavaScript 12个有用的数组技巧

    目录 数组去重 1.from()叠加new Set()方法 2.spread操作符(-) 替换数组中的特定值 没有map()的映射数组 空数组 将数组转换为对象 用数据填充数组 合并数组 两个数组的交集 删除数组中的假值 获取数组中的随机值 lastIndexOf()方法 将数组中的所有值相加 数组是Javascript最常见的概念之一,它为我们提供了处理数据的许多可能性,熟悉数组的一些常用操作是很有必要的. 数组去重 1.from()叠加new Set()方法 字符串或数值型数组的去重可以直接

随机推荐