Sie benötigen nur ein Javascript-Cheatsheet!
Unterschiede zwischen var, let und const
1. Übersicht über var, let und const
Feature | var | let | const |
---|---|---|---|
Scope | Function-scoped | Block-scoped | Block-scoped |
Re-declaration | Allowed within the same scope | Not allowed in the same scope | Not allowed in the same scope |
Re-assignment | Allowed | Allowed | Not allowed after initialization |
Initialization | Can be declared without initialization | Can be declared without initialization | Must be initialized at the time of declaration |
Hoisting | Hoisted but initialized to undefined | Hoisted but not initialized | Hoisted but not initialized |
var
Type | Function Scope | Block Scope |
---|---|---|
var | Variables are scoped to the enclosing function. | Does not support block scope. A var inside a block (if, for, etc.) leaks into the enclosing function or global scope. |
let / const | Not function-scoped. | Variables are confined to the block they are declared in. |
Neuanmeldung
if (true) { var x = 10; let y = 20; const z = 30; } console.log(x); // 10 (accessible because of function scope) console.log(y); // ReferenceError (block-scoped) console.log(z); // ReferenceError (block-scoped)
Heben
Feature | var | let | const |
---|---|---|---|
Re-declaration | Allowed | Not allowed | Not allowed |
Re-assignment | Allowed | Allowed | Not allowed |
Beispiel:
if (true) { var x = 10; let y = 20; const z = 30; } console.log(x); // 10 (accessible because of function scope) console.log(y); // ReferenceError (block-scoped) console.log(z); // ReferenceError (block-scoped)
4. Hebeverhalten
Type | Hoisting Behavior |
---|---|
var | Hoisted to the top of the scope but initialized as undefined. |
let | Hoisted but not initialized. Accessing it before declaration causes a ReferenceError. |
const | Hoisted but not initialized. Must be initialized at the time of declaration. |
Hebeverhalten
// Re-declaration var a = 10; var a = 20; // Allowed let b = 30; // let b = 40; // SyntaxError: Identifier 'b' has already been declared const c = 50; // const c = 60; // SyntaxError: Identifier 'c' has already been declared // Re-assignment a = 15; // Allowed b = 35; // Allowed // c = 55; // TypeError: Assignment to constant variable
const
Feature | let and const |
---|---|
Block Scope | Both are confined to the block in which they are declared. |
No Hoisting Initialization | Both are hoisted but cannot be accessed before initialization. |
Better Practice | Preferred over var for predictable scoping. |
5. Ähnlichkeiten zwischen let und const
Scenario | Recommended Keyword |
---|---|
Re-declare variables or use function scope | var (generally avoid unless necessary for legacy code). |
Variables that may change | let (e.g., counters, flags, intermediate calculations). |
Variables that should not change | const (e.g., configuration settings, fixed values). |
7. Erklärung zum Heben
Was ist Heben?
Hoisting ist das Standardverhalten von JavaScript, bei dem Deklarationen während der Kompilierungsphase an den Anfang ihres Gültigkeitsbereichs verschoben werden.
- var: Angehoben und auf undefiniert initialisiert.
- let / const: Angehoben, aber nicht initialisiert. Dadurch entsteht eine temporäre Totzone (TDZ) vom Start des Blocks bis zum Auftreffen auf die Deklaration.
Warum das Heben auf diese Weise funktioniert?
- Zusammenstellungsphase: JavaScript scannt zunächst den Code, um einen Speicherplatz für Variablen- und Funktionsdeklarationen zu erstellen. Zu diesem Zeitpunkt:
- var-Variablen werden auf undefiniert initialisiert.
- let- und const-Variablen werden „angehoben“, aber nicht initialisiert, daher die TDZ.
- Funktionsdeklarationen sind vollständig aktiviert.
- Ausführungsphase: JavaScript beginnt mit der zeilenweisen Ausführung des Codes. Variablen und Funktionen werden in dieser Phase Werte zugewiesen.
8. Zusammenfassung des Hebevorgangs
Type | Hoisting | Access Before Declaration |
---|---|---|
var | Hoisted and initialized to undefined. | Allowed but value is undefined. |
let | Hoisted but not initialized. | Causes a ReferenceError. |
const | Hoisted but not initialized. | Causes a ReferenceError. |
Beispiel:
if (true) { var x = 10; let y = 20; const z = 30; } console.log(x); // 10 (accessible because of function scope) console.log(y); // ReferenceError (block-scoped) console.log(z); // ReferenceError (block-scoped)
Fazit
- Verwenden Sie const wann immer möglich für Variablen, die keiner Neuzuweisung bedürfen.
- Verwenden Sie let für Variablen, die innerhalb desselben Bereichs neu zugewiesen werden müssen.
- Vermeiden Sie var, es sei denn, Sie arbeiten mit Legacy-Code oder erfordern funktionsbezogenes Verhalten.
JavaScript-Datentypen
JavaScript verfügt über verschiedene Datentypen, die in Primitive und Nicht-Primitive (Referenz)-Typen unterteilt sind. Hier finden Sie jeweils eine Erklärung mit Beispielen und Unterschieden:
1. Primitive Datentypen
Primitive Typen sind unveränderlich, was bedeutet, dass ihre Werte nach ihrer Erstellung nicht geändert werden können. Sie werden direkt im Speicher gespeichert.
Data Type | Example | Description |
---|---|---|
String | "hello", 'world' | Represents a sequence of characters (text). Enclosed in single (''), double (""), or backticks (). |
Number | 42, 3.14, NaN | Represents both integers and floating-point numbers. Includes NaN (Not-a-Number) and Infinity. |
BigInt | 123n, 9007199254740991n | Used for numbers larger than Number.MAX_SAFE_INTEGER (2^53 - 1). Add n to create a BigInt. |
Boolean | true, false | Represents logical values, used in conditions to represent "yes/no" or "on/off". |
Undefined | undefined | Indicates a variable has been declared but not assigned a value. |
Null | null | Represents an intentional absence of value. Often used to reset or clear a variable. |
Symbol | Symbol('id') | Represents a unique identifier, mainly used as property keys for objects to avoid collisions. |
2. Nicht-primitive (Referenz-)Datentypen
Nicht-primitive Typen sind veränderbar und werden per Referenz gespeichert. Sie werden zum Speichern von Datensammlungen oder komplexeren Einheiten verwendet.
Data Type | Example | Description |
---|---|---|
Object | {name: 'John', age: 30} | A collection of key-value pairs. Keys are strings (or Symbols), and values can be any type. |
Array | [1, 2, 3, "apple"] | A list-like ordered collection of values. Access elements via index (e.g., array[0]). |
Function | function greet() {} | A reusable block of code that can be executed. Functions are first-class citizens in JavaScript. |
Date | new Date() | Represents date and time. Provides methods for manipulating dates and times. |
RegExp | /pattern/ | Represents regular expressions used for pattern matching and string searching. |
Map | new Map() | A collection of key-value pairs where keys can be of any type, unlike plain objects. |
Set | new Set([1, 2, 3]) | A collection of unique values, preventing duplicates. |
WeakMap | new WeakMap() | Similar to Map, but keys are weakly held, meaning they can be garbage-collected. |
WeakSet | new WeakSet() | Similar to Set, but holds objects weakly to prevent memory leaks. |
3. Hauptunterschiede zwischen primitiven und nicht-primitiven Typen
Aspect | Primitive Types | Non-Primitive Types |
---|---|---|
Mutability | Immutable: Values cannot be changed. | Mutable: Values can be modified. |
Storage | Stored directly in memory. | Stored as a reference to a memory location. |
Copy Behavior | Copied by value (creates a new value). | Copied by reference (points to the same object). |
Examples | string, number, boolean, etc. | object, array, function, etc. |
4. Sonderfälle
Typ des Operators
- typeof null: Gibt „Objekt“ aufgrund eines historischen Fehlers in JavaScript zurück, aber null ist kein Objekt.
- Typ von NaN: Gibt „Zahl“ zurück, auch wenn es „Keine Zahl“ bedeutet.
- Typ der Funktion: Gibt „Funktion“ zurück, die ein Untertyp des Objekts ist.
Dynamisches Tippen
JavaScript ermöglicht es Variablen, zur Laufzeit Werte unterschiedlichen Typs zu speichern:
if (true) { var x = 10; let y = 20; const z = 30; } console.log(x); // 10 (accessible because of function scope) console.log(y); // ReferenceError (block-scoped) console.log(z); // ReferenceError (block-scoped)
5. Beispiele für jeden Datentyp
Primitive Typen
// Re-declaration var a = 10; var a = 20; // Allowed let b = 30; // let b = 40; // SyntaxError: Identifier 'b' has already been declared const c = 50; // const c = 60; // SyntaxError: Identifier 'c' has already been declared // Re-assignment a = 15; // Allowed b = 35; // Allowed // c = 55; // TypeError: Assignment to constant variable
Nicht-primitive Typen
console.log(a); // undefined (hoisted) var a = 10; console.log(b); // ReferenceError (temporal dead zone) let b = 20; console.log(c); // ReferenceError (temporal dead zone) const c = 30;
6. Zusammenfassung der Art der Ergebnisse
Expression | Result |
---|---|
typeof "hello" | "string" |
typeof 42 | "number" |
typeof 123n | "bigint" |
typeof true | "boolean" |
typeof undefined | "undefined" |
typeof null | "object" |
typeof Symbol() | "symbol" |
typeof {} | "object" |
typeof [] | "object" |
typeof function(){} | "function" |
Ergebnis
Das obige ist der detaillierte Inhalt vonSie benötigen nur ein Javascript-Cheatsheet!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Häufig gestellte Fragen und Lösungen für das Ticket-Ticket-Ticket-Ticket in Front-End im Front-End-Entwicklungsdruck ist der Ticketdruck eine häufige Voraussetzung. Viele Entwickler implementieren jedoch ...

JavaScript ist der Eckpfeiler der modernen Webentwicklung. Zu den Hauptfunktionen gehören eine ereignisorientierte Programmierung, die Erzeugung der dynamischen Inhalte und die asynchrone Programmierung. 1) Ereignisgesteuerte Programmierung ermöglicht es Webseiten, sich dynamisch entsprechend den Benutzeroperationen zu ändern. 2) Die dynamische Inhaltsgenerierung ermöglicht die Anpassung der Seiteninhalte gemäß den Bedingungen. 3) Asynchrone Programmierung stellt sicher, dass die Benutzeroberfläche nicht blockiert ist. JavaScript wird häufig in der Webinteraktion, der einseitigen Anwendung und der serverseitigen Entwicklung verwendet, wodurch die Flexibilität der Benutzererfahrung und die plattformübergreifende Entwicklung erheblich verbessert wird.

Es gibt kein absolutes Gehalt für Python- und JavaScript -Entwickler, je nach Fähigkeiten und Branchenbedürfnissen. 1. Python kann mehr in Datenwissenschaft und maschinellem Lernen bezahlt werden. 2. JavaScript hat eine große Nachfrage in der Entwicklung von Front-End- und Full-Stack-Entwicklung, und sein Gehalt ist auch beträchtlich. 3. Einflussfaktoren umfassen Erfahrung, geografische Standort, Unternehmensgröße und spezifische Fähigkeiten.

Wie fusioniere ich Array -Elemente mit derselben ID in ein Objekt in JavaScript? Bei der Verarbeitung von Daten begegnen wir häufig die Notwendigkeit, dieselbe ID zu haben ...

JavaScript zu lernen ist nicht schwierig, aber es ist schwierig. 1) Verstehen Sie grundlegende Konzepte wie Variablen, Datentypen, Funktionen usw. 2) Beherrschen Sie die asynchrone Programmierung und implementieren Sie sie durch Ereignisschleifen. 3) Verwenden Sie DOM -Operationen und versprechen Sie, asynchrone Anfragen zu bearbeiten. 4) Vermeiden Sie häufige Fehler und verwenden Sie Debugging -Techniken. 5) Die Leistung optimieren und Best Practices befolgen.

Diskussion über die Realisierung von Parallaxe -Scrolling- und Elementanimationseffekten in diesem Artikel wird untersuchen, wie die offizielle Website der Shiseeido -Website (https://www.shiseeido.co.jp/sb/wonderland/) ähnlich ist ...

Zu den neuesten Trends im JavaScript gehören der Aufstieg von Typenkripten, die Popularität moderner Frameworks und Bibliotheken und die Anwendung der WebAssembly. Zukunftsaussichten umfassen leistungsfähigere Typsysteme, die Entwicklung des serverseitigen JavaScript, die Erweiterung der künstlichen Intelligenz und des maschinellen Lernens sowie das Potenzial von IoT und Edge Computing.

Eingehende Diskussion der Ursachen des Unterschieds in der Konsole.log-Ausgabe. In diesem Artikel wird die Unterschiede in den Ausgabeergebnissen der Konsolenfunktion in einem Code analysiert und die Gründe dafür erläutert. � ...
