select multiple array elements javascript

Question

Is there a way to select multiple array elements at once?

I have this code:

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

I would like to select 1st, 3rd, 5th, 7th, 9th element from the array at the same time, something like this

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

Answer 1

The easiest way to achieve this nowadays is to use the map function:

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

The trick is to call the map function on an array of the desired indexes. An array map function will return an array of the same length as the array it is called on. The callback function inside the map function (x=>my_array[x]) then returns the value of my_array for each of the desired indexes.

Answer 2

The easiest way, if you must use JavaScript, would be to set up a simple function, to which you pass the array and the indices:

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;
    });
}

Then call with:

// 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>

Bear in mind, though, that your original selector included all childNodes (which necessarily includes textNodes, and HTML comment nodes (among, potentially, others); whereas it seems you want only HTMLElements; for that I'd strongly suggest using a slightly different means of selection:

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

Or:

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

Further, though without seeing your HTML it's rather hard to be particularly precise, it seems that you're trying to select only the odd-numbered indices of the childNodes, which lends itself to using CSS only to achieve your goal. In your specific case that would be:

#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 3

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

(undefined because some of these indices are off the end of the data).