通过函数式编程提升你的 JavaScript 技能
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
如果你想写出更好的 JavaScript 代码，函数式编程 (FP) 是最有效的技巧之一。它并不比 JavaScript 语言本身难——别听别人瞎说。本文面向编程初学者，本系列文章将陆续发布。
使用纯函数
纯函数是指
- 除了提供的参数之外，不会访问任何其他内容。
- 它不会修改函数外部的任何内容。它可能会返回基于参数的计算值。这意味着，当输入相同值时，它将始终返回相同的输出。
纯函数示例
const calculateArea = radius => 3.14 * radius * radius;
map()用于for/forEach数组转换时，请改用其他方法。
（你可能已经在这么做了）
使用以下方法处理数组并将其转换为新数组：for/forEach
const nums = [1,2,3,4,5,6];
const doubles = [];
for(let i = 0; i < nums.length; i++){
doubles.push(nums[i] * 2);
}
// nums.forEach(item => doubles.push(item * 2)); // foreach version
console.log(doubles)
相反，你应该使用map()函数（JavaScript 中内置的函数）。
const nums = [1,2,3,4,5,6];
const doubles = nums.map(item => item * 2);
console.log(doubles)
为什么使用这种方法map()而不是上述方法？
- 这段代码几乎是人类可读的（“用函数 x 将此数组映射到该数组”），很容易理解。
- 它界面简洁，按键次数少，因此潜在的错误也更少。
使用reduce()`for` 循环代替 `for` 循环进行加法计算。
如果你想计算某个取决于数组中每个元素的值的数值，请使用reduce()函数。例如，你需要将数组中每个元素的值相加。
for/forEach方法：
const array1 = [1, 2, 3, 4];
let sum = 0;
for(let i=0; i< array1.length; i++){
sum+=array1[i];
}
// array1.forEach(item => sum+= item); //forEach version
// 1 + 2 + 3 + 4
console.log(sum);
const array1 = [1, 2, 3, 4];
const sum = array1.reduce((sum, current) => sum+current, 0);
// 1 + 2 + 3 + 4
console.log(sum);
为什么使用这种方法reduce()而不是上述方法？
- 比 for 循环更少样板代码
- 一个常见的结构，读起来更简洁。
- 可以与其他数组函数（例如 map）链接使用：
array1.map(i => i*2).reduce((sum, current) => sum+current)
使用 filter() 方法进行数组过滤操作：
使用 for 循环筛选数组中的偶数：
const array1 = [1, 2, 3, 4];
const evenArray1 = [];
for(let i = 0; i<array1.length; i++){
if(array1[i] % 2 === 0){
evenArray1.push(array1[i]); //copy only even elements
}
}
console.log(evenArray1);
用户filter()方法：
const array1 = [1, 2, 3, 4];
const evenArray1 = array1.filter(item => item % 2 === 0);
console.log(evenArray1);
使用for 循环every()代替some()手动搜索
检查数组中的所有元素是否都满足某些条件（甚至）
const array1 = [2,4,8];
let isAllEven = true;
for(let i = 0; i<array1.length; i++){
if(array1[i] % 2 !== 0){
isAllEven = false;
break;
}
}
console.log(isAllEven);
用途every()相同：
const array1 = [2,4,8, 3];
let isAllEven = array1.every(item => item % 2 === 0)
console.log(isAllEven);
检查数组中是否至少有一个元素满足某些条件（甚至）
const array1 = [1, 3];
let isAtleastOneEven = false;
for(let i = 0; i<array1.length; i++){
if(array1[i] % 2 === 0){
isAtleastOneEven = true;
break;
}
}
console.log(isAtleastOneEven);
用途some()相同：
const array1 = [1, 2, 3];
let isAtleastOneEven = array1.some(item => item % 2 ===0)
console.log(isAtleastOneEven);
使用偏函数从现有函数创建新函数bind()
你可以从现有函数推导出新函数。例如，你有一个计算数字幂的幂函数。
const power = (p, num) => num ** p;
您可以创建一个新函数square()，cube()该函数可以使用现有函数。
const square = power.bind(null, 2);
const cube = power.bind(null, 3);
console.log(square(5)) // 25
console.log(cube(5)) // 125
性能说明：请注意，for 循环始终比其他类似函数更快map()。对于少量项目（例如几百个以内），两者的性能相近；但对于大量项目，您可能需要考虑使用 for 循环。
下一篇文章我们将讨论一些高级函数式编程概念。谢谢！
文章来源：https://dev.to/nitinja/improve-your-javascript-with-function-programming-3jjb