Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Михаил Давыдов Разработчик JavaScript JavaScript Циклы и Функции

Slide 3

Slide 3 text

Циклы – Statements for, while, do while, for in

Slide 4

Slide 4 text

for, while, do while – работают так же как и во всех языках. Ура!

Slide 5

Slide 5 text

for in •  Можно итерировать поля объекта •  Пробегает по перечисляемым свойствам –  По собственным свойствам –  И по свойствам прототипа •  Перечисляемость – скрытое свойство

Slide 6

Slide 6 text

6 var obj = { a: 1, b: {}, c: 'ololo' }; for (var keyName in obj) { console.log(keyName + ': ' + obj[keyName]); } // Результат "a: 1" "b: [object Object]" "c: 'ololo'" typeof obj.toString === "function"; // Почему его нет? typeof obj.hasOwnProperty === "function"; // Почему его нет? for in: Пример

Slide 7

Slide 7 text

7 hasOwnProperty и toString и др. – не перечисляемые свойства

Slide 8

Slide 8 text

8 // А что если? Object.prototype.toString = function () {};

Slide 9

Slide 9 text

9 Если toString и другие переписать, то они станут уже перечисляемыми

Slide 10

Slide 10 text

10 var Constructor = function () {}; Constructor.prototype.myValue = 123; var obj = new Constructor(); obj.a = 1; obj.b = {}; obj.c = 'ololo'; for (var keyName in obj) { console.log(keyName + ': ' + obj[keyName]); } // Результат "a: 1" "b: [object Object]" "c: 'ololo'" "myValue: 123" // <<< ???? for in: Пример с загрязнением

Slide 11

Slide 11 text

11 myValue – перечисляемое, но не собственное свойство

Slide 12

Slide 12 text

12 var Constructor = function () {}; Constructor.prototype.myValue = 123; var obj = new Constructor(); obj.a = 1; obj.b = {}; obj.c = 'ololo'; for (var keyName in obj) { if (obj.hasOwnProperty(keyName)) { console.log(keyName + ': ' + obj[keyName]); } } // Результат "a: 1" "b: [object Object]" "c: 'ololo'" for in: Пример c hasOwnProperty

Slide 13

Slide 13 text

Циклы Expressions forEach map every, some filter reduce, reduceRight

Slide 14

Slide 14 text

Как правило все циклы связаны с массивом

Slide 15

Slide 15 text

Почему бы тогда не добавить итераторов к Array?!

Slide 16

Slide 16 text

var persons = [{ "name": "Ann", "age": 21 }, { "name": "Helen", "age": 16 }, { "name": "Peter", "age": 76 }, { "name": "Jack", "age": 12 }]; Пример

Slide 17

Slide 17 text

persons.forEach(): Undefined

Slide 18

Slide 18 text

// Слишком много шума и лишних слов for (var i = 0; i < persons.length; i++) { console.log(persons[i].name[0]); } // "A", "H", "P", "J" // Лучше, чище, нагляднее persons.forEach(function (person) { console.log(person.name[0]); }); // "A", "H", "P", "J" forEach(): вывести 1 букву имени

Slide 19

Slide 19 text

persons.map(): Array

Slide 20

Slide 20 text

var result = []; // Слишком много шума и лишних слов for (var i = 0; i < persons.length; i++) { result.push(persons[i].name); } console.log(result); // ["Ann", "Helen", "Peter", "Jack"] // Лучше, чище, нагляднее var result = persons.map(function (person) { return person.name; }); console.log(result); // ["Ann", "Helen", "Peter", "Jack"] map(): получить только имена

Slide 21

Slide 21 text

persons.some(): Boolean

Slide 22

Slide 22 text

var isPensioners = false; // Слишком много шума и лишних слов for (var i = 0; i < persons.length; i++) { if (persons[i].age > 65) { isPensioners = true; break; } } console.log(isPensioners); // true // Лучше, чище, нагляднее var isPensioners = persons.some(function (person) { return person.age > 65; }); console.log(isPensioners); // true some(): есть ли пенсионеры?

Slide 23

Slide 23 text

persons.every(): Boolean

Slide 24

Slide 24 text

var isAllAdults = true; // Слишком много шума и лишних слов for (var i = 0; i < persons.length; i++) { if (persons[i].age < 18) { isAllAdults = false; break; } } console.log(isAllAdults); // false // Лучше, чище, нагляднее var isAllAdults = persons.every(function (person) { return person.age >= 18; }); console.log(isAllAdults); // false every(): все совершеннолетние?

Slide 25

Slide 25 text

persons.filter(): Array

Slide 26

Slide 26 text

var underages = []; // Слишком много шума и лишних слов for (var i = 0; i < persons.length; i++) { if (persons[i].age < 18) { underages.push(persons[i]); } } console.log(underages.length); // 1 // Лучше, чище, нагляднее var underages = persons.filter(function (person) { return person.age < 18; }); console.log(underages.length); // 1 filter(): список несовершеннолетних

Slide 27

Slide 27 text

persons.reduce(): *

Slide 28

Slide 28 text

var ageSumm = 0; // Слишком много шума и лишних слов for (var i = 0; i < persons.length; i++) { ageSumm += persons[i].age; } console.log(ageSumm / persons.length); // 20.5 // Лучше, чище, нагляднее var underages = persons.reduce(function (prev, current) { return prev + current.age; }, 0); // 0 - Аккумулятор console.log(ageSumm / persons.length); // 20.5 reduce(): средний возраст

Slide 29

Slide 29 text

Цепочки вызовов persons.filter().map().join()

Slide 30

Slide 30 text

var adultNames = persons // Сперва выбираем всех совершеннолетник .filter(function (person) { return person.age >= 18; }) // Затем оставляем только имена .map(function (person) { return person.name; }) // Склеиваем имена в строку .join(', '); console.log(adultNames + ' are adults'); // Ann, Peter are adults Получить имена совершеннолетних

Slide 31

Slide 31 text

Внимание все они не поддерживаются старыми браузерами! 5+ 3+ 10+ 3.2+ 9+

Slide 32

Slide 32 text

Функции Function Declaration, Conditional Function Declaration, Function Expression, Named Function Expression, IEFE

Slide 33

Slide 33 text

33 На самом деле Function в JavaScript – это Object со скрытым полем [[Call]] http://es5.github.com/#x13.2

Slide 34

Slide 34 text

34 - Это Statement - Инициализируется во время входа в контекст - Объявляется в блоке функции или в глобальном блоке a(); // OK function a() { b(); // OK function b() { } } a(); Function Declaration/Definition http://es5.github.com/#x13

Slide 35

Slide 35 text

35 - Это тоже Statement - Инициализируется во время входа в контекст или в рантайме - По стандарту такая запись недопустима if (true) { function a() { return 1; } } else { function a() { return 2; } } a(); // Firefox – 1, Others - 2 Conditional Function Declaration

Slide 36

Slide 36 text

36 - При использовании строгого режима возникнет ошибка SyntaxError "use strict"; if (true) { function a() { return 1; } } else { function a() { return 2; } } // SyntaxError // Function Expression! CFD+Strict Mode

Slide 37

Slide 37 text

37 - Это expression - Инициализируется в рантайме - Объявляется где угодно a(); // error var a = function () { b(); // error var b = function () { }; b(); // ok }; a(); // ok Function Expression http://es5.github.com/#x11.2.5

Slide 38

Slide 38 text

38 - Это тот же Function Expression - Можно обратиться к себе по своему имени - Имя доступно только в своем блоке (кроме старых IE) (function timer() { setTimeout(timer, 1000); console.log(+new Date); }()); typeof timer; // undefined, Old IE - function Named Function Expression

Slide 39

Slide 39 text

39 - Это тот же Function Expression -  Мы даем понять интерпретатору, что этот код - Function Expression -  IEFE позволяет эмулировать блочную область видимости function (){}(); // SyntaxError (function () { // OK var b = Math.sin(Math.PI / 3); alert(b * 2); }()); typeof b === "undefined"; IEFE – Замыкание, Модуль

Slide 40

Slide 40 text

40 !function (){}(); // OK +function (){}(); // OK *function (){}(); // OK (function (){}()); // OK [function (){}()]; // OK var a = function (){}(); // Можно и так var a = (function (){}()); // Но лучше скобки оставлять IEFE

Slide 41

Slide 41 text

Область видимости Определяется во время создания функции Не меняется при передаче функции Образует цепочку областей видимости Лексическая Образует «замыкание»

Slide 42

Slide 42 text

42 var a = 1; function foo() { var c = 2; function bar(e) { return a + c + e; } return bar(3); } foo(); // 6 Область видимости http://es5.github.com/#x10.3 http://es5.github.com/#x10.2

Slide 43

Slide 43 text

43 Цепочка областей видимости GLOBAL a 1 foo func(on foo c 2 bar func(on bar e argument

Slide 44

Slide 44 text

44 Вся эта цепочка остается в памяти, пока жива функция bar()

Slide 45

Slide 45 text

45 // Замыкание var getMySecret = (function () { // Это значение нельзя изменить var mySecret = Math.sin(Math.PI / 3); return function () { return mySecret; }; }()); // Можем только получать getMySecret(); // 0.8660254037844386 typeof mySecret === "undefined"; Пример области видимости

Slide 46

Slide 46 text

Вызов функции и this this – основная грабля в JavaScript Прямой вызов Вызов через c оператором точка и [] Вызов через new Вызов через call, apply, bind

Slide 47

Slide 47 text

47 This в JavaScript определяется во время вызова функции! http://es5.github.com/#x11.2.3

Slide 48

Slide 48 text

48 () – это оператор вызова функции this всегда undefined но он трансформируется в global В строгом режиме всегда undefined (трансформации нет) function a() { console.log(this); } a(); // window (undefined -> window) function b() { "use strict"; console.log(this); } b(); // undefined Прямой вызов – через оператор ()

Slide 49

Slide 49 text

49 Это Expression this – объект от которого был получена эта функция var foo = { bar: function () { console.log(this); } }; foo.bar(); // foo var baz = {}; baz.bar = foo.bar; baz.bar(); // baz var fooBar = foo.bar; fooBar(); // ??? Оператор . и [] http://es5.github.com/#x11.2.1

Slide 50

Slide 50 text

50 Легко запомнить: что находится до "точки" является this

Slide 51

Slide 51 text

51 Это Expression new – это еще один способ вызова функции Каждая функция может быть конструктором this – пустой объект со ссылкой на prototype вызываемой функции var A = function () { console.log(this); console.log(this.__proto__ === A.prototype); }; new A(); // Object, true Оператор new http://es5.github.com/#x11.2.2

Slide 52

Slide 52 text

52 Это способ управлять значением this this – объект, который вы передаете var a = function (a, b) { console.log(this, a, b); }; a.call([]); // [], undefined, undefined a.call([], 1, 2); // [], 1, 2 a.apply([], [1, 2]); // [], 1, 2 Call, apply http://es5.github.com/#x15.3.4.4 http://es5.github.com/#x15.3.4.3

Slide 53

Slide 53 text

53 Это способ подменять this без вызова функции this – объект, который вы передаете var a = function () { console.log(this); }; var b = a.bind({}); b(); // {} Bind http://es5.github.com/#x15.3.4.5 MDN Function#bind http://clck.ru/2EeTx

Slide 54

Slide 54 text

Вызов функции: arguments Передача значения arguments

Slide 55

Slide 55 text

55 Передача значения в функцию •  Значения передаются по ссылке •  Можно менять «поля» переданного объекта •  Примитив менять нельзя •  Можно переписать ссылку без потери объекта

Slide 56

Slide 56 text

56 arguments •  Как и this появляется при вызове •  Это не Array –  нельзя forEach(), map(), filter() –  можно for () {} •  Содержит список всех аргументов –  arguments[0]… и .length •  Содержит ссылку на вызывающую функцию –  arguments.caller –  Deprecated! •  Содержит ссылку на текущую функцию –  arguments.calle http://es5.github.com/#x10.6

Slide 57

Slide 57 text

57 function myFunction(a) { console.log(arguments[0]); // 1 - ok a = 8; console.log(arguments[0]); // 8 - ??? } myFunction(1); function myFunctionStrict(a) { "use strict"; // <<< console.log(arguments[0]); // 1 - ok a = 8; console.log(arguments[0]); // 1 - ok } myFunctionStrict(1); arguments и формальные параметры Без строгого режима arguments связан с формальными параметрами При добавлении "use strict" эта связь отменяется

Slide 58

Slide 58 text

58 JavaScript Циклы и Функции •  for in –  Итерирует перечисляемые свойства (собственные и прототипа) –  Используйте hasOwnProperty(name) •  Array.map().filter().reduce() •  Function Expression •  Function Declaration •  Область видимости функции •  Вызов функции и this –  this зависит от способа вызова функции •  Аргументы и arguments –  arguments связан с формальными параметрами без StrictMode

Slide 59

Slide 59 text

Михаил Давыдов Разработчик JavaScript [email protected] azproduction Спасибо