本文整理了十个实用且高效的JavaScript开发技巧，涵盖数组去重、虚值过滤、类型转换、条件简写、调试工具使用及事件监听优化等场景。通过掌握这些语法特性，开发者可以简化代码逻辑，提升编码效率与可读性，适用于日常前端开发实践。
JavaScript 实用技巧概览
前言
编程语言中往往隐藏着许多高效技巧，熟练运用这些技巧能够显著提升开发效率。JavaScript 是一门极具技巧性的语言，掌握常见的语法技巧不仅有助于深入理解语言特性，还能简化代码结构，从而提高编码效率。
以下列举了一些 JavaScript 中实用且高效的技巧，相信在未来的开发工作中，它们会对您有所帮助。
数组与类型转换技巧
1、数组去重
const numbers = [1, 2, 3, 4, 4, 1]
console.log([...new Set(numbers)]) // [1, 2, 3, 4]
2、从数组中过滤所有虚值
const myArray = [1, undefined, null, 2, NaN, true, false, 3]
console.log(myArray.filter(Boolean)) // [1, 2, true, 3]
3、将字符串转换为数字
const str = '123'
const num = +str
console.log(typeof num) // number
4、将数字转换为字符串
const num = 123;
console.log(num + ''); // '123'
条件判断与调试工具
5、使用 && 符号简写条件判断语句
// 普通写法
if (condition) {
doSomething()
}
// 简写
condition && doSomething()
6、console.table() 打印特定格式的表格
// [] 里面指的是可选参数\
console.table(data [, columns]);
参数说明：
- data 表示要显示的数据，必须是数组或对象。
- columns 表示一个包含列名称的数组。
实例演示：
function Goods(name, price) {
this.name = name
this.price = price
}
const book = new Goods("《webpack 入门到放弃》", "¥ 9.00")
const knowledge = new Goods("《前端的自我修养》", "¥ 99.00")
const ebook = new Goods("《node.js 课程》", "¥ 199.00")
console.table([book, knowledge, ebook], ["name", "price"])
打印结果如下：
事件监听与数据属性处理
7、如果你想添加一个事件监听器并且只运行一次，你可以使用 once 选项：
element.addEventListener('click', () => console.log('I run only once'), {
once: true
});
8、为了提高数字的可读性，您可以使用下划线作为分隔符：
const num = 2_000_000_000
console.log(num) // 2000000000
9、使用 dataset 属性访问元素的自定义数据属性 (data-*)：
<div id="card" data-name="FE" data-number="5" data-label="listCard">
卡片信息
</div>
<script>
const el = document.getElementById('card')
console.log(el.dataset)
// { name: "FE", number: "5", label: "listCard" }
console.log(el.dataset.name) // "FE"
console.log(el.dataset.number) // "5"
console.log(el.dataset.label) // "listCard"
</script>
总结
到此这篇关于实用JS技巧的文章就介绍到这了，更多相关实用的JS技巧内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！