如何组合数组中的值？ [关闭]答案

【问题标题】：How to combine values in the array? [closed]如何组合数组中的值？ [关闭]
【发布时间】：2017-03-03 19:31:14
【问题描述】：

我有以下html：

<div class="topics">
  <span class="topic" data-value="hello">hello</span>
  <span class="topic" data-value="world">world</span>
  <span class="topic" data-value="one">one</span>
  <span class="topic" data-value="two">two</span>
  <span class="topic" data-value="six">six</span>
</div>

如何从每个块中获取价值并组合？结果应该是：

[“你好”、“世界”、“一”、“二”、“六”]

我怎样才能做到这一点？

【问题讨论】：

你尝试了什么？

标签： javascript arrays

【解决方案1】：

您将获得跨度并映射回文本内容

var text = [].map.call(document.querySelectorAll('.topics span'), function(elem) {
  return elem.textContent; // or elem.dataset.value for the data-attribute
});

console.log(text)

<div class="topics">
  <span class="topic" data-value="hello">hello</span>
  <span class="topic" data-value="world">world</span>
  <span class="topic" data-value="one">one</span>
  <span class="topic" data-value="two">two</span>
  <span class="topic" data-value="six">six</span>
</div>

【讨论】：

我认为 OP 可能在 elem.dataset.value 之后而不是 textContent
@EliasVanOotegem - 也许，它们都包含相同的东西，很难说

【解决方案2】：

由于您已经在使用 HTML data- 属性在数组中存储您想要的值，所以剩下的很简单。

只需创建一个 for 循环遍历具有类 .topic 的每个元素，然后将每个 data-value 推入数组中.

/* ----- JavaScript ----- */
var
  array = [],
  els = document.querySelectorAll("span.topic");

for (var i = 0; i < els.length; i++) array.push(els[i].getAttribute("data-value"));

console.log(array);

<!----- HTML ----->
<div class="topics">
  <span class="topic" data-value="hello">hello</span>
  <span class="topic" data-value="world">world</span>
  <span class="topic" data-value="one">one</span>
  <span class="topic" data-value="two">two</span>
  <span class="topic" data-value="six">six</span>
</div>

【讨论】：

【解决方案3】：

var arr = [];
$("div span.topic").each(function(){
    arr.push($(this).text());    
});

console.log(arr);

如果你想拥有jQuery

http://jsfiddle.net/4egmewnv/

【讨论】：

为好的解决方案和 thalaivar 点赞
当然选择器应该是$('span.topic')，而且没有jQ标签。使用 vanillaJS 可以轻松回答 OP 的问题
@EliasVanOotegem：是的，它很简单......有一些很好的答案......想到添加jQuery......似乎OP是一个新手......
“除非还包含框架/库的另一个标签，否则需要纯 JavaScript 答案。” javascript
@Thalaivar：Felix Kling 没有说明什么，他是在引用。没有 jQ 标签意味着不应该给出 jQ 答案。宽容一点是可以的，但不要太多。个人认为jQ对还在学习JS的人是有害的。有很多使用 jQ 编写的可怕代码，它鼓励不良做法，并且似乎愚弄人们认为 JS 不是一种函数式语言。很少看到有人写$(selector).on(event, callbackName);，而是经常看到$(selector).on(event, function() { callbackName() });，这真是不好的做法

【解决方案4】：

你可以用 jquery 做：

$(".topics .topic").map(function() {
return $( this ).data("value");

})

在这里演示：

https://fiddle.jshell.net/Flautarian/0n68ao7j/

【讨论】：

“除非还包含框架/库的另一个标签，否则需要纯 JavaScript 答案。” javascript
好的，让我们只用javascript然后var words = [].slice.call(document.getElementsByClassName("topic")); console.log(words.map(function(obj){return obj.dataset.value}))在这里演示：fiddle.jshell.net/Flautarian/0n68ao7j/1