使用 map() 的意外逗号

IT技术 javascript arrays ecmascript-6 template-literals array.prototype.map
2021-03-20 15:09:25

我有一个包含元素列表的数组，我正在尝试使用模板字符串将此列表附加到 HTML 元素：

var description = [
  'HTML & CSS',
  'Javascript object-oriented programming',
  'Progressive Web apps (PWAs)',
  'Website Performance Optimization',
  'Webpack and Gulp workflows',
  'Fullstack React.js',
  'Web Components',
  'Responsive web design',
  'Sketch design',
  'GraphQL and Relay'
]

$('body').append(
  `
  <div class="description">
    <ul>
      ${description.map(
        function(work) {
          return `<li>${work}</li>`
        }
      )}</ul>
  </div>
  `
)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

结果，我在每个列表元素之间得到了一个意外的逗号。（当您运行上面的代码片段时，您可以看到这一点。）

我怎样才能避免这种情况？

4个回答

解释

模板文字使用的toString()方法默认map使用 a 连接返回的数组,。
为了避免这个“问题”，你可以使用join('')

代码

var description = [
  'HTML & CSS',
  'Javascript object-oriented programming',
  'Progressive Web apps (PWAs)',
  'Website Performance Optimization',
  'Webpack and Gulp workflows',
  'Fullstack React.js',
  'Web Components',
  'Responsive web design',
  'Sketch design',
  'GraphQL and Relay'
]

$('body').append(
  `
  <div class="description">
    <ul>
     ${
        description.map(function(work) {
          return `<li>${work}</li>`
        }).join('')
      }
    </ul>
  </div>
  `
)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

我想知道这个被接受的答案是如何与下面的其他答案在同一分钟内
2021-05-19 15:09:25
哇，不敢相信我忘记了join()我的阵列。谢谢哈哈！
2021-05-20 15:09:25

.map()返回一个数组。你可能想返回一个字符串包含连接到一起的数组元素。你可以这样做.join('')：

var description = [
  'HTML & CSS',
  'Javascript object-oriented programming',
  'Progressive Web apps (PWAs)',
  'Website Performance Optimization',
  'Webpack and Gulp workflows',
  'Fullstack React.js',
  'Web Components',
  'Responsive web design',
  'Sketch design',
  'GraphQL and Relay'
]

$('body').append(
  `
  <div class="description">
    <ul>
      ${description.map(
        function(work) {
          return `<li>${work}</li>`
        }
      ).join('') /* added .join('') here */}</ul>
  </div>
  `
)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

``` ${description.map( function(work) { return <li>${work}</li> } ``` 这里我们返回的是模板字面量 <li>${work}</li>对吗？那么它如何再次转换为数组？
2021-04-23 15:09:25
你看return从回调，而不是从array.map自身。该array.map方法创建一个新数组，然后遍历现有数组，在每个元素上调用回调函数，并将回调返回的任何值推送到新数组上。最后，它返回新数组。这是您可以在浏览器的开发工具中尝试的简单示例：let a = [5,10,15]; let b = a.map( function(x) { return -x; }); console.log(a); console.log(b);如您所见，return回调中的语句返回一个数字，但map将所有这些收集到一个新数组中。
2021-05-02 15:09:25
map 如何返回数组？我们已经告诉它返回一个模板文字对吗？
2021-05-15 15:09:25
你能澄清你在问什么吗？.map总是返回一个数组。我们不能告诉它返回一个模板文字，这里也没有这样做。
2021-05-17 15:09:25

正如其他人所指出的（为了完整起见，我将重复），Array.prototype.map返回一个新数组，其中包含在传递给它的函数中更改的元素。

当您将数组连接到字符串时（这就是这里发生的情况），它也会将数组转换为字符串。当一个数组被转换为一个字符串时，它会自动使用逗号连接。

const arr = ['<a>', '<b>'];

console.log(arr + ""); // <a>,<b>

除了使用.join()显式传递空字符串作为分隔符之外，您还可以将 替换为.map()aArray.prototype.reduce以将数组减少为单个值。

description.reduce((acc, work) => acc + `<li>${work}</li>`, '')

所以完整的代码看起来像这样：

var description = [
  'HTML & CSS',
  'Javascript object-oriented programming',
  'Progressive Web apps (PWAs)',
  'Website Performance Optimization',
  'Webpack and Gulp workflows',
  'Fullstack React.js',
  'Web Components',
  'Responsive web design',
  'Sketch design',
  'GraphQL and Relay'
]

$('body').append(
  `
  <div class="description">
    <ul>
     ${
        description.reduce((acc, work) => acc + `<li>${work}</li>`, '')
      }
    </ul>
  </div>
  `
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

对于简单的代码，我只是这样使用： ${description.map((work) => <li>${work}</li>).join('')}

这更适合作为评论，而不是答案。因为它没有澄清 OP 的原始问题。而是引入了不同的语法。
2021-05-15 15:09:25
其它你可能感兴趣的问题
上一篇JavaScript 用 <br /> 替换 \n 下一篇如何使用TypeScript将多个参数传递给Angular中的@Directives（@Components）？