Когда я начинаю изучать Javascript, меня вдохновляют новые функции и удобство их использования. Как человек, который начал свой путь программирования с Python, функции более высокого порядка в Javascript были для меня исключительно увлекательными. Однако всякий раз, когда я не использую его в течение нескольких дней, они всегда возвращаются и сбивают меня с толку.
Создает ли функция новый массив?
Влияет ли это на исходный массив?
Эти вопросы всегда заставляли меня сомневаться в себе.
Поэтому, чтобы избавить себя от необходимости каждый раз обращаться к MDN или stackoverflow, я решил сопоставить их здесь с точки зрения непрофессионала вместе с некоторыми примерами. Надеюсь, это тоже может помочь кому-то.
Вот 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; }
Последние мысли:
Это избранные! Полезно, когда вы начинаете изучать код, но всегда меня немного смущает. По мере того, как я узнаю больше, я, несомненно, буду встречать больше функций более высокого порядка, которые будут ставить меня в тупик, и я уверен, что мой список станет еще длиннее!