Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Javascript пустой массив: Как проверить пустой ли массив в Javascript.

Как обозначить пустой массив в условии? — efim360.ru

Есть два массива (полный и пустой):

var massiv1 = [1, 2, 3, 4, 5] // полный массив
var massiv2 = []              // пустой массив
Полный и пустой массивы — JavaScript

На пустоту массива влияет значение его «длины». Давайте взглянем на стандарт ECMAScript, где описано это свойство у экземпляров класса Array.

Стандарт ECMAScript — свойства экземпляров Array

 

То есть у каждого массива есть своё собственное значение длины — свойство «length«. Если массив пустой, то у него нет элементов, а значит и длина такого массива равна 0.

massiv1.length // вернётся 5
massiv2.length // вернётся 0
Разные длины массивов — JavaScript

 

Решение задачи — написание условия пустоты массива

Решение вопроса сводится к тому, чтобы отлавливать массивы длиной 0. То есть наше условие будет выглядеть примерно так:

arr.length == 0

Мы не присваиваем ноль, а сравниваем с нулём — поэтому два знака равенства.

 

Как это выглядит в блоке IF?

В блоке IF срабатывает приведение к логическому типу, если мы передаём в него числовое значение (целое).

Длина массива — это всегда целое число. Не важно 0 это, или что-то большее.

В итоге мы можем просто записать выражение arr.length без сравнивания с нулём.

if(arr.length){
  console.log("В массиве есть элементы")
}else{
  console.log("Массив пустой")
}

Скриншот работы из консоли браузера:

Условие пустоты массива в JavaScript

Оба выражения [].length и [1,2,3].length неявно приводятся к логическому типу внутри круглых скобок оператора if.

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

  • Boolean([].length)
  • Boolean([1,2,3].length)
Приведение длины массива к логическому типу через класс Boolean в JavaScript

 

 

Функция, которая проверяет массив на пустоту

Напишем функцию, которая будет проверять массив на пустоту и возвращать соответствующее сообщение в консоль браузера:

function is_arr_0 (arr){return !Boolean(arr.
  length)}

В этом случае нам нужно применить отрицание в виде восклицательного знака, чтобы поменять ИСТИНУ на ЛОЖЬ или наоборот ЛОЖЬ на ИСТИНУ т. к. мы хотим понять пустой ли он или нет.

Если вернётся TRUE — значит массив пустой. Если вернётся FALSE — значит массив полный.

Пример работы:

Функция проверки массива на пустоту — JavaScript возвращает логический тип

Или с выводом в консоль

function massiv_pustoi_ili_net (arr){
   arr.length == 0 ? console.log("Массив пустой") : console.log("В массиве есть элементы")
}
Функция проверки массива на пустоту — JavaScript

Мы использовали «тернарный оператор» JavaScript. Он работает так:

  1. Условие
  2. Знак вопроса «?»
  3. Действие если условие истинно — TRUE
  4. Знак двоеточия «:»
  5. Действие если условие ложно — FALSE

 

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

Передадим в функцию massiv1:

massiv_pustoi_ili_net (massiv1)
Ответ консоли — массив полный — JavaScript

Передадим в функцию massiv2:

massiv_pustoi_ili_net (massiv2)
Ответ консоли — массив пустой — JavaScript

 

Итог

Мы выполнили задачу и научились обозначать пустоту массивов в условии.

 

Информационные ссылки

Стандарт ECMAScript — https://tc39.es/ecma262/multipage/

JavaScript | Массивы (Array)

JavaScript | Как уменьшить длину массива?

JavaScript | Как увеличить длину массива?

JavaScript | Как изменить длину массива?

Массив — JavaScript — Дока

Кратко

Скопировано

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

Массивы очень похожи на нумерованные списки.

Как пишется

Скопировано

Создадим массив с помощью квадратных скобок [].

К примеру, можно создать пустой массив:

const guestList = [] // 😭 гостей нет
          
 const guestList = [] // 😭 гостей нет

А можно создать сразу с элементами внутри:

const theGirlList = ['Серсея', 'Илин Пейн', 'Меррин Трант', 'Дансен', 'Гора']
          const theGirlList = ['Серсея', 'Илин Пейн', 'Меррин Трант', 'Дансен', 'Гора']

Элементы могут быть разных типов:

const infoArray = ['Россия', 'Москва', 144.5, 'Russian ruble', true]
          const infoArray = ['Россия', 'Москва', 144.5, 'Russian ruble', true]

Внутри массива могут быть другие массивы:

const arrayOfArrays = [  'Россия',  ['Москва', 'Санкт-Петербург', 'Казань', 'Екатеринбург'],  [true, true, false, true]]
          const arrayOfArrays = [
  'Россия',
  ['Москва', 'Санкт-Петербург', 'Казань', 'Екатеринбург'],
  [true, true, false, true]
]

Как понять

Скопировано

Массивы хранят элементы в пронумерованных «ячейках».

Нумерация начинается с нуля. Первый элемент массива будет иметь номер 0, второй — 1 и так далее. Номера называют индексами.

Количество доступных ячеек называют размером или длиной массива. В JavaScript длина массива обычно совпадает с количеством элементов в нем. Массивы хранят свой размер в свойстве length:

const infoArray = ['Россия', 'Москва', 144.5, 'Russian ruble', true]console.log(infoArray.length)// 5
          const infoArray = ['Россия', 'Москва', 144.5, 'Russian ruble', true]
console.log(infoArray.length)
// 5

💡 Чтение

Скопировано

Чтобы получить содержимое ячейки с этим номером, обратитесь к конкретному индексу. Если ячейка пустая или такой ячейки нет, то JavaScript вернёт undefined:

const guestList = ['Маша', 'Леонард', 'Шелдон', 'Джон Сноу']const firstGuest = guestList[0]console.log(firstGuest)// Машаconsole.log(guestList[3])// Джон Сноуconsole.
  log(guestList[999])// undefined
          const guestList = ['Маша', 'Леонард', 'Шелдон', 'Джон Сноу']
const firstGuest = guestList[0]
console.log(firstGuest)
// Маша
console.log(guestList[3])
// Джон Сноу
console.log(guestList[999])
// undefined

💡 Запись

Скопировано

Используйте комбинацию чтения и оператора присваивания:

const episodesPerSeasons = [10, 10, 10, 10, 10, 9, 7, 6]console.log(episodesPerSeasons[5])// 9// запись в ячейку с индексом 5:episodesPerSeasons[5] = 10console.log(episodesPerSeasons[5])// 10
          const episodesPerSeasons = [10, 10, 10, 10, 10, 9, 7, 6]
console.log(episodesPerSeasons[5])
// 9
// запись в ячейку с индексом 5:
episodesPerSeasons[5] = 10
console.log(episodesPerSeasons[5])
// 10

💡 Добавление элементов

Скопировано

Добавление элементов — это частая операция. Для добавления используйте методы:

  • push() — для добавления в конец массива.
  • unshift() — для добавления в начало массива.

Оба принимают произвольное количество аргументов. Все аргументы будут добавлены в массив. Лучше использовать push(), он работает быстрее. Методы возвращают размер массива после вставки:

const watched = ['Властелин Колец', 'Гарри Поттер']watched.push('Зеленая Книга')console.log(watched)// ['Властелин Колец', 'Гарри Поттер', 'Зеленая книга']let newLength = watched.push('Мстители', 'Король Лев')console.log(newLength)// 5newLength = watched.unshift('Грязные танцы')console.log(newLength)// 6console.log(watched)// ['Грязные танцы', 'Властелин Колец', 'Гарри Поттер', 'Зеленая книга', 'Мстители', 'Король Лев']
          
 const watched = ['Властелин Колец', 'Гарри Поттер']
watched.push('Зеленая Книга')
console.log(watched)
// ['Властелин Колец', 'Гарри Поттер', 'Зеленая книга']
let newLength = watched.push('Мстители', 'Король Лев')
console. log(newLength)
// 5
newLength = watched.unshift('Грязные танцы')
console.log(newLength)
// 6
console.log(watched)
// ['Грязные танцы', 'Властелин Колец', 'Гарри Поттер', 'Зеленая книга', 'Мстители', 'Король Лев']

💡 Создать большой массив из чисел

Скопировано

С помощью цикла и метода push() можно быстро создать большой массив с числами.

Создадим массив чисел от 1 до 1000:

const numbers = []for (let i = 1; i <= 1000; ++i) {  numbers.push(i)}
          const numbers = []
for (let i = 1; i <= 1000; ++i) {
  numbers.push(i)
}

Создадим массив чётных чисел от 0 до 1000:

const evenNumbers = []for (let i = 0; i <= 1000; i += 2) {  evenNumbers.push(i)}
          const evenNumbers = []
for (let i = 0; i <= 1000; i += 2) {
  evenNumbers.push(i)
}

💡 Поиск по массиву

Скопировано

Используйте indexOf(), чтобы найти, под каким индексом хранится элемент.

Используйте includes(), чтобы проверить, что элемент есть в массиве:

const episodesPerSeasons = [10, 10, 10, 10, 10, 9, 7, 6]console.log(episodesPerSeasons.includes(8))// falseconsole.log(episodesPerSeasons.includes(6))// true
          const episodesPerSeasons = [10, 10, 10, 10, 10, 9, 7, 6]
console.log(episodesPerSeasons.includes(8))
// false
console.log(episodesPerSeasons.includes(6))
// true

На практике

Скопировано

Николай Лопин советует

Скопировано

🛠 Копирование массива

Скопировано

С копированием есть хитрость. Массив — большая структура, и она не вмещается в одну переменную. Переменная хранит адрес, где находится массив. Если этого не знать, то результат такого кода будет выглядеть странно:

const iWatched = ['GameOfThrones', 'Breaking Bad']const vitalikWatched = iWatchedvitalikWatched. push('American Gods')console.log(iWatched)// ['GameOfThrones', 'Breaking Bad', 'American Gods'] 🤷‍♂️
          const iWatched = ['GameOfThrones', 'Breaking Bad']
const vitalikWatched = iWatched
vitalikWatched.push('American Gods')
console.log(iWatched)
// ['GameOfThrones', 'Breaking Bad', 'American Gods'] 🤷‍♂️

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

iWatched и vitalikWatched работают с одним массивом, так как хранят один адрес. Это особенность работы со значениями, которые хранятся по ссылке.

Копия массива создаётся с помощью метода slice(). Нужно вызвать его без аргументов и сохранить результат в новую переменную:

const iWatched = ['GameOfThrones', 'Breaking Bad']const vitalikWatched = iWatched.slice()vitalikWatched.push('American Gods')console. log(iWatched)// ['GameOfThrones', 'Breaking Bad'] 👍console.log(vitalikWatched)// ['GameOfThrones', 'Breaking Bad', 'American Gods'] 💪
          const iWatched = ['GameOfThrones', 'Breaking Bad']
const vitalikWatched = iWatched.slice()
vitalikWatched.push('American Gods')
console.log(iWatched)
// ['GameOfThrones', 'Breaking Bad'] 👍
console.log(vitalikWatched)
// ['GameOfThrones', 'Breaking Bad', 'American Gods'] 💪

🛠 Деструктуризация массива

Скопировано

В современном JavaScript очень популярна деструктуризация массивов. Этот подход позволяет создавать переменные из элементов массива в одну строку:

const catProfile = [  'Maru',  'Scottish Fold',  true,  'https://youtu.be/ChignoxJHXc']
          const catProfile = [
  'Maru',
  'Scottish Fold',
  true,
  'https://youtu.be/ChignoxJHXc'
]

В старом подходе, если из массива нужна пара значений, то их читают и сохраняют в переменные:

const catName = catProfile[0]const catBreed = catProfile[1]
          const catName = catProfile[0]
const catBreed = catProfile[1]

Новый подход делает то же самое, но короче:

const [name, breed] = catProfileconsole. log(name)// Maru
          const [name, breed] = catProfile
console.log(name)
// Maru

5 способов проверить, пуст ли массив Javascript | by Miroslav Šlapka

plus Typescript tip

Фото Pawel Czerwinski на Unsplash

Я кратко опишу, что такое массив Javascript (JS), как мы его используем, а затем я опишу, как мы можем проверить, пуст ли он. Есть и другие способы сделать это, поэтому я буду описывать их постепенно, так как язык JS развивается, и теперь у нас есть лучшие и более краткие способы сделать это. Если вы работаете с Typescript (TS), есть интересный и более надежный способ проверки пустых массивов.

Массивы JS служат для хранения нескольких значений в списке. Массив JS — это подтип объекта JS. Это означает, что он каким-то образом расширяет поведение JS-объекта. Буквальный синтаксис массива использует квадратные скобки:

 let myArray = []

в то время как объект использует фигурные скобки:

 let myObject = {}

Массивы JS используют числовые индексы, начиная с индекса 0 . У них также есть свойство length , что говорит само за себя. Вот пример: 9( числа, строки, объекты и т. д.) Вот как мы можем получить доступ к отдельным значениям:

 myArray[0] 
 // 1myArray[2] 
 // 'яблоко'

Предостережение

Существуют так называемые «пустые слоты в массивах JS.

Если вы назначаете индекс массива более чем на одну позицию за текущим концом массива, JS оставит промежуточные слоты «пустыми», а не автоматически присвоит им значение undefined, как вы могли ожидать.

Учитывая массив, который мы определили выше, мы могли бы сделать следующее:

 myArray[10] = 'carrot' 
 myArray.length 
 // 11

Все остальные позиции были бы неопределенными.

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

Опишем 5 способов проверки того, что массив JS пуст и существует ли он.

1. Свойство длины

Первое, о чем вы можете подумать, это длина свойства , которые мы уже рассмотрели.

 myArray.length ? true : false

Это вернет false, если длина равна 0. Что если, например, myArray не определено? Или что, если вместо этого мы получим null , потому что значение поступает из бэкенда? Нам нужно убедиться, что myArray существует, иначе мы получим следующую ошибку:

Uncaught TypeError: Cannot read properties of undefined (чтение «длина»)

2. Оператор And (&&) и длина

Мы можем использовать оператор && , чтобы избежать предыдущей ошибки.

 myArray && myArray.length ? true : false

Это хорошо, но есть более короткий путь с использованием необязательного оператора цепочки .? .

3. Необязательная цепочка (.?)

Вместо использования оператора && для проверки существования myArray и в то же время наличия свойства length, мы можем написать:

 myArray?. length ? правда : ложь

Говоря об операторах, я хотел бы упомянуть также оператор объединения Nullish (??). Наш массив также содержит объект, поэтому мы можем проверить его свойство.

 let myArray = [1, 245, 'яблоко', {тип: 'фрукт'}] 
 myArray?.[3]?.type ?? 'No type property' 
 // 'fruit'

Мы получаем то, что оцениваем слева, если это правда, иначе мы получаем то, что находится справа от ?? .

4. Логическое НЕ(!)

Смотря что вам действительно нужно, а тут другой способ. Логический оператор not инвертирует значения. Следующее вернет true в случае, если myArray пуст, то есть [] или undefined или null .

 !myArray?.length ? true : false

5. Метод isArray()

Как мы действительно узнаем, работаем ли мы с массивом? Свойство длины существует также в строке. Мы могли бы использовать метод isArray():

 let myArray = [1, 245, 'apple', { type: 'fruit' }]Array. isArray(myArray) 
 // true

Очевидно, вы можете комбинировать подходы, перечисленные выше. . Например:

 if (Array.isArray(myArray) && myArray.length) { 
 // массив существует и не пуст 
 }

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

 интерфейс экспорта NonEmptyArray extends ReadonlyArray { 
 // tslint:disable-next-line: readonly-keyword 
 0: A; 
 } 
 type ReadOnlyNotEmptyArray = Readonly>; function isNotEmptyArray(as: T[]): as NotEmptyArray { 
 возврат as.length > 0; 
 }

Я перечислил несколько способов использования операторов для работы с массивами и проверки, пусты они или нет. Мы начали со свойства length и ввели такие операторы, как && , необязательную цепочку .? , Нулевой оператор объединения ?? и, наконец, метод isArray() . Если вы работаете с TypeScript, вы можете включить в свое приложение фрагмент, который проверяет наличие пустого массива.

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

Ссылки

Оставить комментарий

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

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