Exécutez un simple npm install
Exécutez un npm test
Ouvrez 2 onglets :
- http://localhost:9876 pour l'exécution des test en automatique
- http://localhost:5060 pour voir le résultat des test en livereload
File1.js
export function test() {
console.log('test');
}
function privateFunc() {
console.log('private');
}
export var a = 3;
export default function() {
console.log('export default from File1');
}
File2.js
import { test as myTest, a } from 'File1.js';
import func from 'File1.js';
// import { privateFunc } from 'File1.js' -> erreur la fonction n'a pas été exportée
// test() -> error: test is not defined
myTest(); // affiche 'test'
console.log(a); // affiche 3
func(); // affiche 'export default from File1'if (true) {
const a = 3;
console.log(a); // 3
// on ne peut écrire : a = 4;
}
console.log(a); // undefined
for(let i of [1, 2, 3, 4]) {
...
}
console.log(i); // undefinedTableau
const arr = [3, 10, 5];
const [a, ,b] = arr;
console.log(a); // 3
console.log(b); // 5
Valeur par défaut
const arr = [3, 10, 7];
const [a, ,b = 5] = arr;
const [c, d = 6] = [11];
console.log(a); // 3
console.log(b); // 7
console.log(c); // 11
console.log(d); // 6
Référence une autre variable
const arr = [3, 10, 5];
const [a, ,b = a] = arr;
console.log(a); // 3
console.log(b); // 3
Avec des objets
const obj= {
name: 'john'
age: 10
};
const { name } = obj;
console.log(name); // johnconst obj= {
name: 'john'
age: 10
};
const { name: s } = obj;
console.log(name); // undefined
console.log(s); // johnconst obj= {
name: 'john',
age: 10
};
function printName({ name }) {
console.log(name);
}
printName(obj); // johnfunction printName({ name, age = 5 }) {
console.log(name ' ' age);
}
printName({ name: 'john' }); // john 5...[1, 2, 3] permet de transformer [1, 2, 3] en 1, 2, 3
const arr = [1, 2, 3];
function func(a, b, c) {
return a b c;
}
console.log(func(...arr)); // 6
// func(...[1, 2, 3]) équivaut à func(1, 2, 3)
Concaténation de tableaux
const arr1 = [1, 2];
const arr2 = [4, 5];
const arr3 = [...arr1, 3, ...arr2];
console.log(arr3); // [1, 2, 3, 4, 5]...{a: 1,b: 4} permet de transformer {a: 1,b: 4} en a: 1,b: 4
const obj1 = {a: 1, b: 4};
const obj2 = {...obj1, c: 2};
console.log(obj2); // {a: 1, b: 4, c: 2}
const obj3 = {...obj1, a: 2};
console.log(obj2); // {a: 2, b: 4}function func(...args) {
return args;
}
func(1, 2, 3, 4); // [1, 2, 3, 4];function func(a, ...args) {
console.log(a); // 1
console.log(args); // [2, 3, 4]
}
func(1, 2, 3, 4);Destructuring and Rest
const [a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]const obj = {a: 2, b: 4, c: 10};
const {b, ...rest} = obj;
console.log(b); // 4
console.log(rest); // {a: 2, c: 10}- Dans le contexte global (et dans un navigateur)
this === window // true- En tant que méthode d'un objet,
thisfait référence à l'objet (qui est lui-même propriétaire de la méthode)
var obj = {
a: 2,
func: function() {
return this.a;
}
};
obj.func() === 2; // trueLa valeur de `this' dépend du contexte d'exécution de la fonction
var obj = {
a: 2,
func: function() {
return this.a;
}
};
const fn = obj.func;
fn(); // falseUne seule instruction (pas besoin du mot-clé return) :
const func = () => "foo";
func(); // retourne "foo"Sur plusieurs lignes avec des crochets :
const func2 = (param) => {
const foo = `foo`;
return foo param;
};En tant que paramètre d'une fonction (avec un seul argument, pas besoin de parenthèses)
const arr = [1,2,3].forEach(i => i * 2);
console.log(arr); // [2, 4, 6]Les arrow functions ne définisse pas la notion de this, ainsi dans une arrow function this fait référence au contexte englobant
The this value inside an arrow function is the same as the this value outside of it.
const a = {
c: 5,
fn: () => this.c
};
console.log(a.fn()); // undefinedconst a = {
c: 5,
fn: function(){ return this.c; }
};
console.log(a.fn()); // 5Seul le mot-cléfunction définit un nouveau contexte d'exécution.
Pour déterminer la valeur de this, il faut regarder dans quel contexte la fonction a été appelée.
Attention à l'utilisation de this dans les arrow functions
class Employee {
constructor(name, firstName) {
this.name= name;
this.firstName= firstName;
}
get fullName() {
return this.firstName ' ' this.name
}
printName() {
console.log(this.name);
}
}
const e = new Employee ('smith', 'john');
console.log(e.name); // smith
console.log(e.fullName); // john smith
e.printName(); // smithPossibilité d'écrire les getters/setters avec get et set
- Paramètres par défaut
function fn(a = 0, b = 1) {
return a b;
}
fn(3, 4); // ????
fn(3); // ????
fn(); // ????
// l'équivalent avec arrow function
const fn = (a = 0, b = 0) => a b;function fn(str, nb = str.length) {
return str '!'.repeat(nb);
}
fn('test', 6); // ????
fn('test'); // ????
// l'équivalent avec arrow function
const fn = (str, nb = str.length) => str '!'.repeat(nb);