选择多个数组元素javascript

Question

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

我有这个代码：

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

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

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

Answer 1

如今实现这一点的最简单方法是使用 map 函数：

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

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

Answer 2

如果您必须使用 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) {

    // 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');

但请记住，您的原始选择器包括所有 childNodes（其中必然包括textNodes 和 HTML 注释节点（可能包括其他节点）；而您似乎只需要HTMLElements；为此，我强烈建议使用稍微不同的评选方式：

// 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，很难特别精确，但你似乎试图只选择 s 的奇数索引childNode，这有助于仅使用 CSS 来实现你的目标。在您的具体情况下，这将是：

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

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>