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

2024-04-02 19:04:59 608人浏览安东尼

摘要

前言编程语言通常暗藏着各种技巧，熟练使用这些技巧可以提高开发效率。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技巧内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 分享一些不常见却很实用的JS技巧

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

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

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

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

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

前言编程语言通常暗藏着各种技巧，熟练使用这些技巧可以提高开发效率。JavaScript 就是一门技巧性很强的语言，掌握常见的语法技巧不但可以加深对语言特性的理解，还可以简化代码，提...

99+

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

1. “返回”按钮使用 history.back() 可以创建一个浏览器“返回”按钮。 <button onclick="history.back()"> ...

99+

2022-11-12
Python中实用却不常见的小技巧是什么呢

这期内容当中小编将会给大家带来有关Python中实用却不常见的小技巧是什么呢，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。“Talk is cheap show me the code”，这是编程人条，说...

99+

2023-06-02
不常见但是很实用的PHP函数分享

本篇内容介绍了“不常见但是很实用的PHP函数分享”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！1. sys_getloadavg()sys_...

99+

2023-06-17
Java中不常用但很好用的开发小技巧分享

目录BigDecimalcompareToListtoArrayJDK8的小玩意flatMap其实干 Java 开发，必然离不开一些计算，比如如果你现在工作是服务...

99+

2023-05-18

Java好用开发技巧分享 Java开发技巧 Java技巧