Крутые трюки в JavaScript

Крутые трюки в JavaScript

Мышление, входящее в это:

Приведенный ниже код следует парадигме декларативного программирования.

Мы сообщаем компьютеру что мы хотим, а не как это сделать.

1) Манипулирование списком объектов или списком списка (с использованием сокращения)

Мы должны использовать Reduce, когда работаем с массивом и хотим, чтобы он возвращал что-то еще. (Reduce может вести себя как любая другая функция массива Javascript, например карта, фильтр)

Приложения

Базовый пример: я хочу уменьшить массив и получить сумму массива

const arr = [1,2,3,4,5];
const total = arr.reduce((arr,item) => acc+=item,0);
//total = 15

Расширенный пример: удаление дубликатов из массива

Примечание: нам не нужен оператор return в методе сокращения.

var array = [1,1,3,3];
var uniques = array.reduce((unique, item) => unique.includes(item) ? unique: [...unique, item], []);
console.log(uniques); //[1,3]

Расширенный пример: мы хотим создать новый объект с downloadCounts в качестве ключа и массивом FileDownloaded.

Примечание:

• Обратите внимание, что мы удаляем FileDownloaded из ответа.
• Здесь мы формируем новый объект (:) с ключом downloadCounts и значением в виде массива.
• Мы можем вернуть объект прямо из них, нам не понадобится оператор return
• Это работает только в том случае, если мы заранее знаем ключ конечного объекта и работаем с одним и тем же объектом во всех итерациях.

response.reduce(
(acc, {FileDownloaded}) => ({
...acc,
downloadCounts: get(acc,['downloadCounts'], []).concat(FileDownloaded)
}) , {}
);

Расширенный пример: здесь мы пытаемся подсчитать количество пользователей в каждой возрастной группе)

Примечание:

• работает, когда ключ объекта динамический.
• Поскольку мы манипулируем внутренними значениями аккумулятора, нам нужно вернуть его обратно, чтобы обновить значение acc.

const users = [
  { id: 11, name: 'Adam', age: 23, group: 'editor' },
  { id: 47, name: 'John', age: 28, group: 'admin' },
  { id: 85, name: 'William', age: 34, group: 'editor' },
  { id: 97, name: 'Oliver', age: 28, group: 'admin' }
];
const groupByAge = users.reduce((acc, it) => {
  acc[it.age] = acc[it.age] + 1 || 1;
  return acc;
}, {});// groupByAge is {23: 1, 28: 2, 34: 1}

2) Управление списком объектов или списком списка (с использованием карты)

Мы должны использовать это, когда хотим изменить/преобразовать весь массив

Приложения

Простой пример: я хочу умножить все числа в массиве на 10.

const arr = [1,2,3,4,5];
const newArray = arr.map(i => i*10);
//newArray = [10,20,30,40,50]

3) Управление списком объектов (с использованием фильтра)

Следует ожидать, что он буквально проверяет список объектов списка и возвращает те, которые проходят проверку!

Приложения

Простой пример (Работа с одним списком): я хочу получить этих учащихся в возрасте == 23, поэтому мы отфильтровываем остальных учащихся.

const students = [
  { id: 11, name: 'Adam', age: 23, group: 'editor' },
  { id: 47, name: 'John', age: 28, group: 'admin' },
  { id: 85, name: 'William', age: 34, group: 'editor' },
  { id: 97, name: 'Oliver', age: 28, group: 'admin' }
];
var res = students.filter(it => it.age === 23);
//res = [ { id: 11, name: 'Adam', age: 23, group: 'editor' }]

Расширенный пример (Работа с двумя списками): я хочу выяснить, чего не хватает в списке, со ссылкой на основной список

контекст: выяснить, какие даты отсутствуют в текущем списке

var mainList = ["2020-8","2020-7"];
var currentList =  ["2020-7"];
var remainingDates = mainList.filter(value => !currentList.includes(value));
//remaininDates = ["2020-8"];

4) Сила оператора спреда

Spread расширяет повторяемый объект (массив, строку, карту, набор, узлы DOM) на отдельные элементы.

Приложения

Преобразование строки в символы

const name = "abc";
const chars = [...name];
//chars = ['a','b','c']

Удалить дубликаты из массива

const num = [1,3,3,1,1];
const uniqueNum = [...new Set(num)];
//uniqueNum = [1,3]

Использовать для слияния списка/объекта

• По-старому: конкат

const fruits = ['🍈', '🍉', '🍋', '🍌'];
const vegetables = ['🍅', '🍆', '🥒'];
const fruitsAndVeg = [...fruits, ...vegetables];
//['🍈', '🍉', '🍋', '🍌','🍅', '🍆', '🥒']
const user1 = {name : "John", age : 20 };
const user2 = {name : "Ram", salary: '20K' };
const userCopy = {...user1, ...user2};
// userCopy {name : "Ram", age :20 , salary : '20K'};

Передача аргументов

const sum = (a,b) => a+b;
const num = [1,2];
sum(...num); // 3

Деструктурирование списка/объекта (используйте много в передаче реактивных реквизитов)

const [melon, ...fruits ] = ['🍉', '🍋', '🍌', '🍊'];
melon; //🍉 
fruits; // [ '🍋', '🍌', '🍊']
const user = {name : "Ram", age: 20, salary: '20K', job :"Tester"};
const { name, age, ...details } = user;
name; // Ram
age; // 20
details; // {salary: '20K', job : 'Tester'};

5) Сортировка в Javascript (компаратор)

Здесь мы пытаемся отсортировать объект responseJson по его ключу yearmonth в порядке возрастания.

responseJson.sort((a, b) => {
a = a.yearmonth.split("-");
b = b.yearmonth.split("-");
return new Date(a[0], a[1], 1) - new Date(b[0], b[1], 1);
});

6) Функция экспорта и импорта (деструктуризация)

//file 1
const add = (a,b) => a+b
const sub = (a,b) => a-b
exports.add = add;
exports.sub = sub;
//file 2
const {add, sub} = require('./file1')
add(1,1) //2

7) Деструктуризация объекта (переименование ключа объекта)

Извлечение авторизации из объекта заголовка

const header = {Authorization: "!@#!@#"}
const {Authorization} = header
console.log(Authorization) //!@#!@#

Переименование имени переменной авторизации

const {Authorization: authorizationHeader} = header
console.log(authorizationHeader) //!@#!@#

Деконструкция вложенного объекта

• Обратите внимание, что нам нужно {} , иначе будет создан новый объект, т.е.

const header = {authorizer: {claims: {token_use: 'access'}}}
//new object created
const {authorizer:claims} = header
console.log(claims); //{ claims: { token_use: 'access' } }
const {authorizer:{claims}} = header
console.log(claims); //{ token_use: 'access' } 
const {authorizer: {claims: {token_use} } } = header;
console.log(token_use); //access

Проверить правильность в реквизитах (React)

const handleChange = ({ target: { name, value: inputValue } = {} } ={})
const  { authorizer:{claims} = {} } = requestContext || {};