Урок 8. Работа с функциями для массивов в JavaScript

В данном уроке мы будем изучать стандартные функции JavaScript.

Изучите методы и функции по следующим ссылкам, постарайтесь запомнить и законспектировать полученную информацию: reverse, push, unshift, shift, pop, slice, splice, sort, Object.keys, reverse.

Обязательно изучите каждую статью до конца - примеры в конце статьи специально подобраны так, чтобы подготовить вас к решению задач.

 

Метод reverse изменяет порядок элементов в массиве на обратный.

Метод изменяет исходный массив (он станет перевернутым) и возвращает также перевернутый массив (можно пользоваться и так, и так).

Массив. reverse ();

Давайте перевернем массив:

var arr = ['a', 'b', 'c'];

arr.reverse();

console.log(arr);

Результат выполнения кода:

['c', 'b', 'a']

В переменную newArr также запишется перевернутый массив:

var arr = ['a', 'b', 'c'];

var newArr = arr.reverse();

console.log(newArr);

Результат выполнения кода:

['c', 'b', 'a']

Давайте перевернем символы строки в обратном порядке. Для этого разобьем строку в массив с помощью split по разделителю '' (этот разделитель положит каждый символ строки в отдельный элемент массива), перевернем этот массив с помощью reverse и затем сольем перевернутый массив обратно с помощью join:

var str = '123456789';

var arr = str.split('');

var arr = arr.reverse();

var result = arr.join('');

document.write(result);

Результат выполнения кода:

987654321

Упростим решение предыдущей задачи - сольем все команды в цепочку:

var str = '123456789';

var result = str.split('').reverse().join('');

document.write(result);

Результат выполнения кода:

987654321

 

Метод push добавляет неограниченное количество элементов в конец массива. Элементы передаются параметром метода.

Метод изменяет исходный массив. Возвращает новую длину массива.

См. также метод unshift, который добавляет элементы в начало массива.

См. также методы shift и pop, которые удаляют элементы из массива.

массив. push (элемент, элемент, элемент...);

В данном примере в исходный массив добавлено 2 новых элемента и выведено содержимое нового массива:

var arr = ['a', 'b', 'c'];

arr.push('d', 'e');

console.log(arr);

Результат выполнения кода:

['a', 'b', 'c', 'd', 'e']

В данном примере в исходный массив добавлено 2 новых элемента и выведена новая длина массива:

var arr = ['a', 'b', 'c'];

var length = arr.push('d', 'e');

document.write(length);

Результат выполнения кода:

5

Заполним массив числами от 1 до 10:

var arr = [];

 

for (var i = 1; i < = 10; i ++ ) {

    arr.push(i)

}

 

console.log(arr);

Результат выполнения кода:

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

 

Метод unshift добавляет любое количество новых элементов в начало массива.

Метод изменяет исходный массив. Возвращает новую длину массива.

См. также метод push, который добавляет элементы в конец массива.

См. также методы shift и pop, которые удаляют элементы из массива.

массив. unshift (элемент, элемент, элемент...);

В данном примере в начало исходного массива было добавлено еще 2 новых элемента и выведен уже новый, измененный массив:

var arr = ['a', 'b', 'c'];

arr.unshift('d', 'e');

console.log(arr);

Результат выполнения кода:

['a', 'b', 'c', 'd', 'e']

В данном примере в начало исходного массива было добавлено еще 2 новых элемента и выведена новая длина массива:

var arr = ['a', 'b', 'c'];

var length = arr.unshift('d', 'e');

document.write(length);

Результат выполнения кода:

5

 

Метод shift удаляет первый элемент массива.

Метод изменяет исходный массив. Возвращает удаленный элемент.

См. также метод pop, который удаляет последний элемент массива.

См. также методы push и unshift, которые добавляют элементы в массив.

Массив. shift ();

Давайте удалим первый элемент из массива:

var arr = ['a', 'b', 'c', 'd', 'e'];

arr.shift();

console.log(arr);

Результат выполнения кода:

['b', 'c', 'd', 'e']

Давайте удалим первый элемент из массива и выведем его на экран:

var arr = ['a', 'b', 'c', 'd', 'e'];

document.write(arr.shift());

Результат выполнения кода:

a

Пусть дан массив ['1', '2', '3', '4', '5', '6']. Давайте сделаем из него строку '16-25-34'. Для решения задачи используем комбинацию методов shift, pop, push и join:

var arr = ['1', '2', '3', '4', '5', '6'];

var result = [];

 

while (arr.length > 0) { //массив уменьшается в цикле пока не достигнет нуля

    var first = arr.shift();

    var last = arr.pop();

    var str = first + last; //тут будет строка '16', потом '25', потом '34'

    result.push(str);

}

 

//После цикла в result лежит массив ['16', '25', '34']. Сольем его в строку:

result = result.join('-');

document.write(result);

Результат выполнения кода:

16-25-34

 

Метод pop удаляет последний элемент массива.

Метод изменяет исходный массив. Возвращает удаленный элемент.

См. также метод shift, который удаляет первый элемент массива.

См. также методы push и unshift, которые добавляют элементы в массив.

Массив. pop ();

В данном примере из массива arr удален последний элемент:

var arr = ['a', 'b', 'c', 'd', 'e'];

arr.pop();

console.log(arr);

Результат выполнения кода:

['a', 'b', 'c', 'd']

В данном примере выведен последний элемент, который был удален из исходного массива:

var arr = ['a', 'b', 'c', 'd', 'e'];

var elem = arr.pop();

document.write(elem);

Результат выполнения кода:

e

Пусть дан массив ['1', '2', '3', '4', '5', '6']. Давайте сделаем из него строку '16-25-34'. Для решения задачи используем комбинацию методов pop, shift, push и join:

var arr = ['1', '2', '3', '4', '5', '6'];

var result = [];

 

while (arr.length > 0) { //массив уменьшается в цикле пока не достигнет нуля

    var first = arr.shift();

    var last = arr.pop();

    var str = first + last; //тут будет строка '16', потом '25', потом '34'

    result.push(str);

}

 

//После цикла в result лежит массив ['16', '25', '34']. Сольем его в строку:

result = result.join('-');

document.write(result);

Результат выполнения кода:

16-25-34

 

Метод slice возвращает указанную часть массива.

Первым параметром указывается номер элемента массива, с которого начинается вырезание, а вторым параметром - номер элемента, на котором закончится вырезание (при этом элемент с этим номером не включится в вырезанную часть).

Второй параметр не является обязательным. Если его не указать - подмассив возьмется с указанного в первом параметре элемента до конца массива.

Второй параметр также может принимать отрицательные значения. В этом случае отсчет элемента, на котором закончится обрезание, начинается с конца массива. Причем, последний элемент имеет номер " -1", предпоследний - " -2" и так далее.

К примеру, если написать slice(1, -1), то вырезанная часть возьмется с первого элемента включительно по последний не включая его. Если вам нужно включить и последний элемент - нужно просто не задавать второй параметр для slice, вот так: slice(1).

Метод не изменяет исходный массив.

Напоминаю, что в массиве нумерация элементов начинается с нуля.

См. также метод splice, который также отрезает части массива.

массив. slice (откуда отрезать, [докуда отрезать]);

Давайте вырежем из массива элементы с нулевого по второй не включительно (второй не вырежется):

var arr = ['a', 'b', 'c', 'd', 'e'];

console.log(arr.slice(0, 2));

Результат выполнения кода:

['a', 'b']

Давайте вырежем с первого элемента до конца массива. Для этого второй параметр не задаем:

var arr = ['a', 'b', 'c', 'd', 'e'];

console.log(arr.slice(1));

Результат выполнения кода:

['b', 'c', 'd', 'e']

Давайте вырежем элементы со второго по предпоследний (-1 указывает на последний элемент и он не включится в извлеченную часть):

var arr = ['a', 'b', 'c', 'd', 'e'];

console.log(arr.slice(1, - 1));

Результат выполнения кода:

['b', 'c', 'd']

Преимущество такого подхода в том, что вырезаться всегда будет часть массива, не включая последний элемент, независимо от размера массива.

 

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

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

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

Вторым параметром - сколько элементов массива следует удалить. Если его поставить в 0 - то элементы удалены не будут (только добавлены новые).

Дальше через запятую идут элементы, которые нужно добавить в массив (являются необязательными параметрами). Эти элементы добавятся вместо удаленных элементов массива.

Если удаления не было (когда второй параметр 0) - элементы вставятся в массив начиная с той позиции, которая указана первым параметром метода.

Первый параметр может иметь отрицательное значение. В этом случае отсчет позиции начнется не с начала массива, а с конца. Причем, последний элемент имеет номер '-1', предпоследний - '-2' и так далее.

Метод возвращает массив удаленных элементов.

массив. splice (откуда удаляем, сколько элементов удаляем, [вставить элемент], [вставить элемент]...);

В данном примере из массива будут удалены элементы со второго, 3 штуки (это 'c', 'd' и 'e'):

var arr = ['a', 'b', 'c', 'd', 'e', 'f'];

arr.splice(2, 3);

console.log(arr);

Результат выполнения кода:

['a', 'b', 'f']

В данном примере из массива будут удалены со второго, 3 штуки (это 'c', 'd' и 'e') и записаны в переменную del:

var arr = ['a', 'b', 'c', 'd', 'e', 'f'];

var del = arr.splice(2, 3);

console.log(del);

Результат выполнения кода:

['c', 'd', 'e']

В данном примере сначала будет удален 3 элемент, а потом вместо него вставлено еще 2 новых элемента ('1' и '2'):

var arr = ['a', 'b', 'c', 'd'];

arr.splice(2, 1, '1', '2');

console.log(arr);

Результат выполнения кода:

['a', 'b', '1', '2', 'd']

В данном примере после 3-го элемента будут добавлены еще 2 элемента (так как вторым параметром указан 0, то удаления не будет):

var arr = ['a', 'b', 'c', 'd'];

arr.splice(2, 0, '1', '2');

console.log(arr);

Результат выполнения кода:

['a', 'b', 'c', '1', '2', 'd']

В данном примере из массива будет удален предпоследний элемент 'e' (его номер -2):

var arr = ['a', 'b', 'c', 'd', 'e', 'f'];

arr.splice( - 2, 1);

console.log(arr);

Результат выполнения кода:

['a', 'b', 'c', 'd', 'f']

 

Метод sort производит сортировку массива в лексикографическом порядке.

Также можно указать параметром собственную функцию для сортировки, но это необязательно.

Посмотрите также новый видеоурок с подробным объяснением, как на самом деле работает sort: https: //youtu.be/O2pusOp0gC0

массив. sort ([функция]);

В данном примере в массиве была произведена сортировка по алфавиту и выведен отсортированный массив:

var arr = [" Банан", " Апельсин", " Яблоко", " Манго" ];

console.log(arr.sort());

Результат выполнения кода:

[Апельсин, Банан, Манго, Яблоко]

В данном примере произведена сортировка в соответствии с лексикографическим порядком:

var arr = [43, - 3, 10, 100];

console.log(arr.sort());

Результат выполнения кода:

[-3, 10, 100, 43]

В данном примере в массиве была произведена сортировка по созданной функции:

function sortArr(a, b){

    if(a > b)

            return - 1; //или указать число меньше 0

    if(a < b)

            return 1; //или указать цифру больше 0

    if(a == b)

            return 0;

}

 

var arr = [43, - 3, 10, 100];

console.log(arr.sort(sortArr));

Результат выполнения кода:

[-3, 10, 43, 100]

 

Функция Object.keys позволяет ключи объекта в виде массива.

Object. keys (объект);

Давайте получим ключи объекта в виде массива:

var obj = {a: 1, b: 2, c: 3};

console.log(Object.keys(obj));

Результат выполнения кода:

['a', 'b', 'c']

 

Метод reverse изменяет порядок элементов в массиве на обратный.

Метод изменяет исходный массив (он станет перевернутым) и возвращает также перевернутый массив (можно пользоваться и так, и так).

Массив. reverse ();

Давайте перевернем массив:

var arr = ['a', 'b', 'c'];

arr.reverse();

console.log(arr);

Результат выполнения кода:

['c', 'b', 'a']

В переменную newArr также запишется перевернутый массив:

var arr = ['a', 'b', 'c'];

var newArr = arr.reverse();

console.log(newArr);

Результат выполнения кода:

['c', 'b', 'a']

Давайте перевернем символы строки в обратном порядке. Для этого разобьем строку в массив с помощью split по разделителю '' (этот разделитель положит каждый символ строки в отдельный элемент массива), перевернем этот массив с помощью reverse и затем сольем перевернутый массив обратно с помощью join:

var str = '123456789';

var arr = str.split('');

var arr = arr.reverse();

var result = arr.join('');

document.write(result);

Результат выполнения кода:

987654321

Упростим решение предыдущей задачи - сольем все команды в цепочку:

var str = '123456789';

var result = str.split('').reverse().join('');

document.write(result);

Результат выполнения кода:

987654321

 

⇐ Предыдущая234567891011Следующая ⇒

Поделиться: