$30 off During Our Annual Pro Sale. View Details »

КРиПИ - Основы JavaScript

КРиПИ - Основы JavaScript

Mikhail Davydov

October 11, 2012
Tweet

More Decks by Mikhail Davydov

Other Decks in Education

Transcript

  1. None
  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 Спасибо