JavaScripti massiivide valdamine: täielik juhend loomise, manipuleerimise, filtreerimise ja praktiliste rakenduste kohta

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Sissejuhatus

Mis on JavaScripti massiivid ja miks need on olulised?

JavaScripti massiivid on üks olulisemaid elemente andmete tõhusaks haldamiseks ja manipuleerimiseks. Massiive kasutades saate salvestada mitu väärtust ühte muutujasse ning neid vajadusel välja võtta või muuta.
Näiteks on massiivid äärmiselt kasulikud kasutajanimede, toote nimekirjade või arvutustulemuste salvestamisel. Eriti veebirakenduste arenduses kasutatakse massiive tihti vormiandmete või API‑de kaudu saadud andmete töötlemisel.

Massiivide praktilised kasutusjuhtumid

• Nimekirjade haldamine : Ostukorvi üksuste või ülesannete nimekirja haldamine.
• Andmete filtreerimine : Kasutaja otsingu- ja sorteerimisfunktsioonid.
• Animatsiooni juhtimine : Elemendi järjekorra või dünaamiliste muudatuste haldamine.

Massiivid on rühmitatud andmete töötlemise aluseks ning oluline teema JavaScripti õppimisel.

Mida te selles artiklis õpite

See artikkel selgitab süstemaatiliselt JavaScripti massiive, käsitledes järgmisi teemasid:

1. Kuidas massiive deklareerida ja initsialiseerida
2. Kuidas elemente lisada, eemaldada ja välja võtta
3. Sorteerimis- ja filtreerimistehnikad
4. Meetodid massiivide ühendamiseks ja jagamiseks
5. Rakenduse näited massiivide kasutamisega

Sisu sobib algajatele kuni kesktaseme õppijatele ning selgitab hoolikalt kõike alusest praktiliste tehnikateni.

Kellele see artikkel on mõeldud

• Algajad : Need, kes kasutavad massiive esimest korda.
• Kesktaseme kasutajad : Need, kes soovivad õppida keerukamaid operatsioone või kirjutada tõhusamat koodi.

Koodinäidete ja praktiliste kasutusjuhtumitega saavad isegi algajad kindlalt õppida.

Mida saate massiivide õppimisega saavutada

Kui olete JavaScripti massiivid valdanud, omandate järgmised oskused:

• Andmete haldamine ja manipuleerimine : Andmete lihtne lisamine, eemaldamine või sorteerimine.
• API‑de integreerimine : Andmete tõhus töötlemine ja kuvamine veeb‑API‑dest.
• Rakenduste arendamine : Lihtsate rakenduste loomine praktiliste näidete abil.

Kasutage siin õpitut, et luua keerukamaid JavaScripti rakendusi.

2. Massiivi põhialused | Deklaratsioon ja initsialiseerimine

2.1 Massiivide definitsioon ja roll

JavaScripti massiivid on erilised objektid, mis võimaldavad hallata korraga mitut andmeüksust. Igal elemendil on indeks, mis määrab selle asukoha, muutes andmete väljavõtmise ja manipuleerimise lihtsaks.

Massiivide peamised rollid

1. Nimekirjade haldamine : Rühmitatud andmete, näiteks tootenimekirjade või kasutajainfo haldamine.
2. Andmete manipuleerimine : Efektiivsete ülesannete, nagu sorteerimine või otsimine, teostamine.
3. Dünaamiline andmetöötlus : API‑de kaudu saadud andmete töötlemine ja muutmine.

Massiivi omadused

• Elemendi indeksid algavad 0‑st.
• Erinevat tüüpi väärtusi saab koos salvestada.

  let mixedArray = [1, "hello", true];
  console.log(mixedArray[1]); // "hello"
  

2.2 Massiivide deklareerimine ja initsialiseerimine

Lihtne massiivi deklaratsioon

JavaScriptis saab massiive deklareerida kahte viisi:

1. Litteraali süntaksiga (soovitatav)

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

2. Array‑konstruktori kasutades

   let fruits = new Array("apple", "banana", "grape");
   

Tühja massiivi loomine

let emptyArray = [];

2.3 Mitmemõõtmeliste massiivide deklaratsioon

Mitmemõõtmeline massiiv on massiiv, mis sisaldab teisi massiive. See on kasulik hierarhiliste andmestruktuuride haldamisel.

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

console.log(matrix[1][2]); // 6

2.4 Märkused initsialiseerimise kohta

Andmetüüpide segamine

JavaScripti massiivid võivad salvestada erinevat tüüpi väärtusi, mis võib põhjustada ootamatuid vigu, kui neid ei käsitleta hoolikalt.

let mixed = [1, "text", true];
console.log(typeof mixed[0]); // "number"
console.log(typeof mixed[1]); // "string"
console.log(typeof mixed[2]); // "boolean"

2.5 Lihtsad massiivi operatsioonide näited

let animals = ["dog", "cat", "bird"];
console.log(animals[0]); // "dog"

animals.push("rabbit");
console.log(animals); // ["dog", "cat", "bird", "rabbit"]

animals[1] = "lion";
console.log(animals); // ["dog", "lion", "bird", "rabbit"]

Kokkuvõte

Selles jaotises selgitati järgmisi JavaScripti massiivide kontseptsioone:

1. Massiivide definitsioon ja rollid
2. Deklaratsiooni ja initsialiseerimise põhisüntaks
3. Mitmemõõtmelised massiivid ja pikkuse käsitlemine
4. Olulised kaalutlused initsialiseerimisel koos koodinäidetega

Selle teadmisega oled paremini ette valmistatud järgmisele sammule: “Põhilised massiivioperatsioonid.”

3. Põhilised massiivioperatsioonid | Elementide lisamine, eemaldamine ja hankimine

3.1 Meetodid elementide lisamiseks

Lisa element lõppu – push()

let fruits = ["apple", "banana"];
fruits.push("orange");
console.log(fruits); // ["apple", "banana", "orange"]

Lisa element algusesse – unshift()

let animals = ["cat", "dog"];
animals.unshift("rabbit");
console.log(animals); // ["rabbit", "cat", "dog"]

3.2 Meetodid elementide eemaldamiseks

Eemalda viimane element – pop()

let colors = ["red", "blue", "green"];
let removed = colors.pop();
console.log(colors); // ["red", "blue"]
console.log(removed); // "green"

Eemalda esimene element – shift()

let numbers = [1, 2, 3, 4];
let removedNumber = numbers.shift();
console.log(numbers); // [2, 3, 4]
console.log(removedNumber); // 1

Eemalda element(e) suvalisest positsioonist – splice()

let sports = ["soccer", "baseball", "basketball", "tennis"];
sports.splice(1, 2);
console.log(sports); // ["soccer", "tennis"]

3.3 Meetodid elementide hankimiseks

Hangi indeksiga

let drinks = ["water", "tea", "coffee"];
console.log(drinks[0]); // "water"
console.log(drinks[2]); // "coffee"

Hangi viimane element

let cities = ["Tokyo", "Osaka", "Kyoto"];
console.log(cities[cities.length - 1]); // "Kyoto"

Hangi esimene sobiv element – find()

let numbers = [10, 20, 30, 40];
let result = numbers.find(num => num > 25);
console.log(result); // 30

Kokkuvõte

Selles jaotises selgitati järgmisi JavaScripti massiivioperatsioone:

1. Kuidas elemente lisada (push() ja unshift())
2. Kuidas elemente eemaldada (pop(), shift(), splice())
3. Kuidas elemente hankida (indeksiga ligipääs, find(), includes())

Kombineerides neid põhilisi operatsioone, saad massiive vabalt manipuleerida.

4. Massiivide sorteerimine ja filtreerimine

4.1 Meetodid massiivide sorteerimiseks

Sorteeri kasvavas või kahanevas järjekorras – sort()

let numbers = [40, 10, 30, 20];
numbers.sort((a, b) => a - b);
console.log(numbers); // [10, 20, 30, 40]

Pööra järjekord vastupidiseks – reverse()

let letters = ["a", "b", "c", "d"];
letters.reverse();
console.log(letters); // ["d", "c", "b", "a"]

4.2 Meetodid massiivide filtreerimiseks

Välja võta elemendid, mis vastavad tingimusele – filter()

let numbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]

Hangi esimene element, mis vastab tingimusele – find()

let ages = [15, 20, 25, 30];
let firstAdult = ages.find(age => age >= 20);
console.log(firstAdult); // 20

Leia esimese sobiva elemendi indeks – findIndex()

let scores = [50, 70, 85, 40];
let highScoreIndex = scores.findIndex(score => score > 80);
console.log(highScoreIndex); // 2

Kokkuvõte

Selles jaotises selgitati, kuidas JavaScriptis massiive sorteerida ja filtreerida:

1. Sorteerimine: sort() ja reverse() abil järjekorda kontrollida.
2. Filtreerimine: filter() abil sobivaid elemente välja võtta.
3. Otsimine: find() ja findIndex() abil elemente leida.

5. Massiivide liitmine, jagamine ja teisendamine

5.1 Meetodid massiivide liitmiseks

Liida massiivid – concat()

let fruits = ["apple", "banana"];
let vegetables = ["carrot", "spinach"];
let combined = fruits.concat(vegetables);
console.log(combined); // ["apple", "banana", "carrot", "spinach"]

Liitmine levitamise süntaksiga

let fruits = ["apple", "banana"];
let vegetables = ["carrot", "spinach"];
let combined = [...fruits, ...vegetables];
console.log(combined); // ["apple", "banana", "carrot", "spinach"]

5.2 Meetodid massiivide jagamiseks

Osa eraldamine – slice()

let colors = ["red", "blue", "green", "yellow", "purple"];
let selectedColors = colors.slice(1, 4);
console.log(selectedColors); // ["blue", "green", "yellow"]

Elementide eemaldamine või asendamine – splice()

let languages = ["JavaScript", "Python", "Ruby", "Java"];
languages.splice(1, 2);
console.log(languages); // ["JavaScript", "Java"]

5.3 Meetodid massiivide teisendamiseks

Massiivi teisendamine stringiks – join()

let items = ["apple", "banana", "grape"];
let result = items.join(", ");
console.log(result); // "apple, banana, grape"

Stringi teisendamine massiiviks – split()

let str = "apple,banana,grape";
let arr = str.split(",");
console.log(arr); // ["apple", "banana", "grape"]

Mitmemõõtmelise massiivi tasandamine – flat()

let numbers = [1, [2, 3], [4, [5, 6]]];
let flatNumbers = numbers.flat(2);
console.log(flatNumbers); // [1, 2, 3, 4, 5, 6]

Kokkuvõte

See jaotis selgitas erinevaid JavaScripti massiivi meetodeid liitmiseks, jagamiseks ja teisendamiseks:

1. Massiivide liitmine: concat() ja levitamise süntaks
2. Massiivide jagamine: slice() eraldamiseks ja splice() eemaldamiseks või asendamiseks
3. Massiivide teisendamine: join() ja split() stringiks teisendamiseks
4. Tasandamine: flat() sisemiste massiivide üheks dimensiooniks muutmiseks

6. Massiivide läbimine ja täiustatud tehnikad

6.1 Meetodid massiivide läbimiseks

Põhiline läbimine for-tsükliga

let fruits = ["apple", "banana", "grape"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
// Output: apple, banana, grape

Lihtsustatud läbimine for...of-tsükliga

let colors = ["red", "blue", "green"];
for (let color of colors) {
  console.log(color);
}
// Output: red, blue, green

Läbimine forEach() meetodiga

let animals = ["cat", "dog", "bird"];
animals.forEach((animal, index) => {
  console.log(`${index}: ${animal}`);
});
// Output: 0: cat, 1: dog, 2: bird

Uue massiivi loomine map()-ga

let numbers = [1, 2, 3, 4];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

6.2 Täiustatud tehnikad

Kordustelementide eemaldamine

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

Massiivi tasandamine – flat()

let nested = [1, [2, 3], [4, [5, 6]]];
let flatArray = nested.flat(2);
console.log(flatArray); // [1, 2, 3, 4, 5, 6]

Kokkuvõte

See jaotis selgitas massiivi läbimise meetodeid ja täiustatud tehnikaid:

1. Põhilised tsüklid: Efektiivne iteratsioon for ja for...of abil.
2. Meetodipõhised tsüklid: forEach() ja map() kasutamine puhtamaks ja funktsionaalsemaks töötlemiseks.
3. Täiustatud andmetöötlus: Korduste eemaldamine ja sisemiste massiivide tasandamine.

7. Praktika näide | Lihtsa rakenduse loomine massiivide abil

7.1 To-Do nimekirja rakenduse loomine

Funktsioonide ülevaade

See lihtne To-Do nimekirja rakendus sisaldab järgmisi funktsioone:

1. Uute ülesannete lisamine
2. Lõpetatud ülesannete eemaldamine
3. Praeguse ülesannete nimekirja kuvamine

Koodinäide

let tasks = [];

// Function to add a new task
function addTask(task) {
  tasks.push(task);
  console.log(`Added: ${task}`);
  displayTasks();
}

// Function to remove a task
function removeTask(index) {
  if (index >= 0 && index < tasks.length) { let removed = tasks.splice(index, 1); console.log(`Removed: ${removed[0]}`); displayTasks(); } else { console.log("Invalid index"); } } // Function to display current tasks function displayTasks() { console.log("Current Tasks:"); tasks.forEach((task, index) => {
    console.log(`${index + 1}: ${task}`);
  });
}

// Test execution
addTask("Study JavaScript");
addTask("Create shopping list");
addTask("Check email");

removeTask(1); // Remove the second task

Näidisväljund

Added: Study JavaScript
Added: Create shopping list
Added: Check email
Current Tasks:
1: Study JavaScript
2: Create shopping list
3: Check email
Removed: Create shopping list
Current Tasks:
1: Study JavaScript
2: Check email

Kokkuvõte

See jaotis tutvustas praktilist rakendust, kasutades massiivioperatsioone:

1. To-Do List rakendus : Harjutati ülesannete lisamist, eemaldamist ja kuvamist.
2. Otsing ja andmeanalüüs : Näidati, kuidas rakendada paindlikku otsingut ja andmete koondamist massiivioperatsioonide abil.

8. Kokkuvõte | Massiivioperatsioonide valdamine

JavaScripti massiivid on võimsad tööriistad, mis aitavad sujuvamaks muuta andmete haldamist ja manipuleerimist. See artikkel käsitles kõike alates põhilistest operatsioonidest kuni edasijõudnud tehnikate ja praktiliste näideteni.

8.1 Selles artiklis ülevaade

1. Põhilised massiivioperatsioonid

• Deklaratsioon ja initsialiseerimine : Õpiti, kuidas luua massiive ja käsitleda mitmemõõtmelisi massiive.
• Elementide lisamine, eemaldamine ja toomine : Harjutati dünaamilist andmete manipuleerimist meetoditega nagu push(), pop() ja muud.

2. Massiivide sorteerimine ja filtreerimine

• Sorteerimine : Selgitatud, kuidas muuta massiivi järjekorda kasutades sort() ja reverse().
• Filtreerimine : Õpiti, kuidas andmeid ekstraheerida kasutades filter() ja find().

3. Massiivide liitmine, jagamine ja teisendamine

• Liitmine : Mõisteti, kuidas massiive ühendada kasutades concat() ja levitamise süntaksit.
• Jagamine ja teisendamine : Kasutati slice(), splice(), join() ja split() paindlikuks andmete töötlemiseks.

4. Tsükliline töötlemine ja edasijõudnud tehnikad

• Tsükliline töötlemine : Kasutati for, forEach() ja map() tõhusaks iteratsiooniks.
• Edasijõudnud tehnikad : Õpiti duplikaatide eemaldamist ja pesastatud massiivide tasandamist.

5. Praktilised näited

• To-Do List rakendus : Rakendati massiivioperatsioone funktsionaalse rakenduse loomiseks.
• Otsing ja andmete koondamine : Näidati praktilist andmete filtreerimist ja analüüsi.

8.2 Massiivioperatsioonide tähtsus ja kasutusjuhtumid

Miks on massiivioperatsioonid olulised?

Massiivi manipuleerimine on oluline andmete korraldamiseks, analüüsimiseks ja kuvamiseks. Levinud stsenaariumid hõlmavad:

1. Andmete haldamine ja kuvamine : API andmete filtreerimine ja tulemuste näitamine tabelites.
2. Vormide ja kasutaja sisendi käsitlemine : Loendite dünaamiline uuendamine või sisendväärtuste töötlemine.
3. Otsingu- ja sorteerimisfunktsioonid : Suurte andmekogude tõhus käsitlemine.
4. Rakenduste arendamine : UI funktsioonide loomine, nagu ostukorvid ja ülesannete haldurid.

8.3 Järgmised sammud õpingutes

1. Massiivi meetodite täiendav kasutamine

• Soovitatav ülesanne : Loo rakendus, mis toob API andmeid ja filtreerib tulemusi massiivioperatsioonide abil.

2. Võrdle ja kasuta teisi andmestruktuure

• Õpi objekte, setti ja kaarti, et valida iga stsenaariumi jaoks õige struktuur.

3. Rakenda teadmisi JavaScripti raamistikus

• Kasuta massiivi oskusi raamistikutes nagu React või Vue.js reaalse maailma arenduseks.

8.4 Viited ja ressursid

• MDN Web Docs: Massiivi objekt https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array
• JavaScript.info: Massiivid ja meetodid https://javascript.info/

8.5 Lõppsõna ja nõuanded lugejatele

JavaScripti massiivioperatsioonid on olulised kindla programmeerimisbaasi loomiseks. See artikkel pakub struktureeritud lähenemist alusest kuni edasijõudnud kontseptsioonideni.

Nõuanded

1. Harjutage koodi kirjutamisega : Testige iga meetodit, et süvendada oma arusaamist.
2. Arendage probleemide lahendamise oskusi : Muutke reaalse maailma ülesanded programmideks, et tõsta praktilist pädevust.
3. Jätkake õppimist : Õppige uusi raamistikke ja uusimaid tehnoloogiaid, et parandada oma oskuste komplekti.

Tee järgmine samm!

Kasutage seda artiklit aluseks, et liikuda edasi keerukamate rakenduste loomise või kaasaegsete raamistikute õppimise suunas.

KKK | Korduma Kippuvad Küsimused

Q1. Mis on erinevus map() ja forEach() vahel?

• map() : Tagastab uue massiivi pärast funktsiooni rakendamist igale elemendile.
• forEach() : Täidab funktsiooni iga elemendi jaoks, kuid ei tagasta uut massiivi.

Näide:

let numbers = [1, 2, 3];

// map()
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

// forEach()
numbers.forEach(num => console.log(num * 2));
// Output: 2, 4, 6

Q2. Kuidas sortida numbreid õigesti?

Vaikimisi võrdleb sort() väärtusi stringidena. Numbreid sortimiseks numbriliselt peate andma võrdlusfunktsiooni.
Näide:

let numbers = [40, 100, 1, 5, 25];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 5, 25, 40, 100]

Q3. Kuidas eemaldada massiivist duplikaadid?

Kasutage Set objekti duplikaatide lihtsaks eemaldamiseks.
Näide:

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

Q4. Kuidas kontrollida, kas element massiivis eksisteerib?

Kasutage includes() meetodit, et määrata, kas massiiv sisaldab konkreetset väärtust.
Näide:

let fruits = ["apple", "banana", "grape"];
console.log(fruits.includes("banana")); // true
console.log(fruits.includes("melon")); // false

Q5. Kuidas tasandada mitmemõõtmeline massiiv?

Kasutage flat() meetodit, et muuta sisseehitatud massiiv ühe taseme massiiviks.
Näide:

let nested = [1, [2, 3], [4, [5, 6]]];
let flatArray = nested.flat(2);
console.log(flatArray); // [1, 2, 3, 4, 5, 6]