Maison> interface Web> js tutoriel> le corps du texte

Extraits de code Javascript

WBOY
Libérer: 2024-08-30 21:00:10
original
245 Les gens l'ont consulté

Javascript Code Snippets

Types de données

Types de données primitifs

Numéro

let age = 25;
Copier après la connexion

Chaîne

let name = "John";
Copier après la connexion

Booléen

let isStudent = true;
Copier après la connexion

Non défini :

let address;
Copier après la connexion

Nul

let salary = null;
Copier après la connexion

Symbole

let sym = Symbol("id");
Copier après la connexion

BigInt

let bigIntNumber = 1234567890123456789012345678901234567890n;
Copier après la connexion

Pas un nombre (NaN)
NaN signifie "Not-a-Number" et représente une valeur qui n'est pas un nombre légal

console.log(0 / 0); // NaN console.log(parseInt("abc")); // NaN
Copier après la connexion

Comment vérifier le type de données ?

console.log(typeof a);
Copier après la connexion

Classe

1) La classe ne peut avoir qu'un seul constructeur

class gfg { constructor(name, estd, rank) { this.n = name; this.e = estd; this.r = rank; } decreaserank() { this.r -= 1; } } const test = new gfg("tom", 2009, 43); test.decreaserank(); console.log(test.r); console.log(test);
Copier après la connexion

Héritage

class car { constructor(brand) { this.carname = brand; } present() { return 'I have a ' + this.carname; } } class Model extends car { constructor(brand, model) { super(brand); super.present(); this.model = model; } show() { return this.present() + ', it is a ' + this.model; } }
Copier après la connexion

Obtenir et définir

class car { constructor(brand) { this.carname = brand; } // Getter method get cnam() { return "It is " + this.carname; // Return a value } // Setter method set cnam(x) { this.carname = x; } } const mycar = new car("Ford"); console.log(mycar.cnam);
Copier après la connexion

Expression de fonction immédiatement invoquée (IIFE)

Une IIFE est une fonction qui s'exécute dès qu'elle est définie

(function() { console.log("IIFE executed!"); })();
Copier après la connexion

Fonctions d'ordre supérieur

Les fonctions d'ordre supérieur sont des fonctions qui prennent d'autres fonctions comme arguments ou renvoient des fonctions comme résultat

function higherOrderFunction(callback) { return callback(); } function sayHello() { return "Hello!"; } console.log(higherOrderFunction(sayHello)); // "Hello!"
Copier après la connexion

Ombrage variable

L'observation de variable se produit lorsqu'une variable locale porte le même nom qu'une variable dans une portée externe.
La variable locale remplace ou masque la variable externe dans sa propre portée.
La variable externe reste intacte et est accessible en dehors de la portée locale.

var name = "John"; function sayName() { console.log(name); var name = "Jane"; } sayName();
Copier après la connexion

Accéder aux éléments HTML en JavaScript

Il existe plusieurs façons d'accéder aux éléments HTML en JavaScript :

Sélectionner l'élément par ID :

document.getElementById("elementId");
Copier après la connexion

Sélectionnez l'élément par nom de classe :

document.getElementsByClassName("className");
Copier après la connexion

Sélectionnez l'élément par Tagname :

document.getElementsByTagName("tagName");
Copier après la connexion

Sélecteur CSS :

document.querySelector(".className"); document.querySelectorAll(".className");
Copier après la connexion

Passer par valeur

function changeValue(x) { x = 10; console.log("Inside function:", x) } let num = 5; changeValue(num);
Copier après la connexion

Passer par référence

function changeProperty(obj) { obj.name = "Alice"; console.log("Inside function:", obj.name); // Output: Inside function: Alice } let person = { name: "Bob" }; changeProperty(person); console.log("Outside function:", person.name); // Output: Outside function: Alice
Copier après la connexion

utiliser strict

Il fait passer le moteur JavaScript en mode strict, qui détecte les erreurs de codage courantes et génère davantage d'exceptions.

"use strict"; x = 10; // Throws an error because x is not declared
Copier après la connexion

Opérateur de propagation

Il permet de développer un itérable tel qu'un tableau ou une chaîne aux endroits où zéro ou plusieurs arguments ou éléments sont attendus

function sum(a, b, c) { return a + b + c; } const numbers = [1, 2, 3]; console.log(sum(...numbers)); // Output: 6
Copier après la connexion

InstanceDe

L'opérateur vérifie si un objet est une instance d'une classe ou d'une fonction constructeur spécifique.

class Animal { constructor(name) { this.name = name; } } class Dog extends Animal { constructor(name, breed) { super(name); this.breed = breed; } } const myDog = new Dog('Buddy', 'Golden Retriever'); console.log(myDog instanceof Dog); // true console.log(myDog instanceof Animal); // true console.log(myDog instanceof Object); // true console.log(myDog instanceof Array); // false
Copier après la connexion

Filtre

Cette méthode crée un nouveau tableau avec tous les éléments qui réussissent le test implémenté par la fonction fournie.

const numbers = [1, 2, 3, 4, 5, 6]; const evenNumbers = numbers.filter(num => num % 2 === 0); console.log(evenNumbers); // [2, 4, 6]
Copier après la connexion

Réduire

Cette méthode exécute une fonction de réduction sur chaque élément du tableau, ce qui donne une valeur de sortie unique.

const numbers = [1, 2, 3, 4, 5]; const sum = numbers.reduce((sum, value) => sum + value, 0); // sum = 0 initially console.log(sum); // 15
Copier après la connexion

Repos

Cette syntaxe de paramètre permet à une fonction d'accepter un nombre indéfini d'arguments sous forme de tableau.

function sum(...numbers) { return numbers.reduce((sum, value) => sum + value, 0); } console.log(sum(1, 2, 3)); // 6 console.log(sum(5, 10, 15, 20)); // 50
Copier après la connexion

Types de déclarations

Variable globale implicite
Une variable globale implicite est une variable créée automatiquement dans la portée globale lorsqu'une valeur lui est attribuée sans être explicitement déclarée avec un mot-clé tel que var, let ou const. Mais cela génère une erreur s'il est enMode strict

function myFunction() { x = 10; // no error }
Copier après la connexion

const
Il déclare une variable constante qui ne peut pas être réaffectée.

const PI = 3.14;
Copier après la connexion

laisser
Il déclare une variable de portée bloc.
Il ne peut pas être réinitialisé avec le même nom

let c=1; let c=3;// throws error let count = 0; if (true) { let count = 1; console.log(count); // Output: 1 } console.log(count); // Output: 0
Copier après la connexion

var
Il déclare une variable de portée fonctionnelle ou globale. Cela encourage le levage et la réaffectation.

var name = 'John'; if (true) { var name = 'Doe'; console.log(name); // Output: Doe } console.log(name); // Output: Doe console.log(a) var a=2 // prints undefined
Copier après la connexion

Événement synthétique

Événements synthétiques : React fournit un wrapper SyntheticEvent autour des événements natifs du navigateur. Ce wrapper normalise les propriétés et le comportement des événements dans différents navigateurs, garantissant ainsi que votre code de gestion des événements fonctionne de la même manière quel que soit le navigateur.

import React from 'react'; class MyComponent extends React.Component { handleClick = (event) => { // `event` is a SyntheticEvent console.log(event.type); // Always 'click' regardless of browser console.log(event.target); // Consistent target property } render() { return ; } }
Copier après la connexion

Levage en JavaScript

Le levage est un mécanisme JavaScript dans lequel les variables et les déclarations de fonctions sont déplacées vers le haut de leur portée pendant la phase de compilation, ce qui leur permet d'être utilisées avant d'être déclarées dans le code. Cependant, seules les déclarations sont hissées, pas les initialisations.

console.log(x); // Output: undefined var x = 5; console.log(x); // Output: 5 // Function hoisting hoistedFunction(); // Output: "Hoisted!" function hoistedFunction() { console.log("Hoisted!"); } // Function expressions are not hoisted notHoisted(); // Error: notHoisted is not a function var notHoisted = function() { console.log("Not hoisted"); };
Copier après la connexion

Coercition de type

Il s'agit de la conversion automatique des valeurs d'un type de données à un autre. Il existe deux types de coercition : implicite et explicite.

Coercition implicite

Ex.

let result = 5 + "10"; // "510" let result = "5" * 2; // 10 let result = "5" - 2; // 3 let result = "5" / 2; // 2.5
Copier après la connexion

Coercition explicite

Cela se produit lorsque nous convertissons manuellement une valeur d'un type à un autre à l'aide de fonctions intégrées.

let num = 5; let str = String(num); // "5" let str2 = num.toString(); // "5" let str3 = `${num}`; // "5"
Copier après la connexion

Truthy Values

Non-zero numbers (positive and negative)
Non-empty strings
Objects (including arrays and functions)
Symbol
BigInt values (other than 0n)

Falsy Values

0 (zero)
-0 (negative zero)
0n (BigInt zero)
"" (empty string)
null
undefined
NaN (Not-a-Number)

Props (Properties)

To pass data from a parent component to a child component. It is immutable (read-only) within the child component.

// Parent Component function Parent() { const data = "Hello from Parent!"; return ; } // Child Component function Child(props) { return 
{props.message}
; }
Copier après la connexion

State

To manage data that can change over time within a component. It is mutable within the component.

// Function Component using useState import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( 

Count: {count}

); }
Copier après la connexion

Closure

A closure in JavaScript is a feature where an inner function has access to the outer (enclosing) function's variables and scope chain even after the outer function has finished executing.

function outerFunction(outerVariable) { return function innerFunction(innerVariable) { console.log('Outer Variable:', outerVariable); console.log('Inner Variable:', innerVariable); }; } const newFunction = outerFunction('outside'); newFunction('inside');
Copier après la connexion

Currying

Currying is a technique of transforming a function that takes multiple arguments into a sequence of functions that each take a single argument.

function add(a) { return function(b) { return a + b; }; } const add5 = add(5); console.log(add5(3)); // Output: 8 console.log(add(2)(3)); // Output: 5
Copier après la connexion

Generators

Generators are special functions that can be paused and resumed, allowing you to generate a sequence of values over time.

function* generateSequence() { yield 1; yield 2; yield 3; } const generator = generateSequence(); console.log(generator.next()); // { value: 1, done: false } console.log(generator.next()); // { value: 2, done: false } console.log(generator.next()); // { value: 3, done: false } console.log(generator.next()); // { value: undefined, done: true }
Copier après la connexion

Stay Connected!
If you enjoyed this post, don’t forget to follow me on social media for more updates and insights:

Twitter:madhavganesan
Instagram:madhavganesan
LinkedIn:madhavganesan

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!