Когда я начинаю изучать Javascript, меня вдохновляют новые функции и удобство их использования. Как человек, который начал свой путь программирования с Python, функции более высокого порядка в Javascript были для меня исключительно увлекательными. Однако всякий раз, когда я не использую его в течение нескольких дней, они всегда возвращаются и сбивают меня с толку.

Создает ли функция новый массив?

Влияет ли это на исходный массив?

Эти вопросы всегда заставляли меня сомневаться в себе.

Поэтому, чтобы избавить себя от необходимости каждый раз обращаться к MDN или stackoverflow, я решил сопоставить их здесь с точки зрения непрофессионала вместе с некоторыми примерами. Надеюсь, это тоже может помочь кому-то.

Вот 6, которые меня часто смущают:

  1. кусочек()
  2. соединение ()
  3. для каждого()
  4. карта()
  5. фильтр()
  6. уменьшать()

Давайте сначала определим массив.

let fruits = ['apple', 'banana', 'cherry', ' dragonfruit'];

срез()

Синтаксис: array.slice(начальный индекс, до индекса, но не включая)

  • Возвращает новый массив
  • Исходный массив не изменен
fruits.slice(0,2);
Output: ['apple', 'banana'];

Пример использования:

Напишите функцию titleCase, которая принимает строку и возвращает строку в заглавном регистре.

function titleCase(str) {  
let array = [];  
let words = str.split(' ');  
for (let i=0; i<words.length; i++) {    
  let firstLetter = words[i][0].toUpperCase();    
  let remainingLetters = words[i].slice(1).toLowerCase();    
  let word = firstLetter + remainingLetters;    
  array.push(word);  
  }  
  return array.join(' ');
}

сращивание()

Синтаксис: array.splice(позиция в индексе, количество удаляемых элементов, что добавить)

  • Не возвращает новый массив
  • Исходный массив изменен
fruits.splice(2, 1, 'pear');
Output: ['apple', 'banana', 'pear', ' dragonfruit'];

для каждого()

Синтаксис: array.forEach(function(parameter) { // function};

  • перебирает каждый элемент массива
  • Не возвращает новый массив
  • Исходный массив изменен
fruits.forEach(function(fruit) {
   if (fruit === 'apple') {
   fruits.shift();
   }
});
Output: [ 'banana', 'cherry', ' dragonfruit' ]

Пример использования:

Учитывая объект и ключ, «getAverageOfElementsAtProperty» возвращает среднее значение всех элементов в массиве, расположенных по данному ключу.

function getAverageOfElementsAtProperty(obj, key) {
  let sum = 0;
  if (Array.isArray(obj[key]) && obj[key].length >0) {
    obj[key].forEach(function(elem) {
      sum += elem;
    }) 
    return sum / obj[key].length;
  } 
  return 0;
}

карта()

Синтаксис: array.map(функция(параметр) {//функция});

  • «Преобразует» каждый элемент в массиве
  • Создает новый массив
  • Исходный массив не изменен
let transformedFruits = fruits.map(x => x +'s');
Output: [ 'apples', 'bananas', 'cherrys', ' dragonfruits' ]

Примеры использования:

Учитывая объект и ключ, «getSquaredElementsAtProperty» возвращает массив, содержащий все квадраты элементов массива, расположенных по данному ключу.

function getSquaredElementsAtProperty(obj, key) {
  if (Array.isArray(obj[key])) {
    return obj[key].map(function (elem) {
      return Math.pow(elem, 2);
    });
  }
  return [];
}

Для массива getLengthOfLongestElement возвращает длину самой длинной строки в данном массиве.

function getLengthOfLongestElement(arr) {
    if (arr.length > 0) { 
    let result = arr.map(x => x.length);
    let max = Math.max(...result);
    return max;
    }
    return 0;
}

фильтр()

Синтаксис: array.filter('условие');

  • Создает новый массив
  • Исходный массив не изменен
fruits.filter(fruit => fruit.length >= 7)
Output: ['dragonfruit']

Пример использования:

Учитывая объект и ключ, «getOddLengthWordsAtProperty» возвращает массив, содержащий все элементы слова нечетной длины массива, расположенные по данному ключу.

function getOddLengthWordsAtProperty(obj, key) {
  let arr = [];
  if (Array.isArray(obj[key])) {
    return obj[key].filter(function(array) {
      return array.length % 2 !=0;
    } )
  }
  return arr;
}

уменьшить()

Синтаксис: array.reduce(function(a,b) {//как вы хотите уменьшить});

  • Возвращает вывод одного значения
  • Исходный массив не изменен
fruits.reduce(function(a,b) {
return a.length >= b.length ? a : b;
})
Output: 'dragonfruit'

Пример использования:

Учитывая массив чисел, «computeProductOfAllElements» возвращает произведения всех элементов в данном массиве.

function computeProductOfAllElements(arr) {
  if (arr.length > 0) {
    return arr.reduce((a,b) => a*b);
  }
  return 0;
}

Последние мысли:

Это избранные! Полезно, когда вы начинаете изучать код, но всегда меня немного смущает. По мере того, как я узнаю больше, я, несомненно, буду встречать больше функций более высокого порядка, которые будут ставить меня в тупик, и я уверен, что мой список станет еще длиннее!