Обновление: спасибо за вашу поддержку. Недавно я бросил сводку данных, чтобы облегчить всем чтение системы. В будущем будет больше контента и больше оптимизации.Нажмите здесь, чтобы просмотреть
------ Далее идет текст ------
введение
Этот выпуск начинается с введения в функции высшего порядка в JavaScript, где функции — это объекты особого типа, объекты Function. Так что же такое функции высшего порядка? В этом разделе введение будет расширено за счет определения функций высшего порядка.
Функции высшего порядка
Функция высшего порядка в английском языке называется функцией высшего порядка.Ее определение очень простое.Это функция, которая удовлетворяет хотя бы одному из следующих условий:
- принимает одну или несколько функций в качестве входных данных
- вывести функцию
То есть функции более высокого порядка — это функции, которые работают с другими функциями, которые могут быть переданы в качестве аргументов.илиОни возвращаются. Проще говоря, функция более высокого порядка - это функция передачи, полученная в качестве параметраилиФункция, которая выводит функцию как возвращаемое значение.
функция передана как параметр
В язык JavaScript встроены некоторые функции более высокого порядка, такие как Array.prototype.map, Array.prototype.filter и Array.prototype.reduce, которые принимают функцию в качестве параметра и применяют эту функцию к каждому элементу таблицы. список. Давайте посмотрим на решения, которые их используют, а не на то, чтобы не использовать функции более высокого порядка.
Array.prototype.map
map()метод создает новый массив, в результате чего каждый элемент массива вызывается спредоставленная функцияПосле возврата результата,Исходный массив не изменится. Функция обратного вызова, переданная в карту (callback) принимает три параметра, а именно: currentValue, index (необязательно), array (необязательно), за исключениемcallbackтакже может принимать это значение (необязательно), которое используется для выполненияcallbackиспользуемая функцияthisстоимость.
В качестве простого примера для облегчения понимания теперь есть массив[1, 2, 3, 4], мы хотим сгенерировать новый массив, каждый элемент которого в два раза больше предыдущего массива, то у нас есть следующие два способа сделать это с функциями высшего порядка и без них.
Не используйте функции высшего порядка
// 木易杨
const arr1 = [1, 2, 3, 4];
const arr2 = [];
for (let i = 0; i < arr1.length; i++) {
arr2.push( arr1[i] * 2);
}
console.log( arr2 );
// [2, 4, 6, 8]
console.log( arr1 );
// [1, 2, 3, 4]
Используйте функции высшего порядка
// 木易杨
const arr1 = [1, 2, 3, 4];
const arr2 = arr1.map(item => item * 2);
console.log( arr2 );
// [2, 4, 6, 8]
console.log( arr1 );
// [1, 2, 3, 4]
Array.prototype.filter
filter()метод создает новый массив, содержащий все элементы теста, реализованного предоставленной функцией,Исходный массив не меняется. Он принимает те же аргументы, что и карта, а возвращаемое значение — новый массив, состоящий из всех элементов, прошедших тест, или пустой массив, если ни один из элементов массива не прошел тест.
Возьмем пример, теперь есть массив[1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4], мы хотим сгенерировать новый массив, не требующий дублирования содержимого, то есть дедупликации.
Не используйте функции высшего порядка
const arr1 = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
const arr2 = [];
for (let i = 0; i < arr1.length; i++) {
if (arr1.indexOf( arr1[i] ) === i) {
arr2.push( arr1[i] );
}
}
console.log( arr2 );
// [1, 2, 3, 5, 4]
console.log( arr1 );
// [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]
Используйте функции высшего порядка
const arr1 = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
const arr2 = arr1.filter( (element, index, self) => {
return self.indexOf( element ) === index;
});
console.log( arr2 );
// [1, 2, 3, 5, 4]
console.log( arr1 );
// [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]
Array.prototype.reduce
reduce()метод выполняет один из предоставленныхreducerФункция (выполняемая в порядке возрастания), которая объединяет свои результаты в одно возвращаемое значение. Функция обратного вызова, переданная для уменьшения (callback) принимает четыре параметра: аккумулятор, текущее значение, текущий индекс (необязательно), массив (необязательно), за исключениемcallbackВ дополнение к принятию начального значения значение initialValue (необязательно).
-
Если начальное значение не указано, первый вызов
callbackфункция, аккумулятор использует первый элемент исходного массива, а currentValue — второй элемент массива. Вызов сокращения для пустого массива без начального значения вызовет ошибку. -
Если указано initialValue, оно будет вызываться как первое
callbackЗначение первого параметра функции, то есть аккумулятора, currentValue использует первый элемент исходного массива.
Давайте представим простой пример, теперь есть массив[0, 1, 2, 3, 4], нужно посчитать сумму элементов массива, требования относительно простые, давайте посмотрим на реализацию кода.
Не используйте функции высшего порядка
const arr = [0, 1, 2, 3, 4];
let sum = 0;
for (let i = 0; i < arr.length; i++) {
sum += arr[i];
}
console.log( sum );
// 10
console.log( arr );
// [0, 1, 2, 3, 4]
Используйте функции высшего порядка
нет значения начального значения
const arr = [0, 1, 2, 3, 4];
let sum = arr.reduce((accumulator, currentValue, currentIndex, array) => {
return accumulator + currentValue;
});
console.log( sum );
// 10
console.log( arr );
// [0, 1, 2, 3, 4]
Вышеупомянутый случай без initialValue Процесс выполнения кода выглядит следующим образом, и обратный вызов вызывается четыре раза в общей сложности.
| callback | accumulator | currentValue | currentIndex | array | return value |
|---|---|---|---|---|---|
| first call | 0 | 1 | 1 | [0, 1, 2, 3, 4] | 1 |
| second call | 1 | 2 | 2 | [0, 1, 2, 3, 4] | 3 |
| third call | 3 | 3 | 3 | [0, 1, 2, 3, 4] | 6 |
| fourth call | 6 | 4 | 4 | [0, 1, 2, 3, 4] | 10 |
имеет значение initialValue
Давайте рассмотрим случай с initialValue Предположим, что значение initialValue равно 10. Давайте посмотрим на код.
const arr = [0, 1, 2, 3, 4];
let sum = arr.reduce((accumulator, currentValue, currentIndex, array) => {
return accumulator + currentValue;
}, 10);
console.log( sum );
// 20
console.log( arr );
// [0, 1, 2, 3, 4]
Процесс выполнения кода выглядит следующим образом, всего callback вызывается пять раз.
| callback | accumulator | currentValue | currentIndex | array | return value |
|---|---|---|---|---|---|
| first call | 10 | 0 | 0 | [0, 1, 2, 3, 4] | 10 |
| second call | 10 | 1 | 1 | [0, 1, 2, 3, 4] | 11 |
| third call | 11 | 2 | 2 | [0, 1, 2, 3, 4] | 13 |
| fourth call | 13 | 3 | 3 | [0, 1, 2, 3, 4] | 16 |
| fifth call | 16 | 4 | 4 | [0, 1, 2, 3, 4] | 20 |
вывод функции как возвращаемое значение
Это легко понять, то есть, чтобы вернуть функцию, давайте рассмотрим два примера для углубления понимания.
функция isType
Мы знаем, что при оценке типа мы можем пройтиObject.prototype.toString.callЧтобы получить строку, возвращаемую соответствующим объектом, например:
let isString = obj => Object.prototype.toString.call( obj ) === '[object String]';
let isArray = obj => Object.prototype.toString.call( obj ) === '[object Array]';
let isNumber = obj => Object.prototype.toString.call( obj ) === '[object Number]';
Можно обнаружить, что приведенные выше три строки кода содержат много повторяющегося кода. Требуется только извлечь конкретный тип, чтобы инкапсулировать его в метод оценки типа. Код выглядит следующим образом.
let isType = type => obj => {
return Object.prototype.toString.call( obj ) === '[object ' + type + ']';
}
isType('String')('123'); // true
isType('Array')([1, 2, 3]); // true
isType('Number')(123); // true
Это функция более высокого порядка, потому что функция isType будетobj => { ... }Эта функция выводится как возвращаемое значение.
добавить функцию
Давайте рассмотрим распространенный вопрос на собеседовании, используя JS для реализации функции бесконечного накопления.add, пример следующий:
add(1); // 1
add(1)(2); // 3
add(1)(2)(3)； // 6
add(1)(2)(3)(4)； // 10
// 以此类推
Мы видим, что структура чем-то похожа на приведенный выше код, каквыходная функция как возвращаемое значение, а затем получить новые параметры и выполнить расчет.
Мы знаем, что функция печати вызывается автоматически, когдаtoString()метод, функцияadd(a)возвращать закрытиеsum(b), функцияsum()кумулятивный расчетa = a + b, просто нужно переписатьsum.toString()Переменная возврата методаaВот и все.
function add(a) {
function sum(b) { // 使用闭包
a = a + b; // 累加
return sum;
}
sum.toString = function() { // 重写toString()方法
return a;
}
return sum; // 返回一个函数
}
add(1); // 1
add(1)(2); // 3
add(1)(2)(3)； // 6
add(1)(2)(3)(4)； // 10
мыслительные вопросы
Зная следующий массив, напишите программу для выравнивания массива и удаления повторяющейся части данных, и, наконец, получите восходящий и неповторяющийся массив
var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];
Справочный анализ:сглаживание и дедупликация