JavaScript

Основы

Мангин Александр
Разработчик интерфейсов

В прошлой серии:

  • История развития JS
  • Hello world

Сегодня:

  • Функции
  • Объекты
  • Массивы
  • Типы данных
  • Приведение типов
  • Операторы

Object

  • Это словарь, состоящий из отображение 'ключей' -> 'в значение'(*)
  • Ключи - это строки

Объявление объекта


var student = {
    id: 123,
    fio: 'Пупкин Василий',
    info: {
        'head-teacher': 42,
        subjects: [{}, {}]
    }
};

Обращения к свойствам объекта


var student = {
    id: 123,
    fio: 'Пупкин Василий',
};

student.fio;
student['fio'];
            

// 'Пупкин Василий';
// 'Пупкин Василий';

Модификация полей


var student = {
    id: 123,
    fio: 'Пупкин Василий',
};

student.fio = 'Пупкин Николай';
            

student['fio'] = 'Пупкин Николай';

Некоторые полезные методы

Получение всех ключей объекта


var object = {
    id: 42,
    fio: 'Пупкин Василий Васильевич'
};

Object.keys(object);
            

// ['id', 'fio'] or ['fio', 'id']

Копирование объекта


var data = {
    id: 42,
    fio: 'Пупкин Василий Васильевич'
};

var clone = data;
            

var clone = data;
            

var clone = Object.assign({}, data);

Реализовать функцию deepAssign

  • Функция принимает 2 аргумента target и source
  • Объект source нужно копировать полностью, а не поверхностно
  • При изменении полей target, объект source не должен модифицироваться

Подробнее об объектах в следующих сериях

Функции

Объявление функций


function add(a, b) {
    var sum = a + b;

    return result;
}
            

function empty(rawDate) {

}

Вызов функций


add(2 + 2);
empty();
            

// {day: 1, month: 9, year: 2015}
// undefined

Подробнее о функция в следующих сериях

Массивы

Объявление массива


var numbers = [1, 1, 2, 3];
            

var array = new Array(1000);
            

var array = new Array(1, 1, 2, 3);
            

new Array(1000);
new Array(1, 1, 2, 3);

Получение элемента по индексу


var numbers = [1, 1, 2, 3, 5, 8];

numbers[5];
            

// 8

Длина массива


var numbers = [1, 1, 2, 3, 5, 8];

numbers.length;
            

// 6

Добавление элементов


var numbers = [1, 1, 2, 3, 5, 8];
var next = numbers[4] + numbers[5];

numbers.push(next);

numbers;
            

// [1, 1, 2, 3, 5, 8, 13]

Склейка массивов


var part1 = [1, 1, 2, 3];
var part2 = [5, 8];
var part3 = [13, 21];
var result = part1
    .concat(part2, part3);

result;
            

// [1, 1, 2, 3, 5, 8, 13, 21]

Массив, как очередь


var queue = [];

queue.unshift(1);
queue.unshift(2);
queue.unshift(3);

queue;
            

[3, 2, 1]
            

queue.shift(); //3
queue.shift(); //2
queue.shift(); //1

Массив, как стек


var stack = [];

stack.push(1);
stack.push(2);
stack.push(3);

stack;
            

[1, 2, 3]
            

stack.pop(); //3
stack.pop(); //2
stack.pop(); //1

Типы данных

  • null *
  • undefined
  • boolean
  • number
  • string
  • object

Null


var meaningOfLife = null;

Пример: Null


var storage = ...;
function findUser(id) {
    var result = storage.get(id);
    if (result) {
        return result;
    }
    return null;
}

Null

  • Это тип данных
  • Этот тип данных имеет единственное значение
  • Используется со следующим смыслом:
      Значение неизвестно
      Ничего

Типы данных

  • null
  • undefined *
  • boolean
  • number
  • string
  • object

Пример: Undefined


var newVariable;
newVariable;
            

// undefined

Пример: Undefined


function calculateNext(numbers) {
    var l = numbers.length;
    var a = numbers[l - 2];
    var b = numbers[l - 1];
    numbers.push(a + b);
}
var numbers = [1, 1, 2, 3, 5];
calculateNext(numbers);
            

// undefined

Пример: Undefined


function add(a, b) {
    console.log(a);
    console.log(b);
}

add();
            

// undefined
// undefined

Undefined

  • Это тип данных
  • Этот тип данных имеет единственное значение
  • Используется, когда значение не установлено

Типы данных

  • null
  • undefined
  • boolean *
  • number
  • string
  • object

Boolean


function canShowContent(user) {
    if (user.age >= 18) {
        return true;
    }

    return false;
}
            

function canShowContent(user) {
    return user.age >= 18;
}

Типы данных

  • null
  • undefined
  • boolean
  • number *
  • string
  • object

Кратко о числах

  • целые/дробные
  • Number.EPSILON
  • Number.MAX_SAFE_INTEGER/MIN_SAFE_INTEGER
  • Number.MAX_VALUE/MIN_VALUE
  • IEEE 754

Деление на ноль в обычном языке


1 / 0;
            

// ZeroDivisionError: integer division
// or modulo by zero

Деление на ноль


                var result = 1 / 0;
            

                result; // Infinity

Деление на ноль


                var result = -1 / 0;
            

                result; // -Infinity

Деление ноль на ноль


var result = 0 / 0;
            

result; // NaN

NaN


var result = 0 / 0;

result; // NaN
            

if (result === NaN) {
    result = 0;
}
            

if (isNaN(result)) {
    result = 0;
}

isFinite


isFinite(NaN); // false
isFinite(Infinity); // false
isFinite(-Infinity); // false
            

isFinite(42); // true
isFinite(0); // true
isFinite(5e10); // true

Округления


var sum = 0.1 + 0.2;

sum === 0.3;
            

// false
sum; //0.30000000000000004

Типы данных

  • null
  • undefined
  • boolean
  • number
  • string *
  • object

Длина строки


var question = 'УрФУ';

question.length;
            

// 4

Получение символа строки


var question = 'УрФУ';

question[1];
            

// 'р'

Модификация строк


var question = 'екатеринбург';
question[0] = 'Е';
question;
            

// 'екатеринбург'; ?!

Некоторые полезные методы для работы со строками

Объединение строк


var name = 'Alex';
var surname = 'Mangin';
name + ' ' + surname;
            

// 'Alex Mangin'

concat


var name = 'Alex';
var surname = 'Mangin';

name.concat(' ', surname);
            

// 'Alex Mangin'

indexOf и lastIndexOf


var queue = '0000111111000';
var index = queue.indexOf('1');
var lastIndex = queue
                .lastIndexOf('1');

lastIndex - index + 1;
            

// 6

slice


var str = 'Число: 42';
var rawNumber = str.slice(7);
            

// 42

slice


var str = 'Число: 42 и точка';
var rawNumber = str.slice(7, 9);

rawNumber;
            

// 42

substr


var str = 'Число: 42 и точка';
var rawNumber = str.substr(7, 2);

rawNumber;
            

// 42

toLocaleLowerCase


var message = 'Без учета НДС 18%';

message.toLocaleLowerCase();
            

// без учета ндс 18%

toLocaleUpperCase


var message = 'купить';

message.toLocaleUpperCase();
            

// КУПИТЬ

trim


var rawUserAge = '   18  ';

rawUserAge.trim();
            

// '18'

split


var str = '13 42 4';
var rawNumbers = str.split(' ');
            

// ['13', '42', '4']

Типы данных

  • null
  • undefined
  • boolean
  • number
  • string
  • object *

Оператор typeof

Оператор typeof


var some;
// что-то присваиваем
typeof some;

Оператор typeof


typeof 0;
typeof undefined;
typeof true;
typeof 'foo';
typeof {};
typeof null;
typeof function(){};
typeof [];

Оператор typeof


typeof 0;            // 'number'
typeof undefined;
typeof true;
typeof 'foo';
typeof {};
typeof null;
typeof function(){};
typeof [];

Оператор typeof


typeof 0;            // 'number'
typeof undefined;    // 'undefined'
typeof true;
typeof 'foo';
typeof {};
typeof null;
typeof function(){};
typeof [];

Оператор typeof


typeof 0;            // 'number'
typeof undefined;    // 'undefined'
typeof true;         // 'boolean'
typeof 'foo';
typeof {};
typeof null;
typeof function(){};
typeof [];

Оператор typeof


typeof 0;            // 'number'
typeof undefined;    // 'undefined'
typeof true;         // 'boolean'
typeof 'foo';        // 'string'
typeof {};
typeof null;
typeof function(){};
typeof [];

Оператор typeof


typeof 0;            // 'number'
typeof undefined;    // 'undefined'
typeof true;         // 'boolean'
typeof 'foo';        // 'string'
typeof {};           // 'object'
typeof null;
typeof function(){};
typeof [];

Оператор typeof


typeof 0;            // 'number'
typeof undefined;    // 'undefined'
typeof true;         // 'boolean'
typeof 'foo';        // 'string'
typeof {};           // 'object'
typeof null;         // 'object'
typeof function(){};
typeof [];

Оператор typeof


typeof 0;            // 'number'
typeof undefined;    // 'undefined'
typeof true;         // 'boolean'
typeof 'foo';        // 'string'
typeof {};           // 'object'
typeof null;         // 'object'
typeof function(){}; // 'function'
typeof [];

Оператор typeof


typeof 0;            // 'number'
typeof undefined;    // 'undefined'
typeof true;         // 'boolean'
typeof 'foo';        // 'string'
typeof {};           // 'object'
typeof null;         // 'object'
typeof function(){}; // 'function'
typeof [];            // 'object'

Пример использования


var undef = 'undefined';

if (typeof localStorage !== undef) {
   // ура!
}

Пример использования


add(2, 5); // 7
add({a: 2, b: 3}); // 5
            

function add(a, b) {
    if (typeof a === 'object') {
        b = a.b;
        a = a.a;
    }

    return a + b;
}

Приведение примитивных типов

Приведение к Boolean


var price = 100500;
var isFree = Boolean(price);
            

var isFree = !!price;
             

var isFree = !!price;

Алгоритм приведение к boolean

  • Если '' => false
  • Если 0 => false
  • Если false => false
  • Если null => false
  • Если NaN => false
  • Если undefined => false
  • Иначе true

Преобразование к числу


var amount = '9';
var totalAmount = 0;
            

amount = Number(amount);
            

totalAmount = totalAmount + amount;

Преобразование к числу


var amount = '9';
var totalAmount = 0;
            

amount = +amount;
            

totalAmount = totalAmount + amount;

Преобразование к числу


var amount = '9';
var totalAmount = 0;
            

amount = +amount;
            

totalAmount = totalAmount + amount;

Нечеткое преобразование к числу


var amount = '9 штук.';
var totalAmount = 0;
            

amount = parseInt(amount, 10);
            

totalAmount = totalAmount + amount;

Нечеткое преобразование к числу


var percent = '9.5 землекопа.';
            

percent = parseFloat(amount);

Приведение к String


var price = 100500;
var message = 'Цена: ' + price;
            

var message = 'Цена: ' +
                 String(price);

Операторы

Оператор +

  • Сложение чисел
  • Унарный плюс
  • Объединение строк

Сложение чисел


var a = 2;
var b = 3;

a + b; // 5

Унарный плюс


var a = +2;
var b = '3';

a + +b; // 5

Объединение строк


var a = 'some' + 'other';

Объединение строк


var a = 2 + 'other';

Алгоритм работы '+'


function add(a, b) {
    if (typeof(a) === 'string' ||
        typeof(b) === 'string') {
        return concat(toString(a),
                      toString(b));
    } else {
        return sum(toNumber(a),
                   toNumber(b));
    }
}

==

Алгоритм Абстрактного сравнения

  • Если типы a и b равны, то сравниваем "как есть"
  • Если типы a и b не равны, то приводим типы друг к другу
  • И идем на первый шаг
node

===

Алгоритм строго сравнения

  • Если a и b имеют различные типы, то False
  • Иначе, сравниваем "как есть"
node

Сравниваем "как есть"

  • Если boolean, то равны при равенстве значений
  • Если string, то равны при равенстве строк посимвольно
  • Если undefined or null, то равны
  • Если number, то равны если эквиваленты, но при NaN всегда различны
  • Если object, то равны если ссылаются на один и тот же объект

Операторы || и &&


if (a > 0 || b  < 0 && c === '42') {
   // сделай что-нибудь
}

Операторы ||


a || b;
            

                false || 42;
            

                // 42;

Оператор ||


function someFunction(a) {
    a = a || 42;
}

Оператор &&


a && b;
            

true || 42;
            

// 42;

Короткий if


if (object.someMethod) {
    object.someMethod();
}
            

condition && someFunction();

Итого:

  • Объекты
  • Функции
  • Массивы
  • Типы данных
  • Оператор typeof
  • Приведение типов
  • Операторы

Спасибо за внимание!

Вопросы?

Slack: mangin

Домашнее задание:

Телефонная книга