Методы массива JavaScript чрезвычайно полезны. Однако выбор правильного метода для работы может быть сложным. Сегодня я опишу варианты использования для Найти и фильтр Методы массива.
Найти Метод вернет либо первый найденный элемент, который соответствует вашим критериям, либо неопределенным. Для глубокого определения Найти , Checkout Эта страница на MDN.
Давайте используем массив ниже, чтобы попробовать метод поиска.
const persons = [
{ name: "Tom", age: 55, userId: 99000152, status: "full-time" },
{ name: "Miguel", age: 29, userId: 99000112, status: "full-time" },
{ name: "Jennifer", age: 42, userId: 97003211, status: "part-time" },
{ name: "Dean", age: 39, userId: 9800212, status: "part-time" },
{ name: "Jose", age: 33, userId: 99000972, status: "part-time" },
{ name: "Michelle", age: 23, userId: 89004444, status: "full-time" },
{ name: "Darren", age: 45, userId: 91000361, status: "full-time" },
{ name: "Gene", age: 24, userId: 93000345, status: "part-time" },
{ name: "Nancy", age: 35, userId: 99000111, status: "full-time" },
];
Во -первых, давайте использовать Найти Метод, чтобы найти объект человека с именем Даррена.
const found = persons.find((person) => person.name === "Darren");
Если бы мы выходили из строя, значения найдено , мы увидим следующее:
{ name: 'Darren', age: 45, userId: 91000361, status: 'full-time' }
Возможно, нам нужно найти человека, чей идентификатор – 97003211. Как мы могли это сделать? С Найти Метод конечно.
const found = persons.find((person) => person.userId === 97003211);
Итак, Найти Метод имеет один необходимый аргумент, который является текущим элементом в массиве, в нашем случае выше мы назвали этот аргумент человек . Вы можете при желании использовать Индекс и thisarg аргументы.
Как указывалось ранее, если Найти Метод не находит то, что вы ищете, он вернется неопределенное Анкет Давайте сделаем это.
Использование массива людей снова , давайте на поиск человека, возраст которого превышает 100.
const found = persons.find((person) => person.age > 100);
Если мы выберем значение найдено Теперь мы получим неопределенное Анкет
Найти Метод полезен, когда вам нужно проверить, существует ли конкретное значение в массиве.
В случае, если нам нужно было отфильтровать множество лиц на основе конкретных критериев, таких как все лица старше 35 лет, или всех лиц, чье имя более пяти символов, мы могли бы сделать это. фильтр Метод полезен, когда вам нужно отфильтровать все значения, которые соответствуют определенным критериям. Этот метод всегда создает/возвращает новый массив.
Допустим, нам нужен массив этого состоит исключительно из всех людей со статусом «полный рабочий день». Мы могли бы сделать это так:
const fullTimers = persons.filter((person) => person.status === "full-time");
Если мы выберем значение Filltimers мы получим
[
{ name: 'Tom', age: 55, userId: 99000152, status: 'full-time' },
{ name: 'Miguel', age: 29, userId: 99000112, status: 'full-time' },
{ name: 'Michelle', age: 23, userId: 89004444, status: 'full-time' },
{ name: 'Darren', age: 45, userId: 91000361, status: 'full-time' },
{ name: 'Nancy', age: 35, userId: 99000111, status: 'full-time' }
]
фильтр Метод, который вы можете прочитать подробнее о Здесь , принимает один необходимый аргумент, который является текущим элементом массива. Необязательные ARG – это индекс, который вы сейчас находитесь, и весь массив.
Представьте, что теперь мы хотим список всех, кто не полный рабочий день. Мы могли бы сделать это так:
const nonFullTimers = persons.filter((person) => person.status !== "full-time");
И если мы выйдем из этого, посмотрим:
[
{ name: 'Jennifer', age: 42, userId: 97003211, status: 'part-time' },
{ name: 'Dean', age: 39, userId: 9800212, status: 'part-time' },
{ name: 'Jose', age: 33, userId: 99000972, status: 'part-time' },
{ name: 'Gene', age: 24, userId: 93000345, status: 'part-time' }
]
Было время, когда я использовал фильтр Метод, когда я мог бы использовать найти . Например, допустим, мне нужно было найти человека, чей пользователь – 93000345. Я бы сделал что -то вроде этого:
const found = persons.filter((person) => person.userId === 93000345);
Возвращенное значение фильтра является массивом, как вы можете видеть ниже:
[ { name: 'Gene', age: 24, userId: 93000345, status: 'part-time' } ]
Это создает некоторое разочарование, потому что теперь, если мне нужно было получить доступ к возрасту человека, мне пришлось бы сделать что -то вроде этого:
console.log(found[0].age);
Если бы вместо этого я использовал найти человека, чей пользователь – 93000345, что будет выглядеть так:
const found = persons.find((person) => person.userId === 93000345);
Значение найденного было бы лицевым объектом, как так:
{ name: 'Gene', age: 24, userId: 93000345, status: 'part-time' }
И я мог бы получить доступ к возрастной опоре:
console.log(found.age);
Методы массива JavaScript потрясающие, но может потребоваться время, чтобы узнать о различных методах массива и когда использовать каждый из них. Надеюсь, вы нашли эту статью полезной. Спасибо за чтение.
Оригинал: “https://dev.to/juniordevforlife/javascript-find-vs-filter-array-methods-5fge”