Статьи

Список JavaScript для начинающих Gotchas

Июнь 11, 2018

Я считаю себя новичком, когда дело доходит до написания кода на JavaScript, но в последнее время я немного больше играл с этим языком и наткнулся на несколько случайных вещей, которыми я поделился. Итак, если вы новичок в JavaScript или просто не знаете его так, как хотели бы, я надеюсь, что вы найдете эту статью полезной.

Логотип JavaScript

0 == «0», даже если 0 — ложь, а «0» — правдиво

На первый взгляд, это очень странно, но как только вы прочитаете больше об операторах сравнения, это имеет смысл. Чтобы избежать недоразумений, подобных этому, всегда используйте строго равный оператор (===) для такого сравнения. Лоус Лазарис написал целую статью о непредсказуемых результатах, которые могут произойти, если оператор сравнения равенства используется неправильно.

console.log(0 == "0"); // true
console.log(0 === "0"); // false

Вы также можете проверить таблицу истинности JavaScript , но не пытайтесь запомнить ее 🙂

1 + 2 + ”3 ″! =“ 1 ″ + ”2 ″ +3

JavaScript довольно терпим, когда речь идет о строках и числах, просто подумайте об операторе «+», который добавляет и объединяет. В отличие от других языков программирования, которые кричали бы вам при встрече с строкой выше, JavaScript на самом деле пытается решить эту проблему, предполагая, что числа тоже являются строками.

1+2+"3" != "1"+"2"+3; 
// 3+"3" != "12"+3
// 33 !=123

JavaScript поднимает объявления переменных и функций.

Следующий фрагмент кода будет работать без проблем, поскольку JavaScript позволяет использовать функцию до того момента, когда она была объявлена.

sayHello(); //Call the function before its declaration
function sayHello() {
    console.log("Hello!");
}

Однако следите за выражениями функций и объявлениями переменных! Хотя их объявления также отображаются, определение функции и, соответственно, инициализация переменной — нет. Если вы хотите узнать больше, Джеффри Уэй и Джеймс Аллардис написали несколько замечательных статей о перемещении переменных и функций в JavaScript.

Пропуск ключевого слова ‘var’

varКлючевые слова помогают определить переменную и при необходимости инициализации его значение. Но когда вы его опускаете, код все еще работает, и интерпретатор JavaScript не отображает ошибки. Это происходит потому, что соответствующая переменная будет создана в глобальной области, а не в локальной области, в которой вы ее определили. Такое поведение часто описывается как ловушка JavaScript, и настоятельно рекомендуется избегать ее, поскольку она может привести к неожиданным результатам .

var myFunction = function() {  
    var foo = 'Hello'; // Declares and initializes foo, scoped to myFunction
    bar = 'World!';     // This works too, but the scope is global
};

Точка с запятой необязательна, но…

Вы можете сходить с ума и писать операторы JavaScript, не заботясь о добавлении точек с запятой в конце. Но тут есть подвох. Хотя JavaScript автоматически вставляет точки с запятой в конце каждой строки, в некоторых случаях, особенно если вы являетесь поклонником отступов в стиле Allman , могут возникнуть проблемы.

// OK
return {
  'ok': false
};

// not OK
return
{
  'ok': false
};

Дуглас Крокфорд привел лучший пример по этому вопросу, и почему вы всегда должны использовать точки с запятой в коде JavaScript. На первый взгляд, приведенные выше фрагменты кода выглядят так же: возвращают объект. На самом деле второй сбой, потому что возвращаемое значение происходит undefinedиз-за автоматической инъекции точки с запятой.

return; // returns undefined

// code block that does nothing
{ 
  'ok': false
}

Кроме того, если вы еще этого не сделали, вы должны попытаться принять соглашение Дугласа Крокфорда о JavaScript .

Консоль твой друг.

Вы уже знаете фразу «Google — ваш друг». Имея это в виду, я бы сказал, что «Консоль — ваш друг» в этом случае сильно применим. У объекта console есть несколько интересных методов, которые вы можете использовать для отладки кода JavaScript. , log()будучи самым известным на сегодняшний день.

Я думаю, что console.log()больше не нужно никакого представления. Это неблокирующее поведение и хорошее форматирование — большие преимущества по сравнению с alert(). Проблема здесь в том, что, хотя он console.logбыл реализован в IE8 и IE9, consoleобъект каким-то образом не создается, пока вы не переключите DevTools.

Итак, я обнаружил, что если вы разрешите какие-либо console.logвызовы в вашем коде, он сломает ваш код в браузерах, таких как IE8 и IE9 . После поиска решения я нашел хорошее и простое решение.

По сути, если windowобъект не имеет доступа к консоли отладки браузера, просто переопределите console.logфиктивную функцию, которая вообще ничего не делает.

if (!window.console) { 
  console.log = function(){};
}

Красочные сообщения журнала

Но если методы логирования log, info, errorи предупредить не достаточно , чтобы отличить ваши сообщения, вы можете попробовать добавить ваш собственный стиль для logсообщений.

var consoleStyling = 'background: #0f0; color: #fff; font-weight: bold;';
console.log('%c A colorful message', consoleStyling);

Отладка с помощью console.table ()

Опять же, если использование console.log()кажется слишком распространенным, вы можете попробовать выполнить более сложную отладку JavaScript console.table(). Очень приятная особенность console.table () в том, что он также работает с объектами.

var browsers = {
    chrome: { name: "Chrome", engine: "WebKit" },
    firefox: { name: "Firefox", engine: "Gecko" }
};

console.table(browsers);

Заключительные слова

Когда вы узнаете больше о том, как на самом деле работает JavaScript, в вашей голове неизбежно возникнет следующий вопрос: почему в JavaScript так много разных способов сделать одно и то же? Возможно, ответ заключается в том, чтобы мы могли выбрать свой собственный путь с учетом лучших практик.

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

29
Share: