105 lines
3.7 KiB
Markdown
105 lines
3.7 KiB
Markdown
---
|
||
title: Output
|
||
localeTitle: Вывод
|
||
---
|
||
## Вывод
|
||
|
||
Существует четыре наиболее распространенных способа вывода данных через консоль. Они будут использоваться большей частью вашего процесса разработки.
|
||
|
||
#### `console.log`
|
||
|
||
Это самый распространенный и используемый способ вывода данных. Общепринятая практика заключается в том, чтобы вставить пару из них между операторами, чтобы понять, как данные текут и обрабатываются. Кроме того, вы можете использовать `debugger` или точки останова в devtools, чтобы сделать то же самое без загрязнения вашего кода.
|
||
|
||
```javascript
|
||
var numbers = [ 1, 2, 3, 4, 5, 6, 7];
|
||
numbers.forEach(function(number){
|
||
console.log(number + ' is divisible by 2', number%2 == 0);
|
||
});
|
||
```
|
||
|
||
#### `console.warn`
|
||
|
||
Как вы догадались по имени, это используется для отображения предупреждений, и типичный желтый цвет отличает его от ошибки red & `console.log` .
|
||
|
||
```javascript
|
||
function isAdult(age){
|
||
if(Number(age) < 18){
|
||
console.warn('You are not an adult');
|
||
return false;
|
||
}
|
||
return true;
|
||
}
|
||
```
|
||
|
||
#### `console.error`
|
||
|
||
Как вы можете догадаться, это используется при выбросе исключения или ошибке в коде. Дает красное сообщение об ошибке, чтобы быстро привлечь внимание.
|
||
|
||
#### `console.table`
|
||
|
||
Предположим, у вас есть список предметов или фильмов в объекте json, и вы хотите проверить это в формате таблицы, тогда ваш лучший `console.table` - `console.table` . Он автоматически определяет заголовки строк и столбцов из данных.
|
||
|
||
_Попробуйте запустить код ниже в консоли_
|
||
|
||
```javascript
|
||
var data = {
|
||
"colors": [
|
||
{
|
||
"color": "black",
|
||
"category": "hue",
|
||
"type": "primary",
|
||
"rgba": [255,255,255,1],
|
||
"hex": "#000"
|
||
},
|
||
{
|
||
"color": "white",
|
||
"category": "value",
|
||
"rgba": [0,0,0,1],
|
||
"hex": "#FFF"
|
||
},
|
||
{
|
||
"color": "red",
|
||
"category": "hue",
|
||
"type": "primary",
|
||
"rgba": [255,0,0,1],
|
||
"hex": "#FF0"
|
||
},
|
||
{
|
||
"color": "blue",
|
||
"category": "hue",
|
||
"type": "primary",
|
||
"rgba": [0,0,255,1],
|
||
"hex": "#00F"
|
||
},
|
||
{
|
||
"color": "yellow",
|
||
"category": "hue",
|
||
"type": "primary",
|
||
"rgba": [255,255,0,1],
|
||
"hex": "#FF0"
|
||
},
|
||
{
|
||
"color": "green",
|
||
"category": "hue",
|
||
"type": "secondary",
|
||
"rgba": [0,255,0,1],
|
||
"hex": "#0F0"
|
||
|
||
},
|
||
]
|
||
}
|
||
|
||
console.table(data.colors);
|
||
```
|
||
|
||
Кроме того, вы можете контролировать и фильтровать тип вывода, который вы хотите видеть на консоли.
|
||
|
||
1. Все
|
||
2. Подробный
|
||
3. Предупреждение
|
||
4. ошибки
|
||
|
||
#### Дополнительная информация:
|
||
|
||
* [Полная ссылка объекта консоли на Google](https://developers.google.com/web/tools/chrome-devtools/console/console-reference)
|
||
* [Консоль MDN](https://developer.mozilla.org/en-US/docs/Web/API/Console) |