Коллбек функции
Выбери формат для чтения
Загружаем конспект в формате docx
Это займет всего пару минут! А пока ты можешь прочитать работу в формате Word 👇
Коллбек функции
Это функция, которая должна будет выполнена, после того как другая функция завершила свое выполнение
Рассмотри для примера главный шаблон коллбек функции
function learnJS(lang, callback){// пример коллбек функции второй аргумент функция, которая выполнится после первой части
console.log(`Я учу: ${lang}`); // первая часть которая выполнится в начале
callback();// потом эта ФУНКЦИЯ
}
learnJS('JavaScript', function(){ // вывод функции(внутри которой вторая фнкция)
console.log('я прошел этот урок');
});
Теперь при попытки вызвать нашу перввую функцию, вы указываем первый аргумент, а в качестве второго аргумента, мы создаем новую функцию(в данном случае ананимную)
И в результате работы, выполнится вначале первый функция, а потом вторая.
Коллбеки применяются максимально часто.
Так же можно, передавать конкретно имя функции, которая ранее была создана.
function done(){
console.log('я прошел этот урок');
}
learnJS('JavaScript', done); //вывод с ранее созданной функциие без скобок
Обратите внимание, что когда передаем ранее созданную функцию, то передаем без скобок, а только ее имя! Это очень важный момент.
Обьекты. Деструктуризация обьектов и их методы.
Рассмотрим все на примере обьекта.
Для примера у нас будет такой обьект.
const options = {
name: 'test',
width: 1024,
height: 1024,
colors: {
border: 'black',
bg: 'red'
},
};
В этом обьекте так же будет вложенный обьект colors
Чтобы достучаться до какого из свойств, можно воспользоваться синтаксисом с квадратными скобками, или через точку.
console.log(options.name);
Для удаления какого-то свойства используется команда
delete options.name; // удаляет элемент обьекта
Для удаления многих обьектов можно создать цикл, который будет проверять и что-то удалять.
Для перебора всех свойств обьекта, используется специальный цикл, который называется for in
В нем говорится, что вы перебирае ключи, в обьекте options и внутри, как и в обычном цикле, задаем какието действия, которые будут выполняться каждый раз. Данный цикл будет работать столько раз, сколько свойств внутри нашего обьекта перебора.
for (let key in options){ //( цикл)перебора обьектов(ключи в значения)
console.log(`СВойство ${key} имеет значение ${options[key]}`)
}
Данный цикл переберет все свойства и покажет их значения. Но внутренний обьект оно не переберет, так как работает поверхностно. И покажет что есть свойство колорс но в виде обьекта.
Для того чтобы перебрать и вложенный обьект, необходимо делать дополнительный вложенный цикл и условия.
for (let key in options){ //( цикл)переборка обьекта(ключи в значения)
if(typeof(options[key]) === 'object'){ //если ключ обьекта являеется обьектом
for(let i in options[key]){ // то мы его тоже перебираем
console.log(`СВойство ${i} имеет значение ${options[key][i]}`); // и выводим свойства внутри внутреннего обьекта
}
}else{
console.log(`СВойство ${key} имеет значение ${options[key]}`); // переберает ключи(свойства) обьекта и показывает из значения
}
}
В данном примере, происходит проверка, что если ключ, будет являться обьектом, то мы запускаем дополнительный перебор. В противном случае, как и раньше запускаем дейсвтия как и ранее.
Все методы и свойства обьектов, можно найти в документации, и все запоминать не надо.
У обьектов, нету метода length, так что просто так узнать количество элементов внутри узнать не получится. Но можно создать простейший счетчик. Но у и тут есть свои подвохи.
let counter = 0;// переменная для счетчика
for (let key in options){ //( цикл)переборка обьекта(ключи в значения)
if(typeof(options[key]) === 'object'){ //если ключ обьекта являеется обьектом
for(let i in options[key]){ // то мы его тоже перебираем
console.log(`СВойство ${i} имеет значение ${options[key][i]}`); // и выводим свойства внутри внутреннего обьекта
counter++;
}
}else{
console.log(`СВойство ${key} имеет значение ${options[key]}`); // переберает ключи(свойства) обьекта и показывает из значения
counter++;
}
}
console.log(counter);
Но есть такой замечательный метод, который на основании обьекта создает массив из ключей и значений. И вот уже к данному методу, можно применить метод length
console.log(Object.keys(options).length); //метод который получает массив из всех свойств обьекта
Методы можно создавать самостоятельно. Мы помним что методы, это действия, который может совершать наш обьект. Для этого, внутри обьекта, необходимо создать ключ, значением которого будет функция. Как пример
const options = {
name: 'test',
width: 1024,
height: 1024,
colors: {
border: 'black',
bg: 'red'
},
makeTest: function(){ //метод внутри обьекта(условно)
console.log("TEst");
}
};
options.makeTest();//запуск нашего метода
Деструктуризация
Это метод, который позволяет разделить наш обьект на части
Например мы создаем переменную и помещаем в нее то, что хотим вытащить из нашего обьекта.
const{border, bg} = options.colors;//деструктуризация обьектов (вытаскиваем свойства) и присваиваем то откуда вытянули, чтобы потом проще было обращаться к свойствам
Мы говорим что хотим вытащить данные переменные из обьекта colors
Теперь мы можем просто, без всяких вложенностей обратится к переменным.
console.log(border);
Массивы и псевдомассивы
Наиболее часто используемы методы для работы с массивами. Для примера создадим простейший массив и будем работать с ним
const arr = [1, 22, 3, 15, 9];
arr.pop(); //метод удаляет последний элемент массива
arr.push(10); //метод добавляет элемент в конец
Так же есть методы которые работают с началом массива. Это методы shift и unshift. Но они используются крайне редко, так как начинаются проблемы с индексами так как массив не сдвигается, и является ссылочным типом.
Чтобы перебрать массив, есть много различных способов.
Первый способ, это перебор с помощью классического цикла for
for(let i = 0; i < arr.length; i++){
console.log(arr[i]);
}
Второй способ это перебор с помощью for of. value, это рандомное имя, которая условно обозначает каждый элемент массив, а вторйо аргумент это имя массива который мы перебираем.
for (let value of arr){ //метод перебирает массив так же как и выше через цикл
// в for of можно использовать брейк и континиу в отличии от фор ич
console.log(value);
}
И третий способ, это перебор с помощью foreach. Он используеться чаще всего. Тут в данный метод передается коллбек функция, которая применяется к каждому элементу массива. Может быть три аргумента. Первый отвечает за каждый элемент. Второй аргумент это его порядковый номер, третий аргумент, это сам массив который перебираем.
arr.forEach(function(item, i, arr){// переборка массива и применяет функцию к каждому элементу массива и функция имеет три аргумента(сам элемент, его номер по порядку и ссылка на массив к которому обращаемся)
console.log(`${i}: ${item} внутри массива ${arr}`);
});
Другие методы перебора, занимаются не только перебором, но и трасформацией элементов и массива. Но о них позже.
Методы сортировки
Допустим, у нас будет приходить строка, где все элементы, будут записаны через запятую. И метод сплит, на основании строки, может сформировать массив. Необходимо указать через какой разделитель идет запись
const str = prompt("", "");
const products = str.split(", "); // метод формирует массив на основании строки записанной через запятую пробел как мы указали
Так же есть обратная операция, которая из массива может сформировать строку.
console.log(products.join('; ')); // делает строку из массива через указанный раздеитель
Для сортировки используется метод sort
products.sort(); //сортировка массива как строку( по умолчанию по алфавиту)
С цифрами он работает не так как хотелось бы, цифры сортирует как строки, и первые будут все с 1 в начале, потом с 2 и так далее
Для сортировки чисел используется такой паттерн
const arr = [1, 22, 3, 15, 9];
arr.sort(compareNum); // а в метод сортировки передаем функцию
console.log(arr);
function compareNum(a, b){ //шаблон для сортировки цифр по возрастанию
return a -b;
}
