compétences du programmeur en programmation fonctionnelle javascript toolset_javascript

Si vous examinez attentivement l'exemple de code qui est apparu jusqu'à présent, vous constaterez que certaines des méthodes présentées ici ne vous sont pas familières. Il s'agit des fonctions map(), filter() et reduction(), qui sont cruciales pour la programmation fonctionnelle dans n'importe quel langage. Ils vous permettent d'écrire du code plus propre sans utiliser de boucles ni d'instructions.

Les fonctions map(), filter() et réduire() constituent la partie essentielle de l'ensemble d'outils du programmeur fonctionnel. Cet ensemble d'outils comprend une série de fonctions pures d'ordre élevé qui constituent le pilier de l'approche fonctionnelle. En fait, elles sont typiques des fonctions pures et des fonctions d’ordre supérieur. Elles prennent une fonction en entrée, renvoient un résultat en sortie et ne produisent aucun effet secondaire.

Cependant, il s'agit de normes d'implémentation ECMAScript 5.1 dans les navigateurs et ils ne fonctionnent qu'avec des tableaux. Chaque fois qu'ils sont appelés, un nouveau tableau sera créé et renvoyé, tandis que le tableau existant ne sera pas modifié. Ils prennent des fonctions en entrée, utilisant souvent des fonctions anonymes comme fonctions de rappel. Ils parcourent le tableau et appliquent la fonction à chaque élément du tableau !

myArray = [1,2,3,4];
newArray = myArray.map(function(x) {return x*2});
console.log(myArray); // Output: [1,2,3,4]
console.log(newArray); // Output: [2,4,6,8]

Un autre point est qu'ils ne fonctionnent que sur des tableaux et ne peuvent pas fonctionner sur d'autres structures de données itérables, telles que des objets. Ne vous inquiétez pas, il existe de nombreuses bibliothèques telles que Underscore.js, Lazy.js, stream.js, etc. qui implémentent leurs propres map(), filter() et réduire() plus puissants.

Rappel

Si vous n'avez jamais utilisé les rappels auparavant, le concept peut être un peu déroutant. Surtout en Javascript, Javascript propose plusieurs façons de déclarer des fonctions.

Les fonctions de rappel sont utilisées pour passer à une autre fonction pour leur utilisation. C'est une façon de transmettre une logique comme passer des objets :

var myArray = [1,2,3];
function myCallback(x){return x+1};
console.log(myArray.map(myCallback));

Pour des tâches plus simples, vous pouvez utiliser des fonctions anonymes :

console.log(myArray.map(function(x){return x+1}));

Les rappels ne sont pas seulement utilisés dans la programmation fonctionnelle, ils peuvent faire beaucoup de choses en Javascript. À titre d'exemple, voici la fonction callback() pour les appels AJAX de jQuery :

function myCallback(xhr) {
 console.log(xhr.status);
 return true;
}
$.ajax(myURI).done(myCallback);

Notez que seul le nom de la fonction est utilisé ici, car nous n'appelons pas la fonction mais passons la fonction. Ce serait une erreur de l'écrire comme ceci :

$.ajax(myURI).fail(myCallback(xhr)); 
// 或者
$.ajax(myURI).fail(myCallback());

Que se passe-t-il si nous appelons la fonction ? Dans cet exemple, myCallback(xhr) tentera de s'exécuter, la console affichera "undefined" et renverra true. Lorsque ajax() termine l'appel, la fonction de rappel trouvée en fonction de son nom sera "true" et une erreur sera signalée.

C'est-à-dire que nous ne pouvons pas spécifier quels paramètres transmettre à la fonction de rappel. Si notre fonction de rappel a besoin de la fonction ajax() pour lui transmettre les paramètres que nous voulons, nous pouvons envelopper la fonction de retour dans une fonction anonyme :

function myCallback(status) {
 console.log(status);
 return true;
}
$.ajax(myURI).done(function(xhr) {
 myCallback(xhr.status)
});

Array.prototype.map()

map() est le leader de ces fonctions. Il applique simplement une fonction de rappel aux éléments du tableau.

Syntaxe : arr.map(callback [, thisArg]);

Paramètres :
•callback() : Cette fonction génère un élément pour le nouveau tableau. Les paramètres qu'elle reçoit : ◦currentValue : l'élément actuellement parcouru dans le tableau
◦index : le numéro d'élément actuel dans le tableau
◦array : le tableau en cours de traitement

•thisArg : Il s'agit d'un paramètre facultatif lorsque le rappel est exécuté, il sert de this

Exemple :

var
 integers = [1, -0, 9, -8, 3],
 numbers = [1, 2, 3, 4],
 str = 'hello world how ya doing?';
 
// 将整数映射为他们自己的绝对值
console.log(integers.map(Math.abs));

// 将数组中的元素与自己的位置序数相乘
console.log(numbers.map(function(x, i) {
 return x * i
}));
// 单词隔一个变一个大写
console.log(str.split(' ').map(function(s, i) {
 if (i % 2 == 0)
  return s.toUpperCase();
 else
  return s;
}));

Bien que la méthode Array.prototype.map soit la méthode standard pour les objets tableau en Javascript, vous pouvez facilement étendre vos propres objets.

MyObject.prototype.map = function(f) {
  return new MyObject(f(this.value));
 }; 

Array.prototype.filter()

La fonction filter() est utilisée pour filtrer certains éléments du tableau. La fonction de rappel doit renvoyer true (la conserver dans le nouveau tableau) ou false (la jeter). Vous pouvez utiliser map() pour faire quelque chose de similaire, qui consiste à renvoyer null comme null pour les éléments que vous souhaitez supprimer. Cependant, la fonction filter() supprimera ces éléments inutiles dans le nouveau tableau au lieu de laisser null pour occuper le. position.

Syntaxe : arr.filter(callback [, thisArg]);

•callback() : Cette fonction est utilisée pour tester chaque élément du tableau. Elle doit renvoyer vrai, sinon elle renvoie faux. Il a ces paramètres : ◦currentValue : l'élément actuellement parcouru dans le tableau
◦index : le numéro ordinal de l'élément actuel dans le tableau
◦array : le tableau en cours de traitement

•thisArg : Il s'agit d'un paramètre facultatif lorsque le rappel est exécuté, il sert de this

Exemple :

var myarray = [1, 2, 3, 4]
words = 'hello 123 world how 345 ya doing'.split(' ');
re = '[a-zA-Z]';
// 筛选整数
console.log([-2, -1, 0, 1, 2].filter(function(x) {
 return x > 0
}));
// 筛选所有含字母的单词
console.log(words.filter(function(s) {
 return s.match(re);
}));
// 随机移除数组中的元素
console.log(myarray.filter(function() {
 return Math.floor(Math.random() * 2)
}));

Array.prototype.reduce()

reduce()函数，有时也称为fold，它用于把数组中的所有值聚集到一起。回调需要返回组合对象的逻辑。 对于数字来说，它们往往会被加到一起或者乘到一起。对于字符串来说，它们往往是被追加到一起。

语法：arr.reduce(callback [, initialValue]);

参数
•callback()：此函数把两个对象合并成一个对象，并将其返回。参数有： ◦previousValue：上一次回调函数被调用时返回的值，或者是初始值（如果有的话）
◦currentValue：数组当前正在处理的元素
◦index：数组中当前元素的序数
◦array：当前正在处理的数组

•initialValue：可选。第一次回调所传入参数的初始值

例子

var numbers = [1, 2, 3, 4];

// 把数组中所有的值加起来
console.log([1, 2, 3, 4, 5].reduce(function(x, y) {
 return x + y
}, 0));

// 查找数组中最大的值
console.log(numbers.reduce(function(a, b) {
  return Math.max(a, b) // max()函数只能有两个参数
 }) 
);

其它函数

map()、filter()和reduce()函数在我们辅助函数的工具箱里并不孤单。这里还有更多的函数几乎在所有函数式应用里都会被使用。

Array.prototype.forEach

forEach()函数本质上是map()函数的非纯版本，它会遍历整个数组，并对每个元素应用回调。 然而这些回调函数不返回值。它是实现for循环的一个更纯粹的方式。

语法：arr.forEach(callback [, thisArg]);

参数：
•callback()：对数组中每一个元素所应用的。参数有： ◦currentValue：数组中当前正在处理的元素
◦index：数组中当前元素的序数
◦array：正在处理的数组

•thisArg：可选。回调函数中作为this的值

例子：

var arr = [1, 2, 3];
var nodes = arr.map(function(x) {
 var elem = document.createElement("div");
 elem.textContent = x;
 return elem;
});

// 对每一个元素的值输出日志
arr.forEach(function(x) {
 console.log(x)
});

// 把节点追加到DOM上
nodes.forEach(function(x) {
 document.body.appendChild(x)
});

Array.prototype.concat

如果不用for或while处理数组，你会经常需要把数组拼接起来。另一个Javascript内建函数concat就是专门干这事儿的。 concat函数会返回一个新数组但不改变旧数组。它可以把你传入的所有参数拼接到一起。
console.log([1, 2, 3].concat(['a','b','c']) // 拼接两个数组
// Output: [1, 2, 3, 'a','b','c']

它返回两个数组拼接成的数组，同时原来的那些数组没有被改变。这就意味着concat函数可以链式调用。

var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = [7,8,9];
var x = arr1.concat(arr2, arr3);
var y = arr1.concat(arr2).concat(arr3));
var z = arr1.concat(arr2.concat(arr3)));
console.log(x);
console.log(y);
console.log(z);

变量x、y、z的值最后都是[1,2,3,4,5,6,7,8,9]。

Array.prototype.reverse

这个Javascript内建函数是用于数组变形的。reverse函数用于将一个数组反转，也就是第个一元素会跑到最后， 而最后一个元素变成了第一个元素。

然而，这个函数并不会返回一个新的数组，而是把原来的数组替换掉了。我们可以做个更好的。下面是一个纯的反转数组函数

var invert = function(arr) {
 return arr.map(function(x, i, a) {
  return a[a.length - (i + 1)];
 });
};
var q = invert([1, 2, 3, 4]);
console.log(q);

Array.prototype.sort

与map()、filter()和reduce()函数相似，排序函数sort()需要传入一个回调函数来定义数组如何排序。 但是，跟reverse()一样，它也会把原来的数组替换。这可不太好。
arr = [200, 12, 56, 7, 344];
console.log(arr.sort(function(a,b){return a–b}) );
// arr现在是: [7, 12, 56, 200, 344];

我们可以写一个纯函数的sort()，但是排序算法的源代码很麻烦。对于特别大的数组，应当根据特定的数据结构来选用适合的算法， 比如快速排序、合并排序、冒泡排序等等。

Array.prototype.every 和 Array.prototype.some

Array.prototype.every() 和 Array.prototype.some() 都是纯的高阶函数，它们是Array对象的方法， 通过回调函数根据数组各元素返回的布尔值（或相当于布尔的值）来进行测试。如果数组中所有的元素通过回调函数计算都返回True， every()函数就返回true；如果数组中有一个元素返回True，some()函数就返回True。

例子：

function isNumber(n) {
 return !isNaN(parseFloat(n)) && isFinite(n);
}
console.log([1, 2, 3, 4].every(isNumber)); // Return: true
console.log([1, 2, 'a'].every(isNumber)); // Return: false
console.log([1, 2, 'a'].some(isNumber)); // Return: true