Me pregunto por qué los frameworks / bibliotecas tienen sus propios ayudantes, aunque ya existen de forma nativa.

Tomemos jQuery y AngularJS . Tienen sus propias eachfunciones de iterador:

• jQuery.each ()
• angular.forEach ()

Pero nosotros tenemos Array.prototype.forEach.

Similar,

• jQuery.parseJSON ()
• angular.fromJson ()

Pero tenemos la JSON.parse()función en JavaScript vainilla.

Porque cuando se escribieron esas bibliotecas, algunos navegadores importantes no admitían esas características. Una vez escritas y utilizadas, estas características no se pueden eliminar de estas bibliotecas sin romper muchas aplicaciones.

(En este caso, "navegador principal" significa un navegador que todavía tiene una gran cuota de mercado, que incluye versiones anteriores de navegadores como Internet Explorer, donde un gran número de usuarios no necesariamente se actualiza a la última versión).

Debido a que diferentes navegadores tienen diferentes implementaciones y características integradas en su motor de JavaScript. El mismo código "vanilla-JS" podría ejecutarse de manera diferente en dos navegadores diferentes, o incluso en dos versiones diferentes del mismo navegador.

La capa de abstracción proporcionada por las bibliotecas JS populares es una forma de evitar esto. Detrás de escena, trabaja alrededor de las diferentes capacidades y limitaciones de los navegadores y ofrece una API unificada y fácil de usar. Esto, a su vez, permite que las operaciones comunes, como obtener un objeto DOM o obtener datos JSON, sean consistentes, eficientes y independientes del navegador.

Esto hace la vida mucho más fácil para los desarrolladores que ahora pueden centrarse en lo que debe hacer el código, en lugar de cómo debe escribirse para que funcione con el navegador X o Y.

1. Compatibilidad con versiones anteriores

JavaScript es una implementación de ECMAScript . La mayoría de esas funciones se introdujeron en ECMAScript 5 (ES5), sin embargo, muchos navegadores antiguos que todavía tienen una participación lo suficientemente significativa en el mercado no son compatibles con estas funciones (consulte la tabla de compatibilidad de ECMAScript 5 ), la más notable de ellas es IE8.

En general, las bibliotecas volverán a la implementación nativa si existe; de ​​lo contrario, use su propio polyfill, por ejemplo, veamos la implementación de AngularJS ( angular.js L203-257 ):

function forEach(obj, iterator, context) {
  var key;
  if (obj) {
    if (isFunction(obj)){
      for (key in obj) {
        // Need to check if hasOwnProperty exists,
        // as on IE8 the result of querySelectorAll is an object without a hasOwnProperty function
        if (key != 'prototype' && key != 'length' && key != 'name' && (!obj.hasOwnProperty || obj.hasOwnProperty(key))) {
          iterator.call(context, obj[key], key);
        }
      }
    } else if (obj.forEach && obj.forEach !== forEach) {
      obj.forEach(iterator, context);
    } else if (isArrayLike(obj)) {
      for (key = 0; key < obj.length; key++)
        iterator.call(context, obj[key], key);
    } else {
      for (key in obj) {
        if (obj.hasOwnProperty(key)) {
          iterator.call(context, obj[key], key);
        }
      }
    }
  }
  return obj;
}

Las siguientes líneas verifican si el forEachmétodo existe en el objeto y si es la versión AngularJS o no. Si no, utiliza la función ya especificada (la versión nativa):

} else if (obj.forEach && obj.forEach !== forEach) {
  obj.forEach(iterator, context);
}

2. Conveniencia

En JavaScript nativo Array.prototype.forEaches un método exclusivo de una instancia de Array, sin embargo, la mayoría de cualquiera Objectes iterable también.

Por esta razón, muchos creadores de bibliotecas hacen que sus funciones sean polimórficas (capaces de aceptar múltiples tipos como entrada). Tomemos el código AngularJS anterior y veamos qué entradas acepta:

Funciones :

if (isFunction(obj)){
  for (key in obj) {
    // Need to check if hasOwnProperty exists,
    // as on IE8 the result of querySelectorAll is an object without a hasOwnProperty function
    if (key != 'prototype' && key != 'length' && key != 'name' && (!obj.hasOwnProperty || obj.hasOwnProperty(key))) {
      iterator.call(context, obj[key], key);
    }
  }

Matrices (con soporte nativo para cada uno):

} else if (obj.forEach && obj.forEach !== forEach) {
  obj.forEach(iterator, context);

Objetos de tipo Array, incluidos Array (sin soporte nativo para cada uno), String, HTMLElement, Object con una propiedad de longitud válida:

} else if (isArrayLike(obj)) {
  for (key = 0; key < obj.length; key++)
    iterator.call(context, obj[key], key);

Objetos:

} else {
  for (key in obj) {
    if (obj.hasOwnProperty(key)) {
      iterator.call(context, obj[key], key);
    }
  }
}

Conclusión

Como puede ver, AngularJS iterará sobre la mayoría de los objetos JavaScript, aunque funciona de la misma manera que la función nativa, acepta muchos más tipos diferentes de entrada y, por lo tanto, es una adición válida a la biblioteca y una forma de traer funciones ES5 a navegadores heredados.