Некоторые методы: map(), filter(), sort() и reduce()... Все слышали о встроенных методах javascript, которые помогают нам писать надежный и чистый код, но многие люди не используют их, потому что не знают их точно.

Давайте посмотрим, как их использовать! Я стараюсь приводить простые примеры, чтобы уловить основную идею, стоящую за ними.

map() поможет вам создать новый массив на основе старого. Вам не нужно писать для циклов. Вы можете быть уверены, что функция map() не изменяет исходный объект, не бойтесь побочных эффектов.

let elements = [1, 2, 3, 4];
let increasedElements = elements.map(number => number + 1);

console.log(elements); // [1, 2, 3, 4]
console.log(increasedElements); // [2, 3, 4, 5]
console.log(increasedElements === elements); // false

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

let elements = [1, 5, 10, 15];
let filteredElements = elements.filter(number => number >= 10);
console.log(elements); // [1, 5, 10, 15]
console.log(filteredElements); // [10, 15]
console.log(filteredElements === elements); // false

Метод sort() обычно используется для сортировки элементов массива. Внимание! Метод sort() изменяет ваш объект! Использовать его по умолчанию без функции сравнения — не лучшая идея. Просто проверьте этот простой пример, когда вам нужно отсортировать массив чисел.

let numbers = [1, 5, 71, 7, 8];
numbers.sort();
console.log(numbers); // [1, 5, 7, 71, 8]

Результат неожиданный, поскольку порядок сортировки соответствует строковым кодовым точкам Unicode. Если вы хотите сравнить числа, вам нужно реализовать собственную функцию сравнения.

let numbers = [1, 5, 71, 7, 8];
numbers.sort( (a, b) => {
    if (a === b ) {
        return 0;
    }
    return (a < b ) ? -1 : 1;
});
console.log(numbers); // [1, 5, 7, 8, 71]

Метод reduce() может очень помочь, когда вы уменьшаете массив до одного значения. Вы можете прочитать подробную документацию на MDN об этом методе, который дает гораздо больше возможностей, чем мой глупый простой пример. Но это может показать величие этого метода.

let elements = [1, 2, 3];
let initialValue = 0;
let sum = elements.reduce( (total, element) => {
    console.log(total, element); // 0, 1 .. 1, 2 .. 3, 3 .. 6
    return total + element;
}, initialValue);
console.log(sum); // 6

Надеюсь, вам понравились краткие объяснения этих методов. Я собираюсь написать серию этих статей, чтобы исследовать прекрасную сложность/простоту Javascript.

Особая благодарность за все ресурсы, которые я использовал, чтобы узнать о лучших практиках javascript:

Свен Слутвег http://cryto.net/~joepie91/blog/2015/05/04/functional-programming-in-javascript-map-filter-reduce/
Разработчик Mozilla Сеть — https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array