🎖️请尽量不要使用箭头函数

简介: 箭头函数通常允许编写更为简洁的代码。有时,在需要处理"this"的情况下,使用箭头函数是有充分理由的。然而,通常情况下,它们可能更难以阅读。那么,什么时候应该使用箭头函数呢?

嗨,大家好!这里是道长王jj~ 🎩🧙‍♂️

箭头函数通常允许编写更为简洁的代码。

有时,在需要处理"this"的情况下,使用箭头函数是有充分理由的。

然而,通常情况下,它们可能更难以阅读。

那么,什么时候应该使用箭头函数呢?

在 JavaScript 中,我们有多种方式来编写函数:

hello = function() {
    // 常规函数
  return "Hello World!"
}
const hello = () => {
    // "箭头"函数
  return "Hello World!"
}
// 带隐式返回的箭头函数
const hello = () => "Hello World!"

特别是最后一个版本使用隐式返回来缩短表达式,如果将箭头函数与三元运算符结合起来,可以获得一些不错的效果:

// 常规函数
function getcolor(flag) 
{
   
    if (flag)
        return "green"
    else
        return "red"
}

// 箭头函数
const getcolor = (flag) => flag ? "green" : "red"

尽管周围的圆括号()并不是必需的,但在箭头函数的参数周围放置它们是一个很好的约定。在这种情况下,箭头函数可以带来最大的好处。代码更加简洁而且清晰。但是要小心不要过度使用!

const decode = c => 
   (Array.isArray(c)) ? c.map(el => (el > 0 ? el : -el)) : (c > 0 ? c : -c)

就比如以上这段代码,它可以工作,但是它做了什么呢?

我经常花费数小时来弄清楚一行代码的功能……

保持简洁性

我想呼吁大家尽量编写可读的代码!计算机只会按照代码的指示执行,但是程序员需要维护这些代码。

编写可读的代码可以节省你的时间,并且让你的工作更轻松。

对于仅仅返回一个值的简短函数,箭头函数提供了一种选项,可以编写更为紧凑的代码。

但是下面的示例表明,箭头函数 => 并不总是更简短:

 function f(a, b) {
    ... }
 const f = (a, b) => {
    ... }

即使箭头函数可以节省一些字节,为了可读性,您应该尽可能选择旧的 "function()" 语法!


🎉 你觉得怎么样?这篇文章可以给你带来帮助吗?当你处于这个阶段时,你发现什么对你帮助最大?如果你有任何疑问或者想进一步讨论相关话题,请随时发表评论分享您的想法,让其他人从中受益。🚀✨

目录
相关文章
|
7天前
|
JavaScript 前端开发
箭头函数和普通函数的区别
箭头函数和普通函数的区别
11 3
|
7天前
箭头函数需要注意的地方
箭头函数需要注意的地方
12 1
|
7天前
|
自然语言处理
解释一下箭头函数的this绑定行为。
箭头函数的`this`绑定遵循词法作用域,不同于普通函数的动态绑定。它在定义时即确定,不受调用方式影响。这解决了`this`丢失问题,提供了更简洁的语法。例如,当在一个对象中,箭头函数的`this`将指向全局对象或父级作用域,而不是对象本身,与普通函数表现不同,使用时需谨慎。
19 8
|
7天前
|
自然语言处理 前端开发 算法
箭头函数与普通函数:谁更胜一筹?
箭头函数与普通函数:谁更胜一筹?
箭头函数与普通函数:谁更胜一筹?
|
9月前
|
前端开发
面试官:箭头函数和普通函数的区别?箭头函数的this指向哪里?(二)
面试官:箭头函数和普通函数的区别?箭头函数的this指向哪里?(二)
|
9月前
普通函数中的this指向问题解决方案箭头函数
普通函数中的this指向问题解决方案箭头函数
27 0
|
5月前
|
JavaScript 前端开发
箭头函数与this指向探究
箭头函数与this指向探究
25 1
|
6月前
|
JavaScript 前端开发
箭头函数和普通函数有什么区别
箭头函数和普通函数有什么区别
34 1
面试官:箭头函数和普通函数的区别?箭头函数的this指向哪里?(一)
面试官:箭头函数和普通函数的区别?箭头函数的this指向哪里?(一)
|
9月前
|
自然语言处理 JavaScript 前端开发
箭头函数与普通函数
箭头函数与普通函数
33 0