脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 实用的JS技巧

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

 更新时间：2021年11月02日 15:24:00   作者：harry_yang  
有些代码,需要的时候能写的出来,但是也需要时间,如果有的东西长时间不接触,再次看的时候也会感觉很陌生,这篇文章主要给大家介绍了一些不常见却很实用的JS技巧,既可以作为一个知识的积累,又可以作为闲暇时打发时间写写代码的记录,需要的朋友可以参考下

前言

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

您可能感兴趣的文章:

相关文章

  • javascript实现添加附件功能的方法

    javascript实现添加附件功能的方法

    这篇文章主要介绍了javascript实现添加附件功能的方法，在我们编辑信息时，有时候需要附加文件、图片实现上传功能，通过本文了解javascript是如何实现附加功能的，请阅读。
    2015-11-11
  • Markdown-it将Markdown文本解析转换为HTML

    Markdown-it将Markdown文本解析转换为HTML

    Markdown-it是一款强大的Markdown解析器,支持多种Markdown语法,并能将Markdown文本转换为HTML,通过npm可快速安装,并可在JavaScript项目中简易调用,Markdown-it不仅支持基本Markdown语法,还扩展了表格、脚注等高级功能,同时允许自定义配置和使用插件以增强功能
    2024-10-10
  • JavaScript脚本性能的优化方法

    JavaScript脚本性能的优化方法

    JavaScript是一种解释型语言，所以能无法达到和C/Java之类的水平，限制了它能在客户端所做的事情，为了能改进他的性能，我想基于我以前给JavaScript做过的很多测试来谈谈自己的经验，希望能帮助大家改进自己的JavaScript脚本性能。
    2007-02-02
  • js实现浏览器的各种菜单命令比如打印、查看源文件等等

    js实现浏览器的各种菜单命令比如打印、查看源文件等等

    浏览器的各种菜单命令比如打印、查看源文件、加入收藏等等，这些在js中时完全可以实现的，本文搜集整理了一些，感兴趣的朋友可以参考下
    2013-10-10
  • JS组件封装之监听localStorage的变化

    JS组件封装之监听localStorage的变化

    这篇文章主要介绍了JS组件封装之监听localStorage的变化,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-09-09
  • javascript匿名函数中的''return function()''作用

    javascript匿名函数中的''return function()''作用

    这篇文章主要介绍了javascript匿名函数中的'return function()'作用介绍,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-10-10
  • 详解uniapp的全局变量实现方式

    详解uniapp的全局变量实现方式

    这篇文章主要介绍了详解uniapp的全局变量实现方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • JavaScript学习笔记(三)：JavaScript也有入口Main函数

    JavaScript学习笔记(三)：JavaScript也有入口Main函数

    大家都知道在c和java中，有main函数货main方法作为一个程序的入口函数或方法。在JS中从js源文件的头部开始运行的，我们仍然可以虚构出一个main函数来作为程序的起点，这样一来不仅可以跟其他语言统一了，而且说不定你会对JS有更深的理解。感兴趣的小伙跟着小编一起学习吧
    2015-09-09
  • JavaScript实现滚动加载更多

    JavaScript实现滚动加载更多

    这篇文章主要为大家详细介绍了JavaScript实现滚动加载更多，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-12-12
  • js+css实现tab菜单切换效果的方法

    js+css实现tab菜单切换效果的方法

    这篇文章主要介绍了js+css实现tab菜单切换效果的方法,以实例形式完整讲述了css与js的实现代码,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01

最新评论