选择多个数组元素javascript

Question

有没有办法一次选择多个数组元素？

我有这段代码：

 var my_array = ["a", "b", "c", "d", "e", "f"];

我想同时从数组中选择第 1、3、5、7、9 个元素，就像这样

my_array[0,2,4,6,8];

原文由 Matija 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果必须使用 JavaScript，最简单的方法是设置一个简单的函数，将数组和索引传递给该函数：

 function modifyStylesOf(arr, indices, prop, newValue) {

    // here we filter the array to retain only those array elements
    // are present in the supplied 'indices' array:
    arr.filter(function(el, index) {

      // if the index of the current element is present in the
      // array of indices the index will be zero or greater,
      // so those elements will be retained (as the assessment
      // will be true/truthy:
      return indices.indexOf(index) !== -1;

    // we iterate over the retained Array elements using
    // Array.prototype.forEach():
    }).forEach(function (el) {

      // and here we update the passed-in property
      // to the passed-in value:
      el.style[prop] = newValue;
    });
}

然后调用：

 // here we use Array.from() to convert the nodeList/HTMLCollection
// into an Array:
modifyStylesOf(Array.from(c), [1,3,5,7,9], 'webkitTextFillColor', 'transparent');

 function modifyStylesOf(arr, indices, prop, newValue) {
  arr.filter(function(el, index) {
    return indices.indexOf(index) !== -1;
  }).forEach(function(el) {
    el.style[prop] = newValue;
  });
}

var c = document.querySelectorAll('body div');

modifyStylesOf(Array.from(c), [1, 3, 5, 7, 9], 'webkitTextFillColor', 'orange');

 div {
  counter-increment: divCount;
}
div::before {
  content: counter(divCount, decimal-leading-zero);
}

 <div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

但是请记住，您的原始选择器包括所有子节点（必然包括 textNode s 和 HTML 注释节点（可能还有其他节点）；而您似乎只想要 HTMLElement s; 为此，我强烈建议使用稍微不同的选择方式：

 // the Element.children property will retrieve only
// element nodes:
var c = document.getElementById("nc-2").children;

或者：

 // using document.querySelectorAll(), with a CSS
// selector can select only elements (as with CSS),
// though I'd suggest something more specific than
// the universal selector ('*') to specify which
// child elements to select:
var c = document.querySelectorAll('#nc-2 > *');

此外，虽然没有看到您的 HTML 很难特别精确，但您 似乎 只是试图选择 childNode 的奇数索引，这有助于使用 CSS 来实现你的目标。在您的具体情况下，这将是：

 #nc-2 > :nth-child(odd) {
  -webkit-text-fill-color: transparent;
}

 body > div:nth-child(odd) {
  -webkit-text-fill-color: orange;
}

div {
  counter-increment: divCount;
}

div::before {
  content: counter(divCount, decimal-leading-zero);
}

 <div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

原文由 David Thomas 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

现在最简单的方法是使用 map 函数：

 [0,2,4,6,8].map(x=>my_array[x]);

诀窍是在所需索引的数组上调用 map 函数。数组映射函数将返回一个与调用它的数组长度相同的数组。 map 函数内的回调函数 ( x=>my_array[x] ) 然后为每个所需的索引返回 my_array 的值。

原文由 tommyleejones 发布，翻译遵循 CC BY-SA 4.0 许可协议