Is there a more efficient alternative to `[].push.apply(this, arr)` for combining elements in an array instance within a constructor?

Question

Is there a more efficient alternative to `[].push.apply(this, arr)` for combining elements in an array instance within a constructor?

It only takes 0.15ms for this line in my constructor function to execute.

[].push.apply(this, selector);

I'm not satisfied with the 0.15ms execution time. I believe there must be a quicker alternative available.

This particular line seems to be converting NodeList/HTMLCollection to an array. But do I really need it to be in array format? Perhaps there is another solution that can be used instead. Any ideas?

(function () {
    'use strict';
    
    function Query(selector) {
        if (selector.indexOf('.') !== -1) {
            selector = document.querySelectorAll(selector);
        }
        else {
            selector = document.getElementsByTagName(selector);
        }
        
        [].push.apply(this, selector);
    }
    
    function $(selector) {
        return new Query(selector);
    }
    
    
    Query.prototype = new Array;
    Query.prototype.hide = function () {
        for (var i=0,len=this.length;  i<len;  i++) {
            this[i].style.display = 'none';
        }
        return this;
    };
    
    
    window.$= $;
}());

javascript arrays performance array-push

Answer 1

Answer №1

Upon receiving insightful recommendations from @SebastianSimon this[0] = selector[0]; and @PeterSeliger this.push(...selector); in the comments, I entertained the idea of a for-loop.

Through thorough testing, it became apparent that this approach was quicker than using "[].push.apply(this, selector);".

I am open to further guidance from seasoned developers on this matter.

(function () {
    'use strict';
    
    function Query(selector) {
        if (selector.indexOf('.') !== -1) {
            selector = document.querySelectorAll(selector);
        }
        else {
            selector = document.getElementsByTagName(selector);
        }
        
        //[].push.apply(this, selector);
        var i=0,  len=selector.length;
        for (;  i<len;  ) {
            this[i] = selector[i++];
        }
        this.length = len;
    }
    
    function $(selector) {
        return new Query(selector);
    }
    
    
    Query.prototype = new Array;
    Query.prototype.hide = function () {
        for (var i=0,len=this.length;  i<len;  i++) {
            this[i].style.display = 'none';
        }
        return this;
    };
    
    
    window.$= $;
}());

Answer 2

Upon receiving insightful recommendations from @SebastianSimon this[0] = selector[0]; and @PeterSeliger this.push(...selector); in the comments, I entertained the idea of a for-loop.

Through thorough testing, it became apparent that this approach was quicker than using "[].push.apply(this, selector);".

I am open to further guidance from seasoned developers on this matter.

(function () {
    'use strict';
    
    function Query(selector) {
        if (selector.indexOf('.') !== -1) {
            selector = document.querySelectorAll(selector);
        }
        else {
            selector = document.getElementsByTagName(selector);
        }
        
        //[].push.apply(this, selector);
        var i=0,  len=selector.length;
        for (;  i<len;  ) {
            this[i] = selector[i++];
        }
        this.length = len;
    }
    
    function $(selector) {
        return new Query(selector);
    }
    
    
    Query.prototype = new Array;
    Query.prototype.hide = function () {
        for (var i=0,len=this.length;  i<len;  i++) {
            this[i].style.display = 'none';
        }
        return this;
    };
    
    
    window.$= $;
}());

Answer 3

Answer №2

(function () {

  'use strict';

  class Query extends Array {

    constructor(selector) {
      super();

      this.push(...document.querySelectorAll(selector));
    }
    hide() {
      for (var idx = 0, len = this.length;  idx < len; idx++) {
        this[idx].style.display = 'none';
      }
      return this;
    }
    show() {
      for (var idx = 0, len = this.length;  idx < len; idx++) {
        this[idx].style.display = '';
      }
      return this;
    }
  }

  function $(selector) {
    return new Query(selector);
  }
  window.$ = $;

}());

const query = $('span');

setTimeout(() => query.hide(), 1000);
setTimeout(() => $('.quick-fox > span').show(), 2000);

setTimeout(() => console.log({ query }), 3000);
setTimeout(() => console.log('query.push(...$("p")) ...', query.push(...$("p"))), 4000);
setTimeout(() => console.log({ query }), 5000);

<p class="foo-bar">
  <span>foo</span>
  <span>bar</span>
  <span>baz</span>
</p>

<p class="quick-fox">
  <span>The</span>
  <span>quick</span>
  <span>brown</span>
  <span>fox</span>
</p>

Answer 4

(function () {

  'use strict';

  class Query extends Array {

    constructor(selector) {
      super();

      this.push(...document.querySelectorAll(selector));
    }
    hide() {
      for (var idx = 0, len = this.length;  idx < len; idx++) {
        this[idx].style.display = 'none';
      }
      return this;
    }
    show() {
      for (var idx = 0, len = this.length;  idx < len; idx++) {
        this[idx].style.display = '';
      }
      return this;
    }
  }

  function $(selector) {
    return new Query(selector);
  }
  window.$ = $;

}());

const query = $('span');

setTimeout(() => query.hide(), 1000);
setTimeout(() => $('.quick-fox > span').show(), 2000);

setTimeout(() => console.log({ query }), 3000);
setTimeout(() => console.log('query.push(...$("p")) ...', query.push(...$("p"))), 4000);
setTimeout(() => console.log({ query }), 5000);

<p class="foo-bar">
  <span>foo</span>
  <span>bar</span>
  <span>baz</span>
</p>

<p class="quick-fox">
  <span>The</span>
  <span>quick</span>
  <span>brown</span>
  <span>fox</span>
</p>

Is there a more efficient alternative to `[].push.apply(this, arr)` for combining elements in an array instance within a constructor?

Answer №1

Answer №2

Similar questions

Leverage the power of Reactjs to add hover effects to a mapped

What is the best way to turn each function within the module pattern into a promise?

Issues with loading content in jQuery's ajax() function

The absence of 'www' in the ajax path is causing an error

How can you extract elements from a JSON array into separate variables based on a specific property value within each element?

The Discord.js guildMemberUpdate event: Everything you need to know

How can contextual binding be implemented in TypeScript?

Using PHP, show a specific table row when clicked by matching the ID

Multiple occurrences of trigger events were detected when loading ajax content

Resizing an image based on the coordinates of a click position by utilizing jQuery

Having trouble extracting the date modified from a JSON file

Building a conditional statement in React based on the URL path: A beginner's guide

Extracting text from an HTML file and passing it to an Express.js server: A beginner

Breaking down objects and setting default values

Make the jQuery toggle() function work like a regular radio button when selecting multiple options at a time

DANGEROUS EVALUATION: Tips for Safe Replacement

Identify the difference between a regular function and a constructor in JavaScript

Preserve the chosen option in a dropdown menu even after a postback using JavaScript

Is it possible to implement pagination using 'useSWR' in combination with the contentful-client?

Executing function inside an Angular factory