欢迎来到我的博客！#

使用 Markdown 格式编写。

今天学到了什么#

箭头函数写法的注意点

箭头函数写法的注意点#

这是因为 JavaScript 中的 return 语句不能换行。

在你的代码中，return 关键字后面直接跟了一个换行符，JavaScript 解析器会自动在 return 后面加分号，导致实际上是执行了 return;（返回 undefined），而下面的模板字符串成了永远不会执行的代码。

错误分析#

1
        const htmlStr = list.map((item, index) => {
2
        return // <--- 灾难发生在这里：JS 认为这里是 return; 结束了。
3
          `  <tr> ... </tr> `
4
        }).join('')

解决方法#

方案一：把模板字符串跟在 `return` 后面（不要换行）#

1
        const htmlStr = list.map((item, index) => {
2
          return `  <tr>
3
              <td>${index + 1}</td>
4
              ...
5
            </tr>
6
          `
7
        }).join('')

方案二（推荐）：去掉花括号和 `return`#

利用箭头函数的隐式返回特性，代码更简洁：

1
        const htmlStr = list.map((item, index) => `
2
            <tr>
3
              <td>${index + 1}</td>
4
              <td>${item.bookname}</td>
5
              <td>${item.author}</td>
6
              <td>${item.publisher}</td>
7
              <td>
8
                <span class="del" data-id="${item.id}">删除</span>
9
                <span class="edit" data-id="${item.id}">编辑</span>
10
              </td>
11
            </tr>
12
          `).join('')

你上次代码中，return 和后面的模板字符串换行了，在 JavaScript 中，如果 return 后面直接换行，JS 会自动在 return 后面加分号，导致返回 undefined。

1
// 错误写法
2
return
3
    `...` // 这里实际执行的是 return; 下面的代码不执行
4

5
// 正确写法
6
return `...`

Lovely firefly!

In Reddened Chrysalis, I Once Rest

箭头函数写法的注意点

欢迎来到我的博客！#

今天学到了什么#

箭头函数写法的注意点#

错误分析#

解决方法#

方案一：把模板字符串跟在 `return` 后面（不要换行）#

方案二（推荐）：去掉花括号和 `return`#

赞助支持

目录

Lovely firefly!

In Reddened Chrysalis, I Once Rest

箭头函数写法的注意点

欢迎来到我的博客！#

今天学到了什么#

箭头函数写法的注意点#

错误分析#

解决方法#

方案一：把模板字符串跟在 return 后面（不要换行）#

方案二（推荐）：去掉花括号和 return#

赞助支持

目录

方案一：把模板字符串跟在 `return` 后面（不要换行）#

方案二（推荐）：去掉花括号和 `return`#