JavaМетоды массива скриптов: создание с примером

Что такое массив в... JavaСценарий?

Массив – это объект, который может хранить коллекция предметовМассивы становятся действительно полезными, когда вам нужно хранить большие объемы данных одного типа. Предположим, вы хотите хранить данные о 500 сотрудниках. Если вы используете переменные, вам придется создать 500 переменных, тогда как то же самое можно сделать с помощью одного массива. Вы можете получить доступ к элементам массива, обратившись к его содержимому. индекси индекс первого элемента массива равен нулю.

В отличие от массивов в языках со строгой типизацией, JavaМассивы скриптов являются динамическими. Их длина автоматически увеличивается при добавлении нового элемента, и один массив может одновременно содержать строки, числа, логические значения, объекты и даже другие массивы. Эта гибкость делает массивы контейнером по умолчанию для данных списков как в скриптах браузера, так и в серверном коде.

Как создать массив в JavaСценарий

Вы можете создать массив в JavaСценарий как указано ниже.

var students = ["John", "Ann", "Kevin"];

Здесь вы инициализируете свой массив по мере его создания значениями «Джон», «Энн» и «Кевин». Индекс «Джона», «Энн» и «Кевина» равен 0, 1 и 2 соответственно. Если вы хотите добавить больше элементов в массив студентов, вы можете сделать это следующим образом:

students[3] = "Emma";
students[4] = "Rose";

Вы также можете создать массив, используя конструктор Array, следующим образом:

var students = new Array("John", "Ann", "Kevin");

OR

var students = new Array();

students[0] = "John";

students[1] = "Ann";

students[2] = "Kevin";

Как получить доступ к элементам массива и изменить их

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

let students = ["John", "Ann", "Kevin"];

console.log(students[0]);              // John  - first element
console.log(students[students.length - 1]); // Kevin - last element

students[1] = "Anna";                // replace an existing value
students[3] = "Emma";                // append a new value

console.log(students);              // ["John", "Anna", "Kevin", "Emma"]
console.log(students.length);       // 4
console.log(students[9]);              // undefined - index does not exist

JavaМетоды массива скриптов

Объект Array имеет множество свойств и методов, которые помогают разработчикам легко и эффективно обрабатывать массивы. Вы можете получить значение свойства, указав имя_массива.свойство, а выходные данные метода, указав имя_массива.метод().

1. свойство длины -> Если вы хотите узнать количество элементов в массиве, вы можете использовать свойство length.
2. свойство прототипа -> Если вы хотите добавить новые свойства и методы, вы можете использовать свойство прототипа.
3. обратный метод -> Вы можете изменить порядок элементов в массиве, используя обратный метод.
4. метод сортировки —> Вы можете отсортировать элементы массива, используя метод `sort`.
5. поп метод -> Вы можете удалить последний элемент массива, используя метод pop.
6. метод смены –> Первый элемент массива можно удалить с помощью метода shift.
7. метод проталкивания -> Вы можете добавить значение в качестве последнего элемента массива.

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

Добавление и удаление элементов

let fruits = ["apple", "banana"];

fruits.push("cherry");      // ["apple", "banana", "cherry"]
fruits.unshift("mango");    // ["mango", "apple", "banana", "cherry"]
fruits.pop();                // ["mango", "apple", "banana"]
fruits.shift();              // ["apple", "banana"]

// splice(startIndex, deleteCount, ...itemsToInsert)
fruits.splice(1, 0, "kiwi"); // ["apple", "kiwi", "banana"]
console.log(fruits);

Поиск, копирование и объединение

let colors = ["red", "green", "blue", "green"];

console.log(colors.indexOf("green"));     // 1  - first match only
console.log(colors.lastIndexOf("green")); // 3
console.log(colors.includes("pink"));     // false
console.log(colors.slice(1, 3));         // ["green", "blue"]
console.log(colors.join(" | "));         // red | green | blue | green
console.log(colors.concat(["black"]));   // new array, colors unchanged

Методы итерации: forEach, map, filter и reduce.

Современные JavaВ скрипте предпочтение отдается методам, управляемым обратными вызовами, а не циклам индексации, выполняемым вручную, поскольку цель операции прямо указана в имени метода.

const scores = [45, 72, 88, 31, 95];

scores.forEach(s => console.log(s));   // prints each score

const doubled = scores.map(s => s * 2);  // [90, 144, 176, 62, 190]
const passed  = scores.filter(s => s >= 50); // [72, 88, 95]
const total   = scores.reduce((sum, s) => sum + s, 0); // 331
const first   = scores.find(s => s > 80);   // 88

console.log(doubled, passed, total, first);

JavaПример массива скриптов с исходным кодом Code

Приведённый ниже скрипт создаёт массив students, добавляет пользовательский метод отображения через свойство prototype, а затем демонстрирует последовательные операции length, sort, reverse, pop и push. Попробуйте сами:

<html>
<head>
	<title>Arrays!!!</title>
	<script type="text/javascript">
		var students = new Array("John", "Ann", "Aaron", "Edwin", "Elizabeth");
		Array.prototype.displayItems=function(){
			for (i=0;i<this.length;i++){
				document.write(this[i] + "<br />");
			}
		}
		document.write("students array<br />");
		students.displayItems();
		document.write("<br />The number of items in students array is " + students.length + "<br />");
		document.write("<br />The SORTED students array<br />");
		students.sort();
		students.displayItems();
		document.write("<br />The REVERSED students array<br />");
		students.reverse();
		students.displayItems();
		document.write("<br />THE students array after REMOVING the LAST item<br />");
		students.pop();
		students.displayItems();
        document.write("<br />THE students array after PUSH<br />");
        students.push("New Stuff");
		students.displayItems();
	</script>
</head>
<body>
</body>
</html>

Ожидаемый результат:

students array
John
Ann
Aaron
Edwin
Elizabeth

The number of items in students array is 5

The SORTED students array
Aaron
Ann
Edwin
Elizabeth
John

The REVERSED students array
John
Elizabeth
Edwin
Ann
Aaron

THE students array after REMOVING the LAST item
John
Elizabeth
Edwin
Ann

THE students array after PUSH
John
Elizabeth
Edwin
Ann
New Stuff

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

Как выполнить цикл по JavaМассив скриптов

Четыре туалетаping Доступны различные стили, и каждый из них подходит для разных ситуаций. Классический цикл for дает полный контроль над индексом, for…of считывает значения напрямую, forEach четко выражает намерение, а for…in следует зарезервировать для свойств объектов.

const cities = ["Paris", "Tokyo", "Cairo"];

// 1. Classic for loop - index is available
for (let i = 0; i < cities.length; i++) {
    console.log(i + ": " + cities[i]);
}

// 2. for...of loop - value is available
for (const city of cities) {
    console.log(city);
}

// 3. forEach with index parameter
cities.forEach((city, index) => console.log(index, city));

// 4. entries() when both index and value are needed
for (const [index, city] of cities.entries()) {
    console.log(index, city);
}

Более подробное рассмотрение синтаксиса циклов, включая циклы while и do…while, приведено в статье на сайте [ссылка на статью]. как использовать циклы в JavaСценарий.

Многомерные массивы в JavaСценарий

JavaВ скрипте нет специального типа матрицы. Сетка — это просто массив, элементы которого сами являются массивами, а для доступа к одной ячейке используются два выражения индекса.

const matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

console.log(matrix[1][2]); // 6  - row index 1, column index 2

for (const row of matrix) {
    console.log(row.join(" "));
}

// flatten a nested array into a single level
console.log(matrix.flat()); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

Выход:

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

Массивы встречаются практически в каждом скрипте, от проверки форм до отображения данных. Продолжим далее. практический JavaПримеры кода скрипта, рассмотрение JavaСтроки скрипта для обработки текста, и почитайте о внутренний и внешний JavaСценарий Чтобы определить, где именно на странице должны располагаться эти скрипты, разработчики, которым нужна статическая проверка типов содержимого массивов, могут перейти к следующему шагу. TypeScript учебник.

Часто задаваемые вопросы (FAQ)