клин
В JavaScript, поскольку функция также является по сути объектом (это согласуется с идеей [сущность функции — это значение] в Haskell), мы можемПередать функцию в качестве параметра!
Пример 🌰:
function sayHi() {
console.log("Hi");
}
function sayBye() {
console.log("Bye");
}
function greet(type, sayHi, sayBye) {
type === 1 ? sayHi() : sayBye()
}
greet(1, sayHi, sayBye); // Hi
Опять же, это клишированное определение:Функция называется «функцией высшего порядка», если она «получает функцию в качестве аргумента» или «возвращает функцию в качестве вывода».;
В этой статье речь пойдет о функциях высшего порядка.map,filter,reduceЭто [как практиковать], я хотел бы назвать это:Отображение более высокого порядка! !
Не думайте, что эта вещь незнакома, на самом деле мы видим ее каждый день! !
Пример 🌰:
[1,2,3].map(item => item*2)
упражняться
Talk is cheap. Show me the code.
Ниже приведены 4 набора кода, каждый набор из 2 фрагментов кода.Достигать одних и тех же целей, но делать это по-разному, почувствуйте чувство, что вы предпочитаете? 💖
Группа 1:
1️⃣
const arr1 = [1, 2, 3];
const arr2 = [];
for(let i = 0; i < arr1.length; i++) {
arr2.push(arr1[i] * 2);
}
console.log(arr2); // [ 2, 4, 6 ]
2️⃣
const arr1 = [1, 2, 3];
const arr2 = arr1.map(item => item * 2);
console.log(arr2); // [ 2, 4, 6 ]
Группа 2:
1️⃣
const birthYear = [1975, 1997, 2002, 1995, 1985];
const ages = [];
for(let i = 0; i < birthYear.length; i++) {
let age = 2018 - birthYear[i];
ages.push(age);
}
console.log(ages); // [ 43, 21, 16, 23, 33 ]
2️⃣
const birthYear = [1975, 1997, 2002, 1995, 1985];
const ages = birthYear.map(year => 2018 - year);
console.log(ages); // [ 43, 21, 16, 23, 33 ]
Группа 3:
1️⃣
const persons = [
{ name: 'Peter', age: 16 },
{ name: 'Mark', age: 18 },
{ name: 'John', age: 27 },
{ name: 'Jane', age: 14 },
{ name: 'Tony', age: 24},
];
const fullAge = [];
for(let i = 0; i < persons.length; i++) {
if(persons[i].age >= 18) {
fullAge.push(persons[i]);
}
}
console.log(fullAge);
2️⃣
const persons = [
{ name: 'Peter', age: 16 },
{ name: 'Mark', age: 18 },
{ name: 'John', age: 27 },
{ name: 'Jane', age: 14 },
{ name: 'Tony', age: 24},
];
const fullAge = persons.filter(person => person.age >= 18);
console.log(fullAge);
Группа 4:
1️⃣
const arr = [5, 7, 1, 8, 4];
let sum = 0;
for(let i = 0; i < arr.length; i++) {
sum = sum + arr[i];
}
console.log(sum); // 25
2️⃣
const arr = [5, 7, 1, 8, 4];
const sum = arr.reduce(function(accumulator, currentValue) {
return accumulator + currentValue;
});
console.log(sum); // 25
Какой ты предпочитаешь? У вас есть ответ?
Фрагмент кода 2️⃣ для каждой группыmap/filter/reduceПрименение функций высшего порядка, по крайней мере, болеелаконично и легко читается!
почерк
Фактически,map/filter/reduceОн также инкапсулирован на основе цикла for, поэтому мы также можем реализовать тот же наборОтображение более высокого порядка🚀;
- map1
Array.prototype.map1 = function(fn) {
let newArr = [];
for (let i = 0; i < this.length; i++) {
newArr.push(fn(this[i]))
};
return newArr;
}
console.log([1,2,3].map1(item => item*2)) // [2,4,6]
- filter1
Array.prototype.filter1 = function (fn) {
let newArr=[];
for(let i=0;i<this.length;i++){
fn(this[i]) && newArr.push(this[i]);
}
return newArr;
};
console.log([1,2,3].filter1(item => item>2)) // [3]
- reduce1
Array.prototype.reduce1 = function (reducer,initVal) {
for(let i=0;i<this.length;i++){
initVal =reducer(initVal,this[i],i,this);
}
return initVal
};
console.log([1,2,3].reduce1((a,b)=>a+b,0)) // 6
Если вы не хотите висеть прямо на цепочке прототипов 🛸:
- mapForEach
function mapForEach(arr, fn) {
const newArray = [];
for(let i = 0; i < arr.length; i++) {
newArray.push(
fn(arr[i])
);
}
return newArray;
}
mapForEach([1,2,3],item=>item*2) // [2,4,6]
- filterForEach
function filterForEach(arr, fn) {
const newArray = [];
for(let i = 0; i < arr.length; i++) {
fn(arr[i]) && newArray.push(arr[i]);
}
return newArray;
}
filterForEach([1,2,3],item=>item>2) // [3]
- reduceForEach
function reduceForEach(arr,reducer,initVal) {
const newArray = [];
for(let i = 0; i < arr.length; i++) {
initVal =reducer(initVal,arr[i],i,arr);
}
return initVal;
}
reduceForEach([1,2,3],(a,b)=>a+b,0) // 6
Тут у меня есть небольшое сомнение, существовала ли до ES6 библиотека, которая делала такой пакет❓
резюме
Хотя эта статья является базовой,Очень важный!
Изучив и изменив некоторые общепринятые методы письма, вы получите замечательные идеи.mapКартография может сделать гораздо больше, чем вы можете себе представить!
forЗацикливание — это только рабочее средство, а не цель! И после инкапсуляцииmapотображение имеетболее читаемыйЗначение отношения отображения (ввод, вывод) также является ядром функционального программирования!
YY смотреть: так какmapВсе такие функции инкапсулированы из циклов for Если вы можете инкапсулировать еще одно особенно полезное отображение более высокого порядка или другие функции более высокого порядка на основе циклов for, означает ли это, что однажды они могут быть включены в JS-версию стандартного API? середина? 🐶🐶🐶
Может быть: сначала осознать функции более высокого порядка, которые мы используем каждый день, использовать и тренировать их сознательно, а затем делать другие выводы из одного случая, чтобы мы могли вообразить вышеописанное~~~
над.
Ваши лайки, комментарии и внимание — лучшая поддержка для Бенгуа O(∩_∩)O👍👍👍
Я Энтони Наггетс, официальная учетная запись имеет то же имя, вывод раскрывает ввод, техническое понимание жизни, до свидания~