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

Transcript

1. View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

6. String
   

   View Slide

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
   
   

   View Slide

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

   View Slide

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

   View Slide

10. Number
    

    View Slide

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
    
    

    View Slide

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
    Пример
    

    View Slide

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
    Привод к числу
    

    View Slide

14. Boolean
    

    View Slide

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

    View Slide

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

    View Slide

17. Undefined
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. Object
    

    View Slide

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

    View Slide

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";
    Пример
    

    View Slide

24. Function
    

    View Slide

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

    View Slide

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

    View Slide

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
    Пример функций
    

    View Slide

28. Array
    

    View Slide

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

    View Slide

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';
    Пример
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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"
    - Иначе смотрим по таблице
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide