如何使用函数式编程写更简洁的JavaScript代码
Posted web前端开发
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用函数式编程写更简洁的JavaScript代码相关的知识，希望对你有一定的参考价值。
var fetch = require('node-fetch'); // if using NodeJS
function articles () {
var arr = [];
return fetch('https://dev.to/api/articles').then(function(a) {
if (a) {
return a.json().then(function(b) {
if (b) {
b.forEach((c) => {
if (c.tag_list.indexOf('javascript') !== -1 && c.tag_list.indexOf('node') !== -1) {
arr.push(c);
}
});
return arr;
}
});
}
});
}
articles().then(function(d) {
console.log(d);
});
优化代码通常涉及使用最新的语言可用功能。虽然我们可能并不全部了解它们，但是到了此时，所有JavaScript开发人员都应该知道ES6中引入的功能。因此，作为第一步，我想我们应该禁用
var代码中的所有声明，对于本示例，这些声明可以与互换const。
const fetch = require('node-fetch'); // <-
function articles () {
const arr = []; // <-
...
}
articles().then(function(d) {
console.log(d);
});
你们中的一些人可能会同意，也有一些人可能会不同意这样的做法，但是我认为，最初在编程中导致真正困难的是正确地命名。这是我们工作的重要组成部分。我们的主要功能名为
articles，这是什么意思？这没有任何意义，因为此函数名称未表达任何告诉我们它在做什么的动作。我认为我们应该能够为此功能找到一个更好的名称，因为我们已经知道该功能的目的。
function fetchDevArticles () {
...
}
fetchDevArticles().then(function(d) {
console.log(d);
});
我们的函数和变量命名成为一个问题，因为主函数负责同步执行多项操作。在函数式编程中，我们可以为函数指定与其确切行为功能相关的名称。因此，我们可以将main函数拆分为多个描述自身的较小函数。
const fetch = require('node-fetch'); // if using NodeJS
const arr = [];
function pushFilteredArticlesToAuxArray (c) {
if (
c.tag_list.indexOf('javascript') !== -1
&& c.tag_list.indexOf('node') !== -1
) {
arr.push(c);
}
}
function filterAndReturnValues (b) {
if (b) {
b.forEach(pushFilteredArticlesToAuxArray);
return arr;
}
}
function fetchJSDevArticles () {
return fetch('https://dev.to/api/articles').then(function(a) {
if (a) {
return a.json().then(filterAndReturnValues);
}
});
}
fetchJSDevArticles().then(function(d) {
console.log(d);
});
尽管目前可行，但是如果我们能找到更好的数组方法来帮助我们的话，代码可以变得更加简单。
const fetch = require('node-fetch');
const tagsToFilter = ['javascript', 'node'];
const isIncludedIn = (arr) => tag => arr.includes(tag);
const byTags = (tags) => (article) => tags.every(isIncludedIn(article.tag_list));
const filterAndReturnValues = (articles) => articles.filter(byTags(tagsToFilter));
function fetchJSDevArticles () {
return fetch('https://dev.to/api/articles').then(function(a) {
if (a) {
return a.json().then(filterAndReturnValues);
}
});
}
fetchJSDevArticles().then(function(d) {
console.log(d);
});
const fetch = require('node-fetch');
const tagsToFilter = ['javascript', 'node'];
const devArticlesApiURL = 'https://dev.to/api/articles';
const isIncludedIn = (arr) => tag => arr.includes(tag);
const byTags = (tags) => (article) => tags.every(isIncludedIn(article.tag_list));
const filterAndReturnValues = (articles) => articles.filter(byTags(tagsToFilter));
const fetchJSDevArticles = () =>
fetch(devArticlesApiURL)
.then(response => response.json())
.then(filterAndReturnValues)
.catch(console.log);
fetchJSDevArticles().then(console.log);
结论
ES6很重要。
你尝试执行的操作可能有一个数组方法。
如果没有，请尝试lodash :)
代码注释并不总是需要，让代码更具可读性这个比注释更加重要。
力争最好。
以上是关于如何使用函数式编程写更简洁的JavaScript代码的主要内容，如果未能解决你的问题，请参考以下文章