Как лучше всего вызвать простую функцию фильтра

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>

URL кодепа: https://codepen.io/anon/pen/GbMYJW

Answer 1

Если вы действительно хотите такую ​​функцию, используйте Lodash's _.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

Вы пытаетесь запустить функцию filterId как член массива курсов, но ее нет в прототипе Array.

Вариант 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), это берет курсы из области функций.

Answer 4

С courses.filterId(3) вы вызываете функцию, которая находится в массиве (то есть. Array.prototype) - и ее там нет!Когда вы определили функцию filterId, она используется для объекта window по умолчанию.Самое простое решение - передать массив и идентификатор в функцию filterId, чтобы она выглядела примерно так ...

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

Надеюсь, это поможет.