Как добавить элемент в массив JavaScript по условию?
Учебное пособие по определению массива JavaScript с условно добавляемыми в него элементами.
Иногда мы хотим условно добавить элементы в массив JavaScript. В этой статье мы рассмотрим, как определить массив JavaScript с условно добавленными в него элементами.
Использование оператора распыления (spread, . )
Мы можем использовать оператор spread для распыления массива в другой массив. Например, мы можем написать:
const items = [ 'foo', . true ? ['bar'] : [], . false ? ['falsy'] : [], ] console.log(items)Тогда items будет ["foo", "bar"] , так как у нас есть тернарное выражение, в котором false является значением условной части тернарного выражения. Если оно истинно, то содержимое массива после ? попадет в items . В противном случае в items будут помещены элементы пустого массива.
Вызов Array.prototype.push по условию
Еще один способ добавить элементы в массив JavaScript по условию - использовать метод push . Например, мы можем написать:
const items = [ 'foo', ] if (true) < items.push("bar"); >if (false) < items.push("false"); >console.log(items)Тогда 'bar' добавляется к элементам, а 'false' - нет. Это происходит потому, что первое условное значение имеет условие true , а второе - false . Поэтому items снова будет ["foo", "bar"] .
Итоги
Мы можем распылять (spread) элементы в массив по условию с помощью оператора spread. Также мы можем вызывать push для добавления элементов в массив JavaScript по условию if / else .
Как создать рандомное целое число в JavaScript
год назад · 1 мин. на чтение
Часто требуется создать случайное число в JavaScript. В этой статье напишем простую функцию, которая выводит рандомное число из заданного диапазона.
Эта функция выводит рандомное целое число из диапазона. Первое число диапазона включается, конечное - не включается. min и max - целые числа.
// [min, max) const getRandomInt = (min, max) => < return Math.floor(Math.random() * (max - min) + min); >;Например, если требуется получить рандомное число 1,2,3. 100, то вызов будет выглядеть таким образом:
console.log(getRandomInt(1, 101)) // 5, 31, 17, 89, .Вставка элемента в массив на определенной позиции в JavaScript
В работе с JavaScript часто возникают ситуации, когда нужно вставить элемент в массив на определенную позицию. Представим, что есть массив цветов:
let colors = ['красный', 'синий', 'зеленый'];И требуется вставить цвет ‘желтый’ на второе место. Для решения этой задачи можно использовать метод splice() , который умеет как удалять, так и добавлять элементы в массив.
Метод splice()
Метод splice() изменяет содержимое массива, удаляя или заменяя существующие элементы и/или добавляя новые элементы.
array.splice(start[, deleteCount[, item1[, item2[, . ]]]])
- start : Индекс, по которому начинает изменять массив.
- deleteCount (необязательный): Количество элементов, которые нужно удалить.
- item1, item2, . (необязательные): Элементы, которые нужно добавить в массив.
Пример использования
Вернемся к нашему примеру с массивом цветов. Чтобы вставить ‘желтый’ на второе место, нужно вызвать splice() следующим образом:
colors.splice(1, 0, 'желтый');
Теперь массив colors выглядит так:
['красный', 'желтый', 'синий', 'зеленый']
Таким образом, метод splice() – это мощный инструмент для работы с массивами в JavaScript, который позволяет вставлять, удалять и заменять элементы массива.
Добавление новых элементов в начало массива в JavaScript
Одной из распространенных задач в JavaScript является добавление новых элементов в начало массива. Возможно, есть некий массив чисел, например:
let nums = [10, 20, 30, 40, 50];
И требуется добавить новое число в начало этого массива. На первый взгляд, кажется, что это можно сделать путем создания нового массива, добавления в него нового элемента, а затем добавления каждого элемента из исходного массива:
let newNum = 5; let newArr = []; newArr.push(newNum); for(let i = 0; i < nums.length; i++) < newArr.push(nums[i]); >nums = newArr;
Этот подход работает, но он неэффективен и неудобен. К счастью, JavaScript предоставляет встроенную функцию unshift() , которая добавляет новые элементы в начало массива.
let nums = [10, 20, 30, 40, 50]; nums.unshift(5);
После выполнения этого кода массив nums будет выглядеть так: [5, 10, 20, 30, 40, 50] . Функция unshift() возвращает новую длину массива.
Таким образом, метод unshift() является более эффективным и удобным способом добавления новых элементов в начало массива в JavaScript.
doctor Brain
Итак, Вам нужно добавить элемент или несколько элементов в массив. Какие возможности предлагает JavaScript?
Как добавить один элемент
Чтобы добавить в массив единственный элемент, можно воспользоваться методом push() встроенного объекта array:
const fruits = ['banana', 'pear', 'apple'] fruits.push('mango') Метод push() присоединяет элемент, изменяя существующий массив.
Для создания нового массива подойдет метод concat():
const fruits = ['banana', 'pear', 'apple'] const allfruits = fruits.concat('mango') Следует отметить, что на самом деле concat() не добавляет к массиву элемент, а создает новый массив, присвоив его новой переменной или переменной, указывающей на исходный массив. В последнем случае для определения оригинального массива нужно использовать let, а не const.
let fruits = ['banana', 'pear', 'apple'] fruits = fruits.concat('mango') Как добавить несколько элементов
Для того, чтобы добавить массив несколько элементов можно так же использовать метод push(), передав в него несколько аргументов:
const fruits = ['banana', 'pear', 'apple'] fruits.push('mango', 'melon', 'avocado') Кроме того, можно использовать и метод concat() c аргументами, разделенными запятой:
const fruits = ['banana', 'pear', 'apple'] const allfruits = fruits.concat('mango', 'melon', 'avocado') Так же, аргументом метода concat() может являться массив:
const fruits = ['banana', 'pear', 'apple'] const allfruits = fruits.concat(['mango', 'melon', 'avocado']) Помните, что метод concat() во всех случаях не изменяет оригинальный массив, а создает новый.
Спасибо за внимание.
Новые публикации
JavaScript: сохраняем страницу в pdf
2021-07-12
HTML: Полезные примеры
2021-07-11
CSS: Ускоряем загрузку страницы
2021-07-10
JavaScript: 5 странностей
2021-07-10
JavaScript: конструктор сортировщиков
Категории
О нас
Frontend & Backend. Статьи, обзоры, заметки, код, уроки.
© 2021 dr.Brain .
мир глазами веб-разработчика