​​Vaadin

Эта библиотека с открытым исходным кодом, за исключением некоторых коммерческих профессиональных компонентов. Компоненты предназначены для настольной и мобильной разработки. Более 45 компонентов включают Date Picker, Combo Box, Charts, Grid. Механизм внедрения CSS обеспечивает кастомизацию стиля. Также поддерживается TypeScript. Дополнительные инструменты включают Collaboration Engine, Design System Publisher, Designer и TestBench.

Плюсы:
⚡ поддержка плагинов;
⚡ открытый исходный код.

Минусы:
💩 малочисленное сообщество.

#библиотеки #фреймворки

​​Объекты

Как мы знаем в JavaScript существует 8 типов данных. Семь из них называются "примитивными", так как содержат только одно значение (будь то строка, число или что-то другое).

Объекты же используются для хранения коллекций различных значений и более сложных сущностей. В JavaScript объекты используются очень часто, это одна из основ языка. Поэтому мы должны понять их, прежде чем углубляться куда-либо ещё.

Объект может быть создан с помощью фигурных скобок {…} с необязательным списком свойств. Свойство - это пара "ключ: значение", где ключ - это строка (также называемая "именем свойства"), а значение может быть чем угодно.

Мы можем представить объект в виде ящика с подписанными папками. Каждый элемент данных хранится в своей папке, на которой написан ключ. По ключу папку легко найти, удалить или добавить в неё что-либо.

Пустой объект ("пустой ящик") можно создать, используя один из двух вариантов синтаксиса:

let user = new Object(); // синтаксис "конструктор объекта"
let user = {}; // синтаксис "литерал объекта"

Обычно используют вариант с фигурными скобками {...}. Такое объявление называют литералом объекта или литеральной нотацией.

#типы_данных #object

​​Литералы и свойства

При использовании литерального синтаксиса {...} мы сразу можем поместить в объект несколько свойств в виде пар "ключ: значение":

let user = { // объект
name: "John", // под ключом "name" значение "John"
age: 30 // под ключом "age" значение 30
};

У каждого свойства есть ключ (также называемый "имя" или "идентификатор"). После имени свойства следует двоеточие ":", и затем указывается значение свойства. Если в объекте несколько свойств, то они перечисляются через запятую.

В объекте user сейчас находятся два свойства:
1. Первое свойство с именем "name" и значением "John".
2. Второе свойство с именем "age" и значением 30.

Можно сказать, что наш объект user - это ящик с двумя папками, подписанными "name" и "age".

Мы можем в любой момент добавить в него новые папки, удалить папки или прочитать содержимое любой папки.

Для обращения к свойствам используется запись "через точку":

// получаем свойства объекта:
alert( user.name ); // John
alert( user.age ); // 30

Значение может быть любого типа. Давайте добавим свойство с логическим значением:
user.isAdmin = true;

Для удаления свойства мы можем использовать оператор delete:

delete user.age;

Имя свойства может состоять из нескольких слов, но тогда оно должно быть заключено в кавычки:

let user = {
name: "John",
age: 30,
"likes birds": true // например как тут
};

Последнее свойство объекта может заканчиваться запятой:

let user = {
name: "John",
age: 30*!*,*/!*
}

Это называется "висячая запятая". Такой подход упрощает добавление, удаление и перемещение свойств, так как все строки объекта становятся одинаковыми.

#типы_данных #object

​​Строки

В JavaScript любые текстовые данные являются строками. Не существует отдельного типа "символ", который есть в ряде других языков.

Строку можно создать с помощью одинарных, двойных либо обратных кавычек:

let single = 'single-quoted';
let double = "double-quoted";

let backticks = `backticks`;

Одинарные и двойные кавычки работают, по сути, одинаково, а если использовать обратные кавычки, то в такую строку мы сможем вставлять произвольные выражения, обернув их в ${…}:

function sum(a, b) {
return a + b;
}

alert(`1 + 2 = ${sum(1, 2)}.`); // 1 + 2 = 3.

Ещё одно преимущество обратных кавычек — они могут занимать более одной строки, вот так:

let guestList = `Guests:
* John
* Pete
* Mary
`;

alert(guestList);
// список гостей, состоящий из нескольких строк

Выглядит вполне естественно, не правда ли? Что тут такого? Но если попытаться использовать точно так же одинарные или двойные кавычки, то будет ошибка:

let guestList = "Guests: // Error: Unexpected token ILLEGAL
* John";

Одинарные и двойные кавычки в языке с незапамятных времён: тогда потребность в многострочных строках не учитывалась. Что касается обратных кавычек, они появились существенно позже, и поэтому они гибче.

#типы_данных #string

​​Числа

В современном JavaScript существует два типа чисел:

1. Обычные числа в JavaScript, который также называют "числа с плавающей точкой двойной точности" (double precision floating point numbers). Это числа, которые мы будем использовать чаще всего. Мы поговорим о них в этой главе.

2. BigInt числа дают возможность работать с целыми числами произвольной длины. Они нужны достаточно редко и используются в случаях, когда необходимо работать со значениями более чем 253 или менее чем -253.

Способы записи числа

Представьте, что нам надо записать число 1 миллиард. Самый очевидный путь:

let billion = 1000000000;

Но в реальной жизни мы обычно опускаем запись множества нулей, так как можно легко ошибиться. Укороченная запись может выглядеть как "1млрд" или "7.3млрд" для 7 миллиардов 300 миллионов. Такой принцип работает для всех больших чисел.

В JavaScript можно использовать букву "e", чтобы укоротить запись числа. Она добавляется к числу и заменяет указанное количество нулей:

let billion = 1e9; // 1 миллиард, буквально: 1 и 9 нулей

alert( 7.3e9 ); // 7.3 миллиардов (7,300,000,000)

Сейчас давайте запишем что-нибудь очень маленькое. К примеру, 1 микросекунду (одна миллионная секунды):

let ms = 0.000001;

Записать микросекунду в укороченном виде нам поможет "e".

let ms = 1e-6; // шесть нулей, слева от 1

#типы_данных #number

​​Массивы

Существует два варианта синтаксиса для создания пустого массива:

let arr = new Array();
let arr = [];

Практически всегда используется второй вариант синтаксиса. В скобках мы можем указать начальные значения элементов:

let fruits = ["Яблоко", "Апельсин", "Слива"];

Элементы массива нумеруются, начиная с нуля.
Мы можем получить элемент, указав его номер в квадратных скобках:

let fruits = ["Яблоко", "Апельсин", "Слива"];

alert( fruits[0] ); // Яблоко
alert( fruits[1] ); // Апельсин
alert( fruits[2] ); // Слива

Мы можем заменить элемент:

fruits[2] = 'Груша';
// теперь ["Яблоко", "Апельсин", "Груша"]

…Или добавить новый к существующему массиву:

fruits[3] = 'Лимон';
// теперь ["Яблоко", "Апельсин", "Груша", "Лимон"]

Общее число элементов массива содержится в его свойстве length:

let fruits = ["Яблоко", "Апельсин", "Слива"];

alert( fruits.length ); // 3

В массиве могут храниться элементы любого типа.
Например:

// разные типы значений
let arr =
[ 'Яблоко',
{ name: 'Джон' },
true,
function() { alert('привет'); }
];

// получить элемент с индексом 1 и показать его свойство
alert( arr[1].name ); // Джон

// получить элемент с индексом 3 и выполнить её
arr[3](); // привет

#типы_данных #array

​​Методы массивов

Массивы предоставляют множество методов. Чтобы было проще, они разбиты на разные посты.

filter

На тот случай, если найденных элементов может быть много, предусмотрен метод arr.filter(fn).
Синтаксис этого метода схож с find, но filter возвращает массив из всех подходящих элементов:
let results = arr.filter(function(item, index, array) {
// если true - элемент добавляется к результату, и перебор продолжается
// возвращается пустой массив в случае, если ничего не найдено
});

Например:
let users = [
{id: 1, name: "Вася"},
{id: 2, name: "Петя"},
{id: 3, name: "Маша"}
];

// возвращает массив, состоящий из двух первых пользователей
let someUsers = users.filter(item => item.id < 3);

alert(someUsers.length); // 2

#array #array_methods

​​Методы массивов

map
Метод arr.map является одним из наиболее полезных и часто используемых.
Он вызывает функцию для каждого элемента массива и возвращает массив результатов выполнения этой функции.
Синтаксис:
let result = arr.map(function(item, index, array) {
// возвращается новое значение вместо элемента
});
Например, здесь мы преобразуем каждый элемент в его длину:
let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length);
alert(lengths); // 5,7,6

#array #array_methods

​​Методы массивов

slice

Его синтаксис:
arr.slice([start], [end])

Он возвращает новый массив, в который копирует элементы, начиная с индекса start и до end (не включая end). Оба индекса start и end могут быть отрицательными. В таком случае отсчёт будет осуществляться с конца массива.
Это похоже на строковый метод str.slice, но вместо подстрок возвращает подмассивы.
Например:
let arr = ["t", "e", "s", "t"];

alert( arr.slice(1, 3) ); // e,s (копирует с 1 до 3)

alert( arr.slice(-2) ); // s,t (копирует с -2 до конца)

Можно вызвать slice и вообще без аргументов: arr.slice() создаёт копию массива arr. Это часто используют, чтобы создать копию массива для дальнейших преобразований, которые не должны менять исходный массив.

#array #array_methods

​​Методы массивов

Array.isArray

Массивы не образуют отдельный тип языка. Они основаны на объектах.
Поэтому typeof не может отличить простой объект от массива:
alert(typeof {}); // object
alert(typeof []); // тоже object

...Но массивы используются настолько часто, что для этого придумали специальный метод: Array.isArray(value). Он возвращает true, если value массив, и false, если нет.

alert(Array.isArray({})); // false

alert(Array.isArray([])); // true

#array #array_methods

​​Методы массивов

split и join

Ситуация из реальной жизни. Мы пишем приложение для обмена сообщениями, и посетитель вводит имена тех, кому его отправить, через запятую: Вася, Петя, Маша. Но нам-то гораздо удобнее работать с массивом имён, чем с одной строкой. Как его получить?
Метод str.split(delim) именно это и делает. Он разбивает строку на массив по заданному разделителю delim.
В примере ниже таким разделителем является строка из запятой и пробела.

let names = 'Вася, Петя, Маша';

let arr = names.split(', ');

for (let name of arr) {
alert( `Сообщение получат: ${name}.` ); // Сообщение получат: Вася (и другие имена)
}

У метода split есть необязательный второй числовой аргумент -- ограничение на количество элементов в массиве. Если их больше, чем указано, то остаток массива будет отброшен. На практике это редко используется:

let arr = 'Вася, Петя, Маша, Саша'.split(', ', 2);

alert(arr); // Вася, Петя

Вызов arr.join(glue) делает в точности противоположное split. Он создаёт строку из элементов arr, вставляя glue между ними.
Например:
let arr = ['Вася', 'Петя', 'Маша'];

let str = arr.join(';'); // объединить массив в строку через ;

alert( str ); // Вася;Петя;Маша

#array #array_methods

Что НЕ является валидным?

const bird = {
size: "small"
};

const mouse = {
name: "Mickey",
small: true
};

A: mouse.bird.size - 80
👍👍👍👍👍👍👍👍 68%
B: mouse[bird.size] - 14
👍👍 12%
C: mouse[bird["size"]] - 7
👍👍 6%
D: Все варианты валидны - 17
👍👍 14%
👥 118 человек уже проголосовало.

Какой верный ответ?