Underscore.js juhend: JavaScripti massiivide ja objektide lihtsam töötlemine│JScript Katana

1 1. Sissejuhatus
- 1.1 Underscore.js eelised
- 1.2 Mida sellest artiklist õpid
2 2. Mis on Underscore.js?
3 3. Kuidas Underscore.js kasutusele võtta
4 4. Põhiline kasutamine
5 5. Täpsem kasutamine
6 6. Objektide töötlemine
7 7. Funktsioonide töötlemine
8 8. Abifunktsioonid
9 9. Kokkuvõte
- 9.1 Artikli kokkuvõte
- 9.2 Lõppsõna
10 Korduma kippuvad küsimused (KKK)

1. Sissejuhatus

JavaScript on veebiarenduses asendamatu programmeerimiskeel, kuid massiivide ja objektide töötlemine kipub sageli muutuma keeruliseks. Eriti andmete filtreerimise ja teisendamise puhul on vaja lihtsamat ja tõhusamat koodi. Siinkohal tuleb appi Underscore.js – JavaScripti teek, mis võimaldab keerulisi andmetoiminguid kirjutada palju lihtsamalt.

Underscore.js eelised

Koodi lihtsustamine

Tavaliselt pikk ja korduv JavaScripti kood on Underscore.js abil võimalik kirjutada vaid mõne reaga.

Rohkelt kasulikke funktsioone

Pakkumisel on mitmeid tööriistu massiivide, objektide ja funktsioonide töötlemiseks.

Kerge ja paindlik

Saad kasutada ainult vajalikke funktsioone, minimeerides jõudluse mõju.

Mida sellest artiklist õpid

Kuidas Underscore.js kasutusele võtta
Põhilised funktsioonid ja näited
Praktilised juhtumid arenduses

2. Mis on Underscore.js?

Ülevaade

Underscore.js on kerge JavaScripti teek, mis lihtsustab andmete töötlemist. See sisaldab rohkelt mugavaid funktsioone massiivide ja objektide efektiivseks käsitlemiseks ning seda kutsutakse sageli ka JavaScripti tööriistakomplektiks. Kuigi JavaScripti enda funktsioonid on võimsad, võib kood muutuda pikaks ja halvasti loetavaks. Underscore.js aitab neid probleeme lahendada, pakkudes lihtsamat ja paremini hallatavat koodi.

Peamised omadused

Rohkelt utiliitfunktsioone

Pakkumisel on funktsioonid massiivide, objektide ja funktsioonide juhtimiseks.

Lihtne ja loetav kood

Võrreldes tavalise JavaScriptiga on koodi maht väiksem ja loetavus suurem.

Sõltuvusi pole

Ei vaja teisi teeke, mis teeb kasutamise paindlikuks.

Kerge ja kiire

Väike failisuurus ja minimaalne mõju jõudlusele, sobib hästi ka kaasaegsetele veebirakendustele.

Underscore.js vs Lodash

Underscore.js-i võrreldakse sageli teise teegiga nimega Lodash. Lodash põhineb Underscore.js-il, kuid on laiendatud funktsionaalsusega. Võrdlus:

Omadus	Underscore.js	Lodash
Funktsionaalsus	Põhifunktsioonid	Rohkem laiendusi
Modulaarsus	Osaliselt toetatud	Täielikult modulaarselt kasutatav
Jõudlus	Kiire	Veelgi optimeeritud

Millist kasutada, sõltub projekti vajadustest. Kui otsid lihtsat ja kerget teeki, siis Underscore.js on sobiv valik.

Kuidas Underscore.js aitab?

Underscore.js on eriti kasulik järgmistes olukordades:

Massiivide töötlemine

Filtreerimine, kaardistamine ja muud toimingud on lihtsamalt kirjutatavad.

Objektide käsitlemine

Võtmete ja väärtuste hankimine, elementide ühendamine ja muud toimingud muutuvad mugavaks.

Funktsioonide kontrollimine

Kergesti rakendatav näiteks ühekordseks täitmiseks või viivitusega käivitamiseks.

Utiliitfunktsioonide kasutamine

Andmete sorteerimine, juhuslikuks muutmine või isegi mallimootorina kasutamine.

3. Kuidas Underscore.js kasutusele võtta

Selles jaotises selgitame samm-sammult, kuidas lisada Underscore.js oma projekti. Tutvustame CDN-i kasutamist ja faili allalaadimist.

1. CDN-i kasutamine

CDN (Content Delivery Network) võimaldab kasutada teeki lihtsalt lingi kaudu. Lisa allolev kood oma HTML-i <head> või <body> lõppu.

Näide: HTML-faili lisamine

<!DOCTYPE html>
<html lang="et">
<head>
  <meta charset="UTF-8">
  <title>Underscore.js kasutuselevõtt</title>
  <!-- Underscore.js CDN link -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
</head>
<body>
  <h1>Underscore.js test</h1>
  <script>
    const data = [1, 2, 3, 4, 5];
    const evenNumbers = _.filter(data, function(num) {
      return num % 2 === 0;
    });
    console.log(evenNumbers); // [2, 4]
  </script>
</body>
</html>

Seda faili avades näed brauseri konsoolis ainult paarisarve.

2. Paigaldamine npm või yarn abil

Kui kasutad Node.js-i või lokaalset arenduskeskkonda, saad Underscore.js paigaldada järgmiste käskudega:

npm

npm install underscore

yarn

yarn add underscore

Importimise näide

import _ from 'underscore';

const data = [10, 20, 30, 40];
const result = _.map(data, (num) => num * 2);
console.log(result); // [20, 40, 60, 80]

3. Faili allalaadimine ja kasutamine

Mine ametlikule saidile underscorejs.org.
Laadi alla uusim JavaScripti fail.
Aseta see oma projekti kausta (nt js/).
Lisa see HTML-is skriptina.

<script src="js/underscore-min.js"></script>

4. Moodulipakettide kasutamine

Kui kasutad Webpacki või Parcelit, saad Underscore.js hõlpsasti integreerida.

Näide Webpackiga

Paigalda npm-i abil:

npm install underscore

Impordi JavaScripti failis:

import _ from 'underscore';

Käivita bundeldamine ja kasuta oma projektis.

Tõrkeotsing

1. Kui kuvatakse “Uncaught ReferenceError: _ is not defined”

See tähendab, et Underscore.js ei ole õigesti laaditud. Kontrolli CDN-i linki või impordi rada.

2. Kui pärast npm-i paigaldamist ilmneb viga

Uuenda Node.js ja npm uusimale versioonile.

4. Põhiline kasutamine

Selles jaotises tutvustame Underscore.js põhifunktsioone ja nende kasutusnäiteid, mis muudavad massiivide ja objektide töötlemise lihtsamaks.

1. Massiivide itereerimine – `_.each()`

_.each() võimaldab läbida massiive ja objekte.

Näide

const numbers = [1, 2, 3, 4, 5];

_.each(numbers, function(num) {
  console.log(num);
});

Tulemus:

Sobib nii massiividele kui objektidele.
Tagastab elemendi, indeksi ja kogu massiivi.

2. Massiivide kaardistamine – `_.map()`

_.map() loob uue massiivi, rakendades igale elemendile funktsiooni.

const numbers = [1, 2, 3, 4, 5];

const doubled = _.map(numbers, function(num) {
  return num * 2;
});

console.log(doubled);

Tulemus:

[2, 4, 6, 8, 10]

3. Esimese tingimusele vastava elemendi leidmine – `_.find()`

_.find() tagastab esimese elemendi, mis vastab tingimusele.

const numbers = [1, 2, 3, 4, 5];

const result = _.find(numbers, function(num) {
  return num >= 3;
});

console.log(result);

Tulemus:

4. Kõigi tingimusele vastavate elementide filtreerimine – `_.filter()`

_.filter() tagastab kõik tingimusele vastavad elemendid.

const numbers = [1, 2, 3, 4, 5];

const evens = _.filter(numbers, function(num) {
  return num % 2 === 0;
});

console.log(evens);

Tulemus:

[2, 4]

5. Massiivi elementide segamine – `_.shuffle()`

const numbers = [1, 2, 3, 4, 5];

const shuffled = _.shuffle(numbers);

console.log(shuffled);

Tulemus (näide):

[3, 5, 1, 4, 2]

6. Duplikaatide eemaldamine – `_.uniq()`

const numbers = [1, 2, 2, 3, 4, 4, 5];

const uniqueNumbers = _.uniq(numbers);

console.log(uniqueNumbers);

Tulemus:

[1, 2, 3, 4, 5]

Kokkuvõte

Tutvusime Underscore.js põhifunktsioonidega:

_.each() – elementide läbimine
_.map() – uue massiivi loomine
_.find() ja _.filter() – tingimustele vastavate elementide leidmine
_.shuffle() – elementide juhuslik järjestus
_.uniq() – duplikaatide eemaldamine

5. Täpsem kasutamine

Selles jaotises vaatame keerukamaid funktsioone, mis võimaldavad andmeid sorteerida, grupeerida ja kokku võtta.

1. Massiivi sorteerimine – `_.sortBy()`

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 20 },
  { name: 'Charlie', age: 30 }
];

const sortedUsers = _.sortBy(users, 'age');

console.log(sortedUsers);

Tulemus:

[
  { name: 'Bob', age: 20 },
  { name: 'Alice', age: 25 },
  { name: 'Charlie', age: 30 }
]

2. Massiivi grupeerimine – `_.groupBy()`

const numbers = [1.1, 2.3, 2.4, 3.5, 4.7];

const grouped = _.groupBy(numbers, function(num) {
  return Math.floor(num);
});

console.log(grouped);

Tulemus:

{
  1: [1.1],
  2: [2.3, 2.4],
  3: [3.5],
  4: [4.7]
}

3. Andmete kokkuvõtmine – `_.countBy()`

const words = ['apple', 'banana', 'apricot', 'blueberry'];

const counts = _.countBy(words, function(word) {
  return word[0];
});

console.log(counts);

Tulemus:

{
  a: 2,
  b: 2
}

Kokkuvõte

_.sortBy() – massiivi elementide sorteerimine
_.groupBy() ja _.countBy() – andmete grupeerimine ja loendamine

6. Objektide töötlemine

Selles jaotises vaatame Underscore.js funktsioone, mis aitavad objekte efektiivselt töödelda.

1. Objekti võtmete ja väärtuste hankimine

Võtmed – `_.keys()`

const person = { name: 'Alice', age: 25, city: 'Tokyo' };

const keys = _.keys(person);
console.log(keys);

Tulemus:

['name', 'age', 'city']

Väärtused – `_.values()`

const values = _.values(person);
console.log(values);

Tulemus:

['Alice', 25, 'Tokyo']

2. Objekti kloonimine – `_.clone()`

const original = { name: 'Alice', age: 25 };
const clone = _.clone(original);

clone.age = 30;
console.log(original.age); // 25
console.log(clone.age);    // 30

Kokkuvõte

_.keys() ja _.values() – objekti võtmete ja väärtuste hankimine
_.clone() – objekti koopia loomine

7. Funktsioonide töötlemine

Selles jaotises selgitame, kuidas Underscore.js abil funktsioone kontrollida ja optimeerida.

1. Funktsiooni sidumine – `_.bind()`

const person = {
  name: 'Alice',
  greet: function(greeting) {
    return `${greeting}, minu nimi on ${this.name}`;
  }
};

const boundGreet = _.bind(person.greet, person);

console.log(boundGreet('Tere')); // Tere, minu nimi on Alice

2. Funktsiooni viivitus – `_.delay()`

_.delay(function(message) {
  console.log(message);
}, 2000, 'See kuvatakse 2 sekundi pärast');

Tulemus:

See kuvatakse 2 sekundi pärast

3. Ainult üks kord täitmine – `_.once()`

const initialize = _.once(function() {
  console.log('Initsialiseerimine on lõpetatud');
});

initialize(); // käivitatakse
initialize(); // ignoreeritakse

4. Funktsiooni tulemuste vahemällu salvestamine – `_.memoize()`

const factorial = _.memoize(function(n) {
  return n <= 1 ? 1 : n * factorial(n - 1);
});

console.log(factorial(5)); // arvutatakse
console.log(factorial(5)); // kasutatakse vahemälu

5. Funktsiooni täitmise sageduse piiramine – `_.throttle()`

const log = _.throttle(function() {
  console.log('Töötlemine...');
}, 2000);

setInterval(log, 500); // käivitatakse iga 2 sekundi järel

Kokkuvõte

_.bind() – fikseerib this
_.delay() – viivitatud täitmine
_.once() – ainult üks kord täitmine
_.memoize() – tulemuste vahemällu salvestamine
_.throttle() – täitmiste sageduse piiramine

8. Abifunktsioonid

Underscore.js sisaldab ka mitmeid mugavaid utiliitfunktsioone.

1. Juhusliku arvu genereerimine – `_.random()`

console.log(_.random(1, 10)); // täisarv
console.log(_.random(1, 10, true)); // võib sisaldada murdarvu

2. Kontroll, kas väärtus on tühi – `_.isEmpty()`

console.log(_.isEmpty([]));     // true
console.log(_.isEmpty({}));     // true
console.log(_.isEmpty(''));     // true
console.log(_.isEmpty([1,2]));  // false

3. Mallide loomine – `_.template()`

const template = _.template('Tere, <%= name %>!');
console.log(template({ name: 'Alice' }));

Tulemus:

Tere, Alice!

Kokkuvõte

_.random() – juhuarvude genereerimine
_.isEmpty() – kontroll, kas väärtus on tühi
_.template() – lihtne mallimootor

9. Kokkuvõte

Selles artiklis käsitlesime Underscore.js kasutamist alates põhitõdedest kuni keerukamate funktsioonideni. See teek lihtsustab JavaScripti andmetöötlust ja aitab kirjutada tõhusamat koodi.

Artikli kokkuvõte

Põhikasutus – õppisime massiivide ja objektide põhilisi funktsioone.
Täpsem kasutamine – vaatasime sorteerimist, grupeerimist ja andmete kokkuvõtmist.
Funktsioonide töötlemine – selgitasime täitmise kontrolli ja vahemälu kasutamist.
Abifunktsioonid – tutvusime juhuarvude, tühjade väärtuste kontrolli ja mallide loomisega.

Lõppsõna

Underscore.js on võimas tööriist, mis muudab JavaScripti arenduse tõhusamaks ja lihtsamaks. Kasuta seda oma projektides ja arenda oma oskusi praktikas edasi.

Korduma kippuvad küsimused (KKK)

K1: Kas Underscore.js on tasuta?

V: Jah, see on MIT-litsentsiga ja seda saab kasutada ka äriprojektides tasuta.

K2: Mis vahe on Underscore.js-il ja Lodashil?

V: Underscore.js on kerge ja lihtne utiliiditeek. Lodash põhineb Underscore.js-il, kuid sisaldab rohkem funktsioone, paremat jõudlust ja modulaarsust. Valik sõltub projekti vajadustest.

K3: Kas ES6+ puhul on Underscore.js endiselt vajalik?

V: Kuigi ES6+ sisaldab mitmeid sisseehitatud funktsioone massiivide ja objektide jaoks, on Underscore.js endiselt kasulik lühema koodi ja brauseriteülese ühilduvuse saavutamiseks. Samuti sobib see hästi vanema koodiga projektides.

K4: Millistele projektidele Underscore.js sobib?

V: See sobib eriti hästi väikese ja keskmise suurusega projektidele, kus on oluline lihtsus ja kiirus.

K5: Kuidas Underscore.js paigaldada?

V: Võimalused:

CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>

npm:

npm install underscore

yarn:

yarn add underscore

K6: Kus leida ametlikku dokumentatsiooni?

V: Ametlik dokumentatsioon on siin: Underscore.js koduleht

K7: Kas Underscore.js sobib ka suurtele projektidele?

V: Jah, kuid suuremate projektide puhul soovitatakse tihti Lodashit, kuna see on modulaarsuse ja jõudluse poolest paremini optimeeritud.

K8: Kas funktsioonide juhtimiseks on muid viise?

V: Jah, kaasaegses JavaScriptis saab kasutada setTimeout(), setInterval(), Promise ja async/await. Siiski pakuvad _.throttle() ja _.debounce() lihtsamat lahendust.

K9: Millele peaks Underscore.js kasutamisel tähelepanu pöörama?

Vältida liialt suurt sõltuvust, kui ES6+ funktsioonid piisavad.
Kasutada alati uusimat versiooni, et vältida turvariske.
Vajadusel kaaluda Lodashile üleminekut.

K10: Kas Underscore.js sobib mallimootorina?

V: _.template() sobib lihtsate mallide loomiseks, kuid keerukamate lahenduste puhul on parem kasutada spetsiaalseid teeke nagu Handlebars.js või EJS.

Underscore.js juhend: JavaScripti massiivide ja objektide lihtsam töötlemine

1. Sissejuhatus

Underscore.js eelised

Mida sellest artiklist õpid

2. Mis on Underscore.js?

Ülevaade

Peamised omadused

Underscore.js vs Lodash

Kuidas Underscore.js aitab?

3. Kuidas Underscore.js kasutusele võtta

1. CDN-i kasutamine

Näide: HTML-faili lisamine

2. Paigaldamine npm või yarn abil

npm

yarn

Importimise näide

3. Faili allalaadimine ja kasutamine

4. Moodulipakettide kasutamine

Näide Webpackiga

Tõrkeotsing

4. Põhiline kasutamine

1. Massiivide itereerimine – _.each()

Näide

2. Massiivide kaardistamine – _.map()

3. Esimese tingimusele vastava elemendi leidmine – _.find()

4. Kõigi tingimusele vastavate elementide filtreerimine – _.filter()

5. Massiivi elementide segamine – _.shuffle()

6. Duplikaatide eemaldamine – _.uniq()

Kokkuvõte

5. Täpsem kasutamine

1. Massiivi sorteerimine – _.sortBy()

2. Massiivi grupeerimine – _.groupBy()

3. Andmete kokkuvõtmine – _.countBy()

Kokkuvõte

6. Objektide töötlemine

1. Objekti võtmete ja väärtuste hankimine

Võtmed – _.keys()

Väärtused – _.values()

2. Objekti kloonimine – _.clone()

Kokkuvõte

7. Funktsioonide töötlemine

1. Funktsiooni sidumine – _.bind()

2. Funktsiooni viivitus – _.delay()

3. Ainult üks kord täitmine – _.once()

4. Funktsiooni tulemuste vahemällu salvestamine – _.memoize()

5. Funktsiooni täitmise sageduse piiramine – _.throttle()

Kokkuvõte

8. Abifunktsioonid

1. Juhusliku arvu genereerimine – _.random()

2. Kontroll, kas väärtus on tühi – _.isEmpty()

3. Mallide loomine – _.template()

Kokkuvõte

9. Kokkuvõte

Artikli kokkuvõte

Lõppsõna

Korduma kippuvad küsimused (KKK)

K1: Kas Underscore.js on tasuta?

K2: Mis vahe on Underscore.js-il ja Lodashil?

K3: Kas ES6+ puhul on Underscore.js endiselt vajalik?

K4: Millistele projektidele Underscore.js sobib?

K5: Kuidas Underscore.js paigaldada?

K6: Kus leida ametlikku dokumentatsiooni?

K7: Kas Underscore.js sobib ka suurtele projektidele?

K8: Kas funktsioonide juhtimiseks on muid viise?

K9: Millele peaks Underscore.js kasutamisel tähelepanu pöörama?

K10: Kas Underscore.js sobib mallimootorina?

Mis on JSON ja kuidas seda kasutada? Põhjalik juhend arendajatele.

JavaScript replace() meetod: täielik juhend algajatele ja edasijõudnutele

1. Massiivide itereerimine – `_.each()`

2. Massiivide kaardistamine – `_.map()`

3. Esimese tingimusele vastava elemendi leidmine – `_.find()`

4. Kõigi tingimusele vastavate elementide filtreerimine – `_.filter()`

5. Massiivi elementide segamine – `_.shuffle()`

6. Duplikaatide eemaldamine – `_.uniq()`

1. Massiivi sorteerimine – `_.sortBy()`

2. Massiivi grupeerimine – `_.groupBy()`

3. Andmete kokkuvõtmine – `_.countBy()`

Võtmed – `_.keys()`

Väärtused – `_.values()`

2. Objekti kloonimine – `_.clone()`

1. Funktsiooni sidumine – `_.bind()`

2. Funktsiooni viivitus – `_.delay()`

3. Ainult üks kord täitmine – `_.once()`

4. Funktsiooni tulemuste vahemällu salvestamine – `_.memoize()`

5. Funktsiooni täitmise sageduse piiramine – `_.throttle()`

1. Juhusliku arvu genereerimine – `_.random()`

2. Kontroll, kas väärtus on tühi – `_.isEmpty()`

3. Mallide loomine – `_.template()`