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


来源:今日头条作者:前端达人阅览量:848最后更新:2023-02-10 18:53:28

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

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

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

1、箭头函数

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

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

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

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

//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,你是不是总是在数后面有几个零,不太直观?那么问题总是存在,因为大多数人不知道这种方法可以使数字更具可读性和美观性。在此示例中,我们将使用“_”作为数字分隔符:

//Beforelet 
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


文章来源:https://www.toutiao.com/article/7195042102060007996