Операторы JavaScript ES6

[IgorKulishov]

Переходим к новому синтаксису JavaScript ES6

В данном упражнении мы изучим новое выражение / синтаксис функции, и операторы / методы filter, map, reduce с массивами.

Прежде всего хочу отметить что я очень рад тому что общество JavaScript начало писать документацию на русском. Там множество подразделов / ссылок и даже уроков на рус языке: https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference

1) Arrow function (стрелочная функции) - новый синтаксис JavaScript ES6 В новом синтаксисе функции вместо слова function используется открывающаяся и закрывающаяся скобки, знак равно и знак больше: вместо function() {..} используется ()=> {..} Документация: https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Пример:

// старый синтаксис:
function() {
  console.log(123);
}

// новый синтаксис:
()=> {
  console.log(123);
}

Аргумент добавляется внутрь скобок:

let myFoo = (data) => {
  console.log(data);
}
myFoo(123);

2) filter .filter встроенный метод массива (array), который отфильтровывает исходный массив и возвращает новый массив со значениями соответствующими условиям. Пример:

let newArray = [1,2,3,4,5].filter( function(arrayElement) {

  return arrayElement > 3;

});

Новый синтаксис:

let newArray1 = [1,2,3,4,5].filter( (arrayElement) => {
   return arrayElement > 3;
});
console.log(newArray1);

Как ты видешь массив имеет встроенный метод filer внутрь которого помещается callback ф-ция с одном аргументом. Аргумент представляет очередной элемент массива. Метод filter пробежит по всем элементам и возвратит / оставит только те элементы которые соответствуют условию после слова return.

3) map .map встроеный метод массива (array), который модифицирует исходный массив и возвращает новый модифицированный массив. Метод map напоминает по своему принципу цикличный оператор for( ) {..}. Точно так же как и в предыдущем примере (.filter) внутрь помещается ф-ция с одном аргуменом, предсталяющим очередной элемент массива (подобно i внутри оператора for( ) {..} ). Пример:

let newArray2 = [1,2,3,4,5].map( function(arrayElement) {

  return arrayElement * 3;

});
console.log(newArray2);

Новый синтаксис:

let newArray3 = [1,2,3,4,5].map( (arrayElement) => {
   return arrayElement * 5;
});
console.log(newArray3);

4) reducer Редьюсер - встроенный метод массива (array), который сумирует значения массива и возвращает результат.. Ссылка на документ

const array4 = [1, 2, 3, 4].reduce( function(accumulator, currentValue ) {
    return accumulator + currentValue;
}, 100 );

В данном примере reduce имеет два параметра: А) функция с другими параметрами: function(accumulator, currentValue) { ... } а) первый аргумент accumulator - съаккумулированое значение всех эллементов (этот аргумент суммурует и хранит в себе сумму всех предыдущих элементов) б) второй аргумент currentValue - значение текущего аргумента (следующего элемента в массиве) Б) начальное значение с которого начинается суммирование элементов (по умолчанию 0)

[g1er]

Мда... если честно, новый синтаксис меня не особо порадовал. Без контрольного слова function легче запутаться. Особенно если это новичок или еще не окрепший спец. Больше похоже на какой-то нелепый смайл ()=>... Даже не верится, что тако решение приняли взрослые люди. Вопрос: а как мне теперь дать название функции? Раньше было function funcName(){...}, а теперь просто funcName()=>{...} -? С методом filter понятно, типа поиск по массиву. Задаешь параметры и он тебе отсеивает по ним. С map тоже понятно, переборщик массивов, типа for. Есть ли у него какие то преимущества перед for или они идентичны и взаимозаменяемы? С reduce не совсем понял. Цифра в скобках, которая стоит после функции (100) - это цифра, с которой начинается сложение (100 + 1+ 2+ 3+ 4). Как действует программа? Берет 100, прибавляет к currentValue, которое 1, сохраняет в accumulator, потом берет оттуда это значение и складывает со следующей currentValue, т.е. с цифрой 2, опять сохраняет полученное значение, снова складывает со следующей currentValue, т.е. с цифрой 3, и т.д., пока все аргументы не кончатся? Если это так. тогда это тоже напоминает цикл с условием х =+ "начальное значение". А если я ошибаюсь, то поясни, плиз

[IgorKulishov]

Обозначение ф-ции это дело привычки - я тоже поначалу пару недель привыкал (да и всегда можно подсмотреть если что).

С названиями немного по другому:

let noArgFu = () => { 
  console.log(123); 
}
noArgFu();

let hasArgFu = (data) => { 
  console.log(data); 
}
hasArgFu(12345);

Я напишу больше примеров и финтов с ф-циями (их не много, но есть удобные финты), но вначале прошу тебя попрактиковаться с примерами и написать мне вопросы.

[IgorKulishov]

Да, совершенно верно, ты разобрался.

С reduce не совсем понял. Цифра в скобках, которая стоит после функции (100) - это цифра, с которой начинается сложение (100 + 1+ 2+ 3+ 4). Как действует программа? Берет 100, прибавляет к currentValue, которое 1, сохраняет в accumulator, потом берет оттуда это значение и складывает со следующей currentValue, т.е. с цифрой 2, опять сохраняет полученное значение, снова складывает со следующей currentValue, т.е. с цифрой 3, и т.д., пока все аргументы не кончатся? Если это так. тогда это тоже напоминает цикл с условием х =+ "начальное значение". А если я ошибаюсь, то поясни, плиз

Да именно так, со 100 начинается суммирование, на месте 100 может быть любое значение с которого мы хотим начать суммирование. Другой пример на reduce:

let startNum = 100;
// массив объектов
let numArray = [
  { "num": 1 } , 
  { "num": 2 } ,
  { "num": 3 } 
                   ];

let totalAmount = numArray.reduce( ( amount, currentValue ) => { 
  return amount + currentValue.num ;
} , startNum);

[IgorKulishov]

Приведи мне по одному примеру на .map, .filter, .reduce.

[IgorKulishov]

Когда ты имеешь дело с массивами лучше всегда пользоваться встроенными методами типа .map, .filter, .reduce. Использование методов при работе с объектами и массивами - это правило хорошего тона и наиболее распространенная практика. В то же время ты можешь использовать for когда имеешь дело не с массивами или объектами, а цикличностью действий. Добавлю что сейчас много удобных встроенных в JS методов, но есть так же сторонние библиотеки с большим набором самого разнообразного функционала. Самыми распространнеными библиотеками являются lodash и underscore. Советую зайти на ссылки и уделить внимание по 1 мин и убедиться что там так же есть map, reduce, filter (дело в том что эти методы как наиболее популярные были недавно заимствованы в JS и до этого приходилось загружать underscore или lodash).

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

[IgorKulishov]

Ссылки для включения в index.html различных библиотек тут: https://cdnjs.com/libraries/

К примеру для lodash: https://cdnjs.com/libraries/underscore.js/

[g1er]

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

Примеры: 1) let newArr0 = [1, "John Doe", "234", false, true, 442].filter((elem1) => { return elem1 == true; });

2) let newArr1 = ["dad", "mom", "wife", "child", "bros"].map((elem1) => { return "I love " + elem1; });

3) let newArr2 = ["dad, ", "mom, ", "wife, ", "child, ", "bros"].reduce((elem1, elem2) => { return elem1 + elem2; }, "My family members are ");

[IgorKulishov]

Отличные примеры! 👍