Voir la page Web du cours pour retrouver l'ensemble des supports.
'Hey' // Guillemets simples
"Hey" // Guillemets doubles
"Yo" !== `Hey` // Backticks
myName = "Matthieu"
hello = `Salut ${myName}! Ton nom a ${myName.length} caractères.`
"On peut aussi" + " faire ça" + " " + "mais on évitera"
`3 x 4 = ${3 * 4}`
words = hello.split(" ")
words.join("_")
hello.replace("Matthieu", "John") // Remplace la première occurence
hello.replaceAll("o", "a") // Remplace toutes les occurences
"Salut ! Une phrase, avec de la ponctuation."
.replace(/[^\w\s\']/g, "") // On remplace les caractère qui ne sont pas des chiffres ou des lettres par "" (rien)
.replace(/\s+/g, " ") // On remplace les doubles espaces par un simple espace
.replace('avec de la', 'sans')
students = ["Sue", "Bob", "Meg", "Mike", "Michelle", "Joe", "Kate", "John"]
students.length // Pour connaitre le nombre d'éléments
// Accéder au premier élément
students[0]
// Accéder au troisième élément
students[2]
// Accéder au dernier élément
students[students.length - 1]
students.includes("Frank")
students.includes("Bob")
values = [1, 4, 5, 1, 2, 7, 5, 10, 2, 4, 3, 2, 1]
uniqueValues = new Set(values)
uniqueValues.size // Le nombre d'entrée
uniqueValues.has(1)
uniqueValues.has(999)
uniqueValues.add(13)
uniqueValues.delete(1)
Array.from(uniqueValues)
[...uniqueValues]
stringToInt = ({
one: 1,
two: 2,
three: 3
})
stringToInt.one
stringToInt["one"]
myKey = 'two'
stringToInt[myKey]
stringToInt.hasOwnProperty("twelve")
stringToInt.hasOwnProperty("three")
stringToInt["four"]
On peut aussi créer un Object depuis un tableau de paires de clés-valeurs.
keyValuePairs = [
['one', 1],
['two', 2],
['three', 3],
]
Object.fromEntries(keyValuePairs)
Object.entries(stringToInt)
Object.keys(stringToInt)
Object.values(stringToInt)
nameToAge = new Map([
['Bob', 20],
['Sue', 25],
['Joe', 30],
['Mary', 35]
])
nameToAge.has('Jen')
nameToAge.has("Joe")
nameToAge.get("Mary")
nameToAge.get('SomeoneElse')
nameToAge.set('Jack', 80)
nameToAge.delete("Jack")
now = new Date()
now.getDate() // Le jour du mois, 1 pour le premier jour, 2 pour le second, etc.
now.getDay() // 1 -> Lundi, 2 -> Mardi, 3 -> Mercredi, etc.
now.getMonth() // À partir de 0 -> janvier, donc 8 -> septembre
now.getFullYear()
// Attention, getYear renvoit l'année, mais depuis 1900
now.getYear()
new Date('2022-06-06 09:00:00')
new Date('2022-06-06 09:00:00Z') // On peut ajouter le Z pour dire qu'on exprime l'heure sur le fuseau GMT
new Date(2011, 0, 1); // Le 1er janvier à 00:00 sur notre fuseau horaire -> 31/12/2009 23:00 sur le fuseau GMT
new Date('2022-12-20')
new Date(2019, 2, 1, 3, 2, 1) // Années, mois (à partir de 0 !), jour, heure, minute, seconde (les 3 derniers sont optionnels)
epochTime = new Date(0) // cf. https://fr.wikipedia.org/wiki/Epoch
'4' === 4 // Une chaine de caractère ne peut pas être strictement égale à un nombre
'4' == 4 // Avec l'égalité simple, les deux valeurs sont considérés comme si elles avaient le même type
'' == 0 // Attention à l'égalité simple, le resultat peut être surprenant !
'' == [] // Attention à l'égalité simple, le resultat peut être surprenant !
undefined == null // Attention à l'égalité simple, le resultat peut être surprenant !
'' === 0 // Pas de soucis avec l'égalité stricte !
'' === [] // Pas de soucis avec l'égalité stricte !
undefined === null // Pas de soucis avec l'égalité stricte !
'4' >= 4 // Les conversions implicites de type ont aussi lieu avec >, <, <= et >=
'3' < 10 // Les conversions implicites de type ont aussi lieu avec >, <, <= et >=
function add(a, b) {
return a + b;
}
add(12, 21)
subs = function (a, b) {
return a - b;
}
subs(20, 8)
// En spécifiant directement la valeur de retour
add2 = (a, b) => a + b
add2(12, 13)
// Identique à la fonction précédente,
// mais en écrivant 'return' dans le corps de la fonction
add3 = (a, b) => {
return a + b;
}
add3(2, 2)
double = (num) => {
const value = num * 2;
return `${num} doubled is ${value}`;
}
double(4)
square = num => `${num} squared is ${num * num}`;
square(12)
makePerson = (name, age) => ({
type: 'Person',
name: name,
age: age
})
makePerson("Paul", 25)
function displayResult(operator, arg) {
const result = operator(arg[0], arg[1]);
return `The result is ${result}`;
}
function mult(a, b) {
return a * b;
}
displayResult(mult, [3, 5])
displayResult((a, b) => a + b, [3, 5])
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].filter(d => d % 2 === 0)
function getFee(isMember) {
return isMember ? '2.00€' : '10.00€';
}
getFee(true)
getFee2 = (isMember) => isMember ? '2.00€' : '10.00€';
function mul(a, b) {
const resultat = a * b;
return resultat;
}
{
const v = 'Ceci est une chaine de caractères';
let result = 0;
v.split('').forEach((char) => {
if (char === 'e') {
result += 1;
}
});
return `Il y a ${result} fois la lettre 'e'`;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
