请教一个 js 箭头函数的基础问题

2021-02-03 01:19:07 +08:00
 volvo007

本意是想做一个判断,如果 this.goodId == 1,那么就获得一个 'a.json' 的本地 url 字符串;如果 this.goodId 是别的值,那么就拿别的字符串。

现在的问题是,这么写:

var url = ''
      url = () => {
          if(this.goodId == 1){
              return 'json/laptop.json'
          } else if (this.goodId == 2) {
              return 'json/mobile.json'
          }
      }

好像不太行。url 我用 console.log 调用后显示它是个函数,而并不是一个字符串

所以能通过箭头函数获得字符串的返回值吗?推荐这样做吗?(本意是通过箭头函数避免 var that = this 这种写法,这么写代码能跑起来)

3531 次点击
所在节点    JavaScript
32 条回复
DrakeXiang
2021-02-03 01:30:36 +08:00
建议看一下 this 、箭头函数和函数表达式的相关知识,你这里 url 先赋值字符串,后面又赋值箭头函数,然后你还想通过 return 来改变 url 的值。。。哪儿哪儿都不对啊,简单改的话是这样

```javascript
const getJson = () => goodId === 1 ? return 'json/laptop.json' : 'json/mobile.json';
const url = getJson();
```
liyang5945
2021-02-03 01:30:51 +08:00
你把 url 定义成一个函数了,函数必须要执行才能有返回值啊,console.log(url()),你看看是啥
Biwood
2021-02-03 01:34:18 +08:00
不如用 Map 来写:
const MAP_URL = { url_1: 'json/laptop.json', url_2: 'json/mobile.json' };
const url = MAP_URL[`url_${this.goodId}`];

非要用函数的话,可以用立即执行函数:
url = (function(id){
if(id == 1){
return 'json/laptop.json'
} else if (id == 2) {
return 'json/mobile.json'
}
})(this.goodId)

其实三元运算符也可以:
var url = (this.goodId == 1) ? 'json/laptop.json' : (this.goodId == 2) ? 'json/mobile.json' : '';
Rocketer
2021-02-03 02:27:48 +08:00
楼上没有解决楼主的本意(避免 var that = this )

楼主需要这么理解这件事,首先看你的主体:
```
() => {
if(this.goodId == 1) {
return 'json/laptop.json'
} else if (this.goodId == 2) {
return 'json/mobile.json'
}
}
```
这明显是个匿名函数。然后你把这个匿名函数赋给了 url,于是 url 就指向了一个函数。

这是 JavaScript 最重要的一个概念——一切皆对象。函数也是对象,所以也能赋值给识别符(俗称变量名)。

但楼主想要的不是这个函数,而是函数的返回值,所以你得让函数执行一下(套上括号,后面再加一对括号就行了)。
```
(() => {
if(this.goodId == 1) {
return 'json/laptop.json'
} else if (this.goodId == 2) {
return 'json/mobile.json'
}
})();
```
然后再赋值就是你想要的字符串了。

另外,既然你用箭头函数了,那就最好按 ES6 的标准写,别用 var 了。优选 const,const 不行就 let 。
完整代码如下:
```
let url = '';
url = (() => {
if(this.goodId == 1) {
return 'json/laptop.json'
} else if (this.goodId == 2) {
return 'json/mobile.json'
}
})();
```
wunonglin
2021-02-03 02:51:48 +08:00
你这是什么鬼啊。。

```
const url = () => {
switch(this.goodId){
case 1:
return 'json/laptop.json'
case 2:
return 'json/mobile.json'
default:
return ''
}
}
```

这样不就行了?
musi
2021-02-03 05:25:23 +08:00
你把箭头函数换成普通函数这样写 URL 的值也是个函数吧,你这又不是 IIFE 难道系统会自动帮你调用函数?
msg7086
2021-02-03 06:08:23 +08:00
箭头函数的返回值当然就是箭头函数()啦。你不加()当然就没有调用函数了。
sutra
2021-02-03 07:48:21 +08:00
```
var url = ''
var goodId = 1;

url = (() => {
if(goodId == 1){
return 'json/laptop.json'
} else if (goodId == 2) {
return 'json/mobile.json'
}
})()

console.log(url)
```
randyo
2021-02-03 08:03:48 +08:00
箭头函数也是函数,需要调用的
SxqSachin
2021-02-03 08:30:41 +08:00
```
const url = (() =>{ ... })()
```
meepo3927
2021-02-03 08:50:09 +08:00
先别管箭头函数了, 了解一下 javascript 中的函数的定义和调用吧。

var url = '';
url = () => {};

上面这个写法是比较迷的,看不出来要干啥。
vivipure
2021-02-03 09:08:19 +08:00
你就不能 const url = this.goodId == 1? '':'' ,至于 this 问题 不是在这里进行处理, 而是取决于你的调用
cczeng
2021-02-03 09:32:13 +08:00
用 gettter 和 setter,前提是 url 是一个对象的属性

不然调用 url 的时候 `url() ` 而不是 `url`
TanMusong
2021-02-03 09:40:53 +08:00
()=>{xxx}改成
(()=>{xxx})()
volvo007
2021-02-03 09:50:48 +08:00
@DrakeXiang @wunonglin 人菜瘾大是这样的哈哈 😂


@liyang5945 看了看了,用 typeof 看是个函数,然后大概也猜到这玩意返回的是一个函数,看手册也说是个匿名函数,但是后面要怎么在代码里直接调用就懵了


@Biwood map 这个好,学习了,特别是 $ 那个用法有点 bash 的味道啊。三元运算符主要分支会很多,不止两个。虽然三元套三元可以实现三个,不过更多的话就麻烦了


@Rocketer 大哥你讲的是最清楚的,都明白了。最近赶鸭子上架,js 没怎么看就直接上 vue 了。回头我找个新一点的 es6 课补补。B 站的一个课 500 多节,我看到 200 多还在讲 es5,看得我崩溃……
Elethom
2021-02-03 09:54:02 +08:00
看了楼上的回复,我觉得自己该反思一下为什么和这么多菜鸡竞争还找不到好工作了。
volvo007
2021-02-03 09:54:37 +08:00
@TanMusong 昨晚看了官方手册,但是通篇都在讲箭头函数怎么写,各种茴的写法,没有涉及到传值的例子(这个估计会放到函数里面去讲吧)。我尝试过在参数括号前后加 () 但是还是报错,报错内容都一样的(废话),没想到是需要在最后再加一个括号调用一下 😂
ryncv
2021-02-03 09:58:28 +08:00
```javascript
bnrwnjyw
2021-02-03 10:02:14 +08:00
这楼把我看懵了,为什么这么多半吊子指点别人啊。。。

楼主的问题是基础不牢,连*函数*需要被*调用*才能获得返回值都搞不清楚,需要好好补补 js 基础。
TanMusong
2021-02-03 10:11:09 +08:00
@bnrwnjyw 也不是吧,楼主就问为啥 url 是个 function,怎么才能获得返回值😂。就好像有个人问 1+1 等于几,要我我就不会说 他怎么 1+1 都不会,有没有上过学,家长有没有交过之类的,告诉他等于 2 不就行了😂

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/750770

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX