Фрагмент кода JavaScript для распространенных проблем

Последнее обновление: 27 июля 2021 г.

У каждого языка программирования есть свои недостатки и особенности. Язык JavaScript и даже используемый фрагмент кода JavaScript не являются исключением. В последние годы скриптовый язык вел себя странно, но сегодня это один из наиболее широко используемых языков. По большей части потому, что это основной интерактивный язык интернет-браузеров.

Бывают случаи, когда мы, программисты и кодеры, сталкиваемся с повторяющимися простыми задачами, для которых нам нужны простые фрагменты кода. В этом блоге я расскажу о некоторых распространенных проблемах, которые можно легко решить с помощью сценариев ES6 как части некоторых фрагментов кода JavaScript.

Совет фрагмента кода JavaScript: используйте «let» вместо «var»

let похож на var , но имеет область видимости. let доступен только на уровне области блока, он объявлен и ему присвоено значение. var доступен на любом уровне относительно области блока, в которой он определен. В следующем примере переменная num1 определена внутри оператора If , поэтому она недоступна вне функции.

 если правда) {
  пусть число1 = 40;
}

пусть число2 = 20;

console.log(число2, число1);
console.log(число1);

Выход:
20
неопределенный

 пусть а = 25;
пусть б = 50;

если правда) {
  пусть а = 100;
  вар с = 5;
  console.log(а/с);
  console.log(б/с);
}

console.log(с);
console.log(а);

Выход:
20
10
5
25

Используйте 'const', когда значение переменной не изменяется

const присваивает переменной постоянное значение, которое нельзя изменить. Всякий раз, когда константная переменная определена, JavaScript ссылается на адрес значения переменной.

Функция стрелки фрагмента кода JavaScript, новый синтаксис для функций

Функции фрагментов кода JavaScript в ES6 были изменены на более простое выражение «() => {}».

 // Старый синтаксис
функция мой привет () {
  console.log("Привет, мир..!");
}

// Новый синтаксис
вар myHello = () => {
  console.log("Привет, мир..!");
}

Поначалу новый синтаксис может немного сбивать с толку. Есть две части синтаксиса.

 вар мой привет = ()

Первая часть фрагмента кода JavaScript объявляет переменную и присваивает ей функцию (). Он просто говорит, что переменная является функцией.

 => { // делаем что-нибудь } 

Вторая часть объявляет часть тела функции. Часть стрелки с фигурными скобками определяет часть тела.

Другие примеры, но с параметрами.

 пусть withParameters = (a, b) => {
  console.log(а+б);
}

с параметрами (10, 20);

Выход:
30

 пусть sumOfNum = (a, b = 10) => {
  вернуть а + б;
}

console.log (суммаЧисла (20);
console.log(sumOfNum(20,30);

Выход:
30
50

Новый цикл for…of…

for…of очень похож на for…in с небольшими изменениями. for…of выполняет итерацию по списку элементов, подобно массиву, и возвращает элементы (а не их индексы) один за другим. Обратите внимание, что переменная 'num' выводит каждый элемент массива, а не индекс.

 пусть числа = [5,6,7,8];

для (пусть количество чисел) {
  console.log(значение);
}

Выход:
5
6
7
8

 пусть ул = 'Артуро';

for (пусть char of str) {
  console.log(символ);
}

Выход:
А
р
т
ты
р
о

Разрушение присвоения переменной

Назначение переменных из массива по одной занимает много времени и является глупым. Просто используйте присваивание деструктора, чтобы сделать это быстрее и проще:

 let profile = ['Джон', 32, 'инженер'];

пусть [имя, возраст, работа] = профиль;

console.log(имя);

Выход:
Джон

Найти конкретный объект в массиве объектов

Одной из наиболее распространенных задач, которые вам нужно будет выполнить в JavaScript, является перебор массива объектов для поиска определенного объекта. Метод find является здесь простым решением. Вы просто подставляете критерии выбора, используя анонимную функцию в качестве аргумента, и все готово:

 пусть персонал = [
  {id: 0, имя: 'Нина'},
  {id: 1, имя: 'Кевин'},
  {id: 2, имя: 'Джон'}
]

пусть работник = staff.find(emp => emp.name === 'Джон');

console.log(клиент);

Выход:
{id: 2, имя: 'Джон'}

Перебор ключей и значений объекта

Наша структура данных может быть сложным объектом, содержащим различные пары ключ/значение. Итерация каждой пары может быть немного странной, но это просто, когда мы используем функцию Object.

После захвата ключей объекта мы можем одновременно перебирать ключи и значения. В следующем решении мы получаем доступ к каждой паре, используя переменные ключа и значения во время цикла.

 пусть myObject = {Пётр: 15, Джон: 20, Анна: 35};

Object.keys(myObject).forEach((ключ, значение) => {
  //...сделай что-нибудь
  console.log(ключ, значение);
});

Выход:
Петра 15
Джон 20
Энн 35

Фильтрация массива объектов на основе условия

Иногда у нас есть большой массив данных, которые мы хотим отфильтровать по определенному условию. Для этого мы можем использовать функцию фильтра. Следующее решение имеет массив путей к файлам. Некоторые файлы находятся в каталоге «data1», а другие — в каталоге «data2». Предположим, мы хотим отфильтровать только определенный каталог:

 пусть местоположение = [
  "файлы/данные1/файл",
  "файлы/данные1/файл2",
  "файлы/данные2/файл",
  "файлы/данные2/файл2"
];

let filter = location.filter(path => path.includes('data2'));

console.log(фильтр);

Выход:
[ 'файлы/каталог2/файл', 'файлы/каталог2/файл2' ]

Указав, что строка пути должна включать строку «data2», мы отфильтровываем все пути, которые не содержат «data2». Помните, что любая функция, которую вы передаете фильтру, должна возвращать значение true, чтобы элемент был включен в результат.

Назначение ключей объекту с таким же именем

Когда вы назначаете ключи объекту, если ключ имеет то же имя, что и переменная, содержащая значение, которое вы хотите назначить, вы можете вообще не присваивать значение. Это избавляет вас от необходимости повторяться, что мы все ненавидим делать. Взгляните на этот пример:

 пусть имя = 'Джон';
пусть возраст = 32;
пусть работа = 'инженер';

// вместо этого
let profile1 = {имя: имя, возраст: возраст, работа: работа};

// сделай это
let profile2 = {имя, возраст, должность};

console.log(профиль2);

Выход:
{имя: 'Джон', возраст: 32 года, профессия: 'инженер' }

Использование оператора расширения ES6 «…»

Оператор распространения позволяет буквально «растянуть» массив. Это можно использовать для преобразования массива в список аргументов или даже для объединения двух массивов. Вы также можете использовать его для формирования списка аргументов функции.

В первом примере мы показываем, как оператор распространения работает с массивом и превращает каждый элемент в отдельный элемент.

 пусть числа1 = [1,2,3,4,5];

console.log(...числа1);

Выход:
1 2 3 4 5

Во втором примере содержимое двух массивов объединяется путем создания нового временного массива, содержащего оба содержимого.

 пусть числа2 = [6,7,8,9,10];

пусть вместе = [...числа1, ...числа2];

console.log(... вместе);

Выход:
1 2 3 4 5 6 7 8 9 10

Последний пример иллюстрирует, как оператор расширения может превратить массив в список аргументов функции. Math.max возвращает наибольшее число в списке переданных ему аргументов. Один из этих аргументов был 10, что является самым высоким.

 пусть числа1 = [1,2,3,4,5];

пусть числа2 = [6,7,8,9,10];

пусть вместе = [...числа1, ...числа2];

console.log(Math.max(... вместе));

Выход:
10

Новые функции получения и установки

Геттеры и сеттеры — одна из полезных функций, представленных в ES6. Это удобно, если мы используем классы в JavaScript.

 класс PersonName {
  конструктор(имя) {
    это.имя = имя;
  }
  получить имя () {
    вернуть это.имя;
  }
  установить имя (имя) {
    это.имя = имя;
  }
}

let person = new PersonName("Джон Сноу");
console.log(человек.Имя); // (А)

person.Name = "Дэни"; // (Б)
console.log(человек.Имя);

Выход:
Джон Сноу
Дени

Мы видим, что внутри класса PersonName есть две функции со свойствами «get» и «set». Свойство «get» используется для получения значения переменной, а свойство «set» используется для установки значения переменной. Мы также видим, что функция get Name (A) вызывается без скобок, а функция set Name (B) вызывается без скобок, и это точно так же, как присваивание значения переменной.