Push pop shift unshift javascript

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')); // -1 

array.includes(x) — определяет, содержит ли массив некоторый элемент x , возвращая true или false соответственно. Используйте includes тогда, когда необходимо проверить есть ли элемент в массиве и не важен его порядковый номер.

const clients = ['Mango', 'Ajax', 'Poly', 'Kiwi']; console.log(clients.includes('Poly')); // true console.log(clients.includes('Monkong')); // false 

2.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()); // undefined 

3.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() одинаков для строк и массивов. Его просто запомнить. Он позволяет извлекать элементы подмножества массива и добавлять их в новый массив. В большинстве случаев используется для создания копии части или целого исходного массива.

Копирует элементы от 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. Удаление элементов массива

Чтобы удалить элементы в массиве, передаются два аргумента.

• 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 » «

Источник