分享一些不常见却很实用的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技巧内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JS调试必备的5个debug技巧

    JS调试必备的5个debug技巧

    1. debugger; 我以前也说过,你可以在JavaScript代码中加入一句debugger;来手工造成一个断点效果.需要带有条件的断点吗?你只需要用if语句包围它: 复制代码 代码如下: if (somethingHappens) { debugger; } 但要记住在程序发布前删掉它们. 2. 设置在DOM node发生变化时触发断点 有时候你会发现DOM不受你的控制,自己会发生一些奇怪的变化,让你很难找出问题的根源. 谷歌浏览器的开发工具里有一个超级好用的功能,专门可以对付这种情况,

  • JavaScript调试技巧之console.log()详解

    JavaScript调试技巧之console.log()详解

    一.什么是console.log()?除了一些很老版本的浏览器,现今大多数浏览器都自带调试功能:即使没有调试功能,也可以通过安装插件来进行补充.比如,老版本的Firefox没有自带调试工具,在这种情况下可以通过安装Firebug插件来添加调试功能.在具备调试功能的浏览器上,window对象中会注册一个名为console的成员变量,指代调试工具中的控制台.通过调用该console对象的log()函数,可以在控制台中打印信息.比如,以下代码将在控制台中打印"Sample log": 复制代

  • Javascript的数组与字典用法与遍历对象的属性技巧

    Javascript 的数组Array,既是一个数组,也是一个字典(Dictionary).先举例看看数组的用法. 复制代码 代码如下: var a = new Array(); a[0] = "Acer"; a[1] = "Dell"; for (var i = 0; i < a.length; i++) { alert(a[i]); } 下面再看一下字典的用法. 复制代码 代码如下: var computer_price = new Array(); co

  • JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)

    本文实例总结了JS数组排序技巧.分享给大家供大家参考,具体如下: ① 冒泡排序 bubbleSort:function(array){ var i = 0, len = array.length, j, d; for(; i<len; i++){ for(j=0; j<len; j++){ if(array[i] < array[j]){ d = array[j]; array[j] = array[i]; array[i] = d; } } } return array; } ② js

  • JS截取与分割字符串常用技巧总结

    本文实例讲述了JS截取与分割字符串的常用方法.分享给大家供大家参考,具体如下: JS截取字符串可使用 substring()或者slice()   函数:substring() 定义:substring(start,end)表示从start到end之间的字符串,包括start位置的字符但是不包括end位置的字符. 功能:字符串截取,比如想从"MinidxSearchEngine"中得到"Minidx"就要用到substring(0,6) 例子: var src=&q

  • JavaScript中的alert()函数使用技巧详解

    在JavaScript代码中,可以使用window对象的alert()函数来显示一段文本,从而进行程序的调试,或者向用户警示相关信息: 复制代码 代码如下: //Use window object's alert() function window.alert("sample text"); 这一写法可以简化为直接使用alert()函数: 复制代码 代码如下: //Simplified alert() usage alert("sample text"); 如果需要

  • JavaScript截取、切割字符串的技巧

    对于字符串的切割截取平时所用可能不是特别多,而且分的比较细,所以自备自查.有备无患. 由于之前所有均在一个demo测试,若是哪里打错了,敬请谅解.一些其余属性找时间继续添加. 1.函数:split() 功能:使用一个指定的分隔符把一个字符串分割存储到数组 例子: str="jpg|bmp|gif|ico|png"; arr=str.split("|"); //arr是一个包含字符值"jpg"."bmp"."gif&q

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

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

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

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

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

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

  • 分享几个Java工作中实用的代码优化技巧

    分享几个Java工作中实用的代码优化技巧

    目录 1.类成员与方法的可见性最小化 2.使用位移操作替代乘除法 3.尽量减少对变量的重复计算 4.不要捕捉RuntimeException 5.使用局部变量可避免在堆上分配 6.减少变量的作用范围 7.懒加载策略 8.访问静态变量直接使用类名 9.字符串拼接使用StringBuilder 10.重写对象的HashCode 11.HashMap等集合初始化 12.循环内创建对象引用 13.遍历Map 使用 EntrySet 方法 14.不要在多线程下使用同一个 Random 15.自增推荐使用L

  • 很实用的js选项卡切换效果

    很实用的js选项卡切换效果

    本文实例为大家分享了js实现简单的选项卡切换效果的具体代码,供大家参考,具体内容如下 js选项卡切换代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="gb2312"> <title>实践题 - 选项卡</title> <style type="text/css"> *{ margin:0px; p

  • asp.net一些很酷很实用的.Net技巧第1/2页

    一．.Net Framework 1．  如何获得系统文件夹 使用System.Envioment类的GetFolderPath方法:例如: Environment.GetFolderPath( Environment.SpecialFolder.Personal ) 2．  如何获得正在执行的exe文件的路径 1)  使用Application类的ExecutablePath属性 2)  System.Reflection.Assembly.GetExecutingAssembly().Loc

  • 非常实用的js验证框架实现源码 附原理方法

    本文为大家分享一个很实用的js验证框架实现源码,供大家参考,具体内容如下 关键方法和原理: function check(thisInput) 方法中的 if (!eval(scriptCode)) { return false; } 调用示例: 复制代码 代码如下: <input type="text" class="text_field percentCheck" name="progress_payment_two" id="

  • 分享介绍Python的9个实用技巧

    分享介绍Python的9个实用技巧

    本文会介绍一些Python大神用的贼溜的技巧,让一探究竟吧!欢迎收藏学习,喜欢点赞支持,欢迎畅聊. 整理字符串输入 整理用户输入的问题在编程过程中很常见.有更好的方法来解决: user_input = "This string has some whitespaces... " character_map = { ord( ) : , ord( ) : , ord( ) : None } user_input.translate(character_map) # This string

  • JS实现很实用的对联广告代码（可自适应高度）

    JS实现很实用的对联广告代码（可自适应高度）

    本文实例讲述了JS实现很实用的对联广告代码(可自适应高度).分享给大家供大家参考.具体如下: 这是一款很实用的基于JS+CSS+DIV的网页对联广告代码,自适应网页高度,也就是始终保持在一定调试,这款暂时没有关闭功能. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-lr-useful-adv-auto-height-codes/ 具体代码如下: <html> <head> <meta http-equiv="

  • 分享jQuery3种常见事件监听方式

    目录 1.HTML标签内联事件 2.用JavaScript实现事件监听 3.用jQuery实现事件监听 前言: 在 Web 页面经常会有各种事件发生,事件发生后需要进行一些特定处理,即执行特定的函数或者语句.这就需要对事件进行监听,监听事件的常见方式有以下三种,本文将通过实例来具体介绍. 1.HTML标签内联事件 实例1:单击页面 "Hello" 按钮,弹出提示框显示 Hello world! <!doctype html> <html> <head>

  • 很实用的一个完整email发送程序

    很实用的一个完整email发送程序,很简单,把下列代码复制到一个空白文本页面,如index.php,运行就行了.具体实例:http://zsvalley.uhome.net/email/index.php. 以下是完整的源代码:(有任何问题请email:zsvalley@cmmail.com) <? if ($ok=='yes'){ //        SetCookie("yname", $yname);  //        SetCookie("yemail&qu

随机推荐