使用 map() 的意外逗号

Question

我有一个包含元素列表的数组，我正在尝试使用模板字符串将此列表附加到 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

说明

template literals 使用 toString() 方法，该方法默认通过 map 与 ,.
连接返回的数组为了避免这种情况 "problem" 你可以使用 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() return 是一个数组。您可能希望 return 一个 string 包含连接在一起的数组元素。您可以使用 .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 returns 一个新数组，其中包含在传递给的函数中更改的元素它。

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

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

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

除了使用 .join() to explicitly pass an empty string as the separator, you can also replace the .map() with a Array.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>

Answer 4

为了简化您的代码，我只是这样使用： ${description.map((工作) => <li>${work}</li>).join('')}

使用 map() 的意外逗号

Unexpected comma using map()

javascript

arrays

ecmascript-6

template-literals

array.prototype.map

说明

代码