letstr="abcdefghijk"str.length// longueur d'une stringstr.concat(str1,str2,strN)// concaténation de strings : str + str1 + str1 + ...str.indexOf(str1)// recherche l'index de la première occurrence de str1 dans str, -1 si non trouvéstr.lastIndexOf(str1)// recherche l'index de la dernière occurrence de str1 dans str, -1 si non trouvéstr.search(regex)// recherche l'expression régulière regex dans str, si trouvé retourne l'index, sinon -1str.charAt(index)// retourne le caractère à indexstr[index]// retourne le caractère à indexstr.charCodeAt(index)// retourne le "code unit" du caractère à l'index (UTF-16, 16 bits)str.codePointAt(index)// retourne le "code point" du caractère à l'index (Unicode) str.slice(début,fin)// retourne une sous-string de début à fin (index négatif possible, de la fin)str.slice(index)// retourne une sous-string de index à la finstr.replace(str1,str2)// retourne une string ou la première occurrence de str1 dans str et la remplace par str2str.replace(regex,str2)// retourne une string ou toutes les occurrences de l'expression régulière regex et les remplaces par str2str.toUpperCase()// retourne un string avec conversion en majuscules, "abc" -> "ABC"str.toLowerCase()// retourne un string avec conversion en minuscules, "ABC -> "abc"letn=255n.toString(base)// retourne une string en base hex=16, oct=8, bin=2str.split(",")// divise une string, retourne un tableau, caractère de séparation : ","str.split("")// divise une string, retourne un tableau, chaque caractère isolé letpommes=10;constmessage=`J'ai ${pommes} pommes`;// J'ai 10 pommes
Array
lettab=["abc","def","ghi"]tab.length// nombre d'éléments du tableautab.length=value// tronque un tableau, supprime les derniers éléments (value doit être inférieure à length)tab.fill(value)// rempli tous les éléments d'un tableau avec valuetab.fill(value,début)tab.fill(value,début,fin)tab.toString()// retourne une string : "abc,def,ghi,jkl"tab.join("-")// retourne une string avec séparateur personnalisé : "abc-def-ghi-jkl"tab.map(fonction)// retourne un nouveau tableau en exécutant 'fonction(val, index, tab)' sur chaques élémentstab.forEach(fonction)// exécute 'fonction(val, index, tab)' sur chaques élémentstab.pop()// retourne et supprime le dernier élémenttab.push("jkl")// ajoute un élément de contenu "jkl" à la fin, retourne la nouvelle taille du tableautab.shift()// supprime et retourne le premier élémenttab.unshift("aaa")// ajoute un nouvel élément au début du tableau, retourne la nouvelle taille du tableautab.slice(début,fin)// retourne une portion de tableau entre les index début et fin tab.splice(index,nb_sup,add1,addN)// ajoute et supprime des éléments (index, supprimer nb_sup éléments, ajouter add1...) retourne un tableau des éléments supprimés ou un seul élémenttab.concat(tab1,tab2,tabN)// fusionne des tableaux (retourne un tableau tab+tab1+tab2+...)tab.copyWithin(cible)// copie une zone du tableau sur lui-même.tab.copyWithin(cible,début)tab.copyWithin(cible,début,fin)tab.find(callback)// recherche dans le tableau la première occurence qui valide le callback(element, index, tab)tab.filter(callback)// retourne un tableau avec les éléments validés par le callback(element, index, tab)tab.every(callback)// retourne true si tous les éléments sonts validés par le callback(element, index, tab)tab.some(callback)// retourne true si au moins un élément est validé par le callback(element, index, tab)tab.sort()// tri alphabétique d'un tableau. Tableau d'origine modifiétab.sort((a,b)=>a-b)// tri numérique d'un tableau. Tableau d'origine modifiétab.sort((a,b)=>b-a)// tri numérique inverse d'un tableau. Tableau d'origine modifiétab.reverse()// inverse les éléments d'un tableautab.reduce(fonction,val1)// traite chaque valeur de la gauche vers la droite en applicant fonction(som, valeur) -> somtab.reduceRight(fonction,val1)// idem de la droite vers la gauchetab.concat(tab2)// retourne un tableau concaténé tab + tab2tab.includes("abc")// ES7 : recherche la présence d'un élément de contenu "abc". Retourne true si trouvéletnewTab=Array.from(objectIterable,functionMap)letnewTab=Array.from('ABC')// eq : let newTab = ['A', 'B', 'C']letnewTab=Array.from([1,2,3],x=>x*10)// eq : let newTab = [10, 20, 30]letlist=Array.from(querySelectorAll('div'))// nodeList -> array
Map
letmap1=newMap()letmap1=newMap([['key1','value1'],['key2','value']])map1.size// nombre d'élémentsmap1.set('key','value')// ajoute un élément 'value' de clé 'key'map1.set(1,'value')// ajoute un élément 'value' de clé 1map1.get('key')// retourne l'élément de clé 'key'map1.has('key')// test la présence d'une élément de clé 'key'map1.clear()// efface tous les élémentsmap1.delete('key')// supprime l'élément de clé 'key'map1.keys()// retourne un objet Iterator des clésmap1.values()// retourne un objet Iterator des valeursmap1.entries()// retourne un objet Iterator contenant des paires [clé, valeur]map1.forEach(fonction)// exécute une fonction(value, key, map) sur chaque élémentmap1.forEach(fonction,thisArg)// ... avec thisArg
Set
letset1=newSet()letset1=newSet([1,2,3,4,5])set1.size// retourne le nombre d'élémentsset1.add(value)// ajoute un élément valueset1.has(value)// test la présence d'une élément valueset1.clear()// efface tous les élémentsset1.delete(value)// supprime l'élément valueset1.values()// retourne un objet Iterator des valeurs (alias set1.keys)set1.entries()// retourne un objet Iterator contenant des paires [valeur, valeur]set1.forEach(fonction)// exécute une fonction(value1, value2, map) sur chaque élément value1=value2set1.forEach(fonction,thisArg)// ... avec thisArg
Date
Date.now()// retourne le nombre de ms depuis le 1er janvier 1970 UTCletd=newDate()d.getMilliseconds();d.getSeconds();d.getMinutes();d.getHours();d.getUTCMilliseconds();d.getUTCSeconds();d.getUTCMinutes();d.getUTCHours();d.getDay();d.getMonth();d.getFullYear()d.getUTCDay();d.getUTCMonth();d.getUTCFullYear()d.setMilliseconds();d.setSeconds();d.setMinutes();d.setHours();d.setUTCMilliseconds();d.setUTCSeconds();d.setUTCMinutes();d.setUTCHours();d.setDay();d.setMonth();d.setFullYear()d.setUTCDay();d.setUTCMonth();d.setUTCFullYear()Date.parse("2021-01-01")// 1609459200000Date.parse("2021-01-01T00:00:00.000Z")// 1609459200000Date.parse("2021-01-01T00:00:00.000+00:00")// 1609459200000
Object
Object.assign(target,source)// copie les valeurs des propriétés directes de l'objet source vers targetObject.create(proto)// création d'un nouvel objet avec le prototype "proto"Object.hasOwnProperty("prop")// retourne un booléen indiquant si l'objet possède la propriété "prop" en propreObject.defineProperty(obj,prop,descriptor)// définition d'une nouvelle propriété à l'objet Object.keys(obj)// retourne un tableau avec toutes les propriétés propres : [ key1, key2, keyN ]Object.values(obj)// retourne un tableau avec toutes les valeurs des propriétés propres [ val1, val2, valN ]Object.entries(obj)// retourne un tableau des clés/valeurs sous la forme [ [ key1, val1 ], [ key2, val2 ], [ keyN, valN ] ] Object.fromEntries(tab)// transforme une liste de clés/valeurs en objet (voir Object.entries(obj) pour le format)Object.freeze(obj)// permet de geler un objet, l'objet devient immuableObject.seal(obj)// scelle un objet, impossible d'ajouter ou de supprimer de nouvelles propriétés, les valeurs existantes peuvent êtres modifiéesObject.preventExtensions(obj)// impossible d'ajouter de nouvelles propriétées, contrairement à "seal", permet de reconfigurer une propriétéObject.isFrozen(obj)// test si un objet a été gelé par Object.freeze(obj)Object.isSealed(obj)// test si un objet a été scellé par Object.seal(obj)Object.isExtensible(obj)// test si un objet est extensible, donc n'est pas Object.preventExtensions(obj)
DOM
getElementById('id')// sélection par id, retourne un unique élément getElementsByTagName('tagName')// sélection par nom de balise html, retourne un HTMLCollectiongetElementsByClassName('className')// sélecteur par class, retourne une NodeListquerySelector('div')// sélecteur CSS unique, retourne le premier élément (plus lent que getElement...)querySelectorAll('div')// sélecteurs CSS multiple, retourne une NodeList statique (plus lent que getElement...)elem.getAttribute("href")// contenu de l'attribut href de l'élément elemelem.setAttribute("title","coucou")// ajoute l'attribut title avec le contenu "coucou"elem.offsetHeight// hauteur totale de l'élément (+bord...)elem.clientHeight// surface interne de l'élément (-bord...)elem.offsetTop// distance en pixel de l'élément par rapport au début de pageelem.syle.color="#ff0000"// modification du paramètre color du style de l'élément.elem.style.fontFamily="Arial"// attention : - remplacé par camelCase (font-family -> fontFamily)elem.classList.add("maClasse")// ajoute la classe maClasse à l'élémentelem.classList.remove("maClasse")// supprime la classe maClasse à l'élémentelem.classList.toggle("maClasse")// "on/off" la classe maClasse à l'élément
fetch('https://server/page').then(response=>response.json())// réponse -> json / .text() / .blob().then(r=>console.log(r),r=>console.error(r));// (réponse ok, réponse erreur)fetch('https://server/page').then(response=>response.json())// réponse -> json / .text() / .blob().then(r=>console.log(r))// réponse ok.catch(r=>console.error(r));// réponse erreur)// Envoyer des données par FormDataconstdataBody=newFormData();dataBody.append('nom','Rogez');fetch('https://server/page',{method: 'post',body: dataBody}).then(/* ... */);//...// Envoyer des données au format JSONconstdataBody={nom: 'Rogez'};constdataJson=JSON.stringify(dataBody);fetch('https://server/page',{method: 'post',body: dataJson}).then(/* ... */);//...
Canvas
<!-- HTML --><canvaswidth="150" height="150"></canvas>
letcanvas=document.getElementsByTagName('canvas')letctx=canvas.getContext('2d')// ctx : objet accessible en JSctx.strokeStyle='#ff0000'// couleur de lignectx.lineWidth=1// epaisseur du traitctx.lineCap='square'// terminaison des lignes : 'butt', 'round', 'square'ctx.lineJoin='round'// style des jointures dans un path : 'round', 'bever', 'miter'ctx.fillStyle='#00ff00'// couleur de remplissage ctx.fillRect(x,y,w,h)// dessine un rectangle pleinctx.strokeRect(x,y,w,h)// dessine un rectangle fillairectx.clearRect(x,y,w,h)// efface une zone rectangulairectx.beginPath()// commence à dessiner une formectx.closePath()// termine la formectx.stroke()// dessine la forme en traçant le contourctx.fill()// dessine la forme en traçant la zone de contenuctx.moveTo(x,y)// déplace le styloctx.lineTo(x,y)// trace une lignectx.quadraticCurveTo(cp1x,cp1y,x,y)ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)letpix=newImage()// création d'un élément imagepix.src='image.png'// fichier source de l'imagepix.onload=function(){/* ... */}ctx.drawImage(pix,x,y)// après 'onload' ctx.drawImage(pix,sx,sy,sw,sh,dx,dy,dw,dh)// découpe du sprite : source -> destination
Objets
obj.hasOwnProperty// teste l'existence d'une propriété
Fonctions
id=setTimeout(nom_fonction,2000,arg1,arg2,argN)// exécute la fonction dans 2000ms avec les argumentsclearTimeout(id)// annule l'exécution de la fonctionid=setInterval(nom_fonction,2000,arg1,arg2,argN)// exécute la fonction à intervalle de 2000 msclearInterval(id)// annulation de la programmation de l'intervalle
Fonctions fléchées (ES6)
param=>{}// function avec un seul paramètre(param1,param2)=>{}// function avec plusieurs paramètres()=>{}// function sans paramètre
Tracer une forme sur un canvas avec rotation centrée sur l'élément
constctx=canvas.getContext('2d');ctx.translate(x+w/2,y+h/2);// translation au centre de l'objetctx.rotate(a*Math.PI/180);// rotation : 'a' en degrés -> radiansctx.translate(0-(x+w/2),0-(y+h/2));// translation retour à l'originectx.strokeRect(x,y,w,h);
letimg=newImage();img.src='fichier_image.png';img.onload=function(){}// image chargée, on peut l'utiliser
Swap de variables (ES6)
[var1,var2]=[var2,var1];// var2->var1, var1->var2
Créer une balise p à la fin du body
constelem=document.createElement('p');consttext=document.createTextNode('Mon texte !');elem.appendChild(text);document.body.appendChild(elem);// Création du code à la fin du body : <p>Mon Texte !</p>