Pull to refresh

Javascript от а и до… II

Reading time 7 min
Views 11K
Вот и продолжение первой части, много времени прошло, и вот… здесь я, как и обещал, расскажу поподробней об основных типах. Для начала пара замечаний, первая часть не прошла естественно без критики, так что вступление будет 'работой над ошибками'. В дальнейшем такие работы над ошибками буду вставлять регулярно, и надеюсь хабралюди этому посодействуют…

итак повторим типы:
типы данных бывают 2-х видов: простые и ссылочные. Разница заключается в том, что когда мы присваиваем переменную простого типа в другую, она копирует значение, а когда присваиваем переменную ссылочного типа, то вторая переменная ссылается на значение первой… например:
  1. // простые типы
  2. var intVal = 5; // создаем переменную простого типа (число)
  3. var otherIntVal = intVal; // присваиваем ее другой переменной,
  4. // при этом значение 5 скопировалось во вторую переменную (в otherIntVal);
  5. // ссылочные типы
  6. var arrayVal = [1,2,3,4]; // создаем переменную ссылочного типа - массив из 4-х элементов;
  7. var otherArrayVal = arrayVal; // присваиваем эту переменную другой,
  8. // при этом значение (4 элемента) не копируется, а вторая переменная будет работать со значениями первой, проверим
  9. otherArrayVal[1] = 55; // изменим вторую переменную, первая должна измениться соответственно
  10. alert( arrayVal[1] ); // изначально было 2 (значения начинаются с 0), но мы его изменили во второй переменной на 55
* This source code was highlighted with Source Code Highlighter.

и несколько слов о специальных значениях:
NaN – это значение, которое обозначает «не число» (Not a Number). Оно появляется при арифметических операциях, когда результат получается не числовой, либо при конвертировании строки не начинающейся с числа в число (например 'qwe123').
null – ничего (пустое значение).
undefined – это значение указывает что переменная(свойство) не существует, либо значение еще не присвоено ( var someVariable; ).
infinity — бесконечность, получается при делении на 0 и при выходе за максимальный/минимальный диапазон типа
кстати о NaN… это вообще уникальное значение, причем в прямом смысле этого слова… оно появляется при неправильном конвертировании в число, но оно не равно ни чему, даже самому себе =), для того чтоб проверить число ли у нас, нужно использовать функцию isNaN, (!!!) она вернет false если получит значение в виде числа (isNaN = is Not A Number).
isNaN( 5 ); // false
isNaN( 'string' ); // true

проверить какого типа переменная можно с помощью функции typeof, она вернет тип в виде строки.
typeof( 4 ) // 'number'
typeof( «some string») // 'string'
typeof( [] ) // 'object' — да, массив он назовет обьектом (как их различить будет дальше),
// на самом деле массив — обьект, я специально вынес его в отдельную группу, помоему он того стоит…
// но это еще не самое интересное
typeof( null ) // 'object' — вот тут он тоже скажет что это объект

И еще раз перечислю основные типы данных:
boolean – булево значение, оно имеет 2 варианта, либо true (правда), либо false (ложь)
number – число, целое, либо с дробной частью (они различаются при необходимости).
string – строка, некая последовательность символов.
array – массив данных (на самом деле это объект).
object – объект.
function – собственно функция.
Еще не раз задавали вопрос про равенство … есть 2 варианта сравнения: == и === в чем же различие?
в JS как таковых нет типов, они все лишь на словах и берутся исходя из текущего значения, обычно они и не нужны, допустим, если мы имеем строковое представление числа, то при делении JS автоматически преобразует строку в число, например:
var q = '55';
var w = '5';
alert( q / w ) // результат 11
alert( 5 == '5' ); // true;

но при сравнении иногда возникает необходимость в точном определении типа, например, когда сравниваем 0 и ''
alert( 0 == '' ); // true

при таком сравнении JS видит что оба значения пустые, и приравнивает их, чтобы этого избежать, нужно сказать JS что типы тоже нужно учитывать, === именно это и делает
alert( 5 === '5' ) // false значение похожи, но число не равно строке
alert( 0 === '' ) // false число не равно строке


А теперь коротко о главном …

удаление переменных:
можно присвоить пустое значение (null, undefined), или удалить с помощью оператора delete ( delete someVar; ) с помошью оператора delete можно удалить свойства объектов

тип boolean:
значения принимают 2 вида – true/false (правда/ложь)
тип number:
можно создать как с помошью конструктора, так и просто присвоив нужное значение
var intVar = 5; // создание путем присваивания значения, тип задается автоматически
var intVar = new Number( 5 ); // создаем число при помощи конструктора.
var intVar = new Number( '5' );// можно начальное значение дать в виде строки, она преобразуется автоматически в число
var intVar = new Number( 'q' ); // можно сделать даже так, но значение будет NaN

вообще в этих способах создания есть небольшое различие, кроме того, что можно заработать NaN через конструктор, typeof будет выдавать 'object' при создании через конструктор.
Число может быть 2 типов: целочисленный и с плавающей точкой. В принципе разделения особого нет, они автоматически конвертируются друг в друга при арифметических операциях, но если надо их разделить наверняка, есть 2 функции: parseInt и parseFloat, они конвертируют переменную в целочисленную, и с плавающей точкой соответственно. (Целочисленное нет смысла конвертировать в число с плавающей точкой, а вот строки конвертируются на ура).
У числа есть пара полезных методов (да, у чисел тоже есть методы )
.toFixed() — переводит число в float, если оно не такое, и обрезает его до нужного количество знаков после запятой
toExponential() – переводит число в экспоненциальный вид (5.000е+0)
toPrecision() – автоматически приводит к экспоненциальному виду, если число большое
Проблема чисел с плавающей точкой
alert(0.1 + 0.7) // 0.7999999999999999
Это надо учитывать, это не единственный пример неточности, таких вариантов можно найти много, проблема решается округлением, тут равенство бессильно:
alert( (0.1 + 0.7).toFixed(9) ) // «0.800000000»

тип string:
можно тоже, как и number, создать путем простого присвоения значения, и через конструктор
var strVal = 'some string'; // создание путем присвоения значения
var strVal = new String( 'some string' ) // создание через конструктор
var strVal = new String( 5 ) // создание через конструктор

как и в случае с числом, если создаем переменную через конструктор, typeof выдаст 'object', будьте внимательны.
строки 'понимают' специальные символы, они не отображаются при выводе, но могут его сильно покорежить, вплоть до ошибок … вот основные
\n — Символ новой строки
\r — Возврат каретки
\t — Табуляция
\v — Вертикальная табуляция ( IE этот символ не понимает, поэтому просто игнорирует '\' и думает что это буква 'v' )
\' — одинарная кавычка
\" — Двойная кавычка
\\ — Обратный слеш (\)
пример:
var strVal = 'some string 'and some explain' some other string' // такого делать нельзя
var strVal = 'some string \'and some explain\' some other string' // нужно вот так экранировать кавычки
alert( strVal ); // слешей уже не видно (они сделали свое дело), вместо них красивые кавычки

полезные свойства строк:
.length // оно одно, но без него никуда, возвращает длину строки
// советую обратить внимание: первый символ имеет позицию 0, а длина считается с 1
// в итоге мы имеем позицию последнего символа = length-1
некоторые полезные методы строк:
indexOf() — возвращает индекс первого совпадения искомой строки
replace() — заменяет текст на другой, можно использовать с регулярным выражением
slice() — возвращает кусок текста начиная с заданной, до указанной позиции
substr() — возвращает кусок текста начиная с заданной позиции, указанной длины
toLowerCase() — 'опускает' строку в маленькие буквы
toUpperCase() — поднимает строку в большие буквы

тип array (по сути это объект, но у него свои методы и свойства):
создать массив можно двумя способами:
var someArray = new Array(); // через конструктор
var someArray = []; // через object literal, этот способ хоть и менее наглядный но более удобный.

в JavaScript массив «резиновый», для него не надо резервировать количество элементов, он увеличивается автоматически, при удалении элемента в середине, массив не сжимается, вместо этого удаленный элемент будет иметь значение undefined
динамически добавлять значения в конец (типа как в php: array[] = '2' нельзя, нужно указать индекс, либо использовать соответствующие методы)
некоторые полезные свойства:
length — возвращает количество элементов (если ему присвоить значение меньше чем длина массива, то массив обрежется до присвоенного значения, если присвоить 0, массив очистится)
некоторые полезные методы:
join() — соединяет элементы массива в строку, можно указать разделитель
pop() — удаляет и возвращает последний элемент массива
push() — записывает элемент в конец массива
reverse() — изменяет порядок элементов на обратный
splice() — удаляет заданное количество элементов начиная с заданной позиции
sort() — сортирует элементы массива

тип object:
объект можно создать 2 способами:
var obj = new Object(); // с помощью конструктора
var obj = {}; // с помощью object literal
var obj = { 'key': 'value', 'key2': 'value2' } // объявление с начальными значениями

если обратиться к несуществующим свойствам объекта, то ошибок не возникнет, вернется значение undefined
вот, основные вещи, с которыми сталкиваешься регулярно, когда обращаешься к несуществующим переменным, возникает ошибка (да, такое может быть, некоторые создают переменные в if), избежать этого (да и других ошибок) можно с помощью такой конструкции:
  1. try
  2. {
  3.     // тут пишем проблемный код
  4. }
  5. catch( e )
  6. {
  7.     /* этот код выполнится, только если произойдет ошибка в проблемном коде
  8.     е – объект ошибки, имеет он следующие свойства:
  9.     fileName – файл в котором произошла ошибка
  10.     lineNumber – строка в которой произошла ошибка
  11.     message – сообщение с описанием ошибки
  12.     могут быть еще, зависит от браузера */
  13.     alert(e.message);
  14. }
  15. finally
  16. {
  17.     // этот код выполнится в любом случае, будет ошибка или нет
  18. }
* This source code was highlighted with Source Code Highlighter.

В принципе такая конструкция есть почти во всех языках, и работает так же
Конструкции if/while/for аналогичны языкам с-подобного синтаксиса, единственная разница – перебор свойств/методов объекта
for( key in obj )
{
// key – ключ в текстовом виде
someVar = Obj[key]; // получаем свойство/метод объекта
}

// по сути в JS объект – хэш, тоесть банальное сопоставление ключа и значения (Аля ассоциативный массив) и значение может быть любым, начиная с простых значений (число, строка) и заканчивая функциями (это будут методы).

Вот пока и все, дальше планируются функции, функции в роли конструктора ( типа классы), замыкания (вскользь, просто пара примеров чтоб понять что это и зачем нужно), поподробней разберемся с объектами и на последок пара слов о прототипах – расширение своих и стандартных 'классов' (типа String и Number )

Tags:
Hubs:
+6
Comments 106
Comments Comments 106

Articles