服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - 分享六个实用的 JS 小技巧,让你的代码显得更专业些

分享六个实用的 JS 小技巧,让你的代码显得更专业些

2024-01-19 14:33前端达人 js教程

JavaScript 是世界上最流行的编程语言,它的受欢迎程度只会随着时间的推移而增加。借助一些简单的命令和技巧,您就可以在JavaScript中轻松创建比较酷的代码,让你的同事羡慕你。

分享六个实用的 JS 小技巧,让你的代码显得更专业些

借助这些简单的命令和技巧,您就可以在JavaScript中轻松创建比较酷的代码,让你的同事羡慕你。

JavaScript 是世界上最流行的编程语言,它的受欢迎程度只会随着时间的推移而增加。它通常用于前端和后端开发,但是,有许多库、框架和虚拟环境使您能够构建您想要的一切。

例如,使用 React Native,你可以同时为 iOS 和 Android 创建一个移动应用程序,正如你所理解的那样,它会大大提高你的效率。所以,JavaScript 现在的需求点还是蛮大的,我将在本文中向您展示的技巧将非常有用,尤其是当您想给某人留下深刻印象时。你需要了解这些有趣的语法糖,提升你的工作效率。

1、箭头函数

本文的第一个技巧是箭头函数,如果你不知道它,那么你肯定需要。有了它,您将以更高效、更简单的方式编写您的函数,从而使您的代码大小减少一半。此外,您的代码将更容易阅读和理解。如下面这段代码:

//Usual Function
hello = function(val) {
  return "Hello World!" + val;
}
//Arrow Function
hello = (val) => "Hello " + val;

2、转换为字符串,数值,布尔值

将不同类型的数据转换为另一种数据类型在许Tuohang定情况下可能非常有用,或者当您只需要转换它以便稍后将其与其他类型的数据连接时。这里有几个例子,你可以参考下:

//Converting to a string
let x = 1 + "";
console.log(x); // Result: "1"
//Converting to a number
let y = "25";
y = +y;
console.log(y); // Result: 15
//Converting to a boolean
const z = !0;
console.log(typeof z); // Result: "boolean"

3、替换 Math() 运算符

Math() 运算符非常有用,有了它,您不必编写复杂的数学算法并使用 Math 的全部功能。然而,如果你想做一些简单的任务,比如 Powering 和 Rounding,那么使用 vanilla JS 会更好、更高效,而不需要任何库。看这个例子:

//Powering::Before
console.log(Math.pow(2,3)) //Result: 8
//Powering::after
console.log(2 ** 3) //Result: 8

而且,如果您想四舍五入您的数字,也有一个快速的解决方案。您不再需要使用 Math.floor() 、 Math.ceil() 或 Math.round() 进行舍入,这里是:

//Rounding::Before
console.log(Math.floor(47.6)) //Result: 47
//Rounding::after
console.log(47.6 | 0) //Result: 47

4、快速的 console.log

如果你一直在完整地编写 console.log(),那么相信我,我会用这个非常简单的技巧为你节省很多时间:

let c = console.log.blind(document);
c("Hello World"); //Result: "Hello World"
c(123); //Result: 123
c(True); //Result: True

5、删除最后的数字

您还可以使用“或(|)”运算符从整数末尾删除任意数量的数字。这意味着您不必为了从整数中删除一位数字而编写一长串代码。如下这个示例:

//Before
let str = "2022"; 
Number(str.substring(0, str.length - 1)); //Result: 202
//After
console.log(2022 / 10   | 0)  // Result: 202
console.log(2022 / 100  | 0)  // Result: 20
console.log(2022 / 1000 | 0)  // Result: 2

6、数字分隔符

如果你正在处理长数字并且总是试图理解它是 1,000,000 还是 10,000,000,你是不是总是在数后面有几个零,不太直观?那么问题总是存在,因为大多数人不知道这种方法可以使数字更具可读性和美观性。在此示例中,我们将使用“_”作为数字分隔符:

//Before
let x = 1000000
let y = 10000000
//After
let x = 1_000_000
let y = 10_000_000
//The output will be the same for the both example

结束

今天的介绍就到这里,现在你知道了 JavaScript 中的 6 个关键技巧,它们不仅会提高你的工作效率,而且在很多情况下都会有所帮助,并且会使您的代码更易于阅读。

原文地址:https://www.toutiao.com/article/7195042102060007996/

延伸 · 阅读

精彩推荐
  • js教程js实现简单图片拖拽效果

    js实现简单图片拖拽效果

    这篇文章主要为大家详细介绍了js实现简单图片拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    qq_448013368972022-01-22
  • js教程js中延迟加载和预加载的具体使用

    js中延迟加载和预加载的具体使用

    这篇文章主要介绍了js中延迟加载和预加载的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友...

    Yushia6042021-12-31
  • js教程微信小程序实现简单计算器

    微信小程序实现简单计算器

    这篇文章主要为大家详细介绍了微信小程序写简单计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    m0_459721569282022-02-28
  • js教程原生js 实现表单验证功能

    原生js 实现表单验证功能

    这篇文章主要介绍了原生js如何实现表单验证功能,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下...

    蒋伟平7542022-01-19
  • js教程js实现单击可修改表格

    js实现单击可修改表格

    这篇文章主要为大家详细介绍了js实现单击可修改表格,类似成绩单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一...

    左一.8922022-03-08
  • js教程js闭包和垃圾回收机制示例详解

    js闭包和垃圾回收机制示例详解

    这篇文章主要给大家介绍了关于js闭包和垃圾回收机制的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,...

    丶Serendipity丶8232022-01-24
  • js教程详解uniapp的全局变量实现方式

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

    这篇文章主要介绍了详解uniapp的全局变量实现方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下...

    茧君11182021-12-29
  • js教程JS实现鼠标移动拖尾

    JS实现鼠标移动拖尾

    这篇文章主要为大家详细介绍了JS实现鼠标移动拖尾效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    day010272021-12-21