Урок 8. Функции для массивов в JavaScript
Теория
Методы и функции: reverse, push, unshift, shift, pop, slice, splice, sort, Object.keys, reverse.
Метод reverse
Метод reverse изменяет порядок элементов в массиве на обратный.
Метод изменяет исходный массив (он станет перевернутым) и возвращает также перевернутый массив (можно пользоваться и так, и так).
Синтаксис: массив.reverse().
Пример
Перевернуть массив:
a=['a','b','c'];a.reverse();document.write(a)
Пример
В переменную b также запишется перевернутый массив:
a=['a','b','c'],b=a.reverse();document.write(b)
Пример
Перевернуть символы строки в обратном порядке. Для этого разбить строку в массив с помощью split по разделителю '' (этот разделитель положит каждый символ строки в отдельный элемент массива), перевернуть этот массив с помощью reverse и затем слить перевернутый массив обратно с помощью join:
s='123456789',a=s.split(''),a=a.reverse(),r=a.join('');document.write(r)
Пример
Упростить решение предыдущей задачи. Слить все команды в цепочку:
s='123456789',r=s.split('').reverse().join('');document.write(r)
Метод push
Метод push добавляет неограниченное количество элементов в конец массива. Элементы передаются параметром метода.
Метод изменяет исходный массив. Возвращает новую длину массива.
Синтаксис: массив.push(элемент, элемент, элемент,…).
Пример
В исходный массив добавлено 2 новых элемента и выведено содержимое нового массива:
a=['a','b','c'];a.push('d','e');document.write(a)
Пример
В исходный массив добавить 2 новых элемента и вывести новую длину массива:
a=['a','b','c'],b=a.push('d','e');document.write(b)
Пример
Заполнить массив числами от 1 до 10:
a=[];for(i=1;i<=10;i++){a.push(i)}document.write(a)
Метод unshift
Метод unshift добавляет любое количество новых элементов в начало массива.
Метод изменяет исходный массив. Возвращает новую длину массива.
Синтаксис: массив.unshift(элемент, элемент, элемент,…).
Пример
В начало исходного массива добавить еще 2 новых элемента и вывести уже новый, измененный массив:
a=['a','b','c'];a.unshift('d','e');document.write(a)
Пример
В начало исходного массива добавить еще 2 новых элемента и вывести новую длину массива:
a=['a','b','c'],b=a.unshift('d','e');document.write(b)
Метод shift
Метод shift удаляет 1-й элемент массива.
Метод изменяет исходный массив. Возвращает удаленный элемент.
Синтаксис: массив.shift().
Пример
Удалить 1-й элемент из массива:
a=['a','b','c','d','e'];a.shift();document.write(a)
Пример
Удалить 1-й элемент из массива и вывести его:
a=['a','b','c','d','e'];document.write(a.shift())
Пример
Пусть дан массив ['1','2','3','4','5','6']. Сделать из него строку '16-25-34'. Для решения задачи используем комбинацию методов shift, pop, push, join:
a=['1','2','3','4','5','6'],r=[];
while(a.length>0){//массив уменьшается в цикле, пока не достигнет 0
f=a.shift();l=a.pop(),s=f+l;//тут будет строка '16', потом '25', потом '34'
r.push(s)}
//После цикла в r лежит массив ['16','25','34']. Слить его в строку:
r=r.join('-');document.write(r)
Сократим код:
a=['1','2','3','4','5','6'],r=[];while(a.length>0){f=a.shift();l=a.pop(),s=f+l;r.push(s)}r=r.join('-');document.write(r)
Метод pop
Метод pop удаляет последний элемент массива.
Метод изменяет исходный массив. Возвращает удаленный элемент.
Синтаксис: массив.pop()
Пример
Из массива a удалить последний элемент:
a=['a','b','c','d','e'];a.pop();document.write(a)
Пример
Вывести последний элемент, который был удален из исходного массива:
a=['a','b','c','d','e'],e=a.pop();document.write(e)
Пример
Пусть дан массив ['1','2','3','4','5','6']. Сделать из него строку '16-25-34'. Для решения задачи использовать комбинацию методов pop, shift, push, join:
a=['1','2','3','4','5','6'],r=[];while(a.length>0){//массив уменьшается в цикле, пока не достигнет 0
f=a.shift(),l=a.pop(),s=f+l;//тут будет строка '16', потом '25', потом '34'
r.push(s)}//После цикла в r лежит массив ['16','25','34']. Слить его в строку:
r=r.join('-');document.write(r)
Сократим код:
a=['1','2','3','4','5','6'],r=[];while(a.length>0){f=a.shift(),l=a.pop(),s=f+l;r.push(s)}r=r.join('-');document.write(r)
Метод slice
Метод slice возвращает указанную часть массива.
1-м параметром указывается номер элемента массива, с которого начинается вырезание, а 2-м параметром - номер элемента, на котором закончится вырезание (при этом элемент с этим номером не включится в вырезанную часть).
2-й параметр не является обязательным. Если его не указать, подмассив возьмется с указанного в 1-м параметре элемента до конца массива.
2-й параметр также может принимать отрицательные значения. В этом случае отсчет элемента, на котором закончится обрезание, начинается с конца массива. Причем последний элемент имеет номер "-1", предпоследний - "-2" и так далее.
К примеру, если написать slice(1,-1), то вырезанная часть возьмется с 1-го элемента включительно по последний не включая его. Если нужно включить и последний элемент, нужно просто не задавать 2-й параметр для slice, вот так: slice(1).
Метод не изменяет исходный массив.
В массиве нумерация элементов начинается с 0.
Синтаксис: массив.slice(откуда отрезать, [докуда отрезать])
Пример
Вырезать из массива элементы с 0-го по 2-й не включительно (2-й не вырежется):
a=['a','b','c','d','e'];document.write(a.slice(0,2))
Пример
Вырезать с 1-го элемента до конца массива. Для этого 2-й параметр не задаем:
a=['a','b','c','d','e'];document.write(a.slice(1))
Пример
Вырезать элементы со 2-го по предпоследний (-1 указывает на последний элемент и он не включится в извлеченную часть):
a=['a','b','c','d','e'];document.write(a.slice(1,-1))
Преимущество такого подхода в том, что вырезаться всегда будет часть массива, не включая последний элемент, независимо от размера массива.
Метод splice
Метод splice удаляет или добавляет элементы в массив. Можно только удалять элементы, только добавлять или делать и то, и другое одновременно. Метод универсальный.
Метод изменяет сам массив и возвращает при этом массив удаленных элементов.
1-м параметром идет номер элемента массива, который нужно удалить.
2-м параметром - сколько элементов массива следует удалить. Если его поставить в 0, то элементы удалены не будут (только добавлены новые).
Дальше через запятую идут элементы, которые нужно добавить в массив (являются необязательными параметрами). Эти элементы добавятся вместо удаленных элементов массива.
Если удаления не было (когда 2-й параметр 0), элементы вставятся в массив, начиная с той позиции, которая указана 1-м параметром метода.
1-й параметр может иметь отрицательное значение. В этом случае отсчет позиции начнется не с начала массива, а с конца. Причем последний элемент имеет номер '-1', предпоследний - '-2' и т.д.
Метод возвращает массив удаленных элементов.
Синтаксис: массив.splice(откуда удаляем,сколько элементов удаляем,[вставить элемент],[вставить элемент],…)
Пример
Из массива будут удалены элементы со 2-го, 3 штуки (это 'c','d','e'):
a=['a','b','c','d','e','f'];a.splice(2,3);document.write(a)
Пример
Из массива будут удалены со 2-го, 3 штуки (это 'c','d','e') и записаны в переменную d:
a=['a','b','c','d','e','f'],d=a.splice(2,3);document.write(d)
Результат: ['c','d','e'].
Пример
Сначала будет удален 3 элемент, потом вместо него вставлено еще 2 новых элемента ('1','2'):
a=['a','b','c','d'];a.splice(2,1,'1','2');document.write(a)
Пример
После 2-го элемента будут добавлены еще 2 элемента (т.к. 2-м параметром указан 0, то удаления не будет):
a=['a','b','c','d'];a.splice(2,0,'1','2');document.write(a)
Пример. Отрицательное значение
Удаляется предпоследний элемент 'e' (его номер -2):
a=['a','b','c','d','e','f'];a.splice(-2,1);document.write(a)
Метод sort
Метод sort производит сортировку массива в лексикографическом порядке.
Также можно указать параметром собственную функцию для сортировки, но это необязательно.
Посмотрите также видеоурок с подробным объяснением, как работает sort: youtu.be/O2pusOp0gC0
Синтаксис: массив.sort([функция])
Пример
Производится сортировка по алфавиту и выведен отсортированный массив:
a=["Банан","Апельсин","Яблоко","Манго"];document.write(a.sort())
Результат: [Апельсин,Банан,Манго,Яблоко].
Пример
Производится сортировка в соответствии с лексикографическим порядком:
a=[43,-3,10,100];document.write(a.sort())
Пример
В массиве производится сортировка по созданной функции:
function s(a,b){if(a>b)return -1;//или указать число меньше 0
if(a<b)return 1;//или указать цифру >0
if(a==b)return 0};a=[43,-3,10,100];document.write(a.sort(s))
Сократим код:
function s(a,b){if(a>b)return -1;if(a<b)return 1;if(a==b)return 0};a=[43,-3,10,100];document.write(a.sort(s))
Функция Object.keys
Функция Object.keys получает ключи объекта в виде массива.
Синтаксис: Object.keys(объект)
Пример
Получить ключи объекта в виде массива:
o={a:1,b:2,c:3};document.write(Object.keys(o))
Метод reverse
Метод reverse изменяет порядок элементов в массиве на обратный.
Метод изменяет исходный массив (он станет перевернутым) и возвращает перевернутый массив (можно пользоваться и так, и так).
Синтаксис: массив.reverse()
Пример
Перевернуть массив:
a=['a','b','c'];a.reverse();document.write(a)
Пример
В переменную b записать перевернутый массив:
a=['a','b','c'],b=a.reverse();document.write(b)
Пример
Перевернуть символы строки в обратном порядке. Для этого разбить строку в массив с помощью split по разделителю '' (этот разделитель положит каждый символ строки в отдельный элемент массива), перевернуть этот массив с помощью reverse и слить перевернутый массив обратно с помощью join:
s='123456789',a=s.split(''),a=a.reverse(),r=a.join('');document.write(r)
Пример
Упростить решение предыдущей задачи, слить все команды в цепочку:
s='123456789',r=s.split('').reverse().join('');document.write(r)
Практика
Примеры решения задач
Задача
Даны 2 массива: ['a','b','c'] и [1,2,3]. Объединить их вместе методом concat.
Решение:
a=['a','b','c'],b=[1,2,3];
/*Вариант 1:*/var c=a.concat(b);document.write(c)//получится массив ['a','b','c',1,2,3]
/*Вариант 2:*/var c=b.concat(a);document.write(c)//получится массив [1,2,3,'a','b','c']
Сократим код:
a=['a','b','c'],b=[1,2,3],c=a.concat(b);document.write(c);var c=b.concat(a);document.write('<p>',c)
Задача
Дан массив ['a','b','c']. Добавить в конец массива элементы 1,2,3 методом push.
Решение:
a=['a','b','c'];a.push(1,2,3);document.write(a)
Задачи для решения
Работа с concat
Даны 2 массива: [1,2,3] и [4,5,6]. Объединить их вместе.
Работа с reverse
Дан массив [1,2,3]. Сделать из него массив [3,2,1].
Работа с push, unshift
Дан массив [1,2,3]. Добавить в конец массива элементы 4,5,6.
Дан массив [1,2,3]. Добавить в начало массива элементы 4,5,6.
Работа с shift, pop
Дан массив ['js','css','jq']. Вывести 1-й элемент.
Дан массив ['js','css','jq']. Вывести последний элемент.
Работа с slice
Дан массив [1,2,3,4,5]. Записать в новый массив элементы [1,2,3].
Дан массив [1,2,3,4,5]. Записать в новый массив элементы [4,5].
Работа с splice
Дан массив [1,2,3,4,5]. Преобразовать массив в [1,4,5].
Дан массив [1,2,3,4,5]. Записать в новый массив элементы [2,3,4].
Дан массив [1,2,3,4,5]. Сделать из него массив [1,2,3,'a','b','c',4,5].
Дан массив [1,2,3,4,5]. Сделать из него массив [1,'a','b',2,3,4,'c',5,'e'].
Работа с sort
Дан массив [3,4,1,2,7]. Отсортировать массив.
Работа с Object.keys
Дан объект {js:'test',jq:'hello',css:'world'}. Получить массив его ключей.
