Что означают параметры у массива во вкладке “Console” в инструментах разработчика?

187
29 апреля 2018, 21:16

Что это означает в консоли?

Немного я знаю, например (сверху-вниз):

  1. Массив.
  2. Индекс первого элемента, равный 0.
  3. Кол-во элементов.
  4. ...

Правильно я понимаю что консоль вывела методы, которые допустимо применять к данному массиву? Вот только не пойму, если массивы это в принципе объекты(объекты как ассоциативные массивы, то есть массивы это те же объекты для более удобного хранения данных), то почему здесь нет методов replace, split..? И почему почти везде стоит " f " ?

Answer 1

Для того что бы понять, что это заметоды, нужно разработься с таким понятием как prototype (Прототип). В javascript практически всё, кроме примитивных типов (number, string, boolean, ...), явяляется объектом и, для того, что бы в этом убедиться, выполните в консоли следущий код:

console.log([] instanceof Object); // Массив 
console.log({} instanceof Object); // Объект 
console.log((function(){}) instanceof Object); // Функция 
console.log(new Date() instanceof Object); // Объект даты

Говоря является объектом, имеется в виду то, что тот или иной "класс" "наследуется" от "класса" Object (если выражаться в терминах ООП). Но в прототипных языках наследование рееализуется через прототипирование. Другими словами, в основе объекта Array лежит объект Object и связь между ними, в javascript, реализуется посредством свойства __proto__.

const list = new Array(); 
 
// здесь Array - это "класс", а list - это объект "класса" 
 
// Array базируется на "классе" Object и в этом можно убедиться, если вылнить такую команду 
 
console.log(Array.prototype.__proto__.constructor.name); // Object 
 
// здесь: 
// Array - это сам "класс" 
// Array.prototype - это прототип "класса" Array 
// Array.prototype.__proto__ - это уже Object, который лежит в основе прототипа объекта. Т.к. для того что бы реализовать прототип, в любом случае потребуется воспользоваться объектом. 
// Array.prototype.__proto__.constructor.name - это способ вывесит имя  данного объекта

Что косается f, то это просто способ отображения функции в консоли браузеров Chromium. Если вы выполните этот же код в браузере Firefox, то в его консоли вывод будет примерно таким function toString()

Answer 2

Консоль хрома пытается выводить в читаемом виде реальные свойства объекта. Для стандартных типов вроде Array, String и т.д. выводимые свойства в основном соответствуют спецификации.

Например для Array выводятся непосредственно элементы массива, в данном случае один элемент с индексом 0 и значением - строка.

После свойств непосредственного объекта, указывается его прототип, в консоли хрома он, пока, отображается как __proto__.

При раскрытии его указываются свойства описанные в разделе спецификации Properties of the Array Prototype Object

И так далее, можно раскрывать __proto__ пока само свойство не будет null.

В случае с функциями, кроме свойств описанных в спецификации, в разделе Function Objects также указываются служебные свойства

  1. [[FunctionLocation]] - в значении которой указывается ссылка на отладчик с исходником этой функции

  2. [[Scopes]] - непосредственно используемые замыкания.

Answer 3
  1. Метод replace и split - это методы строки. У массива есть свои методы, у строки свои, у обьекта - свои. По своей сути, всё что есть в javascript(типы данных) - наследуется от Обьекта(через __proto__).
  2. Буква f означает что это - функция, рядом с этой буквой стоит имя функции.
READ ALSO
Как достать из JSON строку и файл? (java)

Как достать из JSON строку и файл? (java)

Значит в JS запаковываю изображение и нужную мне строку отправляю как json:

194
Оставить только 1 страну в коде mango callback

Оставить только 1 страну в коде mango callback

На сайт поставили код mango office callback ( https://wwwmango-office

194
Реально ли вывести 2 видео в одном окне?

Реально ли вывести 2 видео в одном окне?

Стала передомной задача взаимодействовать web-camery пользователя с 3D модельюВзаимодействие заключается в определении положения головы пользователя...

254
Нужна помощь в настройке юнит-тестов

Нужна помощь в настройке юнит-тестов

Пытаюсь настроить и запустить юнит-тестирование Angular с помощью Jest, но что-то не очень понимаю что конкретно нужно сделатьПосле прочтения...

178