Как проверить пустой ли массив в Javascript.
В Javascript очень часто приходиться работать с массивами. Одна из проверок, с которой приходится часто встречаться – это проверка на то пустой ли массив или в нем есть какие-то элементы.
Когда вы вручную создаете массив, то там эту проверку производить совершенно не обязательно, там сразу все очевидно.
Другое дело, когда массив формируется автоматически при выполнении каких-либо условий. Например, вы получаете данные из базы данных и нужно проверить нашлось ли что-либо при таких условиях, либо таких записей в базе данных нет.
Если ничего найдено не было, то будет возвращаться пустой массив. Эту ситуацию нужно отследить и делать соответствующие действия.
Давайте посмотрим на упрощенном примере, как это работает.
Итак, предположим, что у нас есть два массива с данными:
var dataFull = [3,5,7]; var dataEmpty = [];
dataFull – это массив, который содержит в себе элементы
dataEmpty – это пустой массив.
Задача в том, чтобы программно проверить пустой ли каждый из этих массивов или нет и вывести соответствующее сообщение.
Для проверки на то есть-ли какие-либо элементы в массиве, можно использовать свойство length.
data.length
Возвращаясь к задаче, которую мы поставили, решение может выглядеть вот так:
var dataFull = [3,5,7]; var dataEmpty = []; if (dataFull.length == 0)
Чтобы посмотреть, как это работает, можете перейти по следующей ссылке:
На этом все. Надеюсь, что в будущем с подобными проверками у вас больше возникать трудностей не будет.
Все мои уроки по Javascript здесь.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Как проверить, пустой ли массив в Javascript, и, если он пустой, то создать его?
Это, конечно, попахивает немного, но для сведущих в JS код вполне прозрачный.
Ответ написан более трёх лет назад
Нравится 1 1 комментарий
Rain Summers @summer_rain
VoidVolker @VoidVolker Куратор тега JavaScript
Dark side eye. А у нас печеньки! А у вас?
Если переменная является массивом — то незачем создавать еще один массив, т.к. разницы между двумя пустыми массивами нет никакой.
Возможно автор хочет провести проверку «это массив»? Проверить, является ли переменная(объект) массивом можно например так:
Object.prototype.toString.call( variableName ) == '[object Array]'
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
php, 1c-bitrix
Если под пустым массивом вы подразумеваете, что такого массива вообще нет (на такую мысль наводит ваш код, иначе зачем создавать массив с таким же именем), то вот так примерно:
try < if (someArray.length != 0) alert('Array exist.'); >catch (e) < if (e.name == "ReferenceError") < someArray = new Array(); alert ('There was no array, I made one for you!'); >>
Ну и можно добавить проверку на тип как написал @VoidVolker.
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
А какой в этом тайный смысл? «Если массив пустой, создать пустой массив.» Звучит очень странно.
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
arr = typeof arr !== ‘undefined’ ? arr : [];
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Romantik1991 @Romantik1991 Автор вопроса
Спасибо. Смысл чтобы не создавался массив заново много раз. И если он был создан, то пропустить создание, а если нет, то создать. Как-то так вот. Спасибо за ответы
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
if ((typeof a != "object") || !(a instanceof Array))
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос
Войдите, чтобы написать ответ

- JavaScript
- +1 ещё
Как объеденить круговой слайдер(диапозон) с полем ввода и кнопками + и -?
- 1 подписчик
- 2 часа назад
- 21 просмотр
Массивы
Для хранения набора данных в языке JavaScript предназначены массивы. Массивы в JavaScript представлены объектом Array . Объект Array предоставляет ряд свойств и методов, с помощью которых мы можем управлять массивом и его элементами.
Создание массива
Можно создать пустой массив, используя квадратные скобки или конструктор Array:
const users = new Array(); const people = []; console.log(users); // Array[0] console.log(people); // Array[0]
Можно сразу же инициализировать массив некоторым количеством элементов:
const users = new Array("Tom", "Bill", "Alice"); const people = ["Sam", "John", "Kate"]; console.log(users); // ["Tom", "Bill", "Alice"] console.log(people); // ["Sam", "John", "Kate"]
Можно определить массив и по ходу определять в него новые элементы:
const users = []; users[1] = "Tom"; users[2] = "Kate"; console.log(users[1]); // "Tom" console.log(users[0]); // undefined
При этом не важно, что по умолчанию массив создается с нулевой длиной. С помощью индексов мы можем подставить на конкретный индекс в массиве тот или иной элемент.
Еще один способ инициализации массивов представляет метод Array.of() — он принимает элементы и инициизирует ими массив:
const people = Array.of("Tom", "Bob", "Sam"); console.log(people); // ["Tom", "Bob", "Sam"]
Array.from
И еще один способ представляет функция Array.from() . Она имеет много вариантов, рассмотрим самые распространенные:
Array.from(arrayLike) Array.from(arrayLike, function mapFn(element) < . >) Array.from(arrayLike, function mapFn(element, index) < . >)
В качестве первого параметра — arrayLike функция принимает некий объект, который, условно говоря, «похож на массив», то есть может быть представлен в виде набора элементов. Это может быть и другой массив, это может быть и строка, которая по сути предоставляет набор символов. Вообщем какой-то набор элементов, который можно преобразовать в массив. Кроме того, это может и некий объект, в котором определено свойство length . Например:
const array = Array.from("Hello"); console.log(array); // ["H", "e", "l", "l", "o"]
В данном случае в функцию передается строка и возвращается массив, каждый элемент которого предоставляет один из символов этой строки.
В качестве второго параметра передается функция преобразования, которая через первый параметр получает текущий элемент набора и возвращает некоторый результат его трансформации. Например:
const numbers = [1, 2, 3, 4]; const array = Array.from(numbers, n => n * n); console.log(array); // [1, 4, 9, 16]
В данном случае в функцию Array.from() передается массив чисел. Второй параметр — функция (в данном случае в ее роли выступает лямбда-выражение) запускается для каждого числа из этого массива и получает это число через параметр n . В самом лямбда-выражении возвращаем квадрат этого числа. В итоге Array.from() возвратит новый массив, в котором будут квадраты чисел из массива numbers.
И еще одна версия функции Array.from() в качестве второго параметра принимает функцию преобразования, в которую кроме элемента из перебираемого набора передается и индекс этого элемента:
Array.from(arrayLike, function mapFn(element, index) < . >)
Используем эту версию и передадим в функцию объект со свойством length :
const array = Array.from(, (element, index) => < console.log(element); // undefined return index; >); console.log(array); // [0, 1, 2]
Здесь в функцию передается объект, у которого свойство length равно 3. Для функции Array.from это будет сигналом, в возвращаемом массиве должно быть три элемента. При этом неважно, что функция преобразования из второго параметра принимает элемент набора (параметр element ) — в данном случае он будет всегда undefined , тем не менее значение length:3 будет указателем, что возвращаемый массив будет иметь три элемента с соответственно индексами от 0 до 2. И через второй параметр функции преобразования — параметр index мы можем и получить текущий индекс элемента.
Тем не менее мы можем передать объект, где в качестве названий свойств применяются индексы. В этом случае объект превратится в массивоподобный объект, который можно перебрать:
const array = Array.from(, (element) => < console.log(element); return element; >); console.log(array); // ["Tom", "Sam", "Bob"]
length
Чтобы узнать длину массива, используется свойство length :
const fruit = []; fruit[0] = "яблоки"; fruit[1] = "груши"; fruit[2] = "сливы"; console.log("В массиве fruit ", fruit.length, " элемента"); for(let i=0; i < fruit.length; i++) console.log(fruit[i]);
По факту длиной массива будет индекс последнего элемента с добавлением единицы. Например:
const users = []; // в массиве 0 элементов users[0] = "Tom"; users[1] = "Kate"; users[4] = "Sam"; for(let i=0; i Tom Kate undefined undefined SamНесмотря на то, что для индексов 2 и 3 мы не добавляли элементов, но длиной массива в данном случае будет число 5. Просто элементы с индексами 2 и 3 будут иметь значение undefined .
1. Методы split() и join()
split(s) — позволяет превратить строку в массив, разбив ее по разделителю s . Это не метод массива, но рассматриваем мы его сейчас, так как раньше мы о массивах не знали.
join(s) — делает в точности противоположное split . Он берет массив и склеивает его в строку, используя s как разделитель.
// split const message = 'Welcome to Bahamas!'; // Разбивает строку по разделителю, в данном случае это пробел console.log(message.split(' ')); // ["Welcome", "to", "Bahamas!"] // Вызов split с пустой строкой разобьёт по буквам console.log(message.split('')); // [много букв :)] // join const clients = ['Mango', 'Poly', 'Ajax']; // Сошьет все элементы массива в строку, // между каждой парой элементов будет указанный разделитель console.log(clients.join(' ')); // "Mango Poly Ajax" console.log(clients.join(',')); // "Mango,Poly,Ajax" console.log(clients.join('-')); // "Mango-Poly-Ajax"2. Методы indexOf() и includes()
array.indexOf(x) — возвращает первый индекс, в котором элемент x был найден в массиве или число -1 , если такого элемента нет. Используйте indexOf тогда, когда необходимо получить непосредственно индекс элемента.
const clients = ['Mango', 'Ajax', 'Poly', 'Kiwi']; console.log(clients.indexOf('Poly')); // 2 console.log(clients.indexOf('Monkong')); // -1array.includes(x) — определяет, содержит ли массив некоторый элемент x , возвращая true или false соответственно. Используйте includes тогда, когда необходимо проверить есть ли элемент в массиве и не важен его порядковый номер.
const clients = ['Mango', 'Ajax', 'Poly', 'Kiwi']; console.log(clients.includes('Poly')); // true console.log(clients.includes('Monkong')); // false2.1. Проверка множественных условий с includes()
На первый взгляд пример ниже выглядит вполне хорошо. Однако, что если у нас будет больше красных фруктов, к примеру ещё вишня (cherry) или клюква (cranberries)? Будем ли мы расширять условие с помощью дополнительных || ?
const fruit = 'apple'; if (fruit === 'apple' || fruit === 'strawberry') console.log('It is a red fruit!'); >Можем переписать условие, с использованием Array.includes , это очень просто и масштабируемо.
// Выносим варианты в массив const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries']; const fruit = 'cherry'; if (redFruits.includes(fruit)) console.log('It is a red fruit!'); >3. Методы push(), pop(), shift(), unshift()
Добавляют или удаляют крайние элементы массива. Работают только с крайним левым и крайним правым элементом массива и не могут поставить или удалить элемент с произвольной позиции. Для наглядности, взгляните на иллюстрацию ниже.
3.1. push и pop
push() — позволяет добавить один или несколько элементов в конец массива. Метод возвращает значение свойства length , которое определяет количество элементов в массиве.
pop() — удаляет элемент из конца массива и возвращает удаленный элемент. Если массив пуст, метод возвращает undefined .
В примере кодом описаны иллюстрации выше, первые 3 шага. Создается пустой массив с именем stack и в конец массива добавляется три числа, одно за другим используя push() , затем они удаляются используя pop() .
// Создаем пустой массив const stack = []; // Добавляем элементы в конец массива stack.push(1); console.log(stack); // [1] stack.push(2); console.log(stack); // [1, 2] stack.push(3); console.log(stack); // [1, 2, 3] // Удаляем элементы из конца массива console.log(stack.pop()); // 3 console.log(stack); // [1, 2] console.log(stack.pop()); // 2 console.log(stack); // [1] console.log(stack.pop()); // 1 console.log(stack); // [] console.log(stack.pop()); // undefined3.2. shift() и unshift()
Реже используются методы shift и unshift .
- shift() — удаляет элемент из начала массива и возвращает его (элемента) значение.
- unshift() — добавляет элемент в начало массива.
const clients = ['Mango', 'Ajax', 'Poly']; console.log(clients.shift()); // Mango console.log(clients); // ["Ajax", "Poly"] clients.unshift('Kiwi'); console.log(clients); // ["Kiwi", "Ajax", "Poly"]4. Метод slice()
Синтаксис метода slice() одинаков для строк и массивов. Его просто запомнить. Он позволяет извлекать элементы подмножества массива и добавлять их в новый массив. В большинстве случаев используется для создания копии части или целого исходного массива.
slice(begin, end)Копирует элементы от begin , до, но не включая, end .
- Оба аргумента ( begin и end ) не обязательны.
- Параметр begin определяет индекс, с которого следует начинать извлечение.
- Параметр end , определяет индекс элемента, на котором следует закончить извлечение. Метод slice не включает элемент с индексом end в извлеченные элементы.
- Если begin и end не указаны, копирование будет с начала массива, с индекса 0 , - то есть скопируется весь массив.
- Если не указать параметр end , метод slice будет использовать длину массива ( length ) для параметра end .
- Метод slice не изменяет исходный массив, а возвращает новый массив, содержащий копию элементов исходного.
- Можно использовать отрицательные индексы, они отсчитываются с конца.
const clients = ['Mango', 'Ajax', 'Poly', 'Kiwi']; // Вернет новый массив в котором будут элементы с индексами от 1 до 2 console.log(clients.slice(1, 3)); // ["Ajax", "Poly"] // Вернет новый массив в котором будут // элементы с индексами от 1 до (clients.length - 1) console.log(clients.slice(1)); // ["Ajax", "Poly", "Kiwi"] // Вернет копию исходного массива console.log(clients.slice()); // ["Mango", Ajax", "Poly", "Kiwi"] // Вернет новый массив состоящих из последних двух элементом исходного console.log(clients.slice(-2)); // ["Poly", "Kiwi"]5. Метод splice()
splice() — швейцарский нож для работы с массивами, в том случае, если исходный массив необходимо изменить. Позволяет удалять, добавлять и заменять элементы в произвольном месте массива.
5.1. Удаление элементов массива
Чтобы удалить элементы в массиве, передаются два аргумента.
splice(position, num)
- position — указывает позицию (индекс) первого элемента для удаления
- num — определяет количество удаляемых элементов
Метод splice изменяет исходный массив и возвращает массив, содержащий удаленные элементы.
// Предположим, у нас есть массив оценок, который содержит пять чисел от 1 до 5. const scores = [1, 2, 3, 4, 5]; // Следующая операция удаляет три элемента массива, // начиная с первого элемента (индекс 0). const deletedScores = scores.splice(0, 3); // Теперь массив scores содержит два элемента. console.log(scores); // [4, 5] // А массив deletedScores содержит три удаленных элемента. console.log(deletedScores); // [1, 2, 3]На рисунке показан вызов метода score.splice(0, 3) из примера выше.
5.2. Вставка элементов в массив
Вы можете вставить один или несколько элементов в массив, передав три или более аргумента методу splice , при этом второй аргумент должен быть равен нулю.
splice(position, 0, new_element_1, new_element_2, ...)
- Аргумент position указывает начальную позицию в массиве, куда будут вставлены новые элементы.
- Второй аргумент равен нулю 0 , он говорит методу не удалять какие-либо элементы.
- Третий, четвертый и все последующие аргументы — это новые элементы, которые вставляются в массив.
Обратите внимание, что метод splice изменяет исходный массив. Кроме того, он не удаляет какие-либо элементы, поэтому в этом случае возвращается пустой массив.
// Предположим, что у вас есть массив с названиями цветов в виде строк. const colors = ['red', 'green', 'blue']; // Следующая операция помещает один новый элемент перед вторым элементом. colors.splice(2, 0, 'purple'); // Теперь массив цветов содержит четыре элемента // с новым элементом, вставленным во вторую позицию. console.log(colors); // ["red", "green", "purple", "blue"] // Вы можете вставить более одного элемента, передав четвертый, пятый аргумент и т. д. colors.splice(1, 0, 'yellow', 'pink');На рисунке показан вызов метода colors.splice(2, 0, 'purple') из примера выше.
5.3. Замена элементов массива
Метод splice() также позволяет вставить новые элементы в массив при одновременном удалении существующих элементов.
Для этого необходимо передать по крайней мере три аргумента: вторым — количество элементов для удаления, а третьим — элементы для вставки. Количество удаляемых и добавляемых элементов может не совпадать.
// Предположим, у вас есть массив языков программирования из четырех элементов. const languages = ['C', 'C++', 'Java', 'JavaScript']; // Следующая операция заменяет второй элемент на новый. languages.splice(1, 1, 'Python'); // В массиве языков теперь все еще четыре элемента, // но второй элемент теперь «Python» вместо «C++». console.log(languages); // ["C", "Python", "Java", "JavaScript"] // Вы можете заменить один элемент на несколько элементов, // передав больше аргументов languages.splice(2, 1, 'C#', 'Swift', 'Go'); console.log(languages); // ["C", "Python", "C#", "Swift", "Go", "JavaScript"]На рисунке показан вызов метода languages.splice(1, 1, 'Python') из примера выше.
6. Метод concat()
Используется для объединения двух или более массивов. Этот метод не изменяет исходный массив, а возвращает новый.
const oldClients = ['Mango', 'Ajax', 'Poly', 'Kiwi']; const newClients = ['Monkong', 'Singu']; const allClients = oldClients.concat(newClients); console.log(allClients); // ["Mango", "Ajax", "Poly", "Kiwi", "Monkong", "Singu"] console.log(oldClients); // ["Mango", "Ajax", "Poly", "Kiwi"] console.log(newClients); // ["Monkong", "Singu"]results matching " "
No results matching " "







