JS Theory Flashcards
В чем разница между == и ===?
== сравнение с приведением типов (приводит все к числам) === сравнение без приведения типов (сначала typeof, потом значения)
Что делает forEach?
Метод для перебора
Аналог for для перебора массива, ничего не возвращает
arr.forEach(function(elem, i, array) {
alert( i + “: “ + elem+ “ (массив:” + array + “)” );
});
Что делает filter?
Метод для фильтрации
let results = arr.filter(function(item, index, array) {
// если true - элемент добавляется к результату, и перебор продолжается
// возвращается пустой массив в случае, если ничего не найдено
});
Что делает map?
Метод для трансформации
let result = arr.map(function(item, index, array) {
// возвращается новое значение вместо элемента
});
Что делает reduce?
Метод для сохранения промежуточного результата.
Используются для вычисления какого-нибудь единого значения на основе всего массива.
let value = arr.reduce(function(previousValue, item, index, array) {
// ...
}, [initial]
При отсутствии initial в качестве первого значения берётся первый элемент массива, а перебор стартует со второго.
Как создать объект?
const obj = {...}
const obj = new Object(){...}Как создать массив?
let arr = []
let arr = new Array(“Яблоко”, “Груша”, “и тд”);
НО let arr = new Array(2) = [undefined, undefined]
и Array.of(2) = [2];
Как создать массив из итерируемого объект в массив?
Array.from(obj)
Что такое псевдомассив?
Это объекты, у которых есть индексы и свойство length, но не поддерживаются методы массивов
Что такое bind?
Метод позволяющий привязать или поменять контекст (зафиксировать this), в метод также передаётся набор аргументов, которые будут установлены перед переданными в привязанную функцию аргументами при её вызове.
let user = {
firstName: "Вася",
sayHi() {
alert(`Привет, ${this.firstName}!`);
}
};
let sayHi = user.sayHi.bind(user);
Что такое самозапускающаяся функция?
(function(){})() - функция, которая вызывается и выполняется сразу после объявления и изолирует все переменные и функции от глобального контекста
Что такое замыкание?
Это функция, которая объявлена в другой функции и запоминает свои внешние переменные и может получить к ним доступ, даже после того, как внешняя функция прекратит выполнение.
Что такое деструктуризация?
Это спец.синтаксис, позволяющий распаковать массив или объект в набор переменных
let arr = [“Ilya”, “Kantor”]
let [firstName, surname] = [“Ilya”, “Kantor”];
let vegetables = ['🍅', '🍄', '🥕']; let tomato = vegetables[0]; let mushroom= vegetables[1]; let carrot= vegetables[2];
Что такое оператор …?
Если … располагается в конце списка аргументов функции, то это «остаточные параметры» (rest). Он собирает остальные неуказанные аргументы и делает из них массив.
Если … встретился в вызове функции или где-либо ещё, то это «оператор расширения» (spread). Он извлекает элементы из массива.
let arr = [3, 5, 1];
let arr2 = [8, 9, 15];
let merged = [0, …arr, 2, …arr2];
Отличие стрелочных функций?
1) Нет arguments
2) Не имеет контекста, т.е. не имеет собственного this. Она берет this в месте объявления, а обычная в месте выполнения.
Как задать метод прототипу?
Object.prototype.method = …
Как унаследовать объект?
const obj2 = Object.create(obj1)
Особенность создания объектов?
Все созданные объекты ссылаются на прототип
Что такое map?
Map – это коллекция ключ/значение, как и Object.
Map позволяет использовать ключи любого типа, а
Object приводит ключи к строкам
Что такое set?
Особый тип коллекции - Множество где каждый элемент уникален, т.е. добавление двух одинаковых ничего даст
Как узнать есть ли свойство у объекта?
obj.hasOwnProperty(prop) и в отличие от оператора in, этот метод не проверяет существование свойств в цепочке прототипов объекта.
Какие значения возвращают false?
0, null, undefined, NaN, ‘’
Что такое arguments?
Объект - список всех аргументов функции
Как отслеживать ошибки?
try, catch
Что такое event loop?
По сути, это бесконечный цикл, который ожидает задачи в стеке вызовов (call stack), исполняет их и снова ожидает появления новых. При этом он добавляет любой найденный вызов функции в стек вызовов и выполняет каждый по порядку.
Как скопировать функцию?
let newFunc = func; Без круглых скобок
Какие методы округления есть?
Math.floor - в меньшую сторону
Math.ceil - в большую сторону
Math.round - до ближайшего целого
Math.trunc - удаление дробной части без округления
toFixed(n) - до n знаков после запятой и возвращает строку
Как преобразовать число в строку?
1) num+””;
2) String(num);
3) num.toString(система счисления);
4) num.toFixed(знаков после запятой)
5) num.toPrecision ();
6) num.toExponential ();
Как преобразовать строку в число?
1) +str
2) Number(строка десятичных чисел, можно пробел в конце или начале);
3) parseInt(str);
4) parseFlow(str);
Что такое чистая функция?
1) Каждый раз функция возвращает одинаковый результат, когда она вызывается с тем же набором аргументов
2) Нет побочных эффектов
Что такое побочный эффект функции?
Любая работа, выполняемая функцией, не связанная с вычислением конечного результата, т.е. влияющая на внешний мир (изменение глоб.переменной, console.log, запросы DOM, HTTP запросы)
В чем отличие параметров от аргументов функции?
Правильно говорить «функция принимает параметры», нопри этом мы«передаём функцииаргументы».
Параметрами называются значения, которые мызадаёмвмомент объявления функции. Ихже мыиспользуем ивтеле функции.
Аргументами называют значения, которые мыпередаём вфункциюпри еёвызове.
Что такое promise?
Это объекты, которые используются в JavaScript при выполнении асинхронных операций. Они упрощают работу с асинхронными операциями и дают более удобные механизмы обработки ошибок, чем коллбэки и события.
Что такое стек вызовов?
Это структура данных, которая записывает строки выполняемых инструкций и выполняет их. После выполнения удаляет.
Три состояния promise?
- Промис в состоянии ожидания (pending). Когда вы не знаете, получите ли вы мобильный телефон к следующей неделе или нет.
- Промис решен (resolved). Вам реально купят новый телефон.
- Промис отклонен (rejected). Вы не получили новый мобильный телефон, так как всё-таки, мама была не в настроении.
Что такое hoisting?
Перенос var (частичное поднятие) или function (полное поднятие) в верхнюю часть их функциональной/локальной области видимости или в глобальную область видимости
Что такое объявление переменной?
Присвоение имени
var a;
Что такое инициализация переменной?
Присвоение значения переменной
a = 10;
Отличия var, let, const
1) var имеет область действия функции;
2) поднимется только объявление var, а не инициализация;
3) let, const имеют блочную область видимости
4) let, const можно объявить только один раз
5) const нельзя объявить без инициализации
6) let в цикле создает отдельную переменную для каждой итерации
Отличие spread и arguments?
1) Стрелочные функции не имеют “arguments”
2) Псевдомассив не поддерживает методы массивов
3) Всегда содержит все аргументы функции — мы не можем получить их часть
NaN === NaN
false
1 % 0
NaN
Пример импорта встроенной библиотеки
import path from ‘path’;
Как импортировать все переменные?
import * as solution from ‘./solution’;
Как импортировать модуль?
import { foo, bar } from ‘./file’;
Как переименовать переменную при импорте?
import { foo as foo1 } from ‘./file’;
Как сделать экспорт по-умолчанию?
const foo = ...; export default foo; 1) можно изменить имя при импорте 2) после экспорта нельзя указывать const, var, lets
Как экспортировать модуль?
export const foo = ...;
или
const foo = ...;
const bar = ...;
export { foo, bar };Что такое предикат?
ф-ия которая возвращает true или false
Как добавить элемент в массив?
1) arr[22] = “str”, если элементов меньше 22 не занятые будут undefined
2) arr.push(‘str’) - добавит в конец
Для чего нужен use strict?
Директива для включения строго режима он заменяет исключениями некоторые ошибки, которые js пропускает по-умолчанию для совместимости со старыми версиями
Особенности строк
1) иммутабельные - т.е. при действии со строкой создается новая, а не изменяется старая
2) сравнение лексиграфичекое - код во внутренней таблице кодирования (utf-16)
Как работает || ?
Находит первое true и возвращает исходное его значение, если все false возвращает последнее исходное
Как работает && ?
Находит первое false значение и возвращает исходное его значение, если все true возвращает последнее исходное
Назовите методы добавления и удаления массивов?
push/pop - добавляет и возвращает длину/удаляет и возвращает последний элемент
unshift/shift - - добавляет и возвращает длину/удаляет и возвращает первый элемент
Для чего for..of ?
Для перебора массива без доступа к номеру текущего элемента, только к его значению
let fruits = [“Яблоко”, “Апельсин”, “Слива”];
for (let fruit of fruits) {
alert( fruit );
}
Для чего for..in ?
Для перебора все свойств объекта по ключу! Выполняет перебор всех свойств объекта, а не только цифровых. Кроме того медленнее for of
let arr = [“Яблоко”, “Апельсин”, “Груша”];
for (let key in arr) {
alert( arr[key] );
}
Назовите методы для работы с JSON?
JSON.stringify для преобразования объектов в строку (JSON)
JSON.parse для преобразования строки (JSON) обратно в объект
Что такое this ?
Ключевое слово this указывает на конкретный объект (контекст вызова), а именно на тот объект, на котором была вызвана функция (метод).
Пока функция не вызвана, this не содержит никакого значения, контекст появляется только в момент вызова функции.
Для чего нужны замыкания?
Некоторые функции выполняются асинхронно, поэтому в момент выполнения кода значение переменной может уже измениться. Чтобы избавиться от этой проблемы, нужно создать отдельную область видимости. Так все переменные будут под контролем и замыкания не позволят потерять необходимые значения.
Как получить данные с сервера?
Через async
let url = ‘https://…;
let response = await fetch(url); let commits = await response.json(); // читаем ответ в формате JSON alert(commits[0].author.login);
Через promise
fetch(url)
.then(response => response.json())
.then(commits => alert(commits[0].author.login));
Как преобразовать строку в массив?
str.split(delim)
Что такое всплытие?
Когда на элементе происходит событие, обработчики сначала срабатывают на нём, потом на его родителе, затем выше и так далее, вверх по цепочке предков вплоть до объекта document, а иногда даже до window
Что такое this?
Ключевое слово для доступа к текущему объекту из метода и гарантирует что функция вызвана с тем объектом в контексте, которого она работает. Значение this - это контекст вызова.
this определяется только во время вызова функции. При создании Функции он неизвестен.
Как получить символ строки?
str[0] (современный способ) или
str.charAt(0) или
for (let char of "Hello") {
alert(char); // H,e,l,l,o (char — сначала "H", потом "e", потом "l" и т. д.)
}Как изменить регистр строки?
toLowerCase() и toUpperCase()
Как найти подстроку строки?
str. indexOf(‘Widget’, 2) - ищет начиная с позиции 2, и возвращает позицию, на которой располагается совпадение, либо -1 при отсутствии совпадений.
str. lastIndexOf(‘Widget’, -2) - аналогично с конца
str. includes(“Bye”, 2) - вернет true или false
str. startsWith и str.endsWith проверяют, соответственно, начинается ли и заканчивается ли строка определённой строкой:
Как получить подстроку?
str.slice(0, 5) - возвращает часть строки от start до (не включая) end
Как убрать пробелы в начале и конце строки?
str.trim();
Как узнать целевой элемент?
function clickFunc(event) {
console.log(event.target)
}Для чего используется оператор “!!”?
Оператор “!!” (двойное отрицание) приводит значение справа от него к логическому значению
Что такое функции высшего порядка (Higher Order Functions)?
это функция, возвращающая другую функцию или принимающая другую функцию в качестве аргумента
Как работает length у массива?
это не количество элементов массива, а наибольший цифровой индекс плюс один
fruits[123] = “Яблоко”;
fruits.length будет 124
Таким образом, самый простой способ очистить массив – это arr.length = 0;
Как удалить элемент массива?
arr.splice(index[, deleteCount, elem1, …, elemN])
Он начинает с позиции index, удаляет deleteCount элементов и вставляет elem1, …, elemN на их место. Возвращает массив из удалённых элементов.
Как получить подмассив?
arr.slice([start], [end])
Он возвращает новый массив, в который копирует элементы, начиная с индекса start и до end (не включая end). Оба индекса start и end могут быть отрицательными. В таком случае отсчёт будет осуществляться с конца массива.
Как узнать индекс элемента в массиве?
arr.indexOf(item, from) или arr.lastIndexOf(item, from) и возвращает первое вхождение
Как узнать содержит ли массив элемент?
arr.includes(item, from)
Как нам найти элемент с определённым условием в массиве?
let item = items.find(function(item, index, array) {
// если true - возвращается текущий элемент и перебор прерывается
// если все итерации оказались ложными, возвращается undefined
});
yellowFruit = fruits.find((fruit) => fruit.color === “Yellow”);
В отличии от for ..in не проходит по свойствам прототипа
Как отсортировать массив?
Вызов arr.sort(fn) сортирует массив на месте, меняя в нём порядок элементов, по-умолчанию строки
fn compare(a, b) {
if (a > b) return 1; // если первое значение больше второго
if (a == b) return 0; // если равны
if (a < b) return -1; // если первое значение меньше второго
}Как развернуть в обратном порядке массива?
arr.reverse();
Как преобразовать массив в строку?
arr.join(delim);
Как сохранить значение this?
1) const that = this
2) стрелочная копирует this из внешнего окружения
Для чего нужен bind?
Bind возвращает новую функцию, значением this которой является объект, указанный в качестве первого параметра. В отличие от bind, call и apply сразу же вызывают функцию.
Как узнать что переменная конечное число?
isFinite(var) и сначала преобразует var в число
Как получить массив из итериреумого объекта?
Array.from(obj[, mapFn, thisArg])
Как получить массив ключей и т.д. из объекта?
Object.keys(obj) – возвращает массив ключей.
Object.values(obj) – возвращает массив значений.
Object.entries(obj) – возвращает массив пар [ключ, значение].
Как переименовать переменную при экспорте?
const foo = ...;
export { foo as bar };Как создать promise?
Promise инициализируется с помощью new Promise(fn), и ему следует передавать функцию. Функция, которая передается в обещание, имеет параметры для разрешения (resolve) и отклонения (reject). Функции resolve и reject обрабатывают, соответственно, успех и неудачу операции. Пример:
// Инициализация Promise
const promise = new Promise((resolve, reject) => {})
Как обработать значение promise?
function getUsers(onSuccess) {
return new Promise((resolve, reject) => {
...
})
}
getUsers(false)
.then(response => {
console.log(response)
})
.catch(error => {
console.error(error)
})
Отличие примитивных типов?
Одним из фундаментальных отличий объектов от примитивных типов данных является то, что они хранятся и копируются «по ссылке».
Что такое глубокое копирование объекта?
Получение копии сложного объекта без ссылки на исходный
Что такое иммутабельность?
Это значит, что их значения не могут быть модифицированы, а только перезаписаны новым полным значением, а вот с ссылочными типами данных все наоборот
Как сделать неглубокое копирование объекта?
let newObj = {...oldObj}
или
let newObj = Object.assign({}, oldObj)Как сделать глубокое копирование объекта?
let newObj = JSON.parse(JSON.stringify(oldObj))
Что такое ECMAScript?
Это стандарт, описывающий устройство языка и его поведение
Как импортировать из библиотеки?
// Так будет происходить поиск файла lodash.js в текущей директории import _ from "./lodash";
// Так импортируется код из пакета (т.е. ищет в node_modules) import _ from "lodash";
Что такое ООП?
Методология программирования, основанная на представлении программы в виде совокупности объектов, каждый из которых является экземпляром определённого класса, а классы образуют иерархию наследования.
Подход в программировании объединяющий данные и код по их обработке в одном объекте
Что такое конструктор?
Это функция, которая создает объекты, давая им набор заранее определенных свойств и методов
Что такое класс?
Описание будущих объектов
Что такое наследование?
Создание нового класса на основе уже существующего
Что такое инкапсуляция?
Ограничение доступ к составляющим объекта, делая их приватными
Что такое полиморфизм?
Возможность класса-потомка менять реализацию класса-родителя сохраняя при этом его интерфейс
Что такое объект?
Структура данных, обладающая определённым состоянием и поведением, имеющая определённые свойства и операции над ними (методы)
Что такое класс?
Шаблон для создания объектов, обеспечивающий начальные значения состояний: инициализация полей-переменных и реализация поведения функций или методов.
const a = {};
return a ? true : falseOбъект всегда true
Когда при обращении к свойству объекта стоит использовать точечную нотацию, а когда через строку в квадратных скобках?
ри обращении к свойствам через точку ключ должен представлять собой действительный JavaScript-идентификатор.
При использовании для доступа к свойствам квадратных скобок можно применять ключи, которые не являются действительными JavaScript-идентификаторами. Они могут иметь любое значение, которое можно привести к строке.
Особенность var в глобальном scope?
Становиться свойством window.
Отличие call и apply?
Сходство заключается в том, что и .call, и .apply используются для вызова функций, а также первый параметр будет использоваться как значение this внутри функции. А разница в том, что .call в качестве следующих аргументов принимает аргументы, разделенные запятыми, в то время как .apply в качестве следующих аргументов принимает массив аргументов.
Что такое оператор запятая?
Оператор запятая выполняет каждый из его операндов (слева направо) и возвращает значение последнего операнда
let x = 0;
console.log(x += 1, x) -> 1
Для чего нужен new?
Ключевое слово «new» используется в функциях-конструкторах для создания нового объекта (нового экземпляра класса).
Допустим, у нас есть такой код:
function Employee(name, position, yearHired){
this.name = name
this.position = position
this.yearHired = yearHired
}
const emp = new Employee(‘Marko Polo’, ‘Software Development’, 2017)
Ключевое слово «new» делает 4 вещи:
- Создает пустой объект.
- Привязывает к нему значение this.
- Функция наследует от functionName.prototype.
- Возвращает значение this, если не указано иное.
Что такое объект?
Это коллекция данных.
null == undefined
true
Что такое оператор?
Это элемент языка, задающий полное описание действия, которое необходимо выполнить.
Что будет, если сложить массивы?
Ведут себя как строки
Что такое прототип объекта?
Это механизм, который упрощает использование общей функциональности (то есть методов) разными объектами. У всех конструкторов есть свойство prototype, к которому можно добавлять методы; любой метод, добавленный к свойству prototype, будет доступен всем объектам, которые созданы с помощью этого конструктора.
Как происходит hoisting?
Интерпретатор проходит по коду два раза
Для чего нужен метод constructor()?
Для инициализации начальных значений
Для чего нужен метод super()?
Для вызова конструктора родительского класса при наследовании
В чем преимущества CSS-in-JS?
1) вся стилизация описана в отдельной сущностию. стили применяются или не применяются в зависимости от значений пропов, и эта зависимость описана при помощи JavaScript. Основной код компонента (функция Button) остаётся максимально простым.
2) генерация уникальных классов
3) подключение только необходимых стилей
4) позволяет хранить стили рядом с основным кодом компонента в одном файле jsx
