Console log javascript массив

console . log ( )

console . log ( ) — это метод, предназначенный для печати в консоль браузера.

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

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Вызов console . log ( ) выведет в консоль все переданные аргументы:

 console.log('hello')// 'hello'console.log(true, < a: true >, 100)// true 100 console.log('hello') // 'hello' console.log(true,  a: true >, 100) // true 100    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

⚡️ В момент разработки все действия кажутся долгими, поэтому можно воспользоваться молниеносным выводом в консоль.

Почему консоль разработчика, а не alert ( ) ?

Откройте консоль и выполните:

 const a = alert(a) const a =  id: 1, value: 'one text' > alert(a)    Скопировать Скопировано Не удалось скопировать   

Вывод при таком подходе не отражает содержимого объекта а — мы увидим только надпись «[object Object]». Помимо этого приходится каждый раз закрывать диалоговое окно, что раздражает.

Другое дело если совершать эти действия в консоли:

 const a = console.log(a)// Object const a =  id: 1, value: 'one text' > console.log(a) // Object   Скопировать Скопировано Не удалось скопировать   

Результат представлен в виде дерева, которое удобно раскрывается — видны все параметры.

Если хочется вывести отладочное сообщение на страницу, то придётся воспользоваться или alert ( ) или создавать отладочный HTML-блок div или textarea , чтобы записать туда свои вычисления с помощью записи в свойство inner Text . Перед этим не забудьте привести объект в строку с помощью JSON . stringify ( ) — проще будет читать.

Особенность работы в браузере

Скопировать ссылку «Особенность работы в браузере» Скопировано

В браузере с помощью console . log ( ) можно проверить мутацию ссылочного типа. Этого можно добиться, раскрыв выведенное значение в консоли. Всё что нам нужно сделать — нажать на иконку с перевёрнутым треугольником (►).

В качестве примера создадим массив с героями диснеевских мультфильмов. Изначально в нем будет располагаться только Микки Маус, а после вызова console . log ( ) , добавим и Плуто.

 const disneyCharacters = [< name: 'Mickey Mouse', type: 'mouse' >]console.log(disneyCharacters)disneyCharacters.push() const disneyCharacters = [ name: 'Mickey Mouse', type: 'mouse' >] console.log(disneyCharacters) disneyCharacters.push(name: 'Pluto', type: 'dog' >)    Скопировать Скопировано Не удалось скопировать   

Нажмём на иконку с перевёрнутым треугольником (►) в консоли и увидим результат вывода:

Причина в том, что значение ссылочного типа читается браузером только при его первом раскрытии. Этот процесс также называют ленивым чтением (lazy-read).

Google Chrome при этом показывает информационную иконку, при наведении на которую отобразится подсказка с текстом: «This value was evaluated upon first expanding. It may have changed since then.»

На практике

Скопировать ссылку «На практике» Скопировано

Дока Дог советует

Скопировать ссылку «Дока Дог советует» Скопировано

console . log ( ) и console . dir ( )

Скопировать ссылку «console.log() и console.dir()» Скопировано

В пространстве объекта console существуют различные методы. Есть два похожих метода console . log ( ) и console . dir ( ) .

console . log ( ) отражает любой объект в консоли в удобном виде. Если это примитив — то его значением, если объект — его древовидной формой. DOM-элемент — его можно также раскрыть и увидеть, что внутри.

Но console . log ( ) показывает содержимое DOM, а не его свойства. Если нужно увидеть свойства DOM-элемента, то лучше использовать console . dir ( ) :

 const el = document.createElement('div')const el2 = document.createElement('div')el2.appendChild(el)console.log(el)console.dir(el) const el = document.createElement('div') const el2 = document.createElement('div') el2.appendChild(el) console.log(el) console.dir(el)    Скопировать Скопировано Не удалось скопировать   

️ console . log ( ) удобен для исследования объектов и их вложенных элементов, а console . dir ( ) удобен для просмотра свойств объекта.

Если делать console . log ( ) и console . dir ( ) простого объекта, то разница минимальна:

 const a = console.log(a)console.dir(a) const a =  cat: "miu", dog: "woof" > console.log(a) console.dir(a)    Скопировать Скопировано Не удалось скопировать   

🛠 В каждом браузере свой набор инструментов работы с console . Смотрите, поддерживается ли тот или иной метод в вашем браузере в таблице на MDN

Виталий Баев советует

Скопировать ссылку «Виталий Баев советует» Скопировано

🛠 Часто нам необходимо вывести в консоли содержимое переменных. Например, вывести переменные language и count можно так:

 const language = 'JavaScript'const count = 100 console.log('language:', language, 'count:', count)// language: JavaScript count: 100 const language = 'JavaScript' const count = 100 console.log('language:', language, 'count:', count) // language: JavaScript count: 100    Скопировать Скопировано Не удалось скопировать   

Но можно сделать проще и быстрее. Сравните:

 const language = 'JavaScript'const count = 100 console.log(< language, count >)// const language = 'JavaScript' const count = 100 console.log( language, count >) //   Скопировать Скопировано Не удалось скопировать   

🛠 Если у нас есть массив с каким-то количеством однотипных объектов, то можно воспользоваться console . table ( ) :

 const data = [ < section: 'HTML', count: 212 >, < section: 'CSS', count: 121 >, < section: 'JavaScript', count: 182 >, < section: 'Tools', count: 211 >,] console.table(data);// ┌─────────┬──────────────┬───────┐// │ (index) │ section │ count │// ├─────────┼──────────────┼───────┤// │ 0 │ 'HTML' │ 212 │// │ 1 │ 'CSS' │ 121 │// │ 2 │ 'JavaScript' │ 182 │// │ 3 │ 'Tools' │ 211 │// └─────────┴──────────────┴───────┘ const data = [  section: 'HTML', count: 212 >,  section: 'CSS', count: 121 >,  section: 'JavaScript', count: 182 >,  section: 'Tools', count: 211 >, ] console.table(data); // ┌─────────┬──────────────┬───────┐ // │ (index) │ section │ count │ // ├─────────┼──────────────┼───────┤ // │ 0 │ 'HTML' │ 212 │ // │ 1 │ 'CSS' │ 121 │ // │ 2 │ 'JavaScript' │ 182 │ // │ 3 │ 'Tools' │ 211 │ // └─────────┴──────────────┴───────┘    Скопировать Скопировано Не удалось скопировать   

Источник

Как вывести массив js

Рассмотрим несколько способов вывода массива. Наш массив:

const array = ['dog', 'cat', 12, false, ['4', true],  name: 'John', age: 30 >]; 

Выводим массив целиком через console.log() :

Чтобы вывести каждый элемент массив отдельно, воспользуемся циклом for :

for (let i = 0; i  array.length; i += 1)  console.log(array[i]); > 

Если нужно вывести определенный элемент, обратимся к нему:

console.log(array[0]); // => dog console.log(array.at(-2)); // => ['4', true] 

Источник

Продвинутая JavaScript отладка при помощи console.table()

Вчера узнал об одной изящной возможности отладки в «Инструментах разработчика Chrome». На конференции «Web Developer Conference Compact» Маркус Росс (Marcus Ross — @zahlenhelfer) рассказывал о различных инструментах отладки, реализованных в Chrome, об одном из который я хочу рассказать.

Журналирование массива, при помощи console.log

Представим, что у вас есть массив языков программирования с соответствующими им файловыми расширениями:

var languages = [ < name: "JavaScript", fileExtension: ".js" >, < name: "TypeScript", fileExtension: ".ts" >, < name: "CoffeeScript", fileExtension: ".coffee" >]; console.log(languages); 

После console.log вы увидите следующее:

Это дерево безусловно полезно для отладки, но оно довольно громоздко, да и не особо удобно разворачивать каждый узел вручную. С console.table можно сделать лучше.

Журналирование массива, при помощи console.table

Вместо console.log воспользуемся console.table:

Убедитесь, что консоль открыта, перед тем как обновлять страницу, иначе вы ничего не увидите. Если все сделано правильно, вы увидите следующее:

Довольно аккуратно, правда?

Конечно table лучше всего работает с табличными данными. Если у всех объектов будут абсолютно разные поля — вы получите таблицу, в которой большинство ячеек — undefined. Но, не смотря на это, все будет выглядеть аккуратно, давая вам хороший общий обзор.

Журналирование объектов, при помощи console.table

Приятно, что console.table работает так же и с объектами:

var languages = < csharp: < name: "C#", paradigm: "object-oriented" >, fsharp: < name: "F#", paradigm: "functional" >>; console.table(languages); 

Нечего добавить…

Фильтруем выводимые свойства

Если нужно выводить только определенные свойства, можно перечислить их во втором параметре console.table:

// Несколько свойств console.table(languages, ["name", "paradigm"]); 

Для одного свойства достаточно использовать строку:

// Одно свойство console.table(languages, "name"); 

Подведем итог

Я думал, что знаю большинство функционала «Инструментов разработчика Chrome» — я ошибался. «Инструменты» переполнены полезными штуками, которые только и ждут, чтобы ими воспользовались. Серьезно, зайдите на страницу с официальной документаций, уверен, вы обязательно найдете для себя что-то новое.

От переводчика: надеюсь не я один не знал об этой возможности. В любом случае, порывшись на хабре, нашел офигенную статью по теме — FireBug* Console API — консоль там просто по косточкам разобрана…

Источник

5 Ways to print arrays to the browser console window in javascript?

This tutorial talks about how to display an array of javascript objects to console logs for debugging. It also includes how to print primitive values to the console. There are many ways we can print the javascript array into the console.

if you have an array with either objects or primitives, printed using console.log, it always gives [object, object] that does not help debug.

let employees = [  id: 1, name: "kiran" >,  id: 2, name: "franc", >, ]; console.log(employees);

Let’s see an example for printing arrays in javascript

How to print an array of primitive types in javascript

In this, we have an array of primitives like numbers, and strings.

We can do it in multiple ways using javascript loops and object methods.

using for-of loop

• Array of strings is created inline using square brackets
• print the array at once using console.log — [ ‘one’, ‘two’, ‘three’ ]
• Used for-of loop to iterate and print using console statements

let stringArray = ["one", "two", "three"]; console.log(stringArray); for (let str of stringArray)  console.log(str); >

using forEach with a callback function

each method in the array iterated with each element is applied with a callback function.

let stringArray = ["one", "two", "three"]; stringArray.forEach(function (str)  console.log(str); >);

Object keys with the map method

An object is a class in javascript which has the keys method accepts a string array, and returns an array of strings of enumerable properties. callback in the map is called for each element.

Object.keys(stringArray).map((str) => console.log(stringArray[str]));

Print an array of objects into the console in javascript

An array can contain multiple objects. Each object contains key and value pairs enclosed in .

There are multiple ways we can display object arrays.

SON.stringfy

Using JSON.stringfy is used to print the object in json string format. JSON is available in every browser.

let employees = [  id: 1, name: "kiran" >,  id: 2, name: "franc", >, ]; console.log(employees); console.log(JSON.stringify(employees));

[  id: 1, name: "kiran" >,  id: 2, name: "franc" >, ][( id: 1, name: "kiran" >,  id: 2, name: "franc" >)];

using the console.table

console object has a table method introduced in the latest javascript.

It prints a beautiful table format with each object in an array representing each row.

It supports all browsers and also nodes introduced since the V10+ version.

let employees = [  id: 1, name: "kiran" >,  id: 2, name: "franc", >, ]; console.table(employees);

┌─────────┬────┬─────────┐ │ (index) │ id │ name │ ├─────────┼────┼─────────┤ │ 0 │ 1 │ 'kiran' │ │ 1 │ 2 │ 'franc' │ └─────────┴────┴─────────┘

Conclusion

Printing arrays give an object, an object which does not help debug. It covers multiple ways to print an array into the console.

Источник