JavaМетоди масиву сценаріїв: Створення за допомогою прикладу

Що таке масив у JavaСценарій?

Масив — це об’єкт, який може зберігати a колекція предметівМасиви стають справді корисними, коли вам потрібно зберігати великі обсяги даних одного типу. Припустимо, ви хочете зберегти інформацію про 500 співробітників. Якщо ви використовуєте змінні, вам доведеться створити 500 змінних, тоді як ви можете зробити те саме з одним масивом. Ви можете отримати доступ до елементів масиву, звернувшись до його номер індексу, а індекс першого елемента масиву дорівнює нулю.

На відміну від масивів у строго типізованих мовах, JavaМасив скриптів є динамічним. Його довжина автоматично збільшується, коли присвоюється новий елемент, і один масив може одночасно містити рядки, числа, логічні значення, об'єкти та навіть інші масиви. Ця гнучкість робить масиви контейнером за замовчуванням для даних списків як у скриптах браузера, так і в коді на стороні сервера.

Як створити масив у JavaScript

Ви можете створити масив у JavaScript як зазначено нижче.

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 має багато властивостей і методів, які допомагають розробникам легко й ефективно працювати з масивами. Ви можете отримати значення властивості, вказавши arrayname.property, а вихід методу, вказавши arrayname.method().

1. майно довжини –> Якщо ви хочете знати кількість елементів у масиві, ви можете скористатися властивістю length.
2. властивість прототипу –> Якщо ви хочете додати нові властивості та методи, ви можете використати властивість prototype.
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

Modern 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

Зверніть увагу, що sort розміщує «Aaron» перед «Ann», оскільки великі та малі літери порівнюються за їхніми кодами символів. Також зверніть увагу, що pop видалив «Aaron» з оберненого масиву, що підтверджує, що і sort, і reverse змінили початковий масив на місці.

Як пройти через цикл 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, наведено у статті про як використовувати цикли в JavaScript.

Багатовимірні масиви в JavaScript

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Рядки скриптів для обробки тексту та прочитайте про внутрішні та зовнішні JavaScript щоб вирішити, де ці скрипти належать на сторінці. Розробники, яким потрібна статична перевірка типів для вмісту масиву, можуть перейти до TypeScript підручник.

Поширені запитання