有哪些不常见但实用的JavaScript技巧值得分享？

本文共计821个文字，预计阅读时间需要4分钟。

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

JavaScript技巧性很强，掌握常见语法技巧：

1. 熟悉ES6+新特性，如箭头函数、模板字符串、解构赋值等。

2.利用原型链、闭包实现高阶函数和函数式编程。

3.掌握异步编程方法，如Promise、async/await等。

4.精通DOM操作和事件处理。

5.学习模块化开发，使用模块化工具如CommonJS、AMD、UMD等。

6.熟练运用前端构建工具，如Webpack、Gulp等。

熟练运用这些技巧，可以提高JavaScript代码质量和开发效率。

前言

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

下面是列出一些 JavaScript 有用的技巧，相信总有一天会对你有所帮助。

1、数组去重

constnumbers=[1, 2,3,4,4,1] console.log([...newSet(numbers)])//[1, 2,3,4]

2、从数组中过滤所有虚值

constmyArray=[1,undefined,null,2, NaN,true,false, 3] console.log(myArray.filter(Boolean))//[1,2, true,3]

3、将字符串转换为数字

conststr='123' const num = +str console.log(typeof num)//number

4、将数字转换为字符串

constnum=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('Irunonlyonce'),{ once:true });

8、为了提高数字的可读性，您可以使用下划线作为分隔符：

constnum=2_000_000_000 console.log(num)//2000000000

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

<divid="card"data-name="FE"data-number="5"data-label="listCard"> 卡片信息 </div> <script> constel=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技巧内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！