对数组对象使用 join 方法以逗号分隔

Question

我有一个由包含多个对象的数组组成的对象。我正在尝试使用 join 方法，但是当然，我意识到这仅在数组上可用，除非以其他方式进行转换？

我想用逗号/管道分隔我需要的对象。结果应该如下：

发现 |经验 | 195 奢华

但需要一些关于如何实现这一点的指导，因为我收到以下错误：

"message": "Uncaught TypeError: data.slideHeading1.join is not a 函数”

有没有其他方法可以做到这一点？请参阅下面的代码：

var imgObj = {
  "slideData": [{
    "slideHeading1": "DISCOVER",
  }, {
    "slideHeading1": "EXPERIENCE",
  }, {
    "slideHeading1": "195 LUXURY",
  }]
};

imgObj.slideData.forEach(function(data, idx) {
  var heading1 = data.slideHeading1.join('|');
  var heading2 = data.slideHeading2.join('|');
  var heading3 = data.slideHeading3.join('|');

  $('.slideTitle .heading-1').append(heading1);
  $('.slideTitle .heading-2').append(heading2);
  $('.slideTitle .heading-3').append(heading3);
});

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

<h2 class="slideTitle">
  <span class="heading-1"></span>
  <span class="heading-2"></span>
  <span class="heading-3"></span>
</h2>

编辑：请参阅以下代码，该代码将更多对象添加到数组中： 另外 - 我正在使用文本旋转器，它解释了为什么文本被管道分隔。

结果应该是：

<span class="heading-1">DISCOVER | EXPERIENCE | 195 LUXURY</span>
<span class="heading-2">MORE | IT ALL | SUPERJETS</span>
<span class="heading-3">FUEL | | TODAY</span>

代码示例：

var imgObj = {
  "slideData": [{
    "slideHeading1": "DISCOVER",
    "slideHeading2": "MORE",
    "slideHeading3": "FUEL",
  }, {
    "slideHeading1": "EXPERIENCE",
    "slideHeading2": "IT ALL",
  }, {
    "slideHeading1": "195 LUXURY",
    "slideHeading2": "SUPERJETS",
    "slideHeading3": "TODAY",
  }]
};

var heading1 = [];
imgObj.slideData.forEach(function(data, idx) {
  if (idx < imgObj.slideData.length - 1)
    heading1[idx] = data.slideHeading1 + ' | ';
  else // skip if the item is the last item
    heading1[idx] = data.slideHeading1;
});
document.querySelectorAll('span[class^=heading-]').forEach(function(el, i) {
  el.textContent = heading1[i]
});

$(".slideTitle span").Morphext({
  animation: "fadeInLeft",
  separator: "|",
  speed: 4000,
  complete: function() {
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Morphext/2.4.4/morphext.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Morphext/2.4.4/morphext.min.js"></script>

<h2 class="slideTitle">
  <span class="heading-1"></span>
  <span class="heading-2"></span>
  <span class="heading-3"></span>
</h2>

Answer 1

你得到的错误是因为data.slideHeading1 不是数组而是实际的字符串值

还将pipe(|) 更改为comma(,)

我想用逗号分隔我需要的对象

只是改变

imgObj.slideData.forEach(function(data, idx) {
  var heading1 = data.slideHeading1.join('|');
  var heading2 = data.slideHeading2.join('|');
  var heading3 = data.slideHeading3.join('|');

  $('.slideTitle .heading-1').append(heading1);
  $('.slideTitle .heading-2').append(heading2);
  $('.slideTitle .heading-3').append(heading3);
});

到此

 imgObj.slideData.forEach(function(data, idx) {  
    var seperator = (idx==imgObj.slideData.length-1)? "":",";
                $('.slideTitle .heading-'+( idx+1)).append(data.slideHeading1 + seperator);
            });

var imgObj = {
  "slideData": [{
    "slideHeading1": "DISCOVER",
  }, {
    "slideHeading1": "EXPERIENCE",
  }, {
    "slideHeading1": "195 LUXURY",
  }]
};

 
imgObj.slideData.forEach(function(data, idx) {  
var seperator = (idx==imgObj.slideData.length-1)? "":",";
            $('.slideTitle .heading-'+( idx+1)).append(data.slideHeading1 + seperator);
        });

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

<h2 class="slideTitle">
  <span class="heading-1"></span>
  <span class="heading-2"></span>
  <span class="heading-3"></span>
</h2>

Answer 2

您收到错误是因为 data.slideHeading1 不是数组，而 join() 是在数组上实现的方法。

我认为您想通过管道 (|) 分隔所有项目。如果是这样，只需将该字符添加到文本的末尾。然后循环遍历所有 span 元素以填充先前生成的数组中的文本。类似于以下内容：

var imgObj = {
  "slideData": [{
    "slideHeading1": "DISCOVER",
  }, {
    "slideHeading1": "EXPERIENCE",
  }, {
    "slideHeading1": "195 LUXURY",
  }]
};

var heading1 = [];
imgObj.slideData.forEach(function(data, idx) {
  if(idx < imgObj.slideData.length - 1)
    heading1[idx] = data.slideHeading1 + ' | ';
  else // skip if the item is the last item
     heading1[idx] = data.slideHeading1;
});
document.querySelectorAll('span[class^=heading-]').forEach(function(el, i){
  el.textContent = heading1[i]
});

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

<h2 class="slideTitle">
  <span class="heading-1"></span>
  <span class="heading-2"></span>
  <span class="heading-3"></span>
</h2>

请注意：因为您所接受的代码与您所询问的文字之间有点混淆：

我想用逗号分隔我需要的对象

简单替换

heading1[idx] = data.slideHeading1 + ' | ';

有

heading1[idx] = data.slideHeading1 + ', ';