Перейти к содержимому

Как получить первый элемент массива js

  • автор:

Array.prototype.find()

Метод find() возвращает значение первого найденного в массиве элемента, которое удовлетворяет условию переданному в callback функции. В противном случае возвращается undefined .

Также смотрите метод findIndex() , который возвращает индекс найденного в массиве элемента вместо его значения.

Если вам нужно найти позицию элемента или наличие элемента в массиве, используйте Array.prototype.indexOf() или Array.prototype.includes() соответственно.

Синтаксис

arr.find(callback[, thisArg])

Параметры

Функция, вызывающаяся для каждого значения в массиве, принимает три аргумента:

Текущий обрабатываемый элемент в массиве.

Индекс текущего обрабатываемого элемента в массиве.

Массив, по которому осуществляется проход.

Необязательный параметр. Значение, используемое в качестве this при выполнении функции callback .

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

Значение элемента из массива, если элемент прошёл проверку, иначе undefined .

Описание

Метод find вызывает переданную функцию callback один раз для каждого элемента, присутствующего в массиве, до тех пор, пока она не вернёт true . Если такой элемент найден, метод find немедленно вернёт значение этого элемента. В противном случае, метод find вернёт undefined . До Firefox 34 функция callback не вызывалась для «дырок» в массивах (bug 1058394).

Функция callback вызывается с тремя аргументами: значением элемента, индексом элемента и массивом, по которому осуществляется проход.

Если в метод find был передан параметр thisArg , при вызове callback он будет использоваться в качестве значения this . В противном случае в качестве значения this будет использоваться значение undefined .

Метод find не изменяет массив, для которого он был вызван.

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

Примеры

Пример: поиск простого числа в массиве

Следующий пример находит в массиве положительных чисел элемент, являющийся простым числом (либо возвращает undefined , если в массиве нет простых чисел).

function isPrime(element, index, array)  var start = 2; while (start  Math.sqrt(element))  if (element % start++  1)  return false; > > return element > 1; > console.log([4, 6, 8, 12].find(isPrime)); // undefined, не найдено console.log([4, 5, 8, 12].find(isPrime)); // 5 

Полифил

Этот метод был добавлен в спецификации ECMAScript 6 и пока может быть недоступен во всех реализациях JavaScript. Однако, вы можете использовать следующий сниппет в качестве полифила:

// https://tc39.github.io/ecma262/#sec-array.prototype.find if (!Array.prototype.find) < Object.defineProperty(Array.prototype, 'find', < value: function(predicate) < // 1. Let O be ? ToObject(this value). if (this == null) < throw new TypeError('"this" is null or not defined'); >var o = Object(this); // 2. Let len be ? ToLength(? Get(O, "length")). var len = o.length >>> 0; // 3. If IsCallable(predicate) is false, throw a TypeError exception. if (typeof predicate !== 'function') < throw new TypeError('predicate must be a function'); >// 4. If thisArg was supplied, let T be thisArg; else let T be undefined. var thisArg = arguments[1]; // 5. Let k be 0. var k = 0; // 6. Repeat, while k < len while (k < len) < // a. Let Pk be ! ToString(k). // b. Let kValue be ? Get(O, Pk). // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)). // d. If testResult is true, return kValue. var kValue = o[k]; if (predicate.call(thisArg, kValue, k, o)) < return kValue; >// e. Increase k by 1. k++; > // 7. Return undefined. return undefined; >, configurable: true, writable: true >); >

Спецификации

Specification
ECMAScript Language Specification
# sec-array.prototype.find

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

  • Array.prototype.findIndex() Экспериментальная возможность
  • Array.prototype.every()

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 4 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Как найти первый элемент в массиве и если он пустой то вставить или удалить?

Как при загрузке проверить, если в массиве product.thumbs есть пустой элемент (первый найденный) с image === » то в него вставить данные, если в массиве нет пустых значений то просто запушить в массив сам массив

product: < thumbs: [ < image: '', thumb: '', >, < image: '', thumb: '', >, < image: '', thumb: '', >, < image: '', thumb: '', >, ], > 

и функция загрузки

uploadGallery() < const that = this const galleries = event.target.files galleries.forEach(function (value, index, product) < const formData = new FormData() formData.append('image', value) formData.append('path', 'products') that.$axios .$post('/api/v1/shop/1/upload/image', formData, < headers: < 'Content-Type': 'multipart/form-data' >, >) .then((response) => < if (!that.product.image) < that.product.image = response.path + response.image >that.product.thumbs.push(< image: response.image, path: response.path, >) >) .catch((error) => < >) return index < that.countThumb + 1 >) >, 

Отслеживать
задан 19 янв 2021 в 6:09
1,255 1 1 золотой знак 12 12 серебряных знаков 40 40 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

let product = < thumbs: [ < image: '', thumb: '', >, < image: '', thumb: '', >, < image: '', thumb: '', >, < image: '', thumb: '', >] > if (product.thumbs.find(item => item.image === "") != null) < product.thumbs.find(item =>item.image === "").image = "response.path " + "response.image" > product.thumbs.push(< image: "response.image", path: "response.path" >) console.log(product)

Отслеживать
ответ дан 19 янв 2021 в 6:43
Aziz Umarov Aziz Umarov
22.5k 2 2 золотых знака 10 10 серебряных знаков 33 33 бронзовых знака

Можно сделать через функцию. Так можно получить не только image, но и любой указанный key.

let product = < thumbs: [ < image: 'Не пустой image', thumb: '2', >, < image: 'Не пустой image', thumb: '4', >, < image: 'Не пустой image', thumb: '', >, < image: '', thumb: '', >] > function findEmptyValue(arr, key) < return arr.map(el =>el[key].length === 0 ? 'image' : el); > console.log(findEmptyValue(product.thumbs, 'image')); 

Отслеживать
ответ дан 19 янв 2021 в 7:18
695 4 4 серебряных знака 13 13 бронзовых знаков

  • javascript
  • vue.js
  • nuxt.js
    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.3.2953

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как вывести элемент массива js

Для вывода элемента массива по его индексу используется синтаксис вида ‘имя_массива[индекс_элемента]’ .

Рассмотрим на примере:

const animals = ['cow', 'elephant', 'dog', 'cat', 'bird']; console.log(animals[0]); // => cow (нумерация в массиве начинается с 0, а не с 1!) console.log(animals[2]); // => dog console.log(animals[3]); // => cat 

Для вывода последнего элемента массива воспользуемся свойством length , возвращающим длину массива, то есть количество элементов в нём:

console.log(animals[animals.length - 1]); // => bird 

26 ноября 2021

Чтобы вывести один элемент из массива, можно обратиться к этому массиву по индексу:

const users = [  name: 'Name1' >,  name: 'Name2' > ]; console.log(users[1]); // => 

Если нужно найти какой-то элемент по определенному свойству и вывести его, то можно воспользоваться методом поиска find() :

const users = [  name: 'Name1' >,  name: 'Name2' > ]; const result = users.find((user) => user.name === 'Name2'); console.log(result); // => 

Получить первый элемент массива (JavaScript)

Первый элемент массива можно получить несколькими способами. При помощи метода массива .shift() , матода .slice() и получение нулевого элемента массива (если знаем что таковой имеется).

.shift()

У массива в яваскрипте определен метод .shift() , который извлекает и возвращает первый элемент массива. Соответственно после извлечения — элемент пропадает из массива.

Пример

// массив var arr = [‘this’, ‘is’, ‘an’, ‘array’]; alert(arr.shift()); // this // Массив arr теперь состоит из элементов: is, an, array

.slice()

Функция .slice(start[, end] ) формирует новый массив из текущих элементов. Начиная с элемента со значением ключа start и до конца массива или до элемента с ключом end , если передан соответствующий параметр end .

Пример

// массив var arr = [‘this’, ‘is’, ‘an’, ‘array’]; alert(arr.slice(0, 1)[0]); // this // Массив arr как и прежде состоит из 4 элементов: this, is, an, array

Нулевой элемент

Если известно, что массив имеет элемент с нулевым ключом, то и получаем этот элемент соответствующим образом.

Пример

// массив var arr = [‘this’, ‘is’, ‘an’, ‘array’]; alert(arr[0]); // this
✖ ❤ Мне помогла статья нет оценок
22854 просмотра нет комментариев Артём Фёдоров 14 декабря 2012

Категории

Читайте также

  • Случайный элемент массива (JavaScript)
  • Получить первое значение массива (PHP)
  • Как удалить элемент ассоциативного массива (JavaScript)
  • Получить последнее значение массива (PHP)
  • Получить последовательность элементов массива (PHP)
  • Найти и удалить элемент массива (PHP)
  • Количество элементов ассоциативного массива (JavaScript)
  • Ассоциативный массив в JavaScript
  • Получить массив ключей (PHP)
  • Массив уникальных значений (JavaScript)
  • Элементы массива в случайном порядке (PHP)
  • Поменять местами 2 элемента массива (PHP)

Комментарии

Написать комментарий
© Экспэнч 2010-2024
При полном или частичном копировании статей сайта указывайте пожалуйста ссылку на источник
Хотите узнать больше информации, пишите на: artem@expange.ru

Вход на сайт

Введите данные указанные при регистрации:

Социальные сети

Вы можете быстро войти через социальные сети:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *