如何在 html 中显示 javascript 数组中的所有项目，除了最后一项外，它们之间用逗号分隔

Question

我必须使用 for 循环或 while 循环。 如何在不包含逗号的情况下包含数组中的最后一项？ 下面我有打印数组中除最后一项之外的所有项目的代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="coffee.css" />
    <title>Coffee</title>
  </head>
  <body>
   
    <section class="javascript">
      <h3>Drinks of the Month</h3>
      <p id="drinks"></p>
    </section>

    <script>
      var drinks = [
        "Chai Tea",
        "Sweet Cream Cold Brew",
        "Caramel Macchiato",
        "Vanilla Latte",
      ];

      var i = 0;
      var drinksOfMonth = "";
      while (i < drinks.length - 1) {
        drinksOfMonth += drinks[i] + ", ";
        i++;
      }


      document.getElementById("drinks").innerHTML = drinksOfMonth;
    </script>
  </body>
</html>

Answer 1

只需使用数组的join()方法即可。

例子

const foo = ['tea', 'coffee', 'soda'];

console.log(foo.join('-'));
console.log(foo.join(', ');

您可以在此处阅读有关 Array.join() 的更多信息https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join

Answer 2

这将做到：

var drinks = [
  "Chai Tea",
  "Sweet Cream Cold Brew",
  "Caramel Macchiato",
  "Vanilla Latte",
]

drinks.join(', ')

请问output：

Chai Tea, Sweet Cream Cold Brew, Caramel Macchiato, Vanilla Latte

Answer 3

你也可以这样做

while (i < drinks.length) { 
  if(i != drinks.length-1){
    drinksOfMonth += drinks[i] + ", "}
  else{
    drinksOfMonth += drinks[i]}
 i++ 
}

Answer 4

我必须使用 for 循环或 while 循环。 如何在不包含逗号的情况下包含数组中的最后一项？

为什么要使用 for 或 while 循环，因为您可以使用Array.join()方法通过一行代码轻松实现此要求。

演示：

 var drinks = [ "Chai Tea", "Sweet Cream Cold Brew", "Caramel Macchiato", "Vanilla Latte", ]; console.log(drinks.join(', '));

Answer 5

只需在 while 循环之后添加最后一项：

drinksOfMonth += drinks[drinks.length-1];

如何在 html 中显示 javascript 数组中的所有项目，除了最后一项外，它们之间用逗号分隔

问题描述

5 个解决方案

解决方案1
0 2022-04-13 05:06:22

解决方案2
0 2022-04-13 05:06:46

解决方案3
0 2022-04-13 05:11:38

解决方案4
0 2022-04-13 05:26:06

解决方案5
0 2022-04-13 05:37:46

如何在 html 中显示 javascript 数组中的所有项目，除了最后一项外，它们之间用逗号分隔

问题描述

5 个解决方案

解决方案1 0 2022-04-13 05:06:22

解决方案2 0 2022-04-13 05:06:46

解决方案3 0 2022-04-13 05:11:38

解决方案4 0 2022-04-13 05:26:06

解决方案5 0 2022-04-13 05:37:46

解决方案1
0 2022-04-13 05:06:22

解决方案2
0 2022-04-13 05:06:46

解决方案3
0 2022-04-13 05:11:38

解决方案4
0 2022-04-13 05:26:06

解决方案5
0 2022-04-13 05:37:46