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

Какво е масив в JavaСценарий?

Масивът е обект, който може да съхранява a колекция от елементиМасивите стават наистина полезни, когато трябва да съхранявате големи количества данни от един и същи тип. Да предположим, че искате да съхранявате данни за 500 служители. Ако използвате променливи, ще трябва да създадете 500 променливи, докато можете да направите същото с един масив. Можете да получите достъп до елементите в масив, като се обърнете към неговия индексен номер, а индексът на първия елемент от масив е нула.

За разлика от масивите в строго типизираните езици, JavaМасивът в скрипта е динамичен. Дължината му нараства автоматично, когато се присвоява нов елемент, а един масив може да съдържа низове, числа, булеви стойности, обекти и дори други масиви едновременно. Тази гъвкавост прави масивите контейнер по подразбиране за данни от списъци както в скриптовете на браузъра, така и в сървърния код.

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

Можете да създадете масив в JavaСценарий както е дадено по-долу.

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

Тук вие инициализирате своя масив, както и когато е създаден със стойности „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. собственост на прототип –> Ако искате да добавите нови свойства и методи, можете да използвате свойството прототип.
3. обратен метод –> Можете да обърнете реда на елементите в масив, като използвате обратен метод.
4. метод за сортиране –> Можете да сортирате елементите в масив, използвайки метода за сортиране.
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

Скриптът по-долу изгражда масив за студенти, добавя персонализиран метод за показване чрез свойството prototype и след това демонстрира length, sort, reverse, pop и push in sequence. Опитайте сами:

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

Въпроси и Отговори