Полезные приёмы работы с массивами в javascript / хабр

Использование функции .filter() для поиска элемента в массиве в JavaScript

Функция в основном используется в операциях обработки массивов. Особенно, когда речь идет о фильтрации элементов, удовлетворяющих критерию, вне массива. Он возвращает массив элементов, удовлетворяющих критериям, определенным в функции, переданной в качестве аргумента.

Параметр

Функция принимает в качестве параметра встроенную функцию или стрелочную функцию. Стрелочная функция будет содержать критерии фильтра. Функция выполняет стрелочную функцию для каждого элемента массива и возвращает элементы, которые удовлетворяют условиям, указанным в стрелочной функции. Стрелочная функция будет иметь на входе , а текущую итерацию — как .

Возвращаемое значение

В отличие от функций поиска по массиву, которые мы видели до сих пор, возвращает массив, содержащий элементы, удовлетворяющие условиям, указанным в стрелочной функции. Если элемент найден, возвращаемый массив будет содержать необходимые элементы, иначе функция вернет пустой массив.

Поддержка браузера

Функция поддерживается всеми браузерами, включая Internet Explorer. Таким образом, вы можете использовать функцию , не беспокоясь о ожидаемой поддержке браузером.

Использование: Использование этой функции следующее

Выход:

Как видно из результата, функция возвращает массив. Если нам нужно найти элемент в массиве, мы можем использовать функцию , как показано в следующем примере кода. Мы используем атрибут массива, возвращаемого функцией , чтобы определить, может ли он найти элемент или нет. Если функция возвращает пустой массив, это означает, что не удалось найти ключевое слово для поиска.

Выход:

Required props on a custom component

Let’s go back to using our component. This will be similar to when we were making elements.

Remember where we left off with :

interface CustomInputProps {  fieldName: string;}class CustomInput extends React.Component<CustomInputProps> {  …}

Let’s make one!

render() {  return (    <form>      <CustomInput />    </form>  );}

And the error is…

Type ‘{}’ is not assignable to type ‘IntrinsicAttributes & IntrinsicClassAttributes<CustomInput> & Readonly<{ children?: ReactNode; }>…’. Type ‘{}’ is not assignable to type ‘Readonly<CustomInputProps>’. Property ‘fieldName’ is missing in type ‘{}’.

It just keeps getting more complicated, doesn’t it?

— To explain this, remember how JSX works. Our above line of code turns into . because we didn’t write any props in the JSX. is TypeScript describing that second, props argument.
— The old standby. There’s an inconsistency in the types!
— This is such a mess that TypeScript literally gives up and stops before it gets to the end. The “intrinsic” bits cover common React props like and . You can see the at the end, which is the start of the type we saw before. The complete type here is: , but honestly you can glaze over this line.
— Here TypeScript calls out what part of the it’s having trouble with. is perfectly assignable to , , and because all of their fields are optional. What it’s not assignable to is our .
— This is the most useful part of the error message. The is calling back to that second argument, the type of the props from the JSX.

The fix: Once again, type errors are flagging inconsistencies in the code. As written, wants a prop, but you’re not giving it one. So, either give it one, or make it not want one in the first place. Let’s look at how we would do each.

To pass , we do this:

<CustomInput fieldName="myField" />

After the JSX translation, that turns into:

React.createElement(CustomInput, { fieldName: "myField" });

The type of that second, props argument is which is assignable to .

Here’s the other case, making optional. For this, we need to change the where was declared.

interface CustomInputProps {fieldName?: string;}

See how there’s a there now? That tells TypeScript that this property is optional. Now both and are assignable to .

This does mean that now has the type , so TypeScript will make you take that into account in the rest of your code. No calling without checking that it’s defined first!

Void отсутствие конкретного типа¶

Тип данных можно назвать полной противоположностью типа , так как этот тип означает отсутствие конкретного типа. Основное предназначение типа — явно указывать на то, что у функции или метода отсутствует возвращаемое значение.

Тип данных указывается с помощью ключевого слова (не путать с одноимённым оператором из JavaScript) и, в отличие от таких типов, как и , не имеет никаких значений.

Тип является подтипом и супертипом для и .

Однако с активным флагом , тип данных совместим лишь с и .

Кому-то может показаться, что примеры чересчур излишни, или что примеры, в которых результат вызова функции, не имеющей возвращаемого значения, присваивается полям с различными типами, не имеет никакого отношения к реальности. Да, это так. Но целью данных примеров является научить думать как компилятор TypeScript.

Когда функции в качестве возвращаемого типа указан тип , может показаться, что возвращая различные значения с помощью оператора , компилятор выбрасывает ошибки из-за понимания что функция помечена как ничего не возвращающая. Но это не так. Ошибка возникает по причине несовместимости типов.

Нельзя не упомянуть, что для функций и методов, которые ничего не возвращают и у которых отсутствует аннотация типа возвращаемого значения, вывод типов определяет принадлежность к типу .

В отличие от и , тип не имеет ни одного значения, которое могло бы явно продемонстрировать присвоение. Однако компилятор понимает, что имеет дело с типом при вызове функции или метода, которые не возвращают значение. Это становится ещё нагляднее, когда вывод типов устанавливает тип, полученный при вызове функции или метода, которые ничего не возвращают.

Тип является уникальным для TypeScript. В JavaScript подобного типа не существует.

Getting a property’s type wrong

There’s another error that can come up with HTML: using the wrong type for an attribute. Let’s add a to the and see what happens:

render() {  return <input type="text" name="color" size="6" />;}

This is exactly how you’d write it in an HTML page, but TypeScript shows an error:

Types of property ‘size’ are incompatible. Type ‘string’ is not assignable to type ‘number | undefined’.

— We’re talking about now. Note how it says “types” with a plural. That’s because all type errors are inconsistencies. This error is between two types: the one from our code, and the one from React’s definition (remember the bit we saw in the last error).
— This is the first of the types, the one for the argument that we wrote. is a string, because all quoted JSX attributes are strings.
— This is a nuanced way of saying “isn’t.” It’s clarifying what is “incompatible” about the two types.
— This is the second of the two types, the one that the React library said is right for ’s attribute. The is known as a “union” operator, but you can read it as “or”: “ must be a number or undefined.”

The fix: We need to change one or the other of the types to make them consistent. Since we can’t change the React library to accept a string, we have to change our code to pass a number:

render() {  <input type="text" name="color" size={6} />}

Remember that is the way to make a JavaScript expression in JSX. Now instead of a string, we’re providing a number, and the TypeScript error goes away.

The error message said that the type from the React library was . “Undefined” is the same as leaving it off, which is why our previous examples typechecked without a . But this explains why the error message said “is not assignable to” instead of “isn’t.” is a number, not a “number or undefined.” But, a number is assignable to a “number or undefined,” because of the “or.”

The React type library doesn’t require any attributes on HTML elements, so there’s no “forgetting to pass a prop that a component requires” error in this section. That will come up when we deal with custom components.

All type errors are inconsistencies

I mentioned this above in the breakdown of the bug, but it’s an important enough concept that I want to call it out:

What I mean by this is those red TypeScript squiggles are there because one part of your code doesn’t agree with another part. Which part is right? Your job is to figure that out by thinking about what you’re trying to make your code do.

One of the reasons that type errors can be confusing to interpret is that TypeScript will only underline one of the places where the inconsistency is happening. The first example below is an error where TypeScript calls out something in the JSX, but that part is actually right and it’s the type definition that we decide is wrong.

Errors with custom React components

The principles of typechecking custom components are basically the same as DOM elements, but the names of the types get more confusing.

For this section, we’ll use the following sample component:

class CustomInput extends React.Component {  render() {    return <input />;  }}

Теоретическая часть вопроса

По сути нам нужно сравнить Наборы (Set) элементов двух Массивов(Array). Я специально создам массивы с повторяющимися значениями. Зачем? Потому что в реальной жизни скорее всего будут дубли элементов в пределах одного массива.

В решении этой задачи нас будут интересовать только САМИ ЗНАЧЕНИЯ, а не их последовательности. Сравнивать мы будем содержимое.

var massiv1 =

var massiv2 =

Наборы(Set) оставят нам уникальные значения в массивах, чтобы мы не повторяли процедуру переборов по несколько раз для одинаковых элементов массивов. Их может быть десятки тысяч в реальных проектах. Это нагрузка на систему.

var set1 = Array.from(new Set(massiv1))

var set2 = Array.from(new Set(massiv2))

Набор возвращает объект, а нам нужен массив. Конвертируем наборы в массивы:

Наборы из Массивов и обратно — JavaScript

Логика такая! Если значение из первого массива встречается во втором массиве, тогда идём дальше на следующий элемент. Если элементы совпадают — значит это не «РАЗЛИЧИЯ», а «ОДИНАКОВОСТИ».

Мы должны отобрать все различия и вернуть их в качестве отдельного массива. Эта операция похожа на «вычитание массивов» — элементы одного массива вычитаются из другого массива. Жаль, что для вычитания не придумали встроенного в язык метода, ходя для сложения он есть.

Aside: Why are we talking about object types?

is an object type, which means that it describes the “shape” of a JavaScript object. For example:

const obj: CustomInputProps = {  fieldName: 'myInput',};

That’s a called , and tells TypeScript that its value needs to match the shape. We initialize it with an object literal that has the necessary property, so it typechecks!

Let’s leave off the property and see what happens:

const obj: CustomInputProps = {};

doesn’t match , so here’s how TypeScript complains:

Type ‘{}’ is not assignable to type ‘CustomInputProps’. Property ‘fieldName’ is missing in type ‘{}’.

— This is TypeScript describing the type of the value that we’re trying to assign to : an object with no fields.
— Our old friend “is not assignable to.” We’re trying to make an assignment: assigning to , but TypeScript is saying we can’t do it.
— This is here because it’s what we declared to be. Therefore it’s the type that’s being assigned to.
— Now TypeScript is being specific about why an object of type is not assignable to something of type : There’s no , and, because of the declaration from above, all objects must have a .

Now let’s see what happens when we put back , but also add a field that’s not part of the type:

const obj: CustomInputProps = {  fieldName: 'myInput',placeholder: 'Type something here',};

That’s not allowed:

Type ‘{ fieldName: string; placeholder: string; }’ is not assignable to type ‘CustomInputProps’. Object literal may only specify known properties, and ‘placeholder’ does not exist in type ‘CustomInputProps’.

— This is the new type of our object literal. See how it now has the property.
— Same as before. TypeScript thinks this assignment is illegal.
— This is the explanation for why this case is “not assignable.” doesn’t have a property declared in its block.

This is a similar case to when we put on an . Adding the extra property is not in itself a bug, since code working on would ignore it, but it’s a sign that there’s probably a bug.

Back to why we’re even talking about object types in the first place. What do they have to do with React props? Objects have squiggly braces, not the angle brackets of JSX. To explain this, let’s go back to our DOM element example and talk a bit about JSX.

<input name="color" size={6} />

Browsers can’t understand this JSX on their own, they only understand plain JavaScript. We typically use the TypeScript compiler or a tool like Babel to take the JSX and make JavaScript out of it. Here’s what that code looks like as JavaScript:

React.createElement('input', {  name: 'color',  size: 6,});

Hey, those and attributes are an object literal now! The first argument to is what we’re creating—a class for custom components, a tag name for HTML elements—and the second argument are the props to pass to it.

This is why TypeScript is always talking about props as object types. When it type checks the React code, it makes sure that that second argument to has a type that matches (“is assignable to”) the declared type of the component’s props.

(Because it just transforms things into plain JavaScript, JSX is sometimes referred to as “syntactic sugar.” It’s not actually necessary—we could write those statements ourselves—but it makes the code sweeter.)

Есть ли какой-то массив в основном массиве? Он существует в виде значения элемента основного массива?

Есть основной массив с одним объектом, одним массивом, числами и строками:

var massiv = , 4, 5, "efim360.ru", "javascript"]

Мы будем проверять существование какого-либо массива в основном массиве при помощи метода filter(). Внутрь метода filter() мы будем передавать анонимную функцию, которая будет возвращать нам true или false по заданному условию. Если будет true, то элемент попадёт в новый массив (отфильтрованный), если false, то не попадёт.

Т. к. мы имеем дело с прототипами классов, то условие сравнения будет определяться при помощи «имени конструктора«, в котором этот элемент был создан. В качестве цели будет выбран класс Array, а его имя конструктора будет строкой «Array«. Не перепутайте, а то не получится. Мы сравниваем строки!

massiv.filter(i => i.constructor.name == "Array")

Метод filter нашёл массив в массиве — JavaScript

Мы вызвали filter() и в ответ получили новый массив (отфильтрованный) с одним элементом. Это как раз то, что мы искали. Мы отловили в основном массиве какой-то массив.

Мы имеем новый массив (отфильтрованный) длиной 1. Если бы в нашем основном массиве небыло бы массивов, тогда фильтр вернул бы нам массив нулевой длины. Вот это и будет нашим условием существования какого либо объекта в массиве:

(massiv.filter(i => i.constructor.name == "Array").length > 0)

Условие существования массива в массиве — JavaScript

Получили ИСТИНУ (TRUE) значит в основном массиве есть массив.

Справка

Мы всегда можем распознать объект по его принадлежности к классу. В нашем случае:

фигурные скобки принадлежат классу Object,
квадратные скобки принадлежат классу Array,
числа принадлежат классу Number
строки принадлежат классу String

Давайте убедимся, что это так. Мы будем получать класс каждого элемента. То есть мы будем получать название конструктора, в котором был создан данный элемент массива.

massiv.map(i=>)

Получили имена конструкторов значений элементов массива и сопоставили — JavaScript

Passing unknown props

Finally, let’s look at the error messages you get when you give a prop to a custom component that isn’t in its props type. TypeScript has two different error messages, depending on what other props you pass.

<CustomInput fieldName="myField" placeholder="Type here" />

Property ‘placeholder’ does not exist on type ‘IntrinsicAttributes & IntrinsicClassAttributes<CustomInput> & Readonly<{ children?: ReactNode; }>…’.

This error message is the same one we got with in the early example, just with ’s longer props type at the end. It is very unfortunate that this is cut off before it says , because that’s a piece of information that would really help track down what’s going on. Just remember that when you see this, it’s most likely that the prop you’re passing it isn’t defined in the component’s own props interface.

Curiously, if we leave off , the error message is different:

export interface CustomInputProps {  fieldName?: string;}<CustomInput placeholder="Type here" />;

Type ‘{ placeholder: string; }’ has no properties in common with type ‘IntrinsicAttributes & IntrinsicClassAttributes<CustomInput> & Readonly<{ children?: ReactNode; }>…’.

We can see the type from the statement that’s behind the scenes, and the type for ’s props. It’s just for a reason I don’t know TypeScript says “has no properties in common” rather than “does not exist.”

The fix: Resolve the inconsistency! Either add to or remove it from .

Whew!

There we go. Explanations for the most common TypeScript errors you run into in your React JSX, and how you might solve them. Hopefully that will reduce any future rage when programming.

I will admit that finding new ways for type checking to catch errors is one of my favorite programming exercises. In the new Boards and Commissions codebase, we’re using to turn TypeScript interfaces into a GraphQL schema, which means we can use those TypeScript interfaces to very precisely typecheck our resolvers. Just as with the Registry webapp, we’re using to generate argument and output types for GraphQL queries, and we’ve also added to make TypeScript types from SQL Server tables.

It’s a good reminder to me, and anyone else who’s putting tooling together, that a guard rail is only as good as whether or not you can tell what it’s guarding against.

Acknowledgements

Guillaume Marceau, way back in his grad school days, helped me understand how type errors arise from two conflicting parts of a program. James Duffy proofread this article.

And of course to John, for powering through all of this like a champ.

Есть ли похожий объект в массиве?

Есть массив:

var massiv =

Именно в таком виде, где свойства объектов W и S идут не по порядку.

Предположим, что мы хотим узнать существование объекта {w:»Петров», s:»Петя»} в массиве. Как это сделать?

Давайте с «подводных камней». Как вам такое условие?

{w:"Петров", s:"Петя"} == {w:"Петров", s:"Петя"}
false

{w:"Петров", s:"Петя"} === {w:"Петров", s:"Петя"}
false

Неравенство идентичных объектов — JavaScript

Для кого-то это будет шок! Это значит, что мы не можем сравнивать объекты «в тупую» как они есть. Что делать?

Нужно привести объекты к строке и сравнивать строки. Поможет нам в этом конструктор JSON и его метод stringify(). В чём его слабость? В том, что он НЕ сортирует ключи перед упаковкой в строку.

Смотрим как это работает:

JSON.stringify({w:"Петров", s:"Петя"})
"{"w":"Петров","s":"Петя"}"

JSON.stringify({s:"Петя", w:"Петров"})
"{"s":"Петя","w":"Петров"}"

JSON.stringify({w:"Петров", s:"Петя"}) == JSON.stringify({s:"Петя", w:"Петров"})
false

JSON.stringify не сортирует свойства объектов — JavaScript

Сейчас нам нужна функция, которая умеет сортировать свойства в объектах, до их передачи в stringify()

Мы можем сделать так:

Конвертируем объект в массив
Сортируем массив
Переводим массив в строку
Сравниваем строки

Поехали

JSON.stringify(Object.entries({w:"Петров", s:"Петя"}).sort())
",]"

JSON.stringify(Object.entries({s:"Петя", w:"Петров"}).sort())
",]"

JSON.stringify(Object.entries({w:"Петров", s:"Петя"}).sort()) == JSON.stringify(Object.entries({s:"Петя", w:"Петров"}).sort())
true

Сравнили два объекта — получили true — JavaScript

Мы научились сравнивать объекты и теперь можем вернуться к нашему массиву и проверить есть ли в нём такой объект или нет.

Будем использовать тот же самый filter()

massiv.filter(i=>JSON.stringify(  Object.entries(i).sort()) == JSON.stringify(Object.entries({w: "Васильев", s:"Вася"}).sort())  )

Искомый объект есть в массиве — JavaScript

Обе перестановки свойств вернули нам в фильтре нужный объект. Это значит, что такой объект существует в массиве. Мы его нашли.

massiv.filter(i=>JSON.stringify(  Object.entries(i).sort()) == JSON.stringify(Object.entries({w: "Васильев", s:"Вася"}).sort())  ).length > 0
true

Использование функции .find() для поиска элемента в массиве в JavaScript

Другой способ проверить наличие элемента в массиве — использовать функцию . По сравнению с функциями и , принимает функцию в качестве параметра и выполняет ее для каждого элемента массива. Он вернет первое значение, которому удовлетворяет условие, указанное в функции параметра.

Параметр

Функция принимает функцию в качестве входного параметра. Обычно в качестве параметров мы используем стрелочные функции. И эти стрелочные функции могут содержать проверки условий типа . Еще один необязательный параметр — , который представляет индекс текущей итерации. выполняет стрелочную функцию для каждого элемента массива. Следовательно, он предоставляет итератор в качестве аргумента функции стрелки для помощи в дальнейших условных проверках.

Возвращаемое значение

немного отличается от функций , в javascript. Он возвращает значение элемента, если он найден, иначе функция возвращает undefined.

Поддержка браузера

Как и функция , работает почти во всех веб-браузерах, кроме Internet Explorer. Следовательно, мы должны быть уверены, что наш проект не поддерживается для IE, прежде чем планировать использовать такие функции для операций с массивами.

Применение

Обратитесь к следующему использованию в массиве.

Выход:

Нас может немного удивить результат , поскольку он возвращает вместо , которое было следующим по величине числом после в . множество

Обратите внимание, что функция возвращает следующий элемент, который удовлетворяет условию, указанному в функции массива, в хронологическом порядке. Для поиска элемента с блоком мы можем использовать следующий код

find

Чем же метод отличается от ? Так если бы мы в нашем примере выше изменили название метода «include» на «find», то получили бы следующую ошибку:

Uncaught TypeError: thick scales is not a function

Это произошло потому, что метод требует передачи в качестве параметра функцию. Метод использует не просто оператор сравнения, он передает каждый элемент массива в функцию, передаваемую ему в качестве параметра, и проверяет, возвращает ли она значение или .

Таким образом, и хотя следующая инструкция будет работать корректно: , но вы, вероятно, захотите добавить в качестве функции-аргумента свой собственный оператор сравнения для того, чтобы он возвращал что-то нужное нам.

const alligator = ;

alligator.find(el => el.length < 12); // вернет '4 foot tail'

Эта простая функция, передаваемая нашему методу , проверяет каждый элемент массива, доступный по присваиваемому псевдониму . Перебор элементов прекращается, когда находится первое совпадение. В нашем случае возвращается для такого элемента массива, у которого есть свойство , и его значение менее 12 (напомним, что числа не имеют свойства ). Конечно же, вы можете сделать эту функцию настолько сложной, насколько вам это необходимо, и возвращаемое ей значение соответствовало вашим требованиям.

Заметьте, что результат выполнения нашего кода, из примера выше, не возвращает , как это было ранее. Это происходит потому, что метод не возвращает логическое значение, а возвращает первый элемент, который соответствует критерию, определенному в функции. Если соответствующего элемента, который соответствует критериям, определенным в вашей функции, то метод вернет

Также обратите внимание, что он возвращает только первый элемент, соответствующий критерию. Таким образом если в массиве более одного элемента, соответствующего критерию в функции, то все равно будет возвращаться только первый, соответствующий критерию в функции

В нашем примере, если бы после элемента со значением , был другой со значением, в виде строки длиной менее 12 символов, то это ни как не изменило бы наш результат.

В нашем примере мы по сути использовали функцию обратного вызова, но только с одним параметром. При вызове метода вы можете использовать еще один параметр у функции: ссылку на индекс текущего элемента нашего массива. Еще одним параметром может быть ссылка на наш массив, но я нахожу, что его использование может пригодиться в очень редких случаях. Вот пример использования ссылки на индекс нашего обрабатываемого массива:

alligator.find((el, idx) => typeof el === "string" && idx === 2); // вернет '4 foot tall'

И так в нашем массиве три различных элемента, которые удовлетворяют условию (). Если бы это было наше единственное условие, то наш скрипт вернул бы первый элемент массива: . Но дело в том, что только у одного из элементов нашего массива индекс равен 2 и это элемент со значением .

Говоря об индексах элементов, схожим методом перебора элементов массива является . Этот метод тоже в качестве параметра принимает функцию, но, как вы уже можете догадаться, он возвращает индекс соответствующего ее критерию элемента, а не его значение.

filter

const alligator = ;

alligator.filter(el => el === 80); //вернет

Метод похож на метод тем, что требует передачи в качестве параметра функции, которая определяет критерий для выбора элементов массива, возвращаемых методом. Основное отличие этих методов состоит в том, что всегда возвращает массив, даже если найден только один, соответствующий критерию выбора, элемент. То есть он вернет все найденные элементы, тогда как вернет только первый найденный элемент.

Говоря о методе важно понимать, что он возвращает все элементы, соответствующие вашему критерию, то есть все элементы, которые вы хотите “отфильтровать”

There’s also state

Using is nearly identical to , so I won’t go into it in depth. The errors you get from it should be basically the same. To give a component’s state a type, use the second type parameter to , like so:

interface Props {  fieldName: string;}interface State {  error: string | null;}class CustomInput extends React.Component<Props, State> {  state = {    error: null;  };}

The above example also shows initializing with a default value. You could also do this with in the method. I’ve also shortened the interface names to “” and “” so they don’t wrap. They can actually be anything, as long as you’re consistent between the and the .

Итог

Первая фильтрация:

massiv.filter(i => i.constructor.name == "Array")

Отловили все массивы в основном массиве

Первая фильтрация для отлова массивов — JavaScript

Вторая фильтрация:

massiv.filter( i=>i.constructor.name == "Array" ).filter( i => JSON.stringify(Array.from(new Set(i)).sort()) == JSON.stringify(Array.from(new Set()).sort())  )

Вторая фильтрация для приведения массивов к строкам — JavaScript

Отыскали похожий массив на наш. Даже два похожих

Хочу обратить ваше внимание, что массив был исключён из фильтрации по причине наличия в нём значения «4»

Длина отфильтрованного массива больше «0» (нуля), значит искомый массив встречается в основном массиве. Это и есть условие:

massiv.filter( i=>i.constructor.name == "Array" ).filter( i => JSON.stringify(Array.from(new Set(i)).sort()) == JSON.stringify(Array.from(new Set()).sort())  ).length > 0
true

Заключение

В самом простом случае, когда мне необходимо найти в массиве какое-либо значение я использую метод , но, как вы могли заметить, применение какого-либо метода зависит от конкретного случая.

Вам нужно только узнать существует ли в массиве элемент с определенным значением? Используйте метод .

Вам нужно получить сам элемент массива, значение которого соответствует определенному критерию? Используйте методы или для получения элементов.

Вам нужно найти индекс какого-либо элемента? Используйте методы или для использования более сложного критерия поиска.

Массивы в примерах, которые мы здесь рассмотрели на самом деле простые. Однако на практике вы можете столкнуться с более сложными случаями, например, с массивами объектов. Вот несколько простых примеров практик, которые вам могут пригодится, для работы с массивами, состоящими из вложенных объектов:

const jungle = ;

// разберем объект, перед использованием методов поиска .include () или .indexOf ()
const names = jungle.map(el => el.name); // веренет 
console.log(names.includes("gorilla")); // веренет true
console.log(names.indexOf("lion")); // веренет 3 - что будет соответствовать верному положению элемента, при условии, что сортировка нового массива names не проводилась


// methods we can do on the array of objects
console.log(jungle.find(el => el.threat == 5)); // веренет объект - {name: "monkey", threat: 5}
console.log(jungle.filter(el => el.threat > 5)); // вернет массив -