JavaScript. Basics (in russian)
-
Upload
mikhail-davydov -
Category
Technology
-
view
174 -
download
3
Transcript of JavaScript. Basics (in russian)
Михаил Давыдов Разработчик JavaScript
JavaScript Основы
Базовые типы
String
Number
Boolean
Undefined
Object
- Function, Array, …
4
Примитивы
• String, Boolean, Number • Можно вызывать методы как у объекта • В памяти хранятся как константы
– Менять нельзя – Можно переписывать значение переменной
5
Можно работать как с объектами
'string'.length; // 6 'name'.match(/^na/); // ["na"] 'name'.indexOf('a'); // 1
Работа с примитивами
String
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
"string"; "s'tri'ng"; 'str\'ing'; "str" + 'ing'; // "string"; "a,b,c".split(','); // ["a", "b", "c"]
Пример
9
// Конкатенация с "" 1 + ""; // "1" // Можно привести явно 1.toString(); // "1" String(1); // "object"
Приведение к строке
Number
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
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
// parseInt parseInt("10", 10); // 10 parseInt("a", 10); // NaN parseInt("a", 16); // 10 parseInt("01011", 2); // 11 parseInt("10px", 10); // 10!! // Можно проще +"10"; // 10
Привод к числу
Boolean
15
Boolean
• Записывается литералами true, false
16
"1" == true; // true "" == true; // false !!1; // true
Привод к булеану
Undefined
18
Undefined
• Этот тип имеют все переменные без значения
19
var a; typeof a === "undefined"; a = 0; typeof a === "number"; function b(c){ typeof c === "undefined"; } b();
Пример
20
Проверка на Undefined
• someVar === undefined; // Bad • someVar == null; // Bad • someVar === void 0; // Ok • typeof someVar === "undefined";
Object
22
Object
• Записывается литералом {} • Это хэш • Имена полей – это строка или число • Можно динамически менять поля
– У любого объекта – Добавлять – Удалять
• Null – нулевой, несуществующий объект
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";
Пример
Function
25
Function
• Это вызываемый Объект • Можно дописывать любые свойства • Можно передавать куда угодно • Нет проверки на число аргументов • Легко перегружать • Создает область видимости
26
A(123); // Ok function A(b) { if (typeof b === "string") { throw new TypeError("should be number"); } return b * 2; } A.length; // 1
Пример функций
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
Пример функций
Array
29
Array
• Это специальный Объект • Можно дописывать любые поля
– Не обязательно числовые
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';
Пример
Операторы и блоки
Expression (Выражение, Оператор),
Statement (Блочное выражение, Блок)
32
Statement
• Блочное выражение – if (){}, try{}catch(e){}, function a(){}
• Директива интерпретатору – return, throw, break, continue, var, …
• Может включать другие блочные выражения • Может включать выражения • Не возвращает значение • Не может быть аргументом Expression • Можно сделать из Expression – Expression;
http://es5.github.com/#x12
33
Expression
• Оператор – С одним аргументом typeof, !, (), ++, --, new, +,… – С двумя ==, ===, >, <, instanceof, +, -,… – С тремя a?b:c,… – Вызов функции – Оператор запятая
• Может включать другие операторы • Не может включать Statement • Возвращает значение • Может быть в составе Statement
http://es5.github.com/#x11
Приведение типов
35
Приведение типов
• Утиная типизация • Зависит от оператора
– Оператор имеет определенный алгоритм
• Зависит от типа аргументов и мест
36
Сильно перегружен: сложение чисел, конкатенация строк
"2" + 3; // "23" 2 + 3; // 5 "2" + {}; // "2[object Object]" [] + []; // "" Пустая строка
Пример: оператор +
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
Важные операторы
var
delete
typeof
|| и &&
39
Блок var
• Это Statement • Объявляет имя переменной в текущей области видимости
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
Фактически это выглядит так
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
Оператор delete
• Это Expression • Удаляет ссылку на объект, а не сам объект • Возвращает Boolean
– true – ссылка удалилась – false – ссылка осталась
43
var a = {c: 1}, b = a; delete a; // false a = void 0; typeof b === "object"; delete b.c; // true
Оператор delete – пример
44
Оператор delete – в памяти
a
b
Object c
1
undefined
a = {c: 1}
a = void 0 b = a
delete b.c
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
typeof [] === "object"; // !!! typeof null === "object"; // !!! typeof NaN === "number"; // !!! typeof Infinity === "number"; // Ok typeof {} === "object"; // Ok typeof function(){} === ”function”;
Пример
47
Операторы || и &&
• || – логическое или – Если первый аргумент можно привести к true – возвращаем его – Иначе возвращаем/выполняем второй – В JS применяется для установки значения по умолчанию
• && – логическое и – Если первый аргумент приводится к false – возвращаем его – Иначе возвращаем/выполняем второй – Применяется для "коротких" if()
48
// Значения по умолчанию // - Рекомендуется к использованию ;-) function myObject(data) { data = data || {}; data.name = data.name || 'Default'; } myObject(); // {name: "Default"}
Пример ||
49
// Короткий if // - Запись не явная // - НЕ рекомендуется использовать var a = true; if (a) { alert('ok'); } // Это аналогично a && alert('ok');
Пример &&
50
Заключение
• Базовые типы – String – Number – Boolean – Undefined – Object: Array, Function, …
• Statement • Expression • Хитрые операторы и блоки
– var – typeof – delete – void