如何最好地调用简单的筛选器函数

Question

我正在尝试改进编写javascript的方式，并正在寻找一种更好的方法来调用辅助函数并将变量传递到该函数中，而不是编写实际的过滤器函数。为了更好地解释，这有效：

courses = courses.filter(course => course.id == 3);

但我宁愿能够放这样的东西：

courses.filterId(3);

并将辅助功能放在底部。

因此，换句话说，在/* ERROR INBETWEEN HERE */注释之间修复代码可能是寻求帮助的最佳方式。

为什么错误记录此消息？courses.filterId is not a function

感谢您在这里的任何帮助。

let tutors = [
	  {
	    name: "Bob",
	    age: 29,
id: 1
	  },
	  {
	    name: "Charlie",
	    age: 24,
id: 2
	  },
	  {
	    name: "Elanor",
	    age: 54,
id: 3
	  },
	  {
	    name: "Michael",
	    age: 66,
id: 4
	  }
	],
	courses = [
{
code: "AA01",
description: "Javascript IIFEs, maps, filters, reduces, etc",
id: 3
},
{
code: "AO83",
description: "Arrays, for of loops, etc",
id: 1
},
{
code: "AX40",
description: "CSS, HTML",
id: 3
},
{
code: "BX92",
description: "SQL, Node",
id: 2
},
{
code: "CC24",
description: "PHP, Java",
id: 1
},
{
code: "DI30",
description: "MongoDB",
id: 4
}
],
	theHTML = '<table><tr><th>Code</th><th>Description</th><th>ID</th><th>Name</th></tr>',
	container = document.querySelector('#container');
	courses.forEach((course) =>
	  tutors.forEach((tutor) =>
	    tutor.id == course.id &&
	    (course["name"] = tutor.name)
	  )
	);
	/* USE THIS IF YOU WANNA FILTER */
	//courses = courses.filter(course => course.id == 3);
/* ERROR INBETWEEN HERE */
	function filterId(getID){
return courses.filter(course => course.id == getID);
}
courses.filterId(3);
/* ERROR INBETWEEN HERE */
	courses.forEach(function(course) {
		theHTML += '<tr>';
		for (let column in course) {
			theHTML += '<td>' + course[column] + '</td>';
		}
		theHTML += '</tr>';
	});
	theHTML += ('</table>');
	container.innerHTML = theHTML;
	// without arrow functions
	/*
	courses.forEach(function(course) {
	  tutors.forEach(function(tutor) {
	    if (tutor.id == course.id) {
	      course["name"] = tutor.name;
	    }
	  });
	});
	*/

<div id='container'></div>

代码笔网址：https://codepen.io/anon/pen/GbMYJW

Answer 1

如果你真的想要这样的函数，请使用 Lodash 的_.filter：

const filtered = _.filter(courses, ["id", 3]);

let tutors = [
{
name: "Bob",
age: 29,
id: 1
},
{
name: "Charlie",
age: 24,
id: 2
},
{
name: "Elanor",
age: 54,
id: 3
},
{
name: "Michael",
age: 66,
id: 4
}
],
courses = [
{
code: "AA01",
description: "Javascript IIFEs, maps, filters, reduces, etc",
id: 3
},
{
code: "AO83",
description: "Arrays, for of loops, etc",
id: 1
},
{
code: "AX40",
description: "CSS, HTML",
id: 3
},
{
code: "BX92",
description: "SQL, Node",
id: 2
},
{
code: "CC24",
description: "PHP, Java",
id: 1
},
{
code: "DI30",
description: "MongoDB",
id: 4
}
];
const res = _.filter(courses, ["id", 3]);
console.log(res);

.as-console-wrapper { max-height: 100% important; top: auto; }

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>

Answer 2

您可以分配函数引用，以便courses.filterId是一个函数。

courses.filterId = filterId

然后，像这样使用它：

courses.filterId(3).forEach(...)

或者，可以直接在courses.filterId属性上定义函数：

courses.filterId = id => courses.filter(course => course.id === id)

let tutors = [
{
name: "Bob",
age: 29,
id: 1
},
{
name: "Charlie",
age: 24,
id: 2
},
{
name: "Elanor",
age: 54,
id: 3
},
{
name: "Michael",
age: 66,
id: 4
}
],
courses = [
{
code: "AA01",
description: "Javascript IIFEs, maps, filters, reduces, etc",
id: 3
},
{
code: "AO83",
description: "Arrays, for of loops, etc",
id: 1
},
{
code: "AX40",
description: "CSS, HTML",
id: 3
},
{
code: "BX92",
description: "SQL, Node",
id: 2
},
{
code: "CC24",
description: "PHP, Java",
id: 1
},
{
code: "DI30",
description: "MongoDB",
id: 4
}
],
theHTML =
"<table><tr><th>Code</th><th>Description</th><th>ID</th><th>Name</th></tr>",
container = document.querySelector("#container");
courses.forEach(course =>
tutors.forEach(
tutor => tutor.id == course.id && (course["name"] = tutor.name)
)
);
function filterId(getID) {
return courses.filter(course => course.id == getID);
}
courses.filterId = filterId;
courses.filterId(3).forEach(function(course) {
theHTML += "<tr>";
for (let column in course) {
theHTML += "<td>" + course[column] + "</td>";
}
theHTML += "</tr>";
});
theHTML += "</table>";
container.innerHTML = theHTML;

<div id='container'></div>

Answer 3

有了courses.filterId(3)，您正在调用数组上的函数(即。Array.prototype) - 它不存在！ 定义函数后filterId它位于默认的window对象上。 最简单的解决方法是将数组和 ID 传递给 filterId 函数，因此它看起来像...

function filterId(arr,ID) { return arr.filter(course => course.id == ID) }

希望这有帮助。

Answer 4

您尝试将函数filterId作为课程数组的成员运行，但它在数组原型中不存在。

选项 1 尝试使用方法find链接

例

let a = [{id:2, test:2}, {id:3, test:3}]
let item = a.find((item) => item.id === 2)
//result {id: 2, test: 2}

选项 2 只需调用filterId(getID)它从函数范围获取课程。