Question

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

我有这段代码：

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

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

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

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>

请记住，您的原始选择器包含所有childNodes（必须包含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 s的奇数索引，仅限于使用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>

Answer 2

在Javascript中，您可以循环遍历以下代码：

var c = document.getElementById("nc-2").childNodes;
for(var count=0; count < c.length; c++){
  //this condition is used to test for odd indexes
  if(count%2 !== 0){      
    c[count].style.webkitTextFillColor="transparent"; 
  }
}

Answer 3

这就像jQuery之类的东西实际上可以派上用场，因为它可以在集合上运行：

$("#nc-2").children(":odd").css("-webkit-text-fill-color", "transparent");

你可以在没有jQuery的情况下做到这一点，但你必须自己循环。

document.querySelectorAll("#nc-2 > :nth-child(odd)").forEach(
  elem => elem.style.WebkitTextFillColor = "transparent"
);

document.querySelectorAll("#nc-2 > :nth-child(odd)").forEach(elem => elem.style.backgroundColor = "purple")

div > div {
  background-color: blue;
  width: 50px;
  height: 50px;
  margin: 5px;
  display: inline-block;
}

<div id="nc-2">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 4

您可以尝试使用优质的forEach：

document.getElementById("nc-2").childNodes.forEach(function (node, index) {
  if ([1,3,5,7,9].indexOf(index) >= 0) { node.style.webkitTextFillColor="transparent"; }
});

Answer 5

将节点列表转换为var childNodes = [...nodeList]之类的数组后，剩下的就像这样;

＆＃13;

var childNodes = ["child0","child1","child2","child3","child4","child5","child6","child7","child8","child9"],
 selectedNodes = childNodes.reduce((p,c,i) => i & 1 ? p.concat(c) : p,[]);
console.log(selectedNodes);

＆＃13;

注意：当我是奇数时，i & 1为true。

Answer 6

var myArray = ["a", "b", "c", "d", "e", "f"];
var myIndices = [0, 2, 4, 6, 8];

var result = [];
myIndices.forEach(i => result.push(myArray[i]));

console.log(result);

（未定义，因为其中一些索引不在数据末尾）。

Answer 7

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

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

Answer 8

或过滤器功能

const indexes = [0,2,4,6,8];
    
my_array.filter((v,i)=>indexes.includes(indexes));

虽然这是 O(n*m) 所以来自 @tommyleejones 的 map 函数更快，因为它不必比较值而是使用索引到它的唯一 O(n)

选择多个数组元素javascript

8 个答案: