Текстовые строки
Создаются с помощью литерала с одинарными или двойными кавычками, а с ES2015 — ещё и с обратными: в такие шаблонные строки можно подставлять значения через ${…}. Есть свойство length и дюжина полезных стандартных методов.
Документация по String.prototype
Конструктор регулярных выражений Regex 101
const s = "привет, мир";
s.length                 // 11
s.at(0)                  // "п" — первый символ (ES2022; раньше s.charAt(0))
s.at(-1)                 // "р" — последний символ
s.slice(1, 4)            // "рив" — символы с 1-го по 3-й
s.slice(-3)              // "мир" — последние три символа
s.indexOf("и")           // 2 — позиция первой «и»
s.includes("мир")        // true (ES2015)
s.startsWith("при")      // true (ES2015)
s.split(", ")            // ["привет", "мир"]
s.replace("и", "И")      // "прИвет, мир" — заменяет только первое вхождение!
s.replaceAll("и", "И")   // "прИвет, мИр" — все вхождения (ES2021)
s.toUpperCase()          // "ПРИВЕТ, МИР"
`${s}!`                  // "привет, мир!" — шаблонная строка
JavaScript: The Definitive Guide

Chapter 3.
§ 3.2. Strings

JavaScript: The Definitive Guide

Cut Cut Cut

15 минут
Упражнение

Capitalize

10 минут
Упражнение

WeIrD CaSe

10 минут
Упражнение

Check for Spam

20 минут
Упражнение

Sum Digits

10 минут
Упражнение

Самые полезные методы

  • .replace()
  • .slice()
  • .split()
  • .charAt()
  • .indexOf()
  • .includes()
  • .replaceAll()
  • .at()
  • .trim()
  • .toLowerCase()
  • .toUpperCase()
  • .test()
  • .search()
  • .exec()
Массивы
Это упорядоченные списки, в которых могут храниться любые данные, включая другие массивы (так получаются многомерные массивы).

Примеры работы с массивами

const a = ["мир"];       // массив из одного элемента
const first = a[0];      // читаем элемент 0
a[1] = 3.14;             // записываем элемент 1
a.push("привет");        // добавляем в конец
a.at(-1);                // "привет" — последний элемент (ES2022)
const [x, y] = a;        // деструктуризация (ES2015): x = "мир", y = 3.14
const b = [...a, "!"];   // spread: новый массив, a не меняется
// const запрещает переприсвоить a, но менять сам массив можно
Eloquent JavaScript

Chapter 4. Data Structures:
Objects and Arrays

Eloquent JavaScript

JavaScript: The Good Parts

Chapter 6.
Arrays

JavaScript: The Good Parts

JavaScript: The Definitive Guide

Chapter 7.
Arrays

JavaScript: The Definitive Guide

Документация по Array.prototype
Сборник задач по функциональному JS от Nodeschool.io

Where’s Glue?

5 минут
Упражнение

Who Likes It?

15 минут
Упражнение

Make It Double

10 минут
Упражнение

Needle in Haystack

15 минут
Упражнение

Smart Sort

15 минут
Упражнение

Reverse Words

10 минут
Упражнение

Average

15 минут
Упражнение

If I had a nickel for every time I've written
for (i = 0; i < N; i++) in C I’d be a millionaire.

— MIKE VANIER

Texas Ranges

20 минут
Упражнение

snake_case

30 минут
Упражнение

Grocery Store

20 минут
Упражнение

Самые полезные методы

  • .push()
  • .unshift()
  • .pop()
  • .shift()
  • .concat()
  • .slice()
  • .join()
  • .reverse()
  • .sort()
  • .indexOf()
  • .forEach()
  • .map()
  • .reduce()
  • .filter()
  • .some()
  • .find()
  • .includes()
Объекты
Объект в JavaScript представляет собой набор пар «ключ–значение». Объектами в JavaScript являются массивы, функции, даты и регулярные выражения. Числа и строки — примитивы, но ведут себя похоже: когда вы пишете "abc".toUpperCase(), движок на мгновение оборачивает строку в объект-обёртку. По ключу можно хранить не только значение, но и функции — они называются «методами». С помощью таких объектов можно реализовать и классическое ООП, но в JavaScript всё построено немного по-другому — на прототипном наследовании. С ES2015 появился привычный синтаксис class, но под капотом это всё те же прототипы.
JavaScript: The Good Parts

Chapter 3.
Objects

JavaScript: The Good Parts

JavaScript: The Definitive Guide

Chapter 6.
Objects

JavaScript: The Definitive Guide

Объект как хранилище данных

{
    "file_exclude_patterns":
    [
        ".DS_Store",
        "*.psd",
        "*.db",
        "*.sublime-project",
        "*.sublime-workspace",
        "*.log"
    ],
    "find_selected_text": false,
    "font_size": 14,
    "highlight_line": false,
    "ignored_packages":
    [
        "Vintage"
    ],
    "line_padding_bottom": 1,
    "line_padding_top": 1,
    "open_files_in_new_window": false,
    "scroll_past_end": true,
    "show_panel_on_build": false,
    "tab_size": 4
}

Объект как модуль

// JavaScript
String.fromCharCode(num1, num2, ...)
Array.isArray(array)
Object.create(proto, [propObject])

// Underscore.js
_.map(list, iterator, [context])
_.filter(list, predicate, [context])
_.sortBy(list, iterator, [context])
_.toArray(list)
_.range([start], stop, [step])

// jQuery
jQuery.ajax(url, [settings])
jQuery.unique(array)
jQuery.each(array, callback)

Объект как экземпляр класса

"abc".length
[1,2,3,4,5].forEach(…)

// С ES2015 классы пишут так:
class Shape {
  constructor() {
    this.x = 0;
    this.y = 0;
  }
  move(x, y) {
    this.x += x;
    this.y += y;
  }
}

class Rectangle extends Shape {}

// Под капотом это те же прототипы:
// typeof Shape === "function"
// Object.getPrototypeOf(Rectangle) === Shape

Filter Messages

15 минут
Упражнение

Zi-i-i-i-p!

10 минут
Упражнение

Invert

5 минут
Упражнение
Домашка
1 час
Домашка

What’s the Extension?

Напишите функцию, которая принимает текстовую строку с названием файла и возвращает расширение файла: 'Underscore.js' → 'js'.

1 час
Домашка

Multiplication Table

С помощью вложенных циклов for нужно создать таблицу умножения в виде двумерного массива. Работать будет так: tableOfMultiplication[7][8].

1 час
Домашка

Onion Skins

Задание «на звёздочку»: нужно превратить строку вида 'a.b.c.d' в объект с множеством вложенных свойств: {a: {b: {c: 'd'}}}.







Move fast and break things. Unless you are breaking stuff, you are not moving fast enough.

— Mark Zuckerberg