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>

Codepen网址：https://codepen.io/anon/pen/GbMYJW

Answer 1

使用{ "error": "unsupported_grant_type", "message": "The authorization grant type is not supported by the authorization server.", "hint": "Check that all required parameters have been provided" }，您正在调用数组上的函数（即courses.filterId(3)），而该函数不存在！定义函数Array.prototype后，它位于默认的filterId对象上。最简单的解决方法是将Array和ID都传递给filterId函数，因此它看起来类似于...

window

希望这会有所帮助。

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

您尝试将函数filterId作为Courses数组的成员运行，但是Array原型中不存在该函数。

选项1尝试使用方法find link

示例

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)即可从函数作用域学习课程。

Answer 4

如果您确实想要这样的功能，请使用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>

如何最好地调用简单的过滤器功能

4 个答案: