技术解析

请教一个 js 箭头函数的基础问题
0
2021-08-11 00:27:26
idczone

本意是想做一个判断,如果 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 这种写法,这么写代码能跑起来)


建议看一下 this 、箭头函数和函数表达式的相关知识,你这里 url 先赋值字符串,后面又赋值箭头函数,然后你还想通过 return 来改变 url 的值。。。哪儿哪儿都不对啊,简单改的话是这样
```javascript
const getJson = () => goodId === 1 ? return 'json/laptop.json' : 'json/mobile.json';
const url = getJson();
```

你把 url 定义成一个函数了,函数必须要执行才能有返回值啊,console.log(url()),你看看是啥

不如用 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' : '';

楼上没有解决楼主的本意(避免 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'
}
})();
```

你这是什么鬼啊。。
```
const url = () => {
switch(this.goodId){
case 1:
return 'json/laptop.json'
case 2:
return 'json/mobile.json'
default:
return ''
}
}
```
这样不就行了?

你把箭头函数换成普通函数这样写 URL 的值也是个函数吧,你这又不是 IIFE 难道系统会自动帮你调用函数?

箭头函数的返回值当然就是箭头函数()啦。你不加()当然就没有调用函数了。

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

箭头函数也是函数,需要调用的

```
const url = (() =>{ ... })()
```

先别管箭头函数了, 了解一下 javascript 中的函数的定义和调用吧。
var url = '';
url = () => {};
上面这个写法是比较迷的,看不出来要干啥。

你就不能 const url = this.goodId == 1? '':'' ,至于 this 问题 不是在这里进行处理, 而是取决于你的调用

用 gettter 和 setter,前提是 url 是一个对象的属性
不然调用 url 的时候 `url() ` 而不是 `url`

()=>{xxx}改成
(()=>{xxx})()

人菜瘾大是这样的哈哈
数据地带为您的网站提供全球顶级IDC资源
在线咨询
专属客服