Сегодняшняя статья посвящена привязкам блоков в js, функциям, деструктуризации и классам.
- Функция со значениями параметров по умолчанию
constmultiIt = function (num1, num2) {
вернуть число1 * число2;
};
console.log(multiplyIt());
Вывод:
NaN
Здесь мы объявляем функцию с именем multiplyIt с двумя параметрами num1 и num2, которая будет возвращать значение умножения двух чисел при вызове функции. Но здесь мы видим, что вывод NaN не является числом. Что произошло в этом случае?
Здесь мы передаем два параметра при объявлении, но не передаем никакого значения при вызове этой функции. Этот оператор вызовет ошибку на некоторых языках, но в JavaScript это разрешено. В общем, функция будет умножать undefined на undefined.
В нашем случае мы можем получить значение путем инициализации при объявлении функции следующим образом:
constmultiIt = function (num1 = 3, num2 = 3) {
вернуть число1 * число2;
};
console.log(multiplyIt());
2. Функция со значениями параметров по умолчанию в некоторой степени
Если мы инициализируем значение параметра во время объявления, не нужно передавать аргумент при вызове функции. В противном случае мы должны передавать аргументы при вызове функции следующим образом:
constmultiIt = function (num1, num2) {
вернуть число1 * число2;
};
console.log(умножить(3, 3));
Другой пример:
constmultiIt = function (num1, num2 = 3) {
вернуть число1 * число2;
};
console.log(multiplyIt(3));
В этом случае мы инициализируем второй параметр, но не первый. когда мы передаем в функцию один аргумент, первый параметр получает это значение и возвращает результат умножения.
Что произойдет в этом случае?
constmultiIt = function (num1 = 3, num2) {
вернуть число1 * число2;
};
console.log(multiplyIt(3));
Он вернет NaN. Мы инициализируем первый параметр, а не второй. Когда мы передаем один аргумент в функцию, он будет использоваться для первого параметра, который был назначен ранее. Вот почему он не примет это значение и вернет NaN.
3. Параметры JavaScript Rest
Параметр Rest добавлен в ES2015 или ES6, что улучшило возможность обработки параметра. Это улучшенный способ обработки параметров функции, позволяющий нам более легко обрабатывать различные входные данные как параметры в функции.
Синтаксис:
функция имя_функции[...параметры]//... это оставшийся параметр
{
оператор;
Он хранит n параметров в виде массива.
функция fun(…values) {
пусть сумма = 1;
for (пусть i значений) {
сумма *= i;
}
сумма возврата
}
console.log(fun(1, 2)); //2
console.log(fun(1, 2, 3)); //6
console.log(fun(1, 2, 3, 4, 5)); //120
4.Оператор спреда
Оператор Spread позволяет итерируемому объекту расширяться в местах, где ожидается 0+ аргументов. Он в основном используется в массиве переменных, где ожидается более 1 значения. Оператор Spread аналогичен параметру Rest, но работает совершенно противоположно ему.
Синтаксис:
const имя_переменной1 = [...значение];
… — это оператор распространения, который будет нацелен на все значения в определенной переменной.
// метод concat() обычного массива
пусть массив1 = [1, 2, 3];
пусть массив2 = [4, 5];
массив1 = массив1.concat(массив2);
console.log(массив1); // [ 1, 2, 3, 4, 5 ]
// оператор распространения, выполняющий объединение
пусть массив1 = [1, 2, 3];
пусть массив2 = [4, 5];
массив1 = […массив1, …массив2];
console.log(массив1); // [ 1, 2, 3, 4, 5 ]
//Поиск максимальных значений с помощью оператора спреда
пусть массив1 = [1, 2, 3];
console.log(Math.max(…array1)); //3
5. Деструктуризация JavaScript (деструктуризация объектов)
Деструктуризация просто подразумевает разбиение сложной структуры на более простые части. В JavaScript эта сложная структура обычно представляет собой объект или массив. Это позволяет нам извлекать свойства из объекта или элементы из массива, несколько за раз. Давайте посмотрим на этот пример ниже:
постоянный человек = {
сначала: «Мусуми»,
последнее: "Бисвас",
страна: Бангладеш
город: «XYZ»,
};
const first = person.first;
const last = person.last;
console.log(первый); // Мусуми
console.log(последний); //Бисвас
Чтобы извлечь свойства объекта, нам нужно создать переменную из того, что находится внутри объекта или внутри массива. Сколько переменных мы создадим для извлечения каждого свойства объекта? Чтобы избежать этой проблемы, что мы могли бы сделать вместо создания нескольких переменных, мы деструктурируем их в одной строке, например:
постоянный человек = {
сначала: «Мусуми»,
последнее: "Бисвас",
страна: Бангладеш
город: «XYZ»,
};
const { первый, последний } = человек;
console.log(первый); // Мусуми
console.log(последний); //Бисвас
6. Деструктуризация JavaScript (деструктуризация массива)
Это в основном похоже на деструктурирование объекта. Просто мы будем использовать литерал массива вместо литерала объекта.
const person = ["Мусуми", "Джексон"];
const [первый, второй] = человек;
console.log(первый); // Мусуми
console.log(секунда); //Джексон
Если количество элементов в массиве больше, чем количество локальных переменных, переданных в литерал деструктурирующего массива, то лишние элементы не отображаются.
const person = ["Мусуми", "Джексон", "Том Хэнкс"];
const [первый, второй] = человек;
console.log(первый); // Мусуми
console.log(секунда); //Джексон
Но если количество локальных переменных, переданных в литерал деструктурирующего массива, превышает количество элементов в массиве, то каждой лишней локальной переменной будет присвоено значение undefined, если только вы не укажете значение по умолчанию. .
const person = ["Мусуми", "Джексон"];
const [первый, второй, третий] = человек;
console.log(первый); // Мусуми
console.log(секунда); //Джексон
console.log(третий); //не определено
В этом случае мы можем присвоить значение по умолчанию третьему следующим образом:
const [первый, второй, третий = «паппу»] = человек;
7. Что такое подъем в Javascript?
На этапе компиляции, всего за микросекунды до выполнения вашего кода, он сканируется на наличие объявлений функций и переменных. Все эти функции и объявления переменных добавляются в память внутри структуры данных JavaScript, которая называется Lexical Environment. Чтобы их можно было использовать еще до того, как они будут фактически объявлены в исходном коде.
Что такое лексическое окружение?
Лексическое окружение — это структура данных, содержащая сопоставление идентификатора и переменной. (здесь идентификатор относится к имени переменных/функций, а переменная является ссылкой на фактический объект [включая объект функции] или примитивное значение).
Давайте рассмотрим несколько примеров, чтобы понять подъем в случае var переменных.
console.log(a); //вывод «
undefined»
вар а = 3;
Мы ожидали 3, а получили undefined. Почему?
Помните, что JavaScript поднимает только объявления, а не инициализации. То есть во время компиляции JavaScript хранит в памяти только объявления функций и переменных, но не их назначения (значения).
Но почему undefined?
Когда движок JavaScript находит объявление переменной var на этапе компиляции, он добавит эту переменную в лексическую среду и инициализирует ее с помощью undefined, а позже во время выполнения, когда он достигнет строки, где в коде выполняется фактическое присвоение, он назначит это значение в переменную.
Вот почему мы получили undefined вместо 3.
8. Объявление уровня блокировки
Объявления на уровне блока — это те, которые объявляют переменные, недоступные за пределами заданной области блока. Блочные области, также называемые лексическими областями, создаются:
- Внутри функции
- Внутри блока (обозначается символами
{})
Есть три способа объявить переменные в JS:
var width = 100;
let height = 200;
const key = 'abc123';
Пример с переменной:
// Определяем переменную:
var width = 100;
// Вызываем переменную:
console.log(width); // Возвращает:
100// Переназначить переменную и вызвать ее снова:
var width = 200;
console.log(width); // Возвращает:
200
var переменные — это «область действия». Что это значит? Это означает, что они доступны только внутри функции, в которой они созданы, или, если они не созданы внутри функции, они имеют «глобальную область действия».
Если var определено внутри функции, а впоследствии мы попытаемся вызвать его вне функции, это не сработает.
function setWidth(){
var width = 100;
console.log(width);
}
console.log(width);// Возвращает:
Uncaught ReferenceError: ширина не определена
Так как var определен внутри функции, он недоступен вне функции.
9. Преимущества использования let и const
В то время как var имеет область действия функции, let и const имеют область действия блока.
var age = 100;
if (age › 12){
var dogYears = age * 7;
console.log(dogYears); //700
Поскольку var не имеет блочной области видимости, она возвращает результат 700. Но в случае с let и const все будет наоборот.
var age = 100;
if (age › 12){
let dogYears = age * 7;
console.log(dogYears); //ReferenceError: dogYears не определен
10. Наследование с производными классами
Классы упрощают реализацию наследования, используя знакомое ключевое слово extends для указания функции, от которой класс должен наследоваться. Прототипы настраиваются автоматически, и вы можете получить доступ к конструктору базового класса, вызвав метод super().
Пример:
class Animal {
конструктор(имя) {
this.name = имя;
speak() {
console.log(`${this.name} издает шум`);
}
}
класс Horse расширяет Animal {
конструктор(имя) {
супер(имя);
speak() {
console.log(`${this.name} whinnies.`)
}
}
let purebred = new Horse('Сухарь');
console.log(thoroughbred.speak()); // Сухарики ржут.
Класс Horse расширяет другой класс Animal, чтобы принимать его методы, а поскольку Horse также имеет свой собственный конструктор, ему необходимо вызвать super() перед обращением к this.
