Язык javascript массивы: работа с методами и свойствами массивов

На уроке вы рассмотрите как создаются в Javascript массивы, рассмотрите примеры создания массива, работы с элементами массива. Поработаете со свойствами и методами массива в javaScript

К оглавлению

Далее к уроку 6

Материалы сайта labs-org.ru направлены на практическое освоение языка javaScript. Краткие теоретические сведения не претендуют на полное освещение материала по теме; необходимую информацию можно найти в сети Интернет в большом количестве. В наши же задачи входит предоставление возможности получения практических навыков, необходимых для создания динамических веб-страниц. Решенные наглядные примеры и лабораторные задания по javaScript изложены по мере увеличения их сложности, что позволит с легкостью изучить материал с нуля.

Содержание:

JavaScript объекты
JavaScript массивы, тип данных Array
Javascript создание массива
Javascript: работа с массивами
Свойства массива (объекта Array) в javaScript
Методы массива (объекта Array) в javaScript
Ассоциативный массив в javaScript
Многомерные массивы

JavaScript объекты

Javascript — объектно-ориентированный язык. Это значит, что с некоторыми типами данных можно работать как с объектами, что позволяет применять к ним дополнительные функции для работы с объектами. К примеру, со строками можно работать и как с обычным типом данных и как с объектами:

// обычная строковая переменная myStr:
let myStr = "Текст";
 
// создание строкового объекта myStr:
let myStr = new String();

Object(объекты)
Number (обработка чисел)
String (обработка строк)
Array (массивы)
Math (математические формулы, функции и константы)
Date (работа с датами и временем)
RegExp
Global (его свойства Infinity, NaN, undefined)
Function

Со всеми данными объектами мы познакомимся позже, с некоторыми из них мы частично уже знакомы.

Object — объект, который содержится во всех остальных объектах и обеспечивает их общую функциональность.

Объект function — функции являются объектами первого класса, т.е. могут присваиваться переменным, выступать аргументами других функций и быть результатом функций

Объявление новых объектов происходит одинаково, независимо от объекта (используется служебное слово new):

let arr = new Object();
let str = new String();
let arr = new Array();

Как видно из примера, в javascript объявление массива происходит точно так же, как и у других объектов.

JavaScript массивы, тип данных Array

Теперь подробнее рассмотрим объект массив.

Массив — упорядоченный набор данных.

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

Пример: Создать массив arr. Присвоить значение трем элементам созданного массива. С помощью диалогового окна alert() вывести значение элемента массива с индексом 2. Вывести количество элементов массива.

✍ Решение:

let arr = new Array();
arr[0] = "element1";
arr[1] = "element2";
arr[2] = "element3";
alert(arr[2]);
alert("Число элементов" + arr.length);

В javascript длина массива — свойство length.

Javascript создание массива

Создание элементов массива возможно несколькими способами:

let earth = new Array(4); /* массив-объект из 4-х элементов*/
earth[0] = "Планета";
earth[1] = "24 часа";
earth[2] = 6378;
earth[3] = 365.25;

let earth = new Array("Планета", "24 часа", 6378, 365.25);

let earth = new Array(); // пустой массив-объект
earth.xtype = "Планета";
earth.xday = "24 часа";
earth.radius = 6378;
earth.period = 365.25;

// пустой массив не объект
let country = [];
// массив не объект со значениями
let country = ["Россия", "Белоруссия", "Казахстан"];

Javascript: работа с массивами

Обращение или доступ к элементам массива в javaScript происходит так:

let mas=new Array(1,25,'Привет');
 
mas[0]='Пока';
mas[1]=35;

При инициализации массива элемент mas[0] был равен 1. Затем мы изменили его значение на ‘Пока’. Значение элемента массива mas[1] было изменено с 25 на 35.

Вывод элементов массива

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

1 2	let mas=new Array(1,25,'Привет'); document.write(mas)

Результат:

1,25,Привет

Рассмотрим, как осуществляется в javascript вывод массива с использованием обычного цикла for:

let mas=new Array(1,25,'Привет');
 
function showElement(){
	for(i=0;i<3;i++)
	  document.writeln(mas[i]);
}
showElement();

Результат:

1 25 Привет

Использование цикла for in для перебора элементов массива (for in — цикл для работы с объектами):

let mas=new Array(1,25,'Привет');
 
function showElement(){
	for(let i in mas){
		document.writeln(mas[i]);
	}
}
showElement();

Результат:

1 25 Привет

Использование цикла for of для перебора элементов массива (результат такой же):

let mas=new Array(1,25,'Привет');
 
function showElement(){
	for(let i of mas){
		document.writeln(i);
	}
}
showElement();

Нужно иметь в виду, что цикл for in выполняет перебор всех свойств объекта, а не только индексированных.
В браузере имеются так называемые «псевдомассивы» – объекты, которые выглядят, как массив. То есть, у них есть свойство length и индексы, но они также могут иметь дополнительные свойства и методы. Однако цикл for in выведет и их.
Цикл for in во много раз медленнее, чем for of.

Задание array 5_1. Создать два массива: countries – с названием стран, и population – с населением этих стран. Вывести название страны и ее население (использовать метод document.write).

Комментарии к выполнению:

Вывод элементов массива оформить в виде функции.
Сначала выполнить задание с помощью цикла for с счетчиком, затем — с помощью цикла for in.

Задание array 5_2. Что выведет на экран следующий фрагмент кода?

 let e = 1024;
 let table = [e, e + 1, e + 2, e + 3];
 document.write(table);

Пример: Что выведет на экран следующий фрагмент кода?

let arr = [1, 2, 3];
 arr[5] = 5;
  for (let i = 0; i < arr.length; i++) {
 document.write(arr[i] + "<br />");
 }

В примере в строке arr[5] = 5; происходит расширение массива – в 5-й индекс заносится значение 5. Цикл заполняет элементы типом undefined, элементы которые мы не использовали — они остаются пустыми.

Удаление элементов массива

В javascript удалить элемент массива можно при помощи оператора delete:

1
2
3

let myColors = new Array("red", "green", "blue");
delete myColors[1];
alert(myColors); // red,,blue

Задание array 5_3. Создать массив из трех элементов, значения элементов запрашивать у пользователя. Удалить второй по счету элемент, после чего вывести элементы массива на экран, каждый элемент с новой строки

Свойства массива (объекта Array) в javaScript

Массив – предопределенный объект. Доступ и обращение к элементам массива осуществляется при помощи точечной нотации (через символ «.«):

Название_объекта.свойство_объекта
Название_объекта.метод_объекта(параметры)

Пример:
mas.length // обращение к свойству length
mas.sort() // вызов метода sort
mas.length // обращение к свойству length mas.sort() // вызов метода sort

Пример: Вывести элементы массива на экран, в качестве конечного значения счетчика цикла использовать свойство массивов length

✍ Решение:

for (let i = 0; i<arr.length;i++){
	alert(arr[i]);
}
alert(arr.length);

Поиск элемента в массиве

В javascript для поиска элемента в массиве можно создать пользовательскую функцию:

let arr = new Array();
arr[0] = "element1";
arr[1] = "element2";
arr[2] = "element3";
 
function findValue(theValue){
	for (let i = 0; i<arr.length;i++){
		if(arr[i] == theValue)
			break; // если нашли - выход из цикла 
	}
	if (i<arr.length) // если не нашли, то i=arr.length
		return i //если нашли - возвращаем индекс
	else  
		return false; // если не нашли - возвращаем false
 
}
 
let elem=findValue("element2");
if (elem) 
     alert ("элемент найден, его индекс="+elem)
else 
     alert("элемент не найден");

В примере функция, организованная для поиска элемента массива, имеет один аргумент (theValue) — значение искомого элемента массива. В случае нахождения элемента функция возвращает индекс найденного элемента, если элемент не найден — функция возвратит false.

Задание array 5_4. Создать массив, элементами которого являются названия дней недели (сокращенная запись названий). Выводить номер дня недели (номер элемента массива), содержащего введенное пользователем название дня недели (использовать функцию с параметром, которая возвращает значение номера).

задание на работу с массивами

Пример вывода:

Введите день недели: пн вт ср чт пт сб вс
>> вт
вт - 1-й день недели, начиная с нуля

Методы массива (объекта Array) в javaScript

Рассмотрим некоторые javascript методы массива.

Часто используемым методом в javascript array является concat().
Метод javaScript concat() — конкатенация массивов, объединяет два массива в третий массив, т.е. формирует и возвращает объединенный массив, содержащий все элементы исходного массива и значения всех аргументов, переданных методу

массив1.concat(массив2)

Рассмотрим пример использования метода concat

let a1= new Array(1, 2, "Звезда");
let а2 = new Array("a", "б", "в", "г");
let аЗ = a1.concat(a2); 
/* результат - массив с элементами: 1, 2, "Звезда", "а", "б", "в", "г" */

Задание array 5_5. Дополните код согласно заданию: В переменную a присвоить возвращаемое значение метода concat, передав в этот метод два значения 4 и 5. Что будет выведено на экран?:

1
2
3

let a = [1, 2, 3];
a = ...
document.write(a);

Метод javaScript join(разделитель) — создает строку из элементов массива с указанным разделителем между ними (преобразует все элементы массива в строки и объединяет их через указанный разделитель)

массив.join(строка)

Пример использования метода join:

let а = new array(1, 2, "Звезда")
a.join(",") // значение - строка "1,2,Звезда"
 
let а = new array(1, 2, "Звезда")
a.join(" ") // значение - строка «1 2 Звезда»

Задание array 5_6. Дополните код, согласно заданию: В строке объявления переменной res присвоить значение: вызов метода join массива ar ; в метод передать аргумент (тег br ) и вывести на экран значение переменной res

1
2
3

let arr = ["Edward", "Andrey", "Chris"]
let res = ...
document.write(res);

Метод javaScript shift() — удаляет первый элемент массива и возвращает результирующий массив, смещая все последующие элементы на одну позицию влево

имя_массива.shift()

Пример использования метода shift:

let x = ["a", "b", "c", "d"];
x.shift();
document.write(x);
//выведет на экран обозревателя строку b,c,d

Метод javaScript рор() — удаляет последний элемент массива. Результат работы метода -массив без последнего элемента

имя_массива.рор()

Пример использования метода рор:

let x = ["a", "b", "c", "d"];
x.pop();
document.write(x);
//выведет на экран обозревателя строку a,b,c.

Задание array 5_7. Дополните код согласно инструкции:
Присвоить значение метода pop() в переменную len. Вывести отдельно результирующий массив и отдельно его удаленный элемент (значение переменной len):

let arr = ["January", "February", "March", "April", "May", "June"];
let len = ...
document.write(arr.join(" ")+"</br>");
document.write(len);

Метод javaScript unshift(значение) — добавляет к массиву указанное значение в качестве первого элемента. Возвращает новую длину массива

имя_массива.unshift(значение)

Пример использования метода unshift:

1
2
3

let x = ["a", "b", "c", "d"];
document.write(x.unshift("e"));
//выведет на экран обозревателя число 5

Метод javascript push(значение) — добавляет к массиву указанное значение в качестве последнего элемента и возвращает новую длину массива

имя_массива.push(значение)

Пример использования метода push:

1
2
3

let x = ['a', 'b', 'c', 'd'];
document.write(x.push('e'));
//выведет на экран обозревателя число 5

Метод javaScript reverse() — изменяет порядок следования элементов массива на противоположный

имя_массива.reverse()

Пример использования метода reverse:

let x = new Array();
x[0] = 0; x[2] = 2; x[4] = 4;
document.write(x.reverse());
//выведет на экран обозревателя строку 4,,2,,0

Задание array 5_8. Что выведет на экран следующий фрагмент кода?

1
2
3

let a = new Array(11, 22, 33, 44, 55, 66, 77);
a.reverse(); 
document.write(a.join("<br/>"));

Метод javascript slice(индекс1 [, индекс2]) — создает массив из элементов исходного массива с индексами указанного диапазона (возвращает подмассив или срез указанного массива).

имя_массива.slice (индекс1 [, индекс2])

Пример:

let a = new Array(1, 2, 'Звезда' , 'а' , 'b');
alert(a.slice(1,3));
// массив с элементами: 2, "Звезда"
alert(a.slice(2));
// массив с элементами: "Звезда", "а", “b”

Задание array 5_9. Дополните код согласно заданию: Присвоить переменной t возвращаемое значение метода slice(), который будет возвращать первых 3 значения из массива:

1
2
3

let a = [1, 2, 3, 4, 5, 6, 7];
let t = ...
document.write(t);

Метод javaScript sort([compareFunction]) — сортирует (упорядочивает) элементы массива (элементы сортируются путём преобразования их в строки и сравнения строк в порядке следования кодовых точек Unicode). Необязательный параметр compareFunction указывает функцию, определяющую порядок сортировки, может пригодиться при сортировке целочисленного массива (см. ниже).

имя_массива.sort()

Пример использования метода sort():

let arr = [1, 2, 16];
arr.sort();
document.write(arr.join("<p>"));
/*
Выведет на экран:
 1
 16
 2
*/

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

let numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
});
document.write(numbers); // [1, 2, 3, 4, 5]

Метод javaScript splice(индекс, количество) — удаляет из массива несколько элементов и возвращает массив из удаленных элементов или заменяет значения элементов. Т.е. этот метод используется для вставки и удаления элементов из массива.

имя_массива.splice(индекс, количество)

Пример использования метода splice:

let a = new Array('Ivan','Max','Peter',12,5);
let x = a.splice(1,3); 
document.write(x+"<br>"); // Max,Peter,12
document.write(a); // Ivan,5

Задание array 5_10. Дополните код согласно заданию: В переменную d присвоить значение метода splice(), который должен удалить числа 2, 3, 4 из массива:

1
2
3

let a = [1, 2, 3, 4, 5, 6, 7];
let d = ...
document.write(a);

toLocaleString(), toString() — преобразуют содержимое массива в символьную строку

Задание array 5_11. Дан массив из чисел: 1, 2, 3, 4, 5. Распечатать массив в обратном порядке (5, 4, 3, 2, 1), используя функцию javaScript reverse()

Задание array 5_12. Дан массив из элементов: ‘c’, 5, 2, ‘b’, 3, 1, 4, ‘a’. Распечатать массив, предварительно отсортировав его по возрастанию (1, 2, 3, 4, 5, a, b, c)

Задание array 5_13. Дан массив из элементов: 1, 2, 3, 4, 5. Распечатать исходный массив и массив, получившийся из элементов исходного массива, с разделителем «+» (метод javaScript join – 1+2+3+4+5)

Задание array 5_14. Даны два массива из неотсортированных целочисленных элементов: 1, 2, 5, 4, 6 и 8, 2, 5, 9, 5. Найти медиану двух этих массивов одновременно (медиана — это числовое значение, которое делит отсортированный массив чисел на большую и меньшую половины. В отсортированном массиве с нечетным числом элементов медиана — это число в середине массива, с четным — ищем среднее арифметическое двух элементов посередине). Для решения задачи понадобятся стандартные функции.

отсортированные элементы массивов: 
1, 2, 2, 4, 5, 5, 6, 7, 8, 9 
медиана:
5

Ассоциативный массив в javaScript

Ассоциативный массив — это абстрактный тип данных, по сути, аналог двумерного массива в javascript, позволяющий хранить пары вида «(ключ, значение)». Т.е. ассоциативные массивы позволяют вместо индексов использовать строковые значения.

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

Пример создания ассоциативного массива:

let pupil = { name: "Andrey", group: "1" };

Другой пример:

let m_list = new Object();
 
m_list["fat"] = "Полный";
m_list["small"] = "Маленький";
m_list["name"] = "Иван";
 
for (let x in m_list) //выведем на экран все элементы
  document.write(m_list[x] + "<br>");

Задание array 5_15. Исправить ошибку (ошибки) во фрагменте кода для корректной работы:

let laptop = ( cpu: "Core i7", ram: "4 GB", screen: "19" );
let Key = prompt("Введите интересующий параметр (ram, cpu, screen)");
let value = laptop[key];
document.write(value);

Задание array 5_16.

Дан ассоциативный массив стран и рек (протекающих в каждой из этих стран).
Выполните задания:
1) Для каждой реки укажите, в какой стране она протекает.
2) Проверьте, есть ли введенное название реки в массиве (вывести есть или нет)
3) Добавьте новую пару страна-река в массив.
4) Удалите из массиву реку (название реки запросить).

Многомерные массивы

Так как массивы JavaScript могут в качестве элементов использовать другие массивы, то почему бы эту возможность не использовать для создания многомерных массивов. Для доступа к элементам в массиве массивов достаточно использовать квадратные скобки дважды.

let matrica = [
  [5, 5, 5],
  [1, 5, 1],
  [2, 2, 2]
];
 
document.write(matrica[1][1]); //выбран элемент по центру (5)

Перебор элементов двумерного массива

document.write(matrica[1][1]); //выбран элемент по центру (5)
for(let i = 0; i< 3; i++){
	for (let j=0; j<3; j++) {
		document.write(matrica[i][j]+" ");
	}
	document.write("<br>");
}

Задание array 5_15. Дана матрица 5 х 5. Вывести элементы матрицы, принадлежащие интервалу[-5; 7].

При исходной матрице:

  [3, 15, 25, 15, -2],
  [4, 11, 5, 11, 12],
  [12, 22, 12, -3, -10]
  [22, 22, 32, -33, -12]
  [2, 22, 12, -12, -10]

Результат должен быть:

3 -2 4 5 -3 2

К оглавлению

Далее к уроку 6

1 комментарий для “JavaScript урок 5. Массивы, тип данных Array”

Виктория:

21.09.2023 в 16:30

В 14 задании опечатка. Даны массивы 1, 2, 5, 4, 6 и 8, 2, 5, 9, 5 а в ответе откуда то взялась 7 и пропала одна 5 (1, 2, 2, 4, 5, 5, 6, 7, 8, 9 ).
Еще последнее задание идет под номером 15, хотя должно быть 17.

Обсуждение закрыто.