Javascript является ли числом. Преобразование числа в строку. Undefined может быть Defined
JavaScript. Причудливый и все-таки прекрасный язык программирования. Если бы Пабло Пикассо был программистом, то он наверняка бы разработал именно JavaScript. Null является объектом, пустой массив эквивалентен false , а функции перебрасываются словно теннисные мячи.
Типы данных и определения 1. null - это объектНачнем с широко известной странности JavaScript. null является объектом. Сомневаетесь? Ведь данное утверждение противоречит самой сути null . Вот доказательства:
Alert(typeof null); //Выдаст сообщение "object"
Несмотря на очевидный факт, null не является реализацией никакого базового объекта. (Если вы не знали, значения в JavaScript являются реализациями базового объекта. Так, каждое число является реализацией объекта Number , каждый объект является реализацией объекта Object .) Такое положение возвращает нас обратно к практическому смыслу, потому что если null является отсутствием значения, то он не может быть реализацией какого-либо объекта. Следовательно следующее выражение возвращает false:
Alert(null instanceof Object); //Выдаст сообщение "false"
2. NaN - это числоСчитаете факт представления null объектом странным? Попробуйте проверить NaN ! Он оказывается числом! Кроме того, NaN не равен самому себе!
Alert(typeof NaN); //Выдаст сообщение "Number" alert(NaN === NaN); //Выдаст сообщение "false"
В действительности NaN не равен ничему. Единственный способ проверить значение NaN - функция isNaN() .
3. Массив без ключей == falseДругая причуда JavaScript:
Alert(new Array() == false); //Выдаст сообщение "true"
Чтобы понять, что происходит, нужно понимать концепцию истина и ложь . В данном случае имеется некий вид отношений истина/ложь, которая может привести в восторг философа или специалиста по логике.
Существует множество описаний концепции истины и лжи, но самое простое объяснение таково: в JavaScript каждое нелогическое значение имеет встроенный логический флаг , который используется тогда, когда значение должно рассматриваться как логическое, например, при сравнении с другим логическим выражением.
Чтобы произвести сравнение значений разных типов JavaScript сначала приводит их к общему типу данных. False , 0 , null , undefined , пустая строка и NaN становятся false —?только для заданного выражения сравнения. Например:
Var someVar = 0; alert(someVar == false); //Выдаст сообщение "true"
Здесь имеется попытка сравнить число 0 с логическим значением false . Так как типы данных несопоставимы, JavaScript незаметно приводит их к единому логическому эквиваленту , и в нашем случае 0 представляется как false.
В выше приведенном списке не было пустого массива. Пустой массив - любопытная штука: в действительности он рассматривается как true , но при сравнении с логическим значением он ведет себя как false . Вот так!
Var someVar = ; //Пустой массив alert(someVar == false); //Выдаст сообщение "true" if (someVar) alert("hello"); //Выполняется alert, поэтому someVar рассматривается как true
Чтобы избежать приведения типов нужно использовать оператор сравнения значений и типов === (в отличие от == , который сравнивает только значения). Например:
Var someVar = 0; alert(someVar == false); //Выдаст сообщение "true" alert(someVar === false); //Выдаст сообщение "false", 0 - число, а не логическая переменная
Регулярные выражения 4. replace() может получать возвратную функциюЭто один из самых скрытых секретов JavaScript (который появился начиная с версии 1.3). Обычно вызов функции replace() выглядит примерно так:
Alert("10 13 21 48 52".replace(/d+/g, "*")); //заменяем все числа на *
Простая замена. Но что если нужно более сложно контролировать когда и как будет производиться замена? Например, нужно заменять числа только до 30. Такая задача не может быть решена только регулярным выражением (оно может сделать все, что угодно со строкой, но не с математикой выражения). Нужно использовать возвратную функцию для вычисления соответствия.
Alert("10 13 21 48 52".replace(/d+/g, function(match) { return parseInt(match) < 30 ? "*" : match; }));
Для каждой проверки JavaScript вызывает функцию, передавая ей аргументы для проверки. А затем мы возвращаем либо звездочку, либо само число.
5. Регулярные выражения: больше, чем выделение подстроки и заменаОбычно JavaScript программисты в своей практике используют только методы match и replace для регулярных выражений. Но кроме них в JavaScript есть и другие инструменты.
Практический интерес представляет метод test() , который действует подобно match , но не возвращает значение: он просто подтверждает соответствие шаблону. То есть он легче для вычислений.
Alert(/w{3,}/.test("Hello")); //Выдаст сообщение "true"
Выше приведенный код выполняет проверку на соответствие шаблону, состоящему из трех и более буквенных и числовых символов. Так как строка Hello соответствует требованию, то мы получаем true . Но мы не получаем выделение из строки, а просто результат проверки.
Также обратите внимание на то, что с помощью объекта RegExp вы можете создавать динамические регулярные выражения. В основном регулярные выражения составляются с использованием коротких форм (то есть строк, заключенных в прямые слеши) и в них нельзя использовать переменные . Но RegExp() позволяет обойти ограничение.
Function findWord(word, string) { var instancesOfWord = string.match(new RegExp("\b"+word+"\b", "ig")); alert(instancesOfWord); } findWord("car", "Carl went to buy a car but had forgotten his credit card.");
Здесь мы создаем динамический шаблон на основе значения аргумента word . Функция возвращает количество совпадений полного слова word (то есть не являющегося частью других слов) в строке. В нашем примере car встречается один раз, а слова Carl и card игнорируются.
Так как RegExp определяется строкой, а не через синтаксис с обратными слешами, то мы можем использовать переменные для построения шаблона. Но специальные символы в данном случае требуют к себе повышенного внимания, как символы границы слова в нашем примере.
Функции и область видимости 6. Вы можете обманывать область видимостиОбласть видимости, в которой выполняется код, определяет доступность переменных. Свободный код JavaScript (то есть код, который выполняется вне какой-либо функции) оперирует глобальной областью видимости объекта window , где имеет доступ ко всему. А локальные переменные, объявленные внутри функции, доступны только внутри данной функции, но не вне ее.
Var animal = "dog"; function getAnimal(adjective) { alert(adjective+" "+this.animal); } getAnimal("lovely"); //Выдаст сообщение "lovely dog";
В данном примере наша переменная и функция объявлены в глобальной области видимости (то есть в window). Так как this всегда указывает на текущую область видимости, то здесь он указывает на window . Следовательно функция ищет window.animal . Нормальная ситуация. Но мы можем заставить нашу функцию считать, что она выполняется в другой области видимости, которая отличается от ее нормального состояния. Для этого используется встроенный метод call() для вызова функции:
Var animal = "dog"; function getAnimal(adjective) { alert(adjective+" "+this.animal); }; var myObj = {animal: "camel"}; getAnimal.call(myObj, "lovely"); //Выдаст сообщение "lovely camel"
Здесь функция выполняется не в window, а в myObj , что определяется первым аргументом при вызове метода call. По существу метод call() имитирует ситуацию, что наша функция является методом myObj . Обратите внимание, что все переданные аргументы после первого в метод call() передаются в нашу функцию - здесь lovely становится значением аргумента adjective .
Опытные разработчики JavaScript наверняка скажут, что годы работают без использования данного метода, потому что хорошо продуманный код не нуждается в шаманстве с бубнами. Но, тем не менее, описанная ситуация представляет определенный интерес.
Также есть метод apply(), который действует аналогично call() , за исключением того, что аргументы должны быть указаны в массиве. Выше приведенный пример с использованием apply() будет выглядеть так:
GetAnimal.apply(myObj, ["lovely"]); //аргументы функции отправляются как массив
7. Функция может вызывать сама себяСложно отрицать следующий факт:
(function() { alert("hello"); })(); //Выдаст сообщение "hello"
Синтаксис примера достаточно прост: мы объявляем функцию и немедленно вызываем ее, как другую с помощью синтаксиса () . Может возникнуть вопрос "А зачем так делать?". Обычно, функция содержит код, который планируется использовать позже и в другом месте, иначе не нужно размещать его в функции.
Хорошим примером использования самовызывающихся функций (они иногда обозначаются аббревиатурой SEF) является привязка текущего значения переменной для использования внутри отложенного кода, такого как возвратные функции для событий, таймаутов и интервалов. Есть проблема:
Var someVar = "hello"; setTimeout(function() { alert(someVar); }, 1000); var someVar = "goodbye";
Новички бывают удивлены тем, что Newbies функция alert в timeout выдает goodbye, а не hello . Ответ достаточно прост возвратная функция timeout не вычисляет значения someVar до момента своего выполнения, поэтому в ней оказывается значение goodbye .
Самовызываюшиеся функции обеспечивают решение данной проблемы. Вместо определения возвратной функции имплицитно, как в выше приведенном примере, мы возвращаем ее из самовызывающейся функции, в которую передаем текущее значение someVar в качестве аргумента. то есть мы передаем и изолируем текущее значение переменной someVar , защищая его от последующих модификаций someVar . Очень похоже на фотографию, которая хранит образ во времени.
Var someVar = "hello"; setTimeout((function(someVar) { return function() { alert(someVar); } })(someVar), 1000); var someVar = "goodbye";
В данном примере код выдаст сообщение hello , так как используется изолированное значение someVar (то есть аргумент функции, а не внешняя переменная).
Браузеры 8. Firefox читает и возвращает значение цвета в формате RGB , а не hexНепонятно, почему Mozilla так делает. Определенно, из JavaScript удобнее работать с форматом hex , а не RGB. Например:
Текст var ie = navigator.appVersion.indexOf("MSIE") != -1; var p = document.getElementById("somePara"); alert(ie ? p.currentStyle.color: getComputedStyle(p, null).color);
Большинство браузеров выведут ff9900 , а Firefox - rgb(255, 153, 0) . Нужно использовать функцию JavaScript для конвертации RGB в hex .
Обратите внимание, что в данном случае мы говорим о вычисляемом цвете, а не о том, как он определяется для элемента. Также IE имеет отличный метод для вычисления стилей.
Метод jQuery css() возвращает значение, определяемое в стиле для элемента. Поэтому, для действительного значения нужно использовать getComputedStyle и currentStyle .
Разное 9. 0.1 + 0.2 !== 0.3Данная причуда касается не только JavaScript, а всего компьютерного окружения и проявляется во многих языках. Вычисленное значение равно 0.30000000000000004.
Это действие точности вычислений. Когда JavaScript производит вычисления, он конвертирует значения в бинарные эквиваленты. И здесь появляется проблема, так как 0.1 не может быть совершенно точно представлено в бинарном эквиваленте, который используется для бинарных операций с плавающей точкой.
Для того чтобы преодолеть данный казус есть два метода (выбор за вами):
Например, вместо такого кода:
Var num1 = 0.1, num2 = 0.2, shouldEqual = 0.3; alert(num1 + num2 == shouldEqual); //Выдаст сообщение "false"
Можно построить выражение так:
Alert(num1 + num2 > shouldEqual - 0.001 && num1 + num2 < shouldEqual + 0.001); //Выдаст сообщение "true"
В данном примере результат сложения 0.1 + 0.2 оценивается как попадание в диапазон чисел около 0.3 с точностью 0.001. Для точных вычислений такой метод явно подходит плохо.
10. Undefined может быть DefinedЗвучит, конечно, странно, но undefined не является зарезервированным словом в JavaScript, хотя и имеет специальное значение для выявления неопределенных переменных:
Var someVar; alert(someVar == undefined); //Выдаст сообщение "true"
На первый взгляд все отлично. Но:
Undefined = "Я имею значение!"; var someVar; alert(someVar == undefined); //Выдаст сообщение "false"!
JavaScript или JS (сокращенно) не простой язык и начинающие разработчики узнают об этом не сразу. По началу они узнают азы и все кажется красочным и прекрасным. Заходя чуть глубже, появляются JavaScript массивы, объекты, callback’и и все подобное, что часто выносит мозг.
В JavaScript важно правильно проверять тип переменной. Допустим вы хотите узнать является ли переменная массивом или объектом? Как это правильно проверить? В этом конкретном случае, есть хитрости во время проверки и именно о них будет эта запись. Давайте сразу приступим.
Проверка типа переменнойНапример вам нужно проверить является переменная объектом, массивом, строкой или числом. Для этого можно использовать typeof , но она не всегда выдаст правду и в примере ниже я покажу почему.
Этот пример я написал, чтобы наглядно показать, почему typeof не всегда правильный выбор.
Var _comparison = { string: "строка", int: 99, float: 13.555, object: {hello: "привет"}, array: new Array(1, 2, 3) }; // Вернет массив с ключами объекта var _objKeys = Object.keys(_comparison); for(var i = 0; i (больше), < (меньше), >= (больше или равно), 3); //false console.log(5>=3); //true
При сравнении чисел с дробной частью необходимо учитывать погрешности, которые могут возникать во время этих вычислений.
Например, в JavaScript сумма чисел (0.2 + 0.4) не равна 0.6:
Console.log((0.2+0.4)==0.6); //false
Погрешности происходят потому что все вычисления компьютер или другое электронное устройство производит в 2 системе счисления. Т.е. перед тем как выполнить какие-то действия компьютер сначала должен преобразовать представленные в выражении числа в 2 систему счисления. Но, не любое дробное десятичное число можно представить в 2 системе счисления точно.
Например, число 0.25 10 в двоичную систему преобразуется точно.
0.125 × 2 = 0.25 | 0 0.25 × 2 = 0.5 | 0 0.5 × 2 = 1 | 1 0.125 10 = 0.001 2
Например, число 0.2 10 можно преобразовать в 2 систему только с определённой точностью:
0.2 × 2 = 0.4 | 0 0.4 × 2 = 0.8 | 0 0.8 × 2 = 1.6 | 1 0.6 × 2 = 1.2 | 1 0.2 × 2 = 0.4 | 0 0.4 × 2 = 0.8 | 0 0.8 × 2 = 1.6 | 1 0.6 × 2 = 1.2 | 1 0.2 × 2 = 0.4 | 0 0.4 × 2 = 0.8 | 0 0.8 × 2 = 1.6 | 1 0.6 × 2 = 1.2 | 1 ... 0.2 10 = 0.001100110011... 2
В результате эти погрешности скажутся при вычисления суммы двух чисел и результатах сравнения. Т.е. получится что на самом деле JavaScript будет видет эту запись следующим образом:
0.6000000000000001==0.6
При вычислениях или отображении чисел с дробной частью необходимо всегда указывать точность, с которой это необходимо делать.
Например, сравнить числа до 2 знаков после запятой используя методы toFixed() и toPrecision() :
//метод toFixed() console.log((0.2+0.4).toFixed(2)==(0.6).toFixed(2)); //true //метод toPrecision() console.log((0.2+0.4).toPrecision(2)==(0.6).toPrecision(2)); //true
Основные математические операцииВ JavaScript существуют следующие математические операторы: + (сложение), - (вычитание), * (умножение), / (деление), % (остаток от деления), ++ (увелить значение на 1), -- (уменьшить значение на 1).
6+3 //9 6-3 //3 6*3 //18 6/3 //2 6%3 //0, т.е. 6:3=2 => 6-3*2 => ост(0) 5%2 //1, т.е. 5:2=2(.5) => 5-2*2 => ост(1) 7.3%2 //1.3, т.е. 7.3:2=3(.65) => 7.3-2*3 => ост(1.3) //знак результата операции % равен знаку первого значения -9%2.5 //-1.5, т.е. 9:2.5=3(.6) => 9-2.5*3 => ост(1.5) -9%-2.5 //-1.5, т.е. 9:2.5=3(.6) => 9-2.5*3 => ост(1.5) -2%5 //-2, т.е. 2:5=0(.4) => 2-5*0 => ост(2) x = 3; console.log(x++); //выводит 3, у уже потом устанавливает 4 console.log(x); //4 x = 3; console.log(++x); //устанавливает 4 и выводит x = 5; console.log(x--); //выводит 5, у уже потом устанавливает 4 console.log(x); //4 x = 5; console.log(--x); //устанавливает 4 и выводит Кроме этого в JavaScript есть комбинированные операторы: x+=y (x=x+y), x-=y (x=x-y), x*=y (x=x*y), x/=y (x=x/y), x%=y (x=x%y). x = 3; y = 6; x+=y; console.log(x); //9 x = 3; y = 6; x-=y; console.log(x); //-3 x = 3; y = 6; x*=y; console.log(x); //18 x = 3; y = 6; x/=y; console.log(x); //0.5 x = 3; y = 6; x%=y; console.log(x); //3
Существует несколько JavaScript-хаков, которыми постоянно пользуются опытные программисты. Они не совсем очевидны, особенно для новичков. Эти хаки используют возможности языка, имеющие некоторые побочные эффекты. В этой статье я объясню, как работают 5 таких распространённых хаков.
Использование оператора!! для конвертации в логическое значение Всё в JavaScript может быть интерпретировано как истинное или ложное . Это означает, что если вы поместите объект в условный оператор if , то он выполнит либо true -ветку кода (когда объект имеет значение true), либо выполнит false -ветку (соответственно, когда объект имеет значение false).0, false, "", null, undefined, NaN - это ложные значения. Все остальные значения возвращают true . Иногда вам может потребоваться конвертировать переменную в логическое значение. Это можно сделать с помощью оператора!! :
Var something = "variable"; !!something // returns true
С другой стороны, вместо if (x == "test") можно просто написать if (x) . Если же x будет пустой переменной, то просто выполнится код из блока else .
Конвертация строки в число с помощью оператора + В JavaScript + — это унарный оператор, который возвращает числовое представление операнда или NaN , если операнд не имеет такового. Например, с помощью этого оператора можно проверить, является ли переменная x числом (такой код можно увидеть в библиотеке underscore): x === +x .Такой способ не очевиден. Скорее всего, вы бы применили методы parseFloat и parseInt .
Определение значения по умолчанию с оператором || В JavaScript || является примером выполнения короткого замыкания . Этот оператор сперва анализирует выражение слева от него, и, если оно ложно, анализирует выражение справа. В любом случае, он возвращает первое истинное выражение. Рассмотрим следующий пример:Function setAge(age) { this.age = age || 10 } setAge();
В этом примере мы вызываем функцию setAge() без аргументов, таким образом age || 10 вернет 10 (!!age == false). Такой способ весьма хорош для того, чтобы задавать значения переменных по умолчанию. На самом деле, такой подход эквивалентен следующему примеру:
Var x; if (age) { this.age = age; } else { this.age = 10; }
Первый пример с оператором || более лаконичен, поэтому именно такой способ используется во всем мире.
Лично я часто использую этот способ. Мне нравится его лаконичность и простота. Однако стоит заметить, что с таким способом вам не удастся задать переменной значение 0, так как 0 является ложным выражением. Поэтому я советую при необходимости использовать такой способ:
This.age = (typeof age !== "undefined") ? age: 10;
Использование void 0 вместо undefined Ключевое слово void принимает один аргумент и всегда возвращает undefined . Почему просто не использовать undefined ? Потому что в некоторых браузерах undefined — это просто переменная, которая может быть переопределена. Поэтому void 0 даёт нам больше уверенности в том, что ничего не будет случайно сломано. Хотя вы можете найти этот хак в исходниках многих библиотек, я бы не рекомендовал использовать его регулярно, так как все ES5-совместимые браузеры не позволяют перезаписывать значение undefined .Инкапсуляция с помощью паттерна (function() {...})() В ES5 есть только 2 типа областей видимости: глобальная область видимости и область видимости функции. Всё, что вы пишите, принадлежит к глобальной области, которая доступна из любого места кода. Она включает в себя объявление переменных и функций. Однако, что если вы захотите инкапсулировать большинство кода, а в глобальной области видимости оставить только интерфейс? Тогда вам следует использовать анонимную функцию. Рассмотрим следующий пример:(function() { function div(a, b) { return a / b; } function divBy5(x) { return div(x, 5); } window.divBy5 = divBy5; })() div // => undefined divBy5(10); // => 2
Из всех перечисленных в статье хаков этот хак является самым безвредным; вы можете и должны использовать его в своих проектах, чтобы предотвратить взаимодействие внутренней логики с глобальной областью видимости.
В заключение я хотел бы напомнить вам, что любой написанный вами код должен быть прост и понятен для других программистов. И любые стандартные конструкции, предоставляемые языком, следует использовать в первую очередь.
Некоторые из хаков, рассмотренных в статье, могут быть решены элегантнее с помощью ES6 (следующая версия JavaScript). Например, в ES6 вместо age = age || 10 можно написать следующее:
Function(age = 10) { // ... }
Другой пример — паттерн (function() {...})() , который вы уже вряд ли станете использовать после того, как