Интересно, почему у фреймворков / библиотек есть свои помощники, хотя они уже существуют изначально.

Давайте возьмем jQuery и AngularJS . У них есть свои собственные eachфункции итератора:

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

Но у нас есть Array.prototype.forEach.

По аналогии,

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

Но у нас есть JSON.parse()функция в ванильном JavaScript.

Потому что, когда эти библиотеки были написаны, некоторые основные браузеры не поддерживали эти функции. После написания и использования эти функции не могут быть удалены из этих библиотек, не нарушая многие приложения.

(В данном случае «основной браузер» означает браузер, который все еще имеет большую долю рынка, который включает в себя более старые версии браузеров, таких как Internet Explorer, где большое количество пользователей не обязательно обновляется до последней версии.)

Потому что разные браузеры имеют разные реализации и функции, встроенные в их движок JavaScript. Один и тот же код "vanilla-JS" может работать по-разному в двух разных браузерах или даже в двух разных версиях одного и того же браузера.

Уровень абстракции, предоставляемый популярными библиотеками JS, позволяет обойти это. За кулисами он работает с различными возможностями и ограничениями браузеров и предлагает унифицированный, простой в использовании API поверх них. Это, в свою очередь, позволяет согласованным, эффективным и независимым от браузера обычным операциям, таким как получение объекта DOM или выборка данных JSON.

Это значительно облегчает жизнь разработчикам, которые теперь могут сосредоточиться на том, что должен делать код, а не на том, как он должен быть написан для работы с браузером X или Y.

1. Обратная совместимость

JavaScript - это реализация ECMAScript . Большинство из этих функций были введены в ECMAScript 5 (ES5), однако многие старые браузеры, которые все еще имеют достаточно значительную долю рынка, не поддерживают эти функции (см. Таблицу совместимости ECMAScript 5 ), наиболее заметной из которых является IE8.

Как правило, библиотеки возвращаются к собственной реализации, если она существует, в противном случае они используют собственный полифилл, например, давайте посмотрим на реализацию 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;
}

Следующие строки проверяют, forEachсуществует ли метод на объекте и является ли он версией AngularJS или нет. Если нет, он использует уже указанную функцию (нативная версия):

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

2. Удобство

В нативном JavaScript Array.prototype.forEachэто метод, эксклюзивный для экземпляра Array, но большинство Objectany тоже итерируемо.

По этой причине многие создатели библиотек делают свои функции полиморфными (способными принимать в качестве входных данных несколько типов). Давайте возьмем приведенный выше код AngularJS и посмотрим, какие входные данные он принимает:

Функции :

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

Массивы (с собственной поддержкой forEach):

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

Подобные массиву объекты, включая Array (без встроенной поддержки forEach), String, HTMLElement, Object с допустимым свойством длины:

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

Заключение

Как вы можете видеть, AngularJS будет перебирать практически любой объект JavaScript, хотя он работает так же, как и нативная функция, он принимает гораздо более разные типы ввода и, таким образом, является допустимым дополнением к библиотеке, а также способом вызова функций ES5. в устаревших браузерах.