2. Михаил Давыдов
Разработчик JavaScript
JavaScript
Основы

3. Базовые типы
String
Number
Boolean
Undefined
Object
- Function, Array, …

4. 4
Примитивы
• String, Boolean, Number
• Можно вызывать методы как у объекта
• В памяти хранятся как константы
– Менять нельзя
– Можно переписывать значение переменной

5. 5
Можно работать как с объектами
'string'.length; // 6
'name'.match(/^na/); // ["na"]
'name'.indexOf('a'); // 1
Работа с примитивами

6. String

7. 7
String
• Создается из литерала "string" или 'string'
• Внутренняя кодировка UTF-8
– "ジャバスクリプト".length – 8
– Исключение – символы UTF-16
• К элементам можно обращаться как в
массиве
– Кроме IE6 - .charAt(0)
• Строки можно складывать через +
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String

8. 8
"string";
"s'tri'ng";
'str'ing';
"str" + 'ing'; // "string";
"a,b,c".split(','); // ["a", "b", "c"]
Пример

9. 9
// Конкатенация с ""
1 + ""; // "1"
// Можно привести явно
1.toString(); // "1"
String(1); // "object"
Приведение к строке

10. Number

11. 11
Number
• Все числа с плавающей точкой
• Можно записывать в 4 вариантах
– В десятеричной системе 105
– В 16-ричной 0x10
– В 8-ричной 010 – Deprecated!
– В экспоненциальной 1.5e3
• NaN – Not a Number
• +Infinity, -Infinity
• Объект Math
– .floor() .random()
• isNaN(), isFinite(), parseInt()
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Number

12. 12
10 + 0x10; // 26
5 / 2 = 2.5;
(10.15158).toFixed(2); // "10.15" – строка!
.3; // == 0.3
5.; // 5
Math.round(5.1); // 5
isNaN(0 / 0); // true
isFinite(1 / 0); // false
Пример

13. 13
// parseInt
parseInt("10", 10); // 10
parseInt("a", 10); // NaN
parseInt("a", 16); // 10
parseInt("01011", 2); // 11
parseInt("10px", 10); // 10!!
// Можно проще
+"10"; // 10
Привод к числу

14. Boolean

15. 15
Boolean
• Записывается литералами true, false

16. 16
"1" == true; // true
"" == true; // false
!!1; // true
Привод к булеану

17. Undefined

18. 18
Undefined
• Этот тип имеют все переменные без
значения

19. 19
var a;
typeof a === "undefined";
a = 0;
typeof a === "number";
function b(c){
typeof c === "undefined";
}
b();
Пример

20. 20
Проверка на Undefined
• someVar === undefined; // Bad
• someVar == null; // Bad
• someVar === void 0; // Ok
• typeof someVar === "undefined";

21. Object

22. 22
Object
• Записывается литералом {}
• Это хэш
• Имена полей – это строка или число
• Можно динамически менять поля
– У любого объекта
– Добавлять
– Удалять
• Null – нулевой, несуществующий объект

23. 23
var a = {
"b": 123,
'--c': function () {
return 1;
}
d: {}
};
a.d; // {}
a['--c'](); // 1
a['--' + 'c'](); // 1
a.b === 123; // true
a[0] = 45;
typeof a[0] === "number";
typeof a[1] === "undefined";
Пример

24. Function

25. 25
Function
• Это вызываемый Объект
• Можно дописывать любые свойства
• Можно передавать куда угодно
• Нет проверки на число аргументов
• Легко перегружать
• Создает область видимости

26. 26
A(123); // Ok
function A(b) {
if (typeof b === "string") {
throw new TypeError("should be number");
}
return b * 2;
}
A.length; // 1
Пример функций

27. 27
A(123); // Error – функции еще нет
var A = function(b) {
if (typeof b === "string") {
throw new TypeError("should be number");
}
return b * 2;
}
A(1); // Ok
A.length; // 1
Пример функций

28. Array

29. 29
Array
• Это специальный Объект
• Можно дописывать любые поля
– Не обязательно числовые

30. 30
typeof [] === "object"; // !!!
var a = [1, 2, 3, 4];
a[1] *= 2;
a.length; // 4
a + ''; // "1,2,3,4"
a.push(5); // .splice(), .pop(), .shift(), .unshift() ...
a.map(function (item) {
return Math.sin(Math.PI / item);
});
a['pewpew-ololo'] = 'ufo';
Пример

31. Операторы и блоки
Expression (Выражение, Оператор),
Statement (Блочное выражение, Блок)

32. 32
Statement
• Блочное выражение
– if (){}, try{}catch(e){}, function a(){}
• Директива интерпретатору
– return, throw, break, continue, var, …
• Может включать другие блочные выражения
• Может включать выражения
• Не возвращает значение
• Не может быть аргументом Expression
• Можно сделать из Expression – Expression;
http://es5.github.com/#x12

33. 33
Expression
• Оператор
– С одним аргументом typeof, !, (), ++, --, new, +,…
– С двумя ==, ===, >, <, instanceof, +, -,…
– С тремя a?b:c,…
– Вызов функции
– Оператор запятая
• Может включать другие операторы
• Не может включать Statement
• Возвращает значение
• Может быть в составе Statement
http://es5.github.com/#x11

34. Приведение типов

35. 35
Приведение типов
• Утиная типизация
• Зависит от оператора
– Оператор имеет определенный алгоритм
• Зависит от типа аргументов и мест

36. 36
Сильно перегружен: сложение чисел, конкатенация строк
"2" + 3; // "23"
2 + 3; // 5
"2" + {}; // "2[object Object]"
[] + []; // "" Пустая строка
Пример: оператор +

37. 37
The Abstract Equality Comparison Algorithm
http://es5.github.com/#x11.9.3
'' === '0' // false
0 === '' // false
0 === '0' // false
false === undefined // false
false === null // false
null === undefined // false
+0 === -0 // true
Операторы == и ===
'' == '0' // false
0 == '' // true
0 == '0' // true
false == undefined // false
false == null // false
null == undefined // true
The Strict Equality Comparison Algorithm
http://es5.github.com/#x11.9.6

38. Важные операторы
var
delete
typeof
|| и &&

39. 39
Блок var
• Это Statement
• Объявляет имя переменной в текущей
области видимости

40. 40
function A() {
// Переменная i существует уже тут!
typeof i === "undefined";
i = 5; // OK!
for (var i = 0; i < 10; i++) {
console.log(i);
}
}
// Не выходит за границы
typeof i === "undefined";
A();
Пример var

41. 41
Фактически это выглядит так
function A() {
var i; // <<<
typeof i === "undefined";
i = 5; // OK!
for (i = 0; i < 10; i++) { // <<<
console.log(i);
}
}
// Не выходит за границы
typeof i === "undefined";
A();
Пример var

42. 42
Оператор delete
• Это Expression
• Удаляет ссылку на объект, а не сам объект
• Возвращает Boolean
– true – ссылка удалилась
– false – ссылка осталась

43. 43
var a = {c: 1},
b = a;
delete a; // false
a = void 0;
typeof b === "object";
delete b.c; // true
Оператор delete – пример

44. 44
Оператор delete – в памяти
a
b
Object
c
1
undefined
a = {c: 1}
a = void 0
b = a
delete b.c

45. 45
Оператор typeof
Внутренний тип* Результат
Undefined "undefined"
Null "object"
Boolean "boolean"
Number "number"
String "string"
Object "object"
Function "function"
Array "object"
http://es5.github.com/#x11.4.3
Это Expression, возвращает String.
Алгоритм
- Ссылка не достижима (IsUnresolvableReference) – возвращаем "undefined"
- Иначе смотрим по таблице

46. 46
typeof [] === "object"; // !!!
typeof null === "object"; // !!!
typeof NaN === "number"; // !!!
typeof Infinity === "number"; // Ok
typeof {} === "object"; // Ok
typeof function(){} === ”function”;
Пример

47. 47
Операторы || и &&
• || – логическое или
– Если первый аргумент можно привести к true – возвращаем его
– Иначе возвращаем/выполняем второй
– В JS применяется для установки значения по умолчанию
• && – логическое и
– Если первый аргумент приводится к false – возвращаем его
– Иначе возвращаем/выполняем второй
– Применяется для "коротких" if()

48. 48
// Значения по умолчанию
// - Рекомендуется к использованию ;-)
function myObject(data) {
data = data || {};
data.name = data.name || 'Default';
}
myObject(); // {name: "Default"}
Пример ||

49. 49
// Короткий if
// - Запись не явная
// - НЕ рекомендуется использовать
var a = true;
if (a) {
alert('ok');
}
// Это аналогично
a && alert('ok');
Пример &&

50. 50
Заключение
• Базовые типы
– String
– Number
– Boolean
– Undefined
– Object: Array, Function, …
• Statement
• Expression
• Хитрые операторы и блоки
– var
– typeof
– delete
– void

51. Михаил Давыдов
Разработчик JavaScript
azproduction@yandex-team.ru
azproduction
Спасибо