使用map()的意外逗号

Question

我有一个包含元素列表的数组:

  description: [
    'HTML & CSS',
    'Responsive Design Fundamentals',
    'Javascript object-oriented programming',
    'jQuery',
    'Website Performance Optimization',
    'CRP and RAIL',
    'REST API and Ajax',
    'Javascript Design patterns',
    'Bootsrap Framework',
    'Polymer Web Elements'
  ],

我正在尝试使用模板字符串将此列表附加到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>

因此,我在每个列表元素之间得到一个意外的逗号(请参阅下面的代码段)

我怎么能避免这个？

编辑:片段添加

Answer 1

说明

模板文字使用toString()的默认情况下被加入返回数组方法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('')
      }
    </ul>
  </div>
  `
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

.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>

Answer 3

正如其他人指出的那样（为了完整性，我将重复这一点），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>