Cтандарты языка ECMAScript 2019 + Важные правила React and Redux

index.js

const defaultOpts = {
  host: "local",
  name: "user",
  user: "admin"
};
const opts = {
  host: "local",
  name: "Dick",
  user: "Dick",
  password: "1234"
};

const port = 8080;
// ...defaultOpts, ...opts - ЭТО SPREAD ОПЕРАТОР ДЛЯ ОБЪЕКТА

const objSpread = { ...defaultOpts, ...opts, port, connectObj() {} };

console.log(objSpread); //{host: "local", name: "Dick", user: "Dick", password: "1234", port: 8080, …}
____________________________________________________________________________________________________________________________

//Object.assign для ОБЪЕКТА

const objRes = Object.assign({}, defaultOpts, opts); // Object.assign позволяет копировать свойства из одного объекта в другой
//+shallowCopy для Object

console.log(objRes); // {host: "local", name: "Dick", user: "Dick", password: "1234"}
____________________________________________________________________________________________________________________________

// Object.assign позволяет создавать shallowCopy объекта
const person3 = {
  f: "A",
  l: "Z",
  n: 7
};

console.log(person3); //{f: "A", l: "Z", n: 7}

const shallowCopyObject = Object.assign({}, person3);
console.log(shallowCopyObject); //{f: "A", l: "Z", n: 7}
____________________________________________________________________________________________________________________________

// Деструктуризация МАССИВА  + rest оператор (...fibb)
const fib = [  1,  1,  2,  3,  5,  8,  13,  21,  34,  55,  89,  144,  233,  377,  610,  987,  1597,  2584,  4181,  6765,  10946,
  17711 ];
const [, a, b, c, , f, , , , ...fibb] = fib; // Деструктуризация  + rest оператор (...fibb)
console.log(a, b, c, f); // 1 2 3 8
console.log(fibb); // [55, 89, 144, 233, 377, 610, 987, 1597, 2584, 4181, 6765, 10946, 17711]
____________________________________________________________________________________________________________________________

//Значения по умолчанию для ОБЪЕКТА
function connect({ host = "localhost", port = 123, user = "guest" } = {}) {
  console.log(`Данные по дефолту: ${user}, ${port},${host} `);
}

connect({ host: "local" }); //Данные по дефолту: guest, 123,local 
____________________________________________________________________________________________________________________________

// ДЕСТРУКТУРИЗАЦИЯ ОБЪЕКТА
const person1 = {
  firstName: "Mark",
  lastName: "Twain",
  age: 24
};

const { firstName, lastName } = person1; // создали  2 const
console.log(firstName); //Mark 
const person2 = {
  name: {
    first: "Mark",
    last: "Twain"
  },
  age: 24
};

const {
  name: { first: firstName1, last: lastName2 }
} = person2; // создали  2 const
console.log(firstName1, lastName2); //Mark Twain
____________________________________________________________________________________________________________________________

//spread operator and shallowCopy МАССИВ
const arrSpread1 = ["1", "2", "3", "5"];
const arrSpread2 = ["1", "9", "8", "5"];

const resSpread = Math.max(...arrSpread1, ...arrSpread2); //ищем максимальное число
console.log(resSpread); //9

const shallowCopy1 = [...arrSpread1]; //создаем shallow копию //["1", "2", "3", "5"]
const shallowCopy2 = [...arrSpread1, ...arrSpread2]; //создаем shallow копию из 2-х массивов //["1", "2", "3", "5", "1", "9", "8", "5"]

console.log(shallowCopy1, shallowCopy2);
____________________________________________________________________________________________________________________________

// rest параметры -группирует в массив элементы , которые не были присвоены в обычные параметры 
//обязан идти последним
//только один rest-параметр
max(1, 2, 5, 45);
max(1, 2, 5, 8, 6, 6, 4);
max();

function max(...numbers) {
  const res1 = numbers
    .map(num1 => parseInt(num1))
    .filter(num => num % 2)
    .reduce((max, value) => Math.max(max, value), 0);
  console.log(res1); // max(1, 2, 5, 45): 45   max(1, 2, 5, 8, 6, 6, 4): 5 max():0
____________________________________________________________________________________________________________________________

// Значения по умолчанию
function fetchOrders(count, start = 10) {
  console.log(
    "Здесть значение, которое мы задали:",
    count,
    " А это параметры по умолчанию:",
    start
  );
}
fetchOrders(1); //Здесть значение, которое мы задали: 1  А это параметры по умолчанию: 10 
  ____________________________________________________________________________________________________________________________
 
  // .map.filter.reduce МАССИВЫ
  // преобразуем массив в числа, выбираем только нечетные числа, выбираем максимальное
  
  const arr = ["1", "2", "3", "5"];

const res = arr
  .map(el => parseInt(el)) //преобразуем массив в числа
  .filter(num => num % 2) //выбираем только нечетные числа
  .reduce((max, value) => Math.max(max, value), 0); //выбираем максимальное
console.log(res); // 5
  
  ____________________________________________________________________________________________________________________________
  // state and setState
  // setState если наше новое состояние, зависит от предыдущего т.е. основано на текущем (счетчик, false true)
  ОБЯЗАТЕЛЬНО!!! Передаем другую функцию в setState c готовым state пример:
  labelClick = () => {
    this.setState((state) => {
      return { done: !state.done };
    });
  };

  Альтернатива
  labelClick = () => {
    this.setState(({ done }) => {
      return { done: !done };
    });
  };
  
  // Если новое состояние не зависит от текущего
    changeInputMessage = e => {
    this.setState({
      messageInput: e.target.value
    });
      
    ____________________________________________________________________________________________________________________________
    //state and setState
    // Напрямую менять  state НЕЛЬЗЯ!!!
    // Можно скопировать в новый объект newItem и вернуть
    
 toggleProperty(arr, id, propName) {
    const idx = arr.findIndex(el => el.id === id);

    const oldItem = arr[idx];
    const newItem = { ...oldItem, [propName]: !oldItem[propName] };

    return [...arr.slice(0, idx), newItem, ...arr.slice(idx + 1)];
  }
Примеры с добавлением и удалением элемента:
      maxId = 100;

  state = {
    todoData: [
      this.createTodoItem('Попить кофе'),
      this.createTodoItem('Сделать зарядку'),
      this.createTodoItem('Написать 200 строк кода')
    ]
  };

  createTodoItem(label) {
    return {
      label,
      important: false,
      done: false,
      id: this.maxId++
    };
  }

  deleteItem = id => {
    this.setState(({ todoData }) => {
      const idx = todoData.findIndex(el => el.id === id); // idx  это индекс элемента который мы будем удалять,
      // ищем findIndex(el => el.id === id) индекс el с id который мы получили

      const newArray = [...todoData.slice(0, idx), ...todoData.slice(idx + 1)];

      return {
        todoData: newArray
      };
    });
  };

  addItem = text => {
    const newItem = this.createTodoItem(text);

    this.setState(({ todoData }) => {
      const newArr = [...todoData, newItem];

      return {
        todoData: newArr
      };
    });
  };
      
     По Лаврику 
     
      state = {
    products: [
      { price: 1000, rest: 10, current: 1, like: false },
      { price: 2000, rest: 5, current: 2, like: true }
    ]
  }

 onChange(id, value) {
    const products = [...this.state.products];
    const product = Object.assign({}, this.state.products[id]);
    product.current = value;
    products[id] = product;
    this.setState({ products });
  }
const products = [...this.state.products];// новый масив  products, все объекты скопированы по ссылке     
const product = Object.assign({}, this.state.products[id]); // новый объект копия 1 объекта по id из state
product.current = value; // product.current присваем значение из value
products[ind] = product; // products[ind] присваем product
      
  ____________________________________________________________________________________________________________________________
    Принципы ООП
 // Инкапсуляция
  Каждый объект отвечает за конкретную функциональность Быстрая организация иерархической управляемости Что делать важнее как
  // Полиморфизм
  Объекты могут представлять одинаковый интерфейс но внутрення реализация интерфейса будет разной
  // Наследование
  Объекты могут наследовать методы других объектов
  
  Принципы ФУНКЦИОНАЛЬНОГО программирования
  // Неизменяемость
  Вместо изменения структур данных создаются изменяемые копии этих структур используемые взамен оригинала
   // Чистые функции
  Аргументы переданные в  ф-ию неизменяемы + не устанавливаются значения  глобальных переменных нет никаких побочных эффектов
  
   ____________________________________________________________________________________________________________________________
   
   THIS - это объект в контексте котрого вызывается функция Определяется во время вызова ф-ии и при создании неизвестен
   // THIS позволяет решить какой объект должен быть фокусным при вызове ф-ии и метода
   // 1)Неявное связывание метод объекта - Если ф-ия запущена как метод объекта то this будет ссылка на этот объект 
   // 2) Стрелочные функции this не имеют своего от родителя
   // 3) Если вызов простейший say() this становится равным глобальному объекту
   // 4)
         APPLY вызов функции с переменным количеством аргументов и с подменой контекста(аргументы ф-ии и область видимости)
         CALL  вызов функции с подменой контекста - this внутри функции.
         BIND создаёт "обёртку" над функцией, которая подменяет контекст этой функции bind не вызывает функцию
         а лишь возвращает "обёртку" + может подменять аргументы ф-ии
    // Прибивают  this к нужному объекту
    ____________________________________________________________________________________________________________________________
    Замыкание это способ получения доступа и управления внешними переменными из функции.
    Другими словами, функция, определённая в замыкании, «запоминает» окружение, в котором она была создана.
    function numberGenerator() {
  // Локальная «свободная» переменная, которая доступна только в замыкании
  var num = 1;
  function checkNumber() {
    console.log(num);
  }
  num++;
  return checkNumber;
}

var number = numberGenerator();
number(); // 2
      
      // КОЛБЭК
    Простыми словами: коллбэк — это функция, которая должна быть выполнена после того, как другая функция завершила выполнение 
    (отсюда и название: callback – функция обратного вызова).
     Чуть сложнее: В JavaScript функции — это объекты. Поэтому функции могут принимать другие функции в качестве аргументов,
  а также функции могут возвращать функции в качестве результата. Функции, которые это умеют, называются функциями высшего порядка.
  А любая функция, которая передается как аргумент, называется callback-функцией. 
  
  T.get('search/tweets', params, function(err, data, response) {
  if(!err){
    // Происходит какая-то магия
  } else {
    console.log(err);
  }
})
   //    В запросе три параметра: 'search/tweets' – это адрес (роут) запроса, params – наши параметры поиска
  //    и в конце передается анонимная функция-callback.
  ____________________________________________________________________________________________________________________________