Javascript使用数组解构获取函数的多个返回值的方法-创新互联
小编给大家分享一下Javascript使用数组解构获取函数的多个返回值的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联长期为上千多家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为相山企业提供专业的网站建设、成都网站建设,相山网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。javascript栏目将列出五个让你的代码更加可读和易于维护小窍门。
在编辑旧项目的时候,有没有遇到过那种一加新逻辑就“粉碎”的迷惑代码?我们当然都遇到过。
为了让世界上不可读的 Javascript
代码更少,我得给你们看看以下的五个例子 -- 我的耻辱柱。
使用数组解构获取函数的多个返回值
如果我们有一个返回多个值的函数,可以使用数组解构实现取值。代码如下:
const func = () => { const a = 1; const b = 2; const c = 3; const d = 4; return [a,b,c,d]; }const [a,b,c,d] = func();console.log(a,b,c,d); // Outputs: 1,2,3,4
虽然上面的方法能实现赋值,但是它有一些副作用。
调用函数得到返回值 a,b,c,d
时,我们需要注意返回值返回的顺序。这里的一个小错误很可能就是你 debug 路上的梦魇。
除了需要注意顺序,我们还不能只获取想要的其中几个返回值,假如我只想要 c,d
呢?
const func = () => { const a = 1; const b = 2; const c = 3; const d = 4; return {a,b,c,d}; }const {c,d} = func();复制代码
我们可以使用对象解构赋值来代替它。
const func = () => { const a = 1; const b = 2; const c = 3; const d = 4; return {a,b,c,d}; }const {c,d} = func();
现在我们可以自由地选择需要哪些函数返回值。
以后就算函数增加了更多的返回值,对象解构的代码也可以不做任何变更,使代码更加稳定。
没有在函数入参使用对象解构
假设我们有一个入参是对象的函数,函数内代码需要使用到这个对象的属性。 一个幼稚的实现如下:
// badfunction getDaysRemaining(subscription) { const startDate = subscription.startDate; const endDate = subscription.endDate; return endDate - startDate; }
这个方案虽然满足了我们的需要,但是声明了两个没什么必要的临时引用变量 startDate
和 endDate
。
一个更好的方案是使用对象解构在一行里面获取入参 startDate
和 endDate
。
// betterfunction getDaysRemaining(subscription) { const { startDate, endDate } = subscription; return startDate - endDate; }
我们甚至可以直接在入参使用对象解构定义这两个变量。
// even betterfunction getDaysRemaining({ startDate, endDate }) { return startDate - endDate; } Much more elegant wouldn’t you agree?
你难道不觉得这样实现更优雅吗?
不使用展开语法(...)拷贝数组
使用 for
循环遍历元素再拷贝到新数组除了繁琐还很丑陋。
使用展开语法可以让实现更加清晰和简洁。
const stuff = [1,2,3];// badconst stuffCopyBad = []for(let i = 0; i < stuff.length; i++){ stuffCopyBad[i] = stuff[i]; }// goodconst stuffCopyGood = [...stuff];
使用 Var
使用 const
保证一个变量不能重新赋值,能够减少 bug 以及提高代码可读性。
// badvar x = "badX";var y = "baxY";// goodconst x = "goodX";const y = "goodX";复制代码
If you really need to reassign a variable, always prefer let over var .
如果真的需要对一个变量重新赋值,使用 let
代替 var
。
let
作用于块作用域,而 var
作用于函数作用域。
块作用域使变量仅在定义它的代码块中有效,在块作用域外访问变量将会提示 ReferenceError。
for(let i = 0; i < 10; i++){ //something} print(i) // ReferenceError: i is not defined复制代码
定义在函数作用域的变量可以在定义它的函数范围内使用。
for(var i = 0; i < 10; i++){ //something}console.log(i) // Outputs 10复制代码
let
和const
定义都变量都可以在块作用域访问到。
不使用模板字符串
手动拼接字符串写起来非常复杂,读起来很困惑。看例子:
// badfunction printStartAndEndDate({ startDate, endDate }) { console.log('StartDate:' + startDate + ',EndDate:' + endDate) }
模板字符串提供清晰和易读的在字符串插入变量的方法。
// goodfunction printStartAndEndDate({ startDate, endDate }) { console.log(`StartDate: ${startDate}, EndDate: ${endDate}`) }
模板字符串提供了也简单的方法换行,你只需要在键盘按下 enter
键,像你平时(在系统)使用一样。
// prints on two linesfunction printStartAndEndDate({ startDate, endDate }) { console.log(`StartDate: ${startDate} EndDate: ${endDate}`) }
以上是Javascript使用数组解构获取函数的多个返回值的方法的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联-成都网站建设公司行业资讯频道!
网站名称:Javascript使用数组解构获取函数的多个返回值的方法-创新互联
文章链接:http://scjbc.cn/article/dcdgsc.html