JavaScript szintaxis - JavaScript syntax

A JavaScript szintaxisa olyan szabályhalmaz, amely megfelelően felépített JavaScript programot határoz meg.

Az alábbi példák a konzolobjektum naplófunkcióját használják a legtöbb böngészőben a szabványos szövegkimenethez .

A JavaScript szabványos könyvtárból (kivéve document.write) hiányzik a hivatalos szabványos szövegkimeneti funkció . Tekintettel arra, hogy a JavaScriptet főleg kliensoldali szkriptekhez használják a modern webböngészőkben , és hogy szinte minden webböngésző biztosítja a riasztási funkciót, a riasztás is használható, de nem általánosan.

Eredet

Brendan Eich a JavaScript 1.1 specifikáció első bekezdésében összefoglalta a szintaxis felmenőit:

A JavaScript szintaxisának nagy részét a Java -tól kölcsönzi , de örököl az Awk -tól és a Perl -től is , az objektum prototípusrendszerében az Self közvetett befolyással .

Alapok

Kis- és nagybetűk érzékenysége

A JavaScript megkülönbözteti a kis- és nagybetűket . Ez a közös kezdeni a nevét egy konstruktor egy tőkésített levelet, és a függvény nevét, vagy változó, kisbetűvel.

Példa:

var a=5;
console.log(a); // 5
console.log(A); // throws a ReferenceError: A is not defined

Szóköz és pontosvessző

A C -vel ellentétben a JavaScript -forrás szóközök közvetlenül befolyásolhatják a szemantikát . A pontosvesszők befejezik az állításokat a JavaScriptben. Az automatikus pontosvessző -beillesztés (ASI) miatt egyes új sor elemzésekor jól megformált állítások teljesnek tekintendők, mintha egy pontosvesszőt szúrnának be közvetlenül az új sor előtt. Egyes hatóságok azt tanácsolják, hogy kifejezetten adjanak meg utasításokat lezáró pontosvesszőket, mert ez csökkentheti az automatikus pontosvessző-beillesztés nem kívánt hatásait.

Két probléma van: öt token kezdheti a nyilatkozatot, vagy egy teljes utasítás kiterjesztése lehet; és öt korlátozott termelés, ahol a sorok megszakítása bizonyos pozíciókban nem megengedett, ami helytelen elemzést eredményezhet.

Az öt problémás zsetonok vannak a nyitott zárójel „ ( ”, nyitott zárójel „ [ ”, perjel „ / ”, plusz „ + ”, és a mínusz „ - ”. Ezek közül a nyitott zárójel gyakori az azonnal-hivatkozott funkciót expressziós mintázat , és a nyitott zárójel néha előfordul, míg mások meglehetősen ritkák. A specifikációban megadott példa:

a = b + c
(d + e).foo()

// Treated as:
//  a = b + c(d + e).foo();

azzal a javaslattal, hogy az előző állítást pontosvesszővel fejezzék be.

Vannak, akik ehelyett azt javasolják, hogy a ' ( ' vagy ' [ ' ' kezdetű sorokban használjon vezető pontosvesszőt , így a sor nem véletlenül kapcsolódik az előzőhöz. Ezt védelmi pontosvesszőnek nevezik , és különösen ajánlott, mert a kód egyébként kétértelmű, ha átrendeződik. Például:

a = b + c
;(d + e).foo()

// Treated as:
//  a = b + c;
//  (d + e).foo();

A kezdeti pontosvesszőket néha a JavaScript -könyvtárak elején is használják, ha azokat egy másik könyvtárhoz fűzik, amely elhagyja a pontosvesszőt, mivel ez a kezdeti utasítás kétértelműségéhez vezethet.

Az öt korlátozott produkció a visszatérés , a dobás , a szünet , a folytatás és az utólagos növelés/csökkentés. A pontosvesszők beszúrása minden esetben nem oldja meg a problémát, de egyértelművé teszi az elemzett szintaxist, így könnyebben észlelhető a hiba. a visszatérés és dobás opcionális értéket, míg a szünet és a folytatás opcionális címkét vesz fel. A tanács minden esetben az, hogy az értéket vagy a címkét ugyanazon a soron kell tartani, mint az állítást. Ez leggyakrabban a return utasításban jelenik meg, ahol egy nagy objektum literált adhat vissza, amelyet véletlenül egy új sorból kezdve helyezhet el. A növekmény/csökkentés utáni esetleges kétértelműség fennáll az előzetes növelés/csökkentés kapcsán, és ismét ajánlott ezeket egyszerűen ugyanazon a soron tartani.

return
a + b;

// Returns undefined. Treated as:
//   return;
//   a + b;
// Should be written as:
//   return a + b;

Hozzászólások

A megjegyzések szintaxisa ugyanaz, mint a C ++ , Swift és sok más nyelven.

// a short, one-line comment

/* this is a long, multi-line comment
  about my script. May it one day
  be great. */

/* Comments /* may not be nested */ Syntax error */

Változók

A szabványos JavaScript változókhoz nem tartozik típus , ezért bármilyen érték (minden értékhez tartozik típus) tárolható bármely változóban. Az ES6 -tól , a nyelv 6. verziójától kezdve a változók deklarálhatók vara függvény hatókörű változókhoz, és letvagy constamelyek blokkszintű változókhoz. Az ES6 előtt a változókat csak utasítással lehetett deklarálni var. A - val deklarált változókhoz rendelt értékek constnem módosíthatók, tulajdonságai viszont igen. A változó azonosítójának betűvel, aláhúzással ( _ ) vagy dollárjellel ( $ ) kell kezdődnie , míg a későbbi karakterek is lehetnek számjegyek ( 0–9 ). A JavaScript megkülönbözteti a kis- és nagybetűket, ezért az "A" - "Z" nagybetűk eltérnek az "a" - "z" kisbetűktől.

A JavaScript 1.5-től kezdve az ISO 8859-1 vagy Unicode betűk (vagy \ uXXXX Unicode escape szekvenciák) használhatók az azonosítókban. Bizonyos JavaScript -implementációkban az at jel (@) használható azonosítóban, de ez ellentétes a specifikációkkal, és az újabb implementációk nem támogatják.

Hatótávolság és emelés

Deklarált változók a varvan lexikailag távcsöves egy függvény szinten , míg azok a letvagy constegy blokk szintű körét. A nyilatkozatok feldolgozása a kód végrehajtása előtt történik. Erre hivatkozunk emelés , és ez egyenértékű azzal, hogy a változókata függvény vagy mondat tetejéndeklarálják.

A var,, letés a constnyilatkozatokkal csak a nyilatkozatot emelik fel; a feladatokat nem emelik ki. Így a függvény közepén lévő utasítás egyenértékű a függvény tetején található deklarációs utasítással, és a hozzárendelési utasítással a függvény közepén. Ez azt jelenti, hogy az értékek nem érhetők el deklarálásuk előtt; előre utalás nem lehetséges. A változó értéke az inicializálásig. A vagy gombbal deklarált változók nem érhetők el, amíg nem inicializálják, így a változóra való hivatkozás hibát okoz. var x = 1var xx = 1varundefinedletconst

A függvény deklarációk, amelyek egy változót deklarálnak és egy funkciót rendelnek hozzá, hasonlóak a változó utasításokhoz, de a deklaráció felemelése mellett emelik a hozzárendelést is - mintha a teljes utasítás a tartalomfüggvény tetején jelenne meg - és így az előreirányítás is lehetséges: a függvénykifejezés helye a befoglaló függvényen belül lényegtelen. Ez eltér a függvény kifejezést adva a változó egy var, letvagy constnyilatkozatot.

Tehát például

var func = function() { .. } // declaration is hoisted only
function func() { .. } // declaration and assignment are hoisted

A blokk hatókörét úgy állíthatjuk elő, hogy a teljes blokkot egy függvénybe csomagoljuk, majd végrehajtjuk-ezt azonnali meghívású függvénykifejezési mintának nevezzük-, vagy a letkulcsszót használva deklaráljuk a változót .

Nyilatkozat és megbízás

A hatókörön kívül deklarált változók globálisak . Ha egy változót magasabb hatókörben deklaráltak, akkor azt gyermekkörökkel lehet elérni.

Amikor a JavaScript megpróbálja feloldani az azonosítót, az a helyi hatókörben jelenik meg. Ha ez az azonosító nem található, akkor a következő külső hatókörben, és így tovább a hatókör láncolatában keres, amíg el nem éri azt a globális hatókört, ahol a globális változók találhatók. Ha még mindig nem találja, a JavaScript ReferenceErrorkivételt eredményez.

Az azonosító hozzárendelésekor a JavaScript pontosan ugyanazon a folyamaton megy keresztül, hogy lekérje ezt az azonosítót, kivéve, hogy ha nem található meg a globális hatókörben , akkor létrehozza a "változót" abban a hatókörben, ahol létrehozta. Ennek következtében a soha nem deklarált változó globális lesz, ha hozzá van rendelve. Ha egy változót (a kulcsszóval együtt var) deklarálunk a globális hatókörben (azaz bármely függvénytesten kívül (vagy let/const esetén blokk)), soha nem deklarált azonosítót rendelünk hozzá, vagy hozzáadunk egy tulajdonságot a globális objektumhoz (általában ablak ) hozzon létre egy új globális változót is.

Ne feledje, hogy a JavaScript szigorú módja tiltja a be nem jelentett változó hozzárendelését, ami elkerüli a globális névtér -szennyezést.

Példák

Íme néhány példa a változó deklarációkra és hatókörre:

var x1 = 0; // A global variable, because it is not in any function
let x2 = 0; // Also global, this time because it is not in any block

function f() {
  var z = 'foxes', r = 'birds'; // 2 local variables
  m = 'fish'; // global, because it wasn't declared anywhere before

  function child() {
    var r = 'monkeys'; // This variable is local and does not affect the "birds" r of the parent function.
    z = 'penguins'; // Closure: Child function is able to access the variables of the parent function.
  }

  twenty = 20; // This variable is declared on the next line, but usable anywhere in the function, even before, as here
  var twenty;

  child();
  return x1 + x2; // We can use x1 and x2 here, because they are global
}

f();

console.log(z); // This line will raise a ReferenceError exception, because the value of z is no longer available

for (let i = 0; i < 10; i++) console.log(i);
console.log(i); // throws a ReferenceError: i is not defined

for (const i = 0; i < 10; i++) console.log(i); // throws a TypeError: Assignment to constant variable

const pi; // throws a SyntaxError: Missing initializer in const declaration

Primitív adattípusok

A JavaScript nyelv hat primitív adattípust biztosít :

• Határozatlan
• Szám
• BigInt
• Húr
• Boolean
• Szimbólum

A primitív adattípusok egy része elnevezett értékeket is tartalmaz, amelyek a típushatárok kiterjedését képviselik. Ezeket a megnevezett értékeket az alábbi megfelelő szakaszok ismertetik.

Határozatlan

Az "undefined" érték hozzá van rendelve minden inicializálatlan változóhoz , és akkor is visszaadódik, ha nem létező objektumtulajdonságokat keres. Logikai kontextusban a meghatározatlan érték hamis értéknek minősül.

Megjegyzés: a undefined valódi primitív típusnak számít. Ha nincs kifejezetten átalakítva, akkor a nem definiált érték váratlanul viselkedhet más típusokkal összehasonlítva, amelyek logikus kontextusban hamisnak minősülnek.

var test;                         // variable declared, but not defined, ...
                                  // ... set to value of undefined
var testObj = {};
console.log(test);                // test variable exists, but value not ...
                                  // ... defined, displays undefined
console.log(testObj.myProp);      // testObj exists, property does not, ...
                                  // ... displays undefined
console.log(undefined == null);   // unenforced type during check, displays true
console.log(undefined === null);  // enforce type during check, displays false

Megjegyzés: Nincs beépített nyelvi literál a definiálatlan számára. Így nem megbízható módszer annak ellenőrzésére, hogy egy változó nincs -e definiálva, mert az ECMAScript 5 előtti verziókban törvényes, hogy valaki írjon . Erőteljesebb megközelítés a használat összehasonlítása . (x === undefined)var undefined = "I'm defined now";(typeof x === 'undefined')

Az ilyen funkciók nem a várt módon működnek:

function isUndefined(x) { var u; return x === u; }             // like this...
function isUndefined(x) { return x === void 0; }               // ... or that second one
function isUndefined(x) { return (typeof x) === "undefined"; } // ... or that third one

Itt a hívás ReferenceError -tisUndefined(my_var) vet fel, ha a my_var ismeretlen azonosító, míg nem. typeof my_var === 'undefined'

Szám

A számokat binárisan az IEEE-754 lebegőpontos duplájaként ábrázolják . Bár ez a formátum közel 16 jelentős számjegy pontosságot biztosít , nem mindig tudja pontosan ábrázolni a valós számokat, beleértve a törteket.

Ez problémát jelent számok összehasonlításakor vagy formázásakor. Például:

console.log(0.2 + 0.1 === 0.3); // displays false
console.log(0.94 - 0.01);       // displays 0.9299999999999999

Ennek eredményeképpen olyan rutint kell használni , mint a toFixed () metódus a számok kerekítésére, amikor azokat kimenetre formázzák .

A számok az alábbi jelölések bármelyikében megadhatók:

345;    // an "integer", although there is only one numeric type in JavaScript
34.5;   // a floating-point number
3.45e2; // another floating-point, equivalent to 345
0b1011; // a binary integer equal to 11
0o377;   // an octal integer equal to 255
0xFF;   // a hexadecimal integer equal to 255, digits represented by the ...
        // ... letters A-F may be upper or lowercase

Van egy numerikus elválasztó, _ (az aláhúzás), amelyet az ES2021 tartalmaz:

// Note: Wikipedia syntax doesn't support numeric separators yet
1_000_000_000;    // Used with big numbers
1_000_000.5;      // Support with decimals
1_000e1_000;      // Support with exponents

// Support with binary, octals and hex
0b0000_0000_0101_1011;
0o0001_3520_0237_1327;
0xFFFF_FFFF_FFFF_FFFE;

// But you can't use them next to a non-digit number part, or at the start or end
_12; // Variable is not defined (the underscore makes it a variable identifier)
12_; // Syntax error (cannot be at the end of numbers)
12_.0; // Syntax error (doesn't make sense to put a separator next to the decimal point)
12._0; // Syntax error
12e_6; // Syntax error (next to "e", a non-digit. Doesn't make sense to put a separator at the start)
1000____0000; // Syntax error (next to "_", a non-digit. Only 1 separator at a time is allowed

A számtípus +∞ , −∞ és NaN (nem szám) kiterjedése két programkifejezéssel kapható:

Infinity; // positive infinity (negative obtained with -Infinity for instance)
NaN;      // The Not-A-Number value, also returned as a failure in ...
          // ... string-to-number conversions

Az Infinity és a NaN számok:

typeof Infinity;   // returns "number"
typeof NaN;        // returns "number"

Ez a három speciális érték megfelel az IEEE-754 által leírtaknak és viselkedik .

A számszerkesztő (függvényként használatos), vagy egy egységes + vagy -használható expressz számszerű átalakításra:

var myString = "123.456";
var myNumber1 = Number(myString);
var myNumber2 = +myString;

Konstruktorként használva numerikus csomagoló objektum jön létre (bár kevés haszna van):

myNumericWrapper = new Number(123.456);

A NaN azonban nem egyenlő önmagával:

const nan = NaN;
console.log(NaN == NaN);        // false
console.log(NaN === NaN);       // false
console.log(NaN !== NaN);       // true
console.log(nan !== nan);       // true

// You can use the isNaN methods to check for NaN
console.log(isNaN("converted to NaN"));     // true
console.log(isNaN(NaN));                    // true
console.log(Number.isNaN("not converted")); // false
console.log(Number.isNaN(NaN));             // true

BigInt

A BigInts tetszőlegesen nagy egész számokhoz használható . Különösen a 2 ⁵³ - 1 -nél nagyobb egész számokat , ami a legnagyobb szám, amelyet a JavaScript megbízhatóan tud ábrázolni a Number primitívvel, és amelyet a Number.MAX_SAFE_INTEGER állandó képvisel.

A BigInts felosztásakor az eredmények csonkolásra kerülnek .

Húr

A karakterlánc a JavaScript egy karaktersorozat. A JavaScriptben a karakterláncok közvetlenül (literálként) hozhatók létre, ha a karaktersorozatot kettős (") vagy egyetlen (') idézőjel közé helyezzük. Az ilyen karakterláncokat egyetlen sorba kell írni, de tartalmazhatnak kihagyott újsoros karaktereket (például \ n). A JavaScript szabvány lehetővé teszi, hogy a backquote karakter (`, más néven súlyos ékezet vagy backtick) többsoros literális karakterláncokat idézzen, de ezt csak bizonyos böngészők támogatják 2016 -tól: Firefox és Chrome, de nem az Internet Explorer 11.

var greeting = "Hello, World!";
var anotherGreeting = 'Greetings, people of Earth.';

Egyedi karakter belül egy string lehet hozzáférni a charAt módszer (amelyet String.prototype ). Ez a preferált módszer a karakterláncon belüli egyes karakterek elérésekor, mivel nem modern böngészőkben is működik:

var h = greeting.charAt(0);

A modern böngészőkben a karakterláncon belüli egyes karakterek (csak egyetlen karaktersorozatként) érhetők el ugyanazzal a jelöléssel, mint a tömbök:

var h = greeting[0];

A JavaScript karakterláncok azonban változatlanok :

greeting[0] = "H"; // Fails.

Az egyenlőségi operátor ("==") alkalmazása két karakterláncra igaz, ha a karakterláncok tartalma megegyezik, ami azt jelenti: azonos hosszúságú és azonos karaktersorozatot tartalmaz (az ábécé esetében a kisbetű jelentős). És így:

var x = "World";
var compare1 = ("Hello, " +x == "Hello, World"); // Here compare1 contains true.
var compare2 = ("Hello, " +x == "hello, World"); // Here compare2 contains  ...
                                                 // ... false since the ...
                                                 // ... first characters ...
                                                 // ... of both operands ...
                                                 // ... are not of the same case.

Idézetek az azonos típusú nem helyezhetők el, kivéve, ha megszökött .

var x = '"Hello, World!" he said.'; // Just fine.
var x = ""Hello, World!" he said."; //  Not good.
var x = "\"Hello, World!\" he said."; // Works by escaping " with \"

A String konstruktor létrehoz egy karakterlánc objektumot (egy karakterláncot csomagoló objektumot):

var greeting = new String("Hello, World!");

Ezeknek az objektumoknak van egy valueOf metódusuk, amely visszaadja a bennük lévő primitív karakterláncot:

var s = new String("Hello !");
typeof s; // Is 'object'.
typeof s.valueOf(); // Is 'string'.

A két karakterlánc objektum közötti egyenlőség nem úgy viselkedik, mint a karakterlánc primitíveknél:

var s1 = new String("Hello !");
var s2 = new String("Hello !");
s1 == s2; // Is false, because they are two distinct objects.
s1.valueOf() == s2.valueOf(); // Is true.

Boolean

JavaScript biztosít logikai adattípus a valódi és a hamis literálok. A typeof operátor a "boolean" karakterláncot adja vissza ezekhez a primitív típusokhoz . Logikai kontextusban használva a 0 , -0 , null , NaN , undefined és az üres karakterlánc ( "" ) hamisnak minősül az automatikus típuskényszer miatt . Minden más érték (az előző lista kiegészítése ) igaznak minősül , beleértve a "0" , "false" karakterláncokat és bármely objektumot.

Típusátalakítás

Az egyenlőség -összehasonlító operátorok ( ==és !=) automatikus típuskényszerítése elkerülhető a típusellenőrzött összehasonlító operátorok ( ===és !==) használatával.

Ha típuskonverzióra van szükség, a JavaScript a következőképpen konvertálja a logikai , szám , karakterlánc vagy objektum operandusokat:

Szám és karakterlánc

A karakterlánc számértékké konvertálódik. A JavaScript megpróbálja átalakítani a karakterlánc numerikus literált szám típusú értékké. Először egy matematikai értéket származtatunk a numerikus literálból. Ezután ezt az értéket a legközelebbi szám típusú értékre kerekítik.

Boolean

Ha az egyik operandus logikai, akkor a logikai operandust 1 -re konvertálja, ha igaz , vagy 0 -ra , ha hamis .

Tárgy

Ha az objektumot számmal vagy karakterlánccal hasonlítják össze, a JavaScript megpróbálja visszaadni az objektum alapértelmezett értékét. Az objektum primitív karakterlánc- vagy számértékké konvertálódik az objektum .valueOf () vagy .toString () metódusaival. Ha ez nem sikerül, futási hiba keletkezik.

Douglas Crockford a " truthy " és a " hamis " kifejezéseket támogatja annak leírására, hogy a különböző típusú értékek hogyan viselkednek, amikor logikai kontextusban értékelik őket, különösen a szélső eseteket illetően. A bináris logikai operátorok egy logikai értéket adtak vissza a JavaScript korai verzióiban, de most az egyik operandust adják vissza. A bal oldali operandust visszaadjuk, ha a következőképpen értékelhető: hamis , kötőszó esetén : ( a && b), vagy igaz , diszjunkció esetén : ( a || b); ellenkező esetben a jobb -operandus visszaadásra kerül. Az összehasonlító operátorok automatikus típuskényszere eltérhet a vegyes logikai és számokkal kompatibilis operandusok esetében (beleértve a számként értékelhető karakterláncokat vagy az ilyen karakterláncként értékelhető objektumokat is), mivel a Boole-operandus összehasonlításra kerül a egy numerikus érték. Ez váratlan lehet. Egy kifejezés kifejezetten egy logikai primitívbe önthető, ha megduplázza a logikai tagadó operátort : ( !! ), a Boolean () függvénnyel vagy a feltételes operátorral : ( c ? t : f).

// Automatic type coercion
console.log(true  ==   2 ); // false... true  → 1 !== 2 ←  2
console.log(false ==   2 ); // false... false → 0 !== 2 ←  2
console.log(true  ==   1 ); // true.... true  → 1 === 1 ←  1
console.log(false ==   0 ); // true.... false → 0 === 0 ←  0
console.log(true  ==  "2"); // false... true  → 1 !== 2 ← "2"
console.log(false ==  "2"); // false... false → 0 !== 2 ← "2"
console.log(true  ==  "1"); // true.... true  → 1 === 1 ← "1"
console.log(false ==  "0"); // true.... false → 0 === 0 ← "0"
console.log(false ==  "" ); // true.... false → 0 === 0 ← ""
console.log(false ==  NaN); // false... false → 0 !== NaN

console.log(NaN == NaN); // false...... NaN is not equivalent to anything, including NaN.

// Type checked comparison (no conversion of types and values)
console.log(true === 1); // false...... data types do not match

// Explicit type coercion
console.log(true === !!2);   // true.... data types and values match
console.log(true === !!0);   // false... data types match, but values differ
console.log( 1  ? true : false); // true.... only ±0 and NaN are "falsy" numbers
console.log("0" ? true : false); // true.... only the empty string is "falsy"
console.log(Boolean({}));    // true.... all objects are "truthy"

Az új operátorral objektumcsomagolást lehet létrehozni egy Boole -primitív számára. A typeof operátor azonban nem ad vissza logikai értéket az objektumcsomagoló számára, hanem objektumot ad vissza . Mivel minden objektum igaznak minősül , olyan módszert kell használni, mint a .valueOf () vagy a .toString () , a becsomagolt érték lekéréséhez. A Boolean típusú kifejezett kényszerítésére a Mozilla azt javasolja, hogy a Boolean () függvényt ( új nélkül ) használja a Boolean objektum helyett.

var b = new Boolean(false);   // Object  false {}
var t = Boolean(b);           // Boolean true
var f = Boolean(b.valueOf()); // Boolean false
var n = new Boolean(b);       // Not recommended
n = new Boolean(b.valueOf()); // Preferred

if (0 || -0 || "" || null || undefined || b.valueOf() || !new Boolean() || !t) {
  console.log("Never this");
} else if ([] && {} && b && typeof b === "object" && b.toString() === "false") {
  console.log("Always this");
}

Szimbólum

Újdonság az ECMAScript6 -ban. A szimbólum egyedi és megváltoztathatatlan azonosító.

Példa:

var x = Symbol(1);
var y = Symbol(1);
x === y; // => false

var symbolObject = {};
var normalObject = {};

// since x and y are unique,
// they can be used as unique keys in an object
symbolObject[x] = 1;
symbolObject[y] = 2;

symbolObject[x]; // => 1
symbolObject[y]; // => 2

// as compared to normal numeric keys
normalObject[1] = 1;
normalObject[1] = 2; // overrides the value of 1

normalObject[1]; // => 2

// changing the value of x does not change the key stored in the object
x = Symbol(3);
symbolObject[x]; // => undefined

// changing x back just creates another unique Symbol
x = Symbol(1);
symbolObject[x]; // => undefined

Vannak jól ismert szimbólumok is .

Az egyik ilyen Symbol.iterator; ha valami megvalósul Symbol.iterator, akkor megismételhető:

let x = [1, 2, 3, 4]; // x is an Array
x[Symbol.iterator] === Array.prototype[Symbol.iterator]; // and Arrays are iterable

const xIterator = x[Symbol.iterator](); // The [Symbol.iterator] function should provide an iterator for x
xIterator.next(); // { value: 1, done: false }
xIterator.next(); // { value: 2, done: false }
xIterator.next(); // { value: 3, done: false }
xIterator.next(); // { value: 4, done: false }
xIterator.next(); // { value: undefined, done: true }
xIterator.next(); // { value: undefined, done: true }

// for..of loops automatically iterate values
for (const value of x) {
   console.log(value); // 1 2 3 4
}

// Sets are also iterable:
[Symbol.iterator] in Set.prototype; // true

for (const value of new Set(['apple', 'orange'])) {
   console.log(value); // "apple" "orange"
}

Natív objektumok

A JavaScript nyelv maroknyi natív objektumot biztosít . A JavaScript natív objektumokat a JavaScript specifikáció részének tekintjük. A JavaScript környezet ellenére ennek az objektumkészletnek mindig elérhetőnek kell lennie.

Sor

Az Array egy JavaScript objektum, amelyet az Array konstruktorból készítettek, és amelyet kifejezetten egész kulcsokkal indexelt adatértékek tárolására terveztek. A tömbök, az alapvető objektumtípussal ellentétben, olyan prototípusokkal vannak ellátva, amelyek olyan módszerekkel és tulajdonságokkal rendelkeznek, amelyek segítik a programozót a rutinfeladatokban (például csatlakozás , szeletelés és push ).

A C családhoz hasonlóan a tömbök nulla alapú indexelési sémát használnak: Egy érték, amelyet a push módszerrel egy üres tömbbe illesztünk be , a tömb 0. indexét foglalja el.

var myArray = [];            // Point the variable myArray to a newly ...
                             // ... created, empty Array
myArray.push("hello World"); // Fill the next empty index, in this case 0
console.log(myArray[0]);           // Equivalent to console.log("hello World");

A tömböknek van egy hosszúsági tulajdonságuk, amely garantáltan mindig nagyobb lesz, mint a tömbben használt legnagyobb egész index. Automatikusan frissül, ha valaki még nagyobb indexű tulajdont hoz létre. Ha kisebb számot ír a hosszúság tulajdonságba, akkor a nagyobb indexek törlődnek.

A tömb elemei a normál objektumtulajdonság -jelöléssel érhetők el:

myArray[1];  // the 2nd item in myArray
myArray["1"];

A fenti kettő egyenértékű. Nem lehetséges a "pont" jelölés vagy karakterláncok használata a szám alternatív ábrázolásával:

myArray.1;     // syntax error
myArray["01"]; // not the same as myArray[1]

A tömb deklarációja használhat Array literált vagy Array konstruktorot:

let myArray;

// Array literals
myArray = [1, 2]; // length of 2
myArray = [1, 2,]; // same array - You can also have an extra comma at the end

// It's also possible to not fill in parts of the array
myArray = [0, 1, /* hole */, /* hole */, 4, 5]; // length of 6
myArray = [0, 1, /* hole */, /* hole */, 4, 5,]; // same array
myArray = [0, 1, /* hole */, /* hole */, 4, 5, /* hole */,]; // length of 7

// With the constructor
myArray = new Array(0, 1, 2, 3, 4, 5); // length of 6
myArray = new Array(365);              // an empty array with length 365

A tömbök úgy vannak megvalósítva, hogy csak a meghatározott elemek használnak memóriát; ezek " ritka tömbök ". A beállítás és csak a két elem számára használ helyet, csakúgy, mint bármely más objektum. A tömb hossza továbbra is 58 lesz. Egy tömb maximális hossza 4 294 967 295, ami 32 bites bináris számnak felel meg (1111111111111111111111111111111111) ₂ . myArray[10] = 'someThing'myArray[57] = 'somethingOther'

Az objektum deklarációs literál használatával olyan objektumokat hozhat létre, amelyek más nyelveken asszociatív tömbökhöz hasonlóan viselkednek:

dog = {color: "brown", size: "large"};
dog["color"]; // results in "brown"
dog.color;    // also results in "brown"

Az objektum- és tömbdeklarációs literálok segítségével gyorsan létrehozhatunk asszociatív, többdimenziós vagy mindkettőt tartalmazó tömböket. (Technikailag a JavaScript nem támogatja a többdimenziós tömböket, de tömbtömbök utánozhatók.)

cats = [{color: "brown", size: "large"},
    {color: "black", size: "small"}];
cats[0]["size"];      // results in "large"

dogs = {rover: {color: "brown", size: "large"},
    spot: {color: "black", size: "small"}};
dogs["spot"]["size"]; // results in "small"
dogs.rover.color;     // results in "brown"

Dátum

A Dátum objektum egy aláírt ezredmásodperces számot tárol nullával, ami 1970-01-01 00:00:00 UT, és ± 10 ⁸ nap. Számos módja van érvek megadására a Dátum konstruktornak. Vegye figyelembe, hogy a hónapok nulla alapúak.

new Date();                       // create a new Date instance representing the current time/date.
new Date(2010, 2, 1);             // create a new Date instance representing 2010-Mar-01 00:00:00
new Date(2010, 2, 1, 14, 25, 30); // create a new Date instance representing 2010-Mar-01 14:25:30
new Date("2010-3-1 14:25:30");    // create a new Date instance from a String.

A mezők kibontására szolgáló módszerek, valamint egy hasznos karakterlánc is rendelkezésre áll :

var d = new Date(2010, 2, 1, 14, 25, 30); // 2010-Mar-01 14:25:30;

// Displays '2010-3-1 14:25:30':
console.log(d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' '
    + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds());

// Built-in toString returns something like 'Mon Mar 01 2010 14:25:30 GMT-0500 (EST)':
console.log(d);

Hiba

Egyéni hibaüzenetek a Hiba osztály használatával hozhatók létre :

throw new Error("Something went wrong.");

Ezeket el lehet érni a try ... catch ... végül blokkokkal, a kivételkezelésről szóló részben leírtak szerint .

Math

A Math objektum különféle matematikai állandókat (például π ) és függvényeket (például koszinusz) tartalmaz. (Ne feledje, hogy a Math objektumnak nincs konstruktorja, ellentétben a tömbvel vagy a dátummal . Minden metódusa "statikus", azaz "osztály" módszer.) Minden trigonometrikus függvény radiánban kifejezett szögeket használ , nem pedig fokokat vagy gradienseket .

Reguláris kifejezés

/expression/.test(string);     // returns Boolean
"string".search(/expression/); // returns position Number
"string".replace(/expression/, replacement);

// Here are some examples
if (/Tom/.test("My name is Tom")) console.log("Hello Tom!");
console.log("My name is Tom".search(/Tom/));          // == 11 (letters before Tom)
console.log("My name is Tom".replace(/Tom/, "John")); // == "My name is John"

Karakterosztályok

// \d  - digit
// \D  - non digit
// \s  - space
// \S  - non space
// \w  - word char
// \W  - non word
// [ ] - one of
// [^] - one not of
//  -  - range

if (/\d/.test('0'))                   console.log('Digit');
if (/[0-9]/.test('6'))                console.log('Digit');
if (/[13579]/.test('1'))              console.log('Odd number');
if (/\S\S\s\S\S\S\S/.test('My name')) console.log('Format OK');
if (/\w\w\w/.test('Tom'))             console.log('Hello Tom');
if (/[a-zA-Z]/.test('B'))             console.log('Letter');

Karakter egyezés

// A...Z a...z 0...9  - alphanumeric
// \u0000...\uFFFF    - Unicode hexadecimal
// \x00...\xFF        - ASCII hexadecimal
// \t                 - tab
// \n                 - new line
// \r                 - CR
// .                  - any character
// |                  - OR

if (/T.m/.test('Tom')) console.log ('Hi Tom, Tam or Tim');
if (/A|B/.test("A"))  console.log ('A or B');

Ismétlők

// ?   - 0 or 1 match
// *   - 0 or more
// +   - 1 or more
// {n}   - exactly n
// {n,}  - n or more
// {0,n} - n or less
// {n,m} - range n to m

if (/ab?c/.test("ac"))       console.log("OK"); // match: "ac", "abc"
if (/ab*c/.test("ac"))       console.log("OK"); // match: "ac", "abc", "abbc", "abbbc" etc.
if (/ab+c/.test("abc"))      console.log("OK"); // match: "abc", "abbc", "abbbc" etc.
if (/ab{3}c/.test("abbbc"))  console.log("OK"); // match: "abbbc"
if (/ab{3,}c/.test("abbbc")) console.log("OK"); // match: "abbbc", "abbbbc", "abbbbbc" etc.
if (/ab{1,3}c/.test("abc"))  console.log("OK"); // match: "abc", "abbc", "abbbc"

Horgonyok

// ^  - string starts with
// $  - string ends with

if (/^My/.test("My name is Tom"))   console.log ("Hi!");
if (/Tom$/.test("My name is Tom"))  console.log ("Hi Tom!");

Kifejezés

// ( )  - groups characters

if (/water(mark)?/.test("watermark")) console.log("Here is water!"); // match: "water", "watermark",
if (/(Tom)|(John)/.test("John"))      console.log("Hi Tom or John!");

Zászlók

// /g  - global
// /i  - ignore upper/lower case
// /m  - allow matches to span multiple lines

console.log("hi tom!".replace(/Tom/i, "John"));  // == "hi John!"
console.log("ratatam".replace(/ta/, "tu"));      // == "ratutam"
console.log("ratatam".replace(/ta/g, "tu"));     // == "ratutum"

Fejlett módszerek

my_array = my_string.split(my_delimiter);
// example
my_array = "dog,cat,cow".split(",");      // my_array==["dog","cat","cow"];

my_array = my_string.match(my_expression);
// example
my_array = "We start at 11:30, 12:15 and 16:45".match(/\d\d:\d\d/g); // my_array==["11:30","12:15","16:45"];

Csoportok rögzítése

var myRe = /(\d{4}-\d{2}-\d{2}) (\d{2}:\d{2}:\d{2})/;
var results = myRe.exec("The date and time are 2009-09-08 09:37:08.");
if (results) {
  console.log("Matched: " + results[0]); // Entire match
  var my_date = results[1]; // First group == "2009-09-08"
  var my_time = results[2]; // Second group == "09:37:08"
  console.log("It is " + my_time + " on " + my_date);
} else console.log("Did not find a valid date!");

Funkció

A JavaScript minden funkciója a Function konstruktor példánya :

// x, y is the argument. 'return x + y' is the function body, which is the last in the argument list.
var add = new Function('x', 'y', 'return x + y');
add(1, 2); // => 3

A fenti add függvény függvénykifejezéssel is definiálható:

var add = function(x, y) {
  return x + y;
};
add(1, 2); // => 3

Az ES6 -ban a nyílfüggvény szintaxisa került hozzáadásra, így az értéket visszaadó függvények tömörebbek lehetnek. A globális objektum ezt is megtartják, ahelyett, hogy örökölnék onnan, ahonnan hívták / amire hívták, ellentétben a () {} kifejezéssel.

var add = (x, y) => {return x + y;};
// values can also be implicitly returned (i.e. no return statement is needed)
var addImplicit = (x, y) => x + y;

add(1, 2); // => 3
addImplicit(1, 2) // => 3

A kiemelni kívánt funkciókhoz külön kifejezés tartozik:

function add(x, y) {
  return x + y;
}
add(1, 2); // => 3

Az emelés lehetővé teszi, hogy a függvényt "deklarálása" előtt használja:

add(1, 2); // => 3, not a ReferenceError
function add(x, y) {
  return x + y;
}

A függvénypéldánynak tulajdonságai és módszerei vannak.

function subtract(x, y) {
  return x - y;
}

console.log(subtract.length); // => 2, arity of the function (number of arguments)
console.log(subtract.toString());

/*
"function subtract(x, y) {
  return x - y;
}"
*/

Üzemeltetők

A „+” operátor túlterhelt : karakterlánc -összefűzéshez és számtani összeadáshoz használják. Ez problémákat okozhat a karakterláncok és számok véletlenszerű keverésekor. Egyetlen operátorként képes egy numerikus karakterláncot számmá alakítani.

// Concatenate 2 strings
console.log('He' + 'llo'); // displays Hello

// Add two numbers
console.log(2 + 6);  // displays 8

// Adding a number and a string results in concatenation (from left to right)
console.log(2 + '2');    // displays 22
console.log('$' + 3 + 4);  // displays $34, but $7 may have been expected
console.log('$' + (3 + 4)); // displays $7
console.log(3 + 4 + '7'); // displays 77, numbers stay numbers until a string is added

// Convert a string to a number using the unary plus
console.log(+'2' === 2); // displays true
console.log(+'Hello'); // displays NaN

Hasonlóképpen a „*” operátor túlterhelt: egy karakterláncot számmá alakíthat.

console.log(2 + '6'*1);  // displays 8
console.log(3*'7'); // 21
console.log('3'*'7'); // 21
console.log('hello'*'world'); // displays NaN

Számtan

A JavaScript a következő bináris aritmetikai operátorokat támogatja :

A JavaScript a következő egységes aritmetikai operátorokat támogatja :

var x = 1;
console.log(++x); // x becomes 2; displays 2
console.log(x++); // displays 2; x becomes 3
console.log(x);  // x is 3; displays 3
console.log(x--); //  displays 3; x becomes 2
console.log(x);  //  displays 2; x is 2
console.log(--x); //  x becomes 1; displays 1

A modulus operátor a maradékot a modullal való felosztás után jeleníti meg. Ha negatív számokról van szó, a visszaadott érték az operandustól függ.

var x = 17;
console.log(x%5); // displays 2
console.log(x%6); // displays 5
console.log(-x%5); // displays -2
console.log(-x%-5); // displays -2
console.log(x%-5); // displays 2

Ha mindig nem negatív számot szeretne visszaadni, adja hozzá újra a modulust, és alkalmazza újra a modulo operátort:

var x = 17;
console.log((-x%5+5)%5); // displays 3

Feladat

Kiosztása a primitív típusok

var x = 9;
x += 1; 
console.log(x); // displays: 10
x *= 30;
console.log(x); // displays: 300
x /= 6;
console.log(x); // displays: 50
x -= 3;
console.log(x); // displays: 47
x %= 7;
console.log(x); // displays: 5

Objektumtípusok hozzárendelése

/**
 * To learn JavaScript objects...
 */
var object_1 = {a: 1};		// assign reference of newly created object to object_1
var object_2 = {a: 0};
var object_3 = object_2;	// object_3 references the same object as object_2 does
	 
object_3.a = 2;
message();	        	// displays 1 2 2
	 
object_2 = object_1;		// object_2 now references the same object as object_1
	        	        // object_3 still references what object_2 referenced before
message();		        // displays 1 1 2
	 
object_2.a = 7;  	        // modifies object_1
message();		        // displays 7 7 2

object_3.a = 5;                 // object_3 doesn't change object_2
message();	                // displays 7 7 5

object_3 = object_2;	
object_3.a=4;                  // object_3 changes object_1 and object_2
message();                     // displays 4 4 4

/**
 * Prints the console.log message
 */
function message() {
	console.log(object_1.a + " " + object_2.a + " " + object_3.a);
}

Destrukturáló megbízás

A Mozilla JavaScript 1.7 -es verziója óta a destrukturáló hozzárendelés lehetővé teszi az adatstruktúrák egyes részeinek egyszerre több változóhoz való hozzárendelését. A hozzárendelés bal oldala egy minta, amely hasonlít egy tetszőlegesen beágyazott objektum/tömb literálhoz, amely l-lértékeket tartalmaz a levelein, amelyeknek meg kell kapniuk a hozzárendelt érték alszerkezeteit.

var a, b, c, d, e;
[a, b, c] = [3, 4, 5];
console.log(a + ',' + b + ',' + c); // displays: 3,4,5
e = {foo: 5, bar: 6, baz: ['Baz', 'Content']};
var arr = [];
({baz: [arr[0], arr[3]], foo: a, bar: b}) = e;
console.log(a + ',' + b + ',' + arr);	// displays: 5,6,Baz,,,Content
[a, b] = [b, a];		// swap contents of a and b
console.log(a + ',' + b);		// displays: 6,5

[a, b, c] = [3, 4, 5]; // permutations
[a, b, c] = [b, c, a];
console.log(a + ',' + b + ',' + c); // displays: 4,5,3

Szóró/pihenő kezelő

Az ECMAScript 2015 szabvány bevezeti a " ... " operátort a "szórt szintaxis" és a "pihenési paraméterek" kapcsolódó fogalmaihoz

A szórási szintaxis egy másik módot kínál a tömbök felbontására. Azt jelzi, hogy egy meghatározott tömb elemeit kell használni függvényhívás paramétereiként vagy a tömb literal elemeit.

Más szóval, a " ... " átalakítja a " [... foo] " -ból " [foo [0], foo [1], foo [2]] " és " this.bar (... foo); "ebbe" .bar (foo [0], foo [1], foo [2]); ".

var a = [1, 2, 3, 4];

// It can be used multiple times in the same expression
var b = [...a, ...a]; // b = [1, 2, 3, 4, 1, 2, 3, 4];

// It can be combined with non-spread items.
var c = [5, 6, ...a, 7, 9]; // c = [5, 6, 1, 2, 3, 4, 7, 9];

// For comparison, doing this without the spread operator 
// creates a nested array.
var d = [a, a]; // d = [[1, 2, 3, 4], [1, 2, 3, 4]]

// It works the same with function calls
function foo(arg1, arg2, arg3) {
    console.log(arg1 + ':' + arg2 + ':' + arg3);
}

// You can use it even if it passes more parameters than the function will use
foo(...a); // "1:2:3" → foo(a[0], a[1], a[2], a[3]);

// You can mix it with non-spread parameters
foo(5, ...a, 6); // "5:1:2" → foo(5, a[0], a[1], a[2], a[3], 6);

// For comparison, doing this without the spread operator
// assigns the array to arg1, and nothing to the other parameters.
foo(a); // "1,2,3,4:undefined:undefined"

Ha a ... funkciót használja a deklarációban , az egy nyugalmi paramétert jelez . A többi paraméternek a függvény paraméterlistájában szereplő végső elnevezett paraméternek kell lennie. A rendszer hozzárendel egy tömböt, amely tartalmazza a függvénynek a többi megnevezett paramétert meghaladó argumentumokat. Más szóval, megkapja a függvényhez továbbított argumentumok "maradékát" (innen a név).

function foo(a, b, ...c) {
    console.log(c.length);
}

foo(1, 2, 3, 4, 5); // "3" → c = [3, 4, 5]
foo('a', 'b'); // "0" → c = []

A többi paraméter hasonló a Javascript argumentum objektumához, amely egy tömbszerű objektum, amely tartalmazza az aktuális függvényhívás összes paraméterét (névvel és név nélkül). Ellentétben érvek azonban többi paraméter igaz Array objektumokat, így a módszerek, mint például .slice () és .sort () lehet használni őket közvetlenül.

A ... operátor csak Array objektumokkal használható. (Van azonban egy javaslat annak kiterjesztésére az objektumokra a jövőbeni ECMAScript szabványban.)

Összehasonlítás

Az objektumokra hivatkozó változók csak akkor azonosak vagy azonosak, ha ugyanarra az objektumra hivatkoznak:

var obj1 = {a: 1};
var obj2 = {a: 1};
var obj3 = obj1;
console.log(obj1 == obj2);  //false
console.log(obj3 == obj1);  //true
console.log(obj3 === obj1); //true

Lásd még: String .

Logikus

A JavaScript négy logikai operátort biztosít:

• egységes tagadás ( NEM =! a )
• bináris diszjunkció ( OR = a || b ) és kötőszó ( AND = a && b )
• háromszoros feltételes ( c? t: f )

Egy logikai művelet keretében minden kifejezés igaznak minősül, kivéve a következőket :

• Karakterláncok: "" , '' ,
• Számok: 0 , -0 , NaN ,
• Különleges: nulla , nem definiált ,
• Boolean: hamis .

A Boolean függvénnyel kifejezetten Boolean típusú primitívvé lehet konvertálni :

// Only empty strings return false
console.log(Boolean("")      === false);
console.log(Boolean("false") === true);
console.log(Boolean("0")     === true);

// Only zero and NaN return false
console.log(Boolean(NaN) === false);
console.log(Boolean(0)   === false);
console.log(Boolean(-0)  === false); // equivalent to -1*0
console.log(Boolean(-2)  === true);

// All objects return true
console.log(Boolean(this) === true);
console.log(Boolean({})   === true);
console.log(Boolean([])   === true);

// These types return false
console.log(Boolean(null)      === false);
console.log(Boolean(undefined) === false); // equivalent to Boolean()

A NOT operátor logikai értékként értékeli operandusát, és visszaadja a tagadást. Az operátor kétszeri egymás utáni használata kettős negatívként kifejezetten átalakítja a kifejezést Boolean típusú primitivé:

console.log( !0 === Boolean(!0));
console.log(Boolean(!0) === !!1);
console.log(!!1 === Boolean(1));
console.log(!!0 === Boolean(0));
console.log(Boolean(0) === !1);
console.log(!1 === Boolean(!1));
console.log(!"" === Boolean(!""));
console.log(Boolean(!"") === !!"s");
console.log(!!"s" === Boolean("s"));
console.log(!!"" === Boolean(""));
console.log(Boolean("") === !"s");	
console.log(!"s" === Boolean(!"s"));

A terner operátor explicit konverzióra is használható:

console.log([] == false); console.log([] ? true : false); // “truthy”, but the comparison uses [].toString()
console.log([0] == false); console.log([0]? true : false); // [0].toString() == "0"
console.log("0" == false); console.log("0"? true : false); // "0" → 0 ... (0 == 0) ... 0 ← false
console.log([1] == true); console.log([1]? true : false); // [1].toString() == "1"
console.log("1" == true); console.log("1"? true : false); // "1" → 1 ... (1 == 1) ... 1 ← true
console.log([2] != true); console.log([2]? true : false); // [2].toString() == "2"
console.log("2" != true); console.log("2"? true : false); // "2" → 2 ... (2 != 1) ... 1 ← true

Az olyan funkciókat használó kifejezéseknek, mint a növekmény utáni növelés ( i ++ ), várható mellékhatásuk van . A JavaScript biztosítja a kifejezések rövidzárlati kiértékelését ; a jobb operandus csak akkor kerül végrehajtásra, ha a bal operandus nem elegendő a kifejezés értékének meghatározásához.

console.log(a || b);  // When a is true, there is no reason to evaluate b.
console.log(a && b);  // When a is false, there is no reason to evaluate b.
console.log(c ? t : f); // When c is true, there is no reason to evaluate f.

A JavaScript és a JScript korai verzióiban a bináris logikai operátorok egy logikai értéket adtak vissza (mint a legtöbb C-eredetű programozási nyelv). Azonban minden korszerű megvalósítás az egyik operandusát adja vissza:

console.log(a || b); // if a is true, return a, otherwise return b
console.log(a && b); // if a is false, return a, otherwise return b

Azok a programozók, akik jobban ismerik a C viselkedését, meglepőnek találhatják ezt a funkciót, de lehetővé teszik a minták tömörebb kifejezését, például a null -összeolvadást :

var s = t || "(default)"; // assigns t, or the default value, if t is null, empty, etc.

Logikai feladat

Bitenként

A JavaScript a következő bináris bitszerű operátorokat támogatja :

Példák:

x=11 & 6;
console.log(x); // 2

A JavaScript támogatja a következő unáris bitszerű operátort :

Bitenkénti hozzárendelés

A JavaScript a következő bináris hozzárendelő operátorokat támogatja :

Példák:

x=7;
console.log(x); // 7
x<<=3;
console.log(x); // 7->14->28->56

Húr

Példák:

str = "ab" + "cd";  // "abcd"
str += "e";      // "abcde"

str2 = "2" + 2;     // "22", not "4" or 4.

??

const a = b ?? 3;

const a = b || 3;

Vezérlő szerkezetek

Összetett állítások

Egy pár göndör zárójel {} és a mellékelt utasítássorozat összetett utasítást alkot, amely mindenütt használható, ahol egy utasítás használható.

Ha más

if (expr) {
  //statements;
} else if (expr2) {
  //statements;
} else {
  //statements;
}

Feltételes (háromszoros) operátor

A feltételes operátor olyan kifejezést hoz létre, amely a feltétel függvényében két kifejezés egyikeként értékeli. Ez hasonló ahhoz az if utasításhoz, amely egy feltételtől függően kiválasztja a végrehajtandó két utasítás egyikét. Vagyis a feltételes operátornak azt kell kifejeznie, hogy mi van, ha az utasításokkal.

 result = condition ? expression : alternative;

ugyanaz mint:

 if (condition) {
  result = expression;
 } else {
  result = alternative;
 }

Az if utasítással ellentétben a feltételes operátor nem hagyhatja ki "else-ágát".

Állításváltás

A JavaScript switch utasítás szintaxisa a következő:

 switch (expr) {
  case SOMEVALUE:
   // statements;
   break;
  case ANOTHERVALUE:
   // statements;
   break;
  default:
   // statements;
   break;
 }

• szünet; opcionális; erre azonban általában szükség van, mivel ellenkező esetben a kódvégrehajtás a következő esetblokk törzsébe kerül.
• Óvintézkedésként adjon meg egy törésnyilatkozatot az utolsó eset végéhez, ha később további eseteket ad hozzá.
• String literális értékek is használhatók az esetértékekhez.
• Kifejezések használhatók értékek helyett.
• Az alapértelmezett kisbetű (opcionális) akkor kerül végrehajtásra, ha a kifejezés nem egyezik más megadott esetekkel.
• Fogszabályozó szükséges.

A hurokhoz

A ciklus JavaScript szintaxisa a következő:

 for (initial; condition; loop statement) {
  /*
   statements will be executed every time
   the for{} loop cycles, while the
   condition is satisfied
  */
 }

vagy

 for (initial; condition; loop statement(iteration)) // one statement

Mert ... hurokban

A JavaScript szintaxisa a for ... in loopkövetkező:

for (var property_name in some_object) {
  // statements using some_object[property_name];
}

• Ismétli az objektum összes felsorolható tulajdonságát.
• Ismétli az összes használt tömbindexet, beleértve a tömbobjektum összes felhasználó által meghatározott tulajdonságát, ha van ilyen. Így lehet, hogy jobb, ha hagyományosat használunk hurokhoz numerikus indexszel, amikor tömbökön keresztül iterálunk.
• Különbségek vannak a különböző webböngészők között abban, hogy mely tulajdonságok jelennek meg a for ... in loop utasításban. Elméletileg ezt az ECMAscript szabvány által meghatározott "DontEnum" nevű belső állapottulajdonság vezérli, de a gyakorlatban minden böngésző kissé eltérő tulajdonságkészletet ad vissza az önvizsgálat során. Hasznos egy adott tulajdonság tesztelése a } használatával . Így egy metódus hozzáadása a tömb prototípusához a } segítségével hurkot okozhat a módszer nevén.if (some_object.hasOwnProperty(property_name)) { ...Array.prototype.newMethod = function() {...for ... in

Míg hurok

A JavaScript while szintaxisa a következő:

while (condition) {
  statement1;
  statement2;
  statement3;
  ...
}

Tedd ... ciklus közben

A JavaScript szintaxisa a do ... while loopkövetkező:

do {
  statement1;
  statement2;
  statement3;
  ...
} while (condition);

Val vel

A with utasítás hozzáadja az adott objektum összes tulajdonságát és metódusát a következő blokk hatóköréhez, lehetővé téve azok hivatkozását, mintha helyi változók lennének.

with (document) {
  var a = getElementById('a');
  var b = getElementById('b');
  var c = getElementById('c');
};

• Vegye figyelembe a dokumentum hiányát . minden getElementById () meghívás előtt.

A szemantika hasonló Pascal kijelentéséhez .

Mivel a utasításokkal való elérhetőség akadályozza a program teljesítményét, és vélhetően csökkenti a kód egyértelműségét (mivel bármely adott változó valójában a (z ) -vel körülvett tulajdonság lehet ), ez az utasítás szigorú módban nem megengedett .

Címkék

A JavaScript a legtöbb megvalósításban támogatja a beágyazott címkéket. A hurok vagy blokk címkézhető a break utasításhoz, a ciklus pedig a folytatáshoz . Bár a goto fenntartott szó, a goto nem valósul meg a JavaScriptben.

loop1: for (var a = 0; a < 10; a++) {
  if (a == 4) {
    break loop1; // Stops after the 4th attempt
  }
  console.log('a = ' + a);
  loop2: for (var b = 0; b < 10; ++b) {
    if (b == 3) {
     continue loop2; // Number 3 is skipped
    }
    if (b == 6) {
     continue loop1; // Continues the first loop, 'finished' is not shown
    }
    console.log('b = ' + b);
  }
  console.log('finished');
}
block1: {
  console.log('Hello'); // Displays 'Hello'
  break block1;
  console.log('World'); // Will never get here
}
goto block1; // Parse error.

Funkciók

A függvény egy (esetleg üres) paraméterlistával rendelkező blokk, amely általában nevet kap. Egy függvény helyi változókat használhat. Ha visszatérési utasítás nélkül lép ki a függvényből, akkor az undefined érték kerül visszaadásra.

function gcd(segmentA, segmentB) {
  var diff = segmentA - segmentB;
  if (diff == 0) 
    return segmentA;
  return diff > 0 ? gcd(segmentB, diff) : gcd(segmentA, -diff);
}
console.log(gcd(60, 40)); // 20

var mygcd = gcd; // mygcd is a reference to the same function as gcd. Note no argument ()s.
console.log(mygcd(60, 40)); // 20

A függvények első osztályú objektumok, és más változókhoz rendelhetők.

A függvényhíváskor megadott argumentumok száma nem feltétlenül egyezik meg a függvénydefinícióban szereplő argumentumok számával; a definícióban szereplő olyan megnevezett argumentum, amelynek nincs egyező argumentuma a hívásban, értéke definiálatlan lesz (ami implicit módon hamisra váltható). A függvényen belül az argumentumok az argumentum objektumon keresztül is elérhetők ; ez hozzáférést biztosít minden argumentumhoz az indexek használatával (pl. ), beleértve azokat is, amelyek meghaladják a megnevezett argumentumok számát. (Bár az argumentumlista rendelkezik .length tulajdonsággal, nem egy tömb példánya ; nem tartalmaz metódusokat, például .slice () , .sort () stb.) arguments[0], arguments[1], ... arguments[n]

function add7(x, y) {
  if (!y) {
    y = 7;
  }
  console.log(x + y + arguments.length);
};
add7(3); // 11
add7(3, 4); // 9

A primitív értékeket (szám, logikai érték, karakterlánc) érték szerint továbbítják. Objektumok esetében ez az átadott objektumra való hivatkozás.

var obj1 = {a : 1};
var obj2 = {b : 2};
function foo(p) {
  p = obj2; // Ignores actual parameter
  p.b = arguments[1];
}
foo(obj1, 3); // Does not affect obj1 at all. 3 is additional parameter
console.log(obj1.a + " " + obj2.b); // writes 1 3

A függvények deklarálhatók más függvényekben, és hozzáférhetnek a külső függvény helyi változóihoz. Továbbá teljes lezárásokat hajtanak végre a külső függvény helyi változóinak megjegyzése után is, amikor a külső funkció kilép.

var v = "Top";
var bar, baz;
function foo() {
  var v = "fud";
  bar = function() { console.log(v) };
  baz = function(x) { v = x; };
}
foo();
baz("Fugly");
bar(); // Fugly (not fud) even though foo() has exited.
console.log(v); // Top

Async/várjon

async function createNewDoc() {
  let response = await db.post({}); // post a new doc
  return await db.get(response.id); // find by id
}

async function main() {
  try {
    let doc = await createNewDoc();
    console.log(doc);
  } catch (err) {
    console.log(err);
  }
}
main();

Tárgyak

A kényelem érdekében a típusokat általában primitívekre és objektumokra osztják . Az objektumok olyan entitások, amelyek identitással rendelkeznek (csak önmagukkal egyenlők), és a tulajdonságneveket értékekre képezik le („rések” a prototípus-alapú programozási terminológiában). Az objektumokat asszociatív tömböknek vagy kivonatoknak lehet tekinteni , és gyakran ezekkel az adatstruktúrákkal valósítják meg. Az objektumok azonban további funkciókkal is rendelkeznek, például egy prototípus lánccal, amelyekkel a szokásos asszociatív tömbök nem rendelkeznek.

A JavaScript többféle beépített objektumot tartalmaz, nevezetesen Array , Boolean , Date , Function , Math , Number , Object , RegExp és String . Más objektumok "gazda objektumok", amelyeket nem a nyelv, hanem a futásidejű környezet határoz meg. Például egy böngészőben tipikus gazdagép -objektumok tartoznak a DOM -hoz (ablak, űrlap, linkek stb.).

Objektumok létrehozása

Az objektumok konstruktor vagy objektum literál használatával hozhatók létre. A konstruktor használhatja a beépített objektumfüggvényt vagy az egyéni függvényt. Egyezmény, hogy a konstruktor függvények nagybetűvel kezdődő nevet kapnak:

// Constructor
var anObject = new Object();

// Object literal
var objectA = {};
var objectA2 = {};  // A != A2, {}s create new objects as copies.
var objectB = {index1: 'value 1', index2: 'value 2'};

// Custom constructor (see below)

Az objektum literálok és tömb literálok lehetővé teszik rugalmas adatszerkezetek egyszerű létrehozását:

var myStructure = {
  name: {
    first: "Mel",
    last: "Smith"
  },
  age: 33,
  hobbies: ["chess", "jogging"]
};

Ez az alapja a JSON-nak , amely egy egyszerű jelölés, amely JavaScript-szerű szintaxist használ az adatcseréhez.

Mód

A metódus egyszerűen egy függvény, amelyet egy objektum tulajdonság nevéhez rendeltek. Sok objektum-orientált nyelvvel ellentétben az objektumokhoz kapcsolódó JavaScriptben nincs különbség a függvénydefiníció és a metódusdefiníció között. Inkább a megkülönböztetés a függvényhívás során történik; függvény hívható módszerként.

Ha hívják, mint egy módszert, a szokásos helyi változó ez csak automatikusan a tárgy fokon a bal oldalon a „ ”. (Vannak hívási és alkalmazási módszerek is, amelyek ezt kifejezetten beállíthatják - egyes csomagok, például a jQuery szokatlan dolgokat tesznek ezzel .)

Az alábbi példában a Foo -t konstruktorként használják. A konstruktorban nincs semmi különleges - ez csak egy sima függvény, amely inicializálja az objektumot. Ha az új kulcsszóval együtt használják, a szokás szerint ez egy újonnan létrehozott üres objektum.

Vegye figyelembe, hogy az alábbi példában a Foo egyszerűen értékeket rendel a résekhez, amelyek közül néhány függvény. Így különböző funkciókat rendelhet hozzá a különböző példányokhoz. Ebben a példában nincs prototípus.

function px() { return this.prefix + "X"; }

function Foo(yz) {
  this.prefix = "a-";
  if (yz > 0) {
    this.pyz = function() { return this.prefix + "Y"; };
  } else {
    this.pyz = function() { return this.prefix + "Z"; };
  }
  this.m1 = px;
  return this;
}

var foo1 = new Foo(1);
var foo2 = new Foo(0);
foo2.prefix = "b-";

console.log("foo1/2 " + foo1.pyz() + foo2.pyz());
// foo1/2 a-Y b-Z

foo1.m3 = px; // Assigns the function itself, not its evaluated result, i.e. not px()
var baz = {"prefix": "c-"};
baz.m4 = px; // No need for a constructor to make an object.

console.log("m1/m3/m4 " + foo1.m1() + foo1.m3() + baz.m4());
// m1/m3/m4 a-X a-X c-X

foo1.m2(); // Throws an exception, because foo1.m2 doesn't exist.

Konstruktorok

A konstruktor funkciók egyszerűen értékeket rendelnek az újonnan létrehozott objektum réseihez. Az értékek lehetnek adatok vagy más függvények.

Példa: Objektum manipulálása:

function MyObject(attributeA, attributeB) {
  this.attributeA = attributeA;
  this.attributeB = attributeB;
}

MyObject.staticC = "blue"; // On MyObject Function, not object
console.log(MyObject.staticC); // blue

object = new MyObject('red', 1000);

console.log(object.attributeA); // red
console.log(object["attributeB"]); // 1000

console.log(object.staticC); // undefined
object.attributeC = new Date(); // add a new property

delete object.attributeB; // remove a property of object
console.log(object.attributeB); // undefined

delete object; // remove the whole Object (rarely used)
console.log(object.attributeA); // throws an exception

Magára a konstruktorra hivatkozik az objektum prototípusának konstruktornyílása . Így,

function Foo() {}
// Use of 'new' sets prototype slots (for example, 
// x = new Foo() would set x's prototype to Foo.prototype,
// and Foo.prototype has a constructor slot pointing back to Foo).
x = new Foo();
// The above is almost equivalent to
y = {};
y.constructor = Foo;
y.constructor();
// Except
x.constructor == y.constructor // true
x instanceof Foo // true
y instanceof Foo // false
// y's prototype is Object.prototype, not
// Foo.prototype, since it was initialised with
// {} instead of new Foo.
// Even though Foo is set to y's constructor slot,
// this is ignored by instanceof - only y's prototype's
// constructor slot is considered.

A függvények maguk is objektumok, amelyek felhasználhatók a "statikus tulajdonságokhoz" hasonló hatás létrehozásához (C ++/Java terminológia használatával), amint az alább látható. (A függvényobjektumnak van egy speciális prototípus tulajdonsága is, amint azt az alábbi "Öröklés" szakasz tárgyalja.)

Az objektumtörlést ritkán használják, mivel a szkriptmotor szemetet gyűjt , amelyekre már nem hivatkoznak.

Öröklés

A JavaScript támogatja az öröklési hierarchiákat prototípus -készítéssel az Ön módján .

A következő példában a származtatott osztály örökli a Base osztály. Amikor d -t származtatottként hozza létre , a Base bázispéldányára való hivatkozás a d.base -be kerül .

A Derive nem tartalmaz az aBaseFunction értékét , ezért az aBaseFunction -ból származik, amikor az aBaseFunction elérésre kerül . Ezt világossá teszi a base.aBaseFunction értékének megváltoztatása , amely tükröződik a d.aBaseFunction értékében .

Egyes megvalósítások lehetővé teszik a prototípus elérését vagy explicit beállítását a __proto__ bővítőhely használatával, amint az alább látható.

function Base() {
  this.anOverride = function() { console.log("Base::anOverride()"); };

  this.aBaseFunction = function() { console.log("Base::aBaseFunction()"); };
}

function Derived() {
  this.anOverride = function() { console.log("Derived::anOverride()"); };
}

base = new Base();
Derived.prototype = base; // Must be before new Derived()
Derived.prototype.constructor = Derived; // Required to make `instanceof` work

d = new Derived();    // Copies Derived.prototype to d instance's hidden prototype slot.
d instanceof Derived; // true
d instanceof Base;    // true

base.aBaseFunction = function() { console.log("Base::aNEWBaseFunction()"); }

d.anOverride();    // Derived::anOverride()
d.aBaseFunction(); // Base::aNEWBaseFunction()
console.log(d.aBaseFunction == Derived.prototype.aBaseFunction); // true

console.log(d.__proto__ == base); // true in Mozilla-based implementations and false in many others.

Az alábbiakban világosan látható, hogy a példányok létrehozásakor hogyan másolják a prototípusokra való hivatkozásokat , de a prototípuson végrehajtott módosítások hatással lehetnek az összes példányra, amely erre hivatkozik.

function m1() { return "One"; }
function m2() { return "Two"; }
function m3() { return "Three"; }

function Base() {}

Base.prototype.m = m2;
bar = new Base();
console.log("bar.m " + bar.m()); // bar.m Two

function Top() { this.m = m3; }
t = new Top();

foo = new Base();
Base.prototype = t;
// No effect on foo, the *reference* to t is copied.
console.log("foo.m " + foo.m()); // foo.m Two

baz = new Base();
console.log("baz.m " + baz.m()); // baz.m Three

t.m = m1; // Does affect baz, and any other derived classes.
console.log("baz.m1 " + baz.m()); // baz.m1 One

A gyakorlatban ezeknek a témáknak számos variációját használják, és mind erőteljes, mind zavaró lehet.

Kivételkezelés

A JavaScript try ... catch ... finally kivételkezelési utasítást tartalmaz a futási hibák kezelésére.

Az try ... catch ... finallyutasítás kivételeket fog el a hibából vagy a dobó utasításból. Szintaxisa a következő:

try {
  // Statements in which exceptions might be thrown
} catch(errorValue) {
  // Statements that execute in the event of an exception
} finally {
  // Statements that execute afterward either way
}

Kezdetben a try blokkon belüli utasítások végrehajtódnak. Kivétel esetén a parancsfájl vezérlési folyamata azonnal átvált a fogási blokk utasításaiba, a kivétel hiba argumentumként áll rendelkezésre. Ellenkező esetben a fogási blokk kihagyásra kerül. A fogási blokk dobhat (errorValue) , ha nem akar kezelni egy adott hibát.

Mindenesetre az utolsó mondatban lévő utasításokat mindig végrehajtja. Ez felhasználható az erőforrások felszabadítására, bár a memória automatikusan szemétgyűjtés.

Akár a fogás, akár az utolsó záradék elhagyható. A fogási érv kötelező.

A Mozilla implementáció több fogási nyilatkozatot is lehetővé tesz az ECMAScript szabvány kiterjesztéseként. A Java -ban használthoz hasonló szintaxist követnek :

try { statement; }
catch (e if e == "InvalidNameException")  { statement; }
catch (e if e == "InvalidIdException")    { statement; }
catch (e if e == "InvalidEmailException") { statement; }
catch (e)                                 { statement; }

A böngészőben az onerror eseményt gyakrabban használják a kivételek csapdázására.

onerror = function (errorValue, url, lineNr) {...; return true;};

Natív függvények és módszerek

(Nem kapcsolódik a webböngészőkhöz.)

eval (kifejezés)

Az első paramétert kifejezésként értékeli, amely hozzárendelési utasításokat is tartalmazhat. A függvények lokális változóira a kifejezés hivatkozhat. Mindazonáltal evalkomoly biztonsági kockázatot jelent, mivel lehetővé teszi egy rossz szereplő számára, hogy tetszőleges kódot hajtson végre, ezért használata nem ajánlott.

(function foo() {
  var x = 7;
  console.log("val " + eval("x + 2"));
})(); // shows val 9.

Lásd még

• JavaScript-alapú forráskód-szerkesztők összehasonlítása
• JavaScript

Hivatkozások

További irodalom

• Danny Goodman: JavaScript Biblia , Wiley, John & Sons, ISBN  0-7645-3342-8 .
• David Flanagan, Paula Ferguson: JavaScript: The Definitive Guide , O'Reilly & Associates, ISBN  0-596-10199-6 .
• Thomas A. Powell, Fritz Schneider: JavaScript: The Complete Reference , McGraw-Hill Companies, ISBN  0-07-219127-9 .
• Axel Rauschmayer: Beszélő JavaScript: részletes útmutató programozóknak , 460 oldal, O'Reilly Media, 2014. február 25., ISBN  978-1449365035 . ( ingyenes online kiadás )
• Emily Vander Veer: JavaScript for Dummies, 4. kiadás , Wiley, ISBN  0-7645-7659-3 .

Külső linkek

• A JavaScript újbóli bevezetése - Mozilla Developer Center
• JavaScript hurkok
• ECMAScript szabványos hivatkozások: ECMA-262
• Interaktív JavaScript leckék - példa alapú
• JavaScript az About.com oldalon: leckék és magyarázat
• JavaScript képzés
• A Mozilla Developer Center Core hivatkozásai a JavaScript 1.5 , 1.4 , 1.3 és 1.2 verzióihoz
• Mozilla JavaScript nyelvi dokumentáció