Чистяков Денис
Строки полезны для хранения данных, которые можно представить в текстовой форме.Mozilla Developer Network
// Пустая строка
var emptyString = '';
// Длина строки
emptyString.length; // 0
// Можно использовать одинарные кавычки
var russianString = 'строка текста';
russianString.length; // 13
// Можно использовать двойные кавычки
var russianString = "строка текста";
russianString.length; // 13
var escapeCodesString = 'a\'b' // a'b
escapeCodesString.length; // 3
var escapeCodesString = 'a\\b' // a\b
escapeCodesString.length; // 3
var escapeCodesString = 'a\n\tb' // a
// b
escapeCodesString.length; // 4
// Поддерживаются все символы из Unicode
var utf8String = '中文 español English বাংলা русский 日本語 ਪੰਜਾਬੀ 한국어 தமிழ்';
utf8String.length; // 53
var russianString = 'кот';
// Возможно обращение к символу по индексу
russianString[1]; // 'о'
// Редактирование невозможно
russianString[1] = 'и';
russianString; // 'кот'
// Обрезаем строку до 140 символов под длину твита
var longString = 'Очевидно проверяется, что математический анализ \
существенно масштабирует интеграл по поверхности, что неудивительно. \
Первая производная, очевидно, позиционирует ортогональный определитель.'
var shortString = longString;
if (longString.length> 140) {
shortString = longString.slice(0, 139) + '...';
}
shortString; // 'Очевидно проверяется, что математический анализ
// существенно масштабирует интеграл по поверхности, что неудивительно.
// Первая производная, оч...'
shortString.length; // 140
var tweet = 'PWA. Что это такое? Третий доклад на WSD в Питере Сергея ' +
'Густуна #wstdays';
// Находим индекс первого вхождения подстроки в строке
tweet.indexOf('#wstdays'); // 65
// Искомая подстрока отсутствует
tweet.indexOf('#fronttalks'); // -1
Массивы являются спископодобными объектами, чьи прототипы содержат методы для операций обхода и изменения массива. Ни размер JavaScript-массива, ни типы его элементов не являются фиксированными.Mozilla Developer Network
// Пустой массив
var emptyArray = [];
emptyArray.length; // 0
// Массив чисел
var arrayOfNumbers = [1, 2, 3, 4];
arrayOfNumbers.length; // 4
// Массив строк
var arrayOfStrings = ['a', 'b', 'c'];
arrayOfStrings.length; // 3
var tweets = [
'Я и ИоТ, пятый доклад на WSD в Питере Вадима Макеев #wstdays',
'Вёрстка писем. Развенчиваем мифы. Четвёртый доклад на WSD в Питере Артура Коха #wstdays',
'PWA. Что это такое? Третий доклад на WSD в Питере Сергея Густуна #wstdays',
'Pokémon GO на веб-технологиях, второй доклад на WSD в Питере Егора Коновалова #wstdays',
'Ого сколько фронтендеров. #wstdays',
'<head> — всему голова, первый доклад на WSD в Питере Романа Ганина #wstdays',
'Доброе утро! WSD в Питере начинается через 30 минут: программа, трансляция и хештег #wstdays',
'Наглядная таблица доступности возможностей веб-платформы Пола Айриша: Can I use + StatCounter, от CSS до JS',
'Node.js, TC-39 и модули, Джеймс Снел о проблемах Node.js с асинхронными модулями ES и вариантах выхода из ситуации',
'Всегда используйте <label>, перевод статьи Адама Сильвера в блоге Академии HTML',
'JSX: антипаттерн или нет? Заметка Бориса Сердюка на Хабре',
'Как прятать инлайновые SVG-иконки от читалок, Роджер Йохансен объясняет, зачем это нужно'
];
tweets.length; // 12
for (var i = 0; i < tweets.length; i++) { var tweet = tweets[i]; // Что-то делаем с конкретным твитом }
var emptyArray = [];
// Добавляем элементы
emptyArray.push('a');
emptyArray.push('b');
emptyArray; // ['a', 'b']
emptyArray.length; // 2
// Удаляем последний элемент
emptyArray.pop(); // 'b'
emptyArray; // ['a']
emptyArray.length; // 1
var concatedArray = arrayOfNumbers.concat(arrayOfStrings);
concatedArray; // [1, 2, 3, 4, 'a', 'b', 'c']
arrayOfNumbers; // [1, 2, 3, 4]
arrayOfStrings; // ['a', 'b', 'c']
// Найдем все строки, содержашие хештег #wstdays в массиве
var result = [];
for (var i = 0; i < tweets.length; i++) { var tweet = tweets[i]; if (tweet.indexOf('#wstdays') !== -1) { result.push(tweet); } }
// Копируем оригинальную ленту в новый массив
var tweetsWithAdv = tweets.slice();
// Добавим немного рекламы в ленту, изменяя копию
tweetsWithAdv.splice(4, 0, 'Покупайте наших слонов!');
tweetsWithAdv.splice(9, 0, 'И натяжные потолки тоже у нас отличные!');
tweets.length; // 12
tweetsWithAdv.length; // 14
// Постраничная навигация
var tweetsByPage = tweetsWithAdv.slice(5, 10);
Список, состоящий из пар с именем свойства и связанного с ним значения, которое может быть произвольного типа.Mozilla Developer Network
// Пустой объект
var emptyObject = {};
// Объект с предопределенным набором свойств
var tweet = {
createdAt: 'Sat Oct 01 12:01:08 +0000 2016',
id: 782188596690350100,
text: 'Я и ИоТ, пятый доклад на WSD в Питере Вадима Макеева #wstdays',
user: {
id: 42081171,
name: 'Веб-стандарты',
screenName: 'webstandards_ru',
followersCount: 6443
},
hashtags: ['wstdays']
};
// Получение значения свойства через точечную нотацию
emptyObject.propertyName = 'foo'; // { propertyName: 'foo' }
emptyObject.propertyName; // 'foo'
// Удаление свойства
delete emptyObject.propertyName; // {}
tweet.id; // 782188596690350100
tweet.user.screenName; // 'webstandards_ru'
// Получение значения свойства через квадратные скобки
tweet['i' + 'd']; // 782188596690350100
var keys = Object.keys(tweet);
keys; // ['createdAt', 'id', 'text', 'user', 'hashtags']
for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = tweet[key]; // Что-то делаем с ключом и со значением }
tweet.hasOwnProperty('text'); // true
tweet.hasOwnProperty('nonExistantProperty'); // false
Именованый блок кода, который позволяет переиспользовать существующий код.
Может иметь входные параметры и возвращать значение.
Является объектом высшего порядка.
function getFollowersCount() {
return 6443;
}
function noop() {
}
function noop() {
return undefined;
}
function getAuthor(tweet) {
return tweet.user.screen_name;
}
tweet.user.followersCount; // 6443
function incrementFollowersCount(count) {
count++; // 6444
}
incrementFollowersCount(tweet.user.followersCount);
tweet.user.followersCount; // 6443
tweet.user; // { id: 42081171, name: 'Веб-стандарты',
// screenName: 'webstandards_ru', followersCount: 6443 }
function incrementFollowersCount(user) {
user.followersCount++;
}
incrementFollowersCount(tweet.user);
tweet.user; // { id: 42081171, name: 'Веб-стандарты',
// screenName: 'webstandards_ru', followersCount: 6444 }
Функции — объекты высшего порядка.
Они могут быть переданы в другие функции в качестве аргумента, а так же могут иметь личные свойства, как и другие объекты.
var tweets = [
{ hashtags: ['wstdays'], likes: 16, text: 'Я и ИоТ, пятый...' },
{ hashtags: ['wstdays', 'mails'], likes: 33, text: 'Вёрстка писем...' },
{ hashtags: ['wstdays'], likes: 7, text: 'PWA. Что это...' },
{ hashtags: ['wstdays', 'pokemongo'], likes: 12, text: 'Pokémon GO на...' },
{ hashtags: ['wstdays'], likes: 15, text: 'Ого сколько фронт...' },
{ hashtags: ['wstdays', 'html'], likes: 22, text: '<head> — всему...' },
{ hashtags: ['wstdays'], likes: 8, text: 'Доброе утро! WSD...' },
{ likes: 9, text: 'Наглядная таблица доступности...' },
{ hashtags: ['nodejs'], likes: 7, text: 'Node.js, TC-39 и модули,...' },
{ hashtags: ['html'], likes: 28, text: 'Всегда используйте <label>...' },
{ likes: 18, text: 'JSX: антипаттерн или нет?...' },
{ hashtags: ['svg'], likes: 19, text: 'Как прятать инлайновые...' }
];
var result;
// Теперь в result лежат отфильтрованные твиты
tweets.forEach(filterWithWstdaysHashtag);
// Выбираем только твиты с хештегом #wstdays
function filterWithWstdaysHashtag(tweet, index) {
var hashtags = tweet.hashtags;
if (Array.isArray(hashtags) && hashtags.indexOf('wstdays') !== -1) {
result.push(tweet);
}
}
// Теперь в result лежит HTML c деревом твитов
var result = '<dl>' + tweets.filter(filterWithWstdaysHashtag)
.map(render)
.join('\n') + '</dl>';
// Выбираем только твиты с хештегом #wstdays
function filterWithWstdaysHashtag(tweet, index) {
var hashtags = tweet.hashtags;
return Array.isArray(hashtags) && hashtags.indexOf('wstdays') !== -1;
}
// Превращаем массив объектов твитов в HTML-строки
function render(tweet, index) {
return '<dt>' + tweet.text + '</dt>' +
'<dd>' + tweet.user + '</dd>' +
'<dd>' + tweet.hashtags.join(', ') + '</dd>';
}
var likesCount = tweets.reduce(getTotalLikes, 0)
function getTotalLikes(acc, item) {
return acc + item.likes;
}
likesCount; // 194
var hashtagsStat = tweets.reduce(flattenHashtags, [])
// ['wstdays', 'wstdays', 'mails', 'wstdays', 'wstdays', 'pokemongo',
// 'wstdays', 'wstdays', 'html', 'wstdays', 'nodejs', 'html', 'svg']
.reduce(getHashtagsStats, {});
function flattenHashtags(acc, item) {
return acc.concat(item.hashtags || []);
}
function getHashtagsStats(acc, item) {
if (!acc.hasOwnProperty(item)) {
acc[item] = 0;
}
acc[item]++;
return acc;
}
hashtagsStats; // { html: 2, mails: 1, nodejs: 1, pokemongo: 1, svg: 1, wstdays: 7 }
toLowerCase — приводим строку к нижнему регистру
trim — удаляет пробельные символы с обеих сторон
startsWith — начинается ли строка с подстроки
sort — сортируем массив
every — удовлетворяют ли все элементы массива условию
some — удовлетворяет ли хотя бы один элемент массива условию
shift — выталкивает из массива первый элемент и возвращает его
unshift — добавляет элемент в начало массива