paramètres par défaut dans ES6
lorsque nous écrivons des modules, Nous devons tenir compte des cas où les arguments seront omis. En d’autres termes, les bons modules doivent être suffisamment intelligents pour avoir des valeurs par défaut pour les paramètres. Dans ES5, vous écririez quelque chose comme le code ci-dessous, qui utilise le ou logique (||):
ces instructions fonctionnent bien sauf pour les cas de bord. Par exemple, si la valeur est 0 — et parce que 0 est faux en JavaScript — la condition par défaut est la valeur codée en dur au lieu de devenir la valeur elle-même, comme vous pouvez le souhaiter dans certains cas., Bien sûr, qui a besoin de 0 comme valeur (#sarcasmfont), donc nous avons juste ignoré cette faille et utilisé la logique ou de toute façon
ou peut-être événement une condition if/else pour vérifier la valeur non définie:
var getAccounts = function(limit) {
if (typeof limit == 'undefined') limit = 10
...
}
pas plus! Dans ES6, nous pouvons mettre les valeurs par défaut directement dans la signature des fonctions comme ceci:
var getAccounts = function(limit = 10) {
...
}
var link = function(height = 50, color = 'red', url = 'http://capitalone.io') {
...
}
cela utilise non seulement moins de lignes de code, mais a également augmenté la lisibilité. Au fait, cette syntaxe est similaire à Ruby et Python!,
Rest and Spread Parameters in ES6
Si vous avez déjà utilisé ou écrit une fonction JavaScript avec un nombre variable ou même illimité d’arguments, vous connaissez l’objet argument. Cet objet contient tous les paramètres passés à la fonction. Le problème est que cet objet arguments n’est pas un vrai tableau. Vous devez le convertir en tableau si vous souhaitez utiliser explicitement des fonctions telles que sort ou map. Par exemple, cette fonction de requête convertit les arguments en utilisant call ():
existe-t-il donc un meilleur moyen dans ES6 d’accéder à un nombre indéfini d’arguments en tant que tableau? Oui!, C’est la syntaxe des paramètres rest et elle est définie avec des ellipses …. Par exemple, il s’agit de la signature de fonction ES6 avec les rappels de paramètre rest qui deviennent un tableau avec le reste des paramètres:
function(url, options, ...callbacks) {
var callback1 = callbacks
var callback2 = callbacks
// ...
}
remarque: dans le tableau rest, le premier paramètre est celui qui n’a pas de nom, par exemple, le rappel est à l’index 0, pas 2 En outre, mettre d’autres arguments nommés après le paramètre rest provoquera une erreur de syntaxe. Le paramètre rest est un excellent ajout de sugarcoating à JavaScript car il remplace l’objet arguments, qui n’était pas un vrai tableau.,
dans ES5, si vous voulez utiliser un tableau comme argument pour une fonction, vous devez utiliser la fonction apply ():
function request(url, options, callback) {
// ...
}
var requestArgs =
request.apply(null, requestArgs)
maintenant, dans ES6, nous pouvons utiliser les paramètres spread qui ressemblent aux paramètres rest dans la syntaxe car ils utilisent des ellipses…:
function request(url, options, callback) {
// ...
}
var requestArgs =
request(...requestArgs)
Développeurs peut utiliser l’opérateur spread dans les cas suivants:
l’opérateur spread a une syntaxe similaire aux paramètres REST, mais Rest est utilisé dans la définition/déclaration de fonction et spread est utilisé dans les appels et les littéraux., Ils évitent aux développeurs de taper des lignes supplémentaires de code impératif, donc les connaître et les utiliser est une bonne compétence.
les littéraux de modèle dans ES6
Les littéraux de modèle (ou interpolation comme on les appelle dans d’autres langues) sont un moyen de générer des variables dans la chaîne mélangées à du texte, généralement dans les interfaces utilisateur. En ES5, nous avons dû casser la corde comme ça.,
var name = 'Your name is ' + first + ' ' + last + '.'
var url = 'http://localhost:3000/api/messages/' + id
heureusement, dans ES6, nous pouvons utiliser une nouvelle syntaxe {{NAME} à l’intérieur de la chaîne cochée en arrière:
var name = `Your name is ${first} ${last}.`
var url = `http://localhost:3000/api/messages/${id}`
c’est soigné et permet aux développeurs de voir le résultat final des chaînes d’un seul coup d’œil au lieu d’essayer
Les modèles de chaîne ES6 sont bons, mais la syntaxe provoquera des conflits dans la documentation Markdown si vous utilisez des modèles de chaîne et un balisage de code en ligne, (car dans Markdown, le code en ligne est également marqué par des tiques arrière)., Soit dit en passant, CoffeeScript a ce que je pense être une meilleure solution lorsqu’il interpole des chaînes à double sortie (similaire à Ruby):
var name = "Your name is #{first} #{last}."
var url = "http://localhost:3000/api/messages/#{id}"
L’Interpolation est bonne, mais comment travaillez-vous avec du texte multiligne en JavaScript?
chaînes multi-lignes dans ES6
Un autre revêtement syntaxique délicieux est la chaîne multi-lignes. Dans ES5, nous avons dû utiliser l’une de ces approches et c’était moche., Avec concaténation:
ou avec escape slash:
var fourAgreements = 'You have the right to be you.\n\
You can only be you when you do your best.'
En ES6, utilisez simplement les backticks comme suit:
var roadPoem = `Then took the other, as just as fair,
And having perhaps the better claim
Because it was grassy and wanted wear,
Though as for that the passing there
Had worn them really about the same,`
var fourAgreements = `You have the right to be you.
You can only be you when you do your best.`
les chaînes multi-lignes sont un ajout utile si vous devez utiliser beaucoup de texte dans votre code JavaScript.,
affectation de déstructuration dans ES6
la déstructuration peut être un concept plus difficile à saisir que les chaînes multi-lignes car il y a de la magie en arrière-plan… disons que vous avez des affectations simples où les clés userId et accountNumber sont des variables userId et accountNumber:
var data = $('body').data(), // data has properties
userId and accountNumber userId = data.userId, accountNumber = data.accountNumber
dans ES6, nous pouvons remplacer le code ES5 ci-dessus par ces instructions:
var { userId, accountNumber} = $('body').data()
var {json} = require('body-parser')
var {username, password} = req.body
cela fonctionne également avec les tableaux. Dingue!,
var = $('.column'),
= file.split('\n')
Il faudra peut-être un certain temps pour s’habituer à la syntaxe d’affectation déstructurante, mais c’est quand même un doux sugarcoating.
littéraux D’objet améliorés dans ES6
ce que vous pouvez faire avec des littéraux d’objet dans ES6 est époustouflant! Nous sommes passés d’une version glorifiée de JSON dans ES5 à quelque chose qui ressemble étroitement aux classes dans ES6.
dans le développement d’entreprise, la modularisation du code est importante car les projets sont plus grands et comportent un plus grand nombre de pièces mobiles. Avec des littéraux d’objets améliorés, vous pouvez créer des objets vraiment puissants chargés de fonctionnalités.,
Voici un littéral d’objet ES5 typique avec quelques méthodes et attributs/propriétés:
Si nous voulons être chic, nous pouvons hériter de serviceBase en en faisant le prototype avec L’objet.méthode create:
je sais que accountServiceES5ObjectCreate et accountServiceES5 ne sont pas totalement identiques, car un objet (accountServiceES5) aura les propriétés dans l’objet __proto__ comme indiqué dans l’illustration ci-dessous:
mais pour les besoins de cet exemple, considérons-les similaires., Dans les littéraux D’objets ES6, nous pouvons utiliser des raccourcis pour l’affectation. Par exemple, getAccounts: getAccounts, devient simplement getAccounts.
de plus, nous pouvons invoquer super et avoir des clés dynamiques. Par exemple, la méthode toString() renvoie un objet JSON sous forme de chaîne en appelant super.valueOf(), et valueOf_1_2_3 est un nom de propriété dynamique:
c’est une grande amélioration aux bons vieux littéraux d’objet parce que les développeurs peuvent emballer plus de logique et faire plus choses qu’avec les objets ES5!,
Flèche Fonctions dans l’ES6
C’est probablement la fonctionnalité que j’attendais le plus. J’ai adoré CoffeeScript pour ses grosses flèches. Maintenant, nous les avons dans ES6.
Les Grosses flèches sont incroyables car elles feraient que votre ceci se comporte correctement, c’est — à-dire que cela aura la même valeur que dans le contexte de la fonction-il ne mutera pas comme cela se produit généralement chaque fois que vous créez une fermeture. Ce comportement était l’une des pires parties de JavaScript et a souvent causé beaucoup de confusion avec les développeurs nouveaux dans le langage., L’utilisation des fonctions flèches dans ES6 nous permet d’arrêter d’utiliser that = this OU self = this ou _this = this or .bind(ce).
par exemple, ce code dans ES5 est moche car vous pouvez oublier de transférer le contexte à la fermeture avec _this:
var _this = this
$('.btn').click(function(event){
_this.sendData()
})
Les approches bind() ou call() ne sont pas beaucoup mieux en raison de leur verbosité. Mais jetez un oeil à ce joli code ES6:
$('.btn').click((event) =>{
this.sendData()
})
malheureusement, le Comité ES6 a décidé que l’emprunt de flèches maigres à CoffeeScript était trop une bonne chose et nous a laissé une longue vieille fonction à la place., (Flèche maigre dans CoffeeScript fonctionne comme une fonction régulière dans ES5 et ES6).
Voici un autre exemple dans lequel nous utilisons call pour passer le contexte à la fonction logUpperCase() dans ES5:
alors que dans ES6, nous n’avons pas besoin de jouer avec _this:
notez que vous pouvez mélanger et faire correspondre l’ancienne fonction avec => dans ES6 comme bon vous semble. Et quand une fonction de flèche est utilisée avec une instruction d’une ligne, elle devient une expression; c’est-à-dire,. il retournera implicitement le résultat de cette seule instruction. Si vous avez plus d’une ligne, vous devrez utiliser return explicitement.,
CE code ES5 crée un tableau à partir du tableau messages:
deviendra ceci dans ES6:
var ids =
var messages = ids.map(value => `ID is ${value}`) // implicit return
notez que j’ai utilisé les modèles de chaîne? Une autre caractéristique de CoffeeScript I je les adore!
Les parenthèses () sont facultatives pour les paramètres simples dans une signature de fonction de flèche. Cependant, vous en aurez besoin lorsque vous utilisez plus d’un paramètre. Dans ES5, le code a une fonction avec un retour explicite:
maintenant, voici une version plus éloquente du code dans ES6 avec des parenthèses autour des paramètres et un retour implicite:
Les Grosses flèches ne sont-elles pas géniales? Les utiliser.,
promesses en ES6
Les promesses ont été un sujet de développement controversé, en particulier dans les grandes organisations où il peut être plus difficile de s’entendre sur une approche commune. Une des raisons en est le nombre d’implémentations de promesses utilisant des syntaxes légèrement différentes — Q, bluebird, deferred.js, vow, avow et jquery différés pour n’en nommer que quelques-uns. Une autre raison est que certains ingénieurs logiciels disent: « Nous n’avons pas besoin de promesses et pouvons simplement utiliser asynchrone, générateurs, rappels, etc. »
heureusement, il y a une chance que les débats se calment avec L’implémentation standard Promise ajoutée à ES6!,
considérons un exemple assez trivial d’exécution asynchrone retardée avec setTimeout():
setTimeout(function(){ console.log('Yay!') }, 1000)
Nous pouvons réécrire ce code dans ES6 avec Promise:
var wait1000 = new Promise(function(resolve, reject) {
setTimeout(resolve, 1000)
}).then(function() {
console.log('Yay!')
})
ou avec les fonctions arrow ES6:
var wait1000 = new Promise((resolve, reject)=> {
setTimeout(resolve, 1000)
}).then(()=> {
console.log('Yay!')
})
jusqu’à présent, nous avons augmenté le nombre de lignes de code de trois à cinq sans aucun avantage évident. C’est vrai, il semble contre-intuitif. L’avantage viendra si nous avons plus de logique imbriquée à l’intérieur du rappel setTimeout ()., Par exemple, ce code ES5 a deux rappels imbriqués:
setTimeout(function(){
console.log('Yay!')
setTimeout(function(){
console.log('Wheeyee!')
}, 1000)
}, 1000)
Il peut être réécrit avec des promesses ES6 comme ceci:
comme vous pouvez l’observer, l’organisation du code a changé lorsque nous avons refactorisé le code des rappels uniquement en code avec des promesses.
un autre avantage non couvert dans cet essai — les promesses ont également un rappel fail-and-catch-all qui est une fonctionnalité intéressante. Jetez un oeil à ce post pour plus d’informations sur les promesses: Introduction aux promesses ES6.
constructions à portée de bloc: Let et Const
Vous avez peut-être déjà vu le son étrange let dans le code ES6., Ce n’est pas simplement une fonction de revêtement de sucre. C’est plus complexe et ajoute plus de logique à vos déclarations de variables.
let est une nouvelle var qui permet aux développeurs d’étendre la variable aux blocs. Nous définissons les blocs par les accolades. Dans ES5, les blocs n’ont rien fait aux vars comme on le voit ici:
dans le code ci-dessus, le résultat sera 1000. Ça alors! C’est un très mauvais bug. Dans ES6, nous utilisons let pour limiter la portée aux blocs. Vars sont alors fonction portée.
Dans ce code, la valeur est 0, car si le bloc a également la déclaration., S’il n’avait rien (montant=1), alors l’expression aurait été 1.
en ce qui concerne const, les choses sont plus faciles; cela empêche simplement la réaffectation, et il est également limité par bloc comme let. Juste pour démontrer, voici plusieurs constantes et le code fonctionne bien car les instructions const appartiennent à différents blocs:
à mon humble avis, laissez et const compliquer le langage. Sans eux, nous n’avions qu’un seul comportement, maintenant il y a plusieurs scénarios à considérer., ;- (Pour les personnes novices en JavaScript, qui viennent de langages comme Java, const et let offrent une nouvelle couche de protection intégrée contre certains comportements imprévisibles.
Classes dans ES6
Si vous aimez la programmation orientée objet (POO), alors vous allez adorer cette fonctionnalité. Il rend les cours d’écriture en ES6, et en héritant, aussi facile que d’aimer un commentaire sur Facebook.
dans ES5, la création et l’utilisation des classes étaient pour le moins difficiles. Il n’y avait pas de classe de mots clés (elle était réservée, mais n’a rien fait)., En plus de cela, de nombreux modèles d’héritage comme pseudo-classique, classique, fonctionnel ont ajouté à la confusion, versant de l’essence sur les divisions enflammées entre les développeurs JavaScript.
Je ne vais pas vous montrer comment écrire une classe dans ES5, car il y a beaucoup de modèles. Jetons un coup d’oeil à L’exemple ES6 tout de suite. Je peux vous dire que la classe ES6 utilisera des prototypes, pas l’approche function factory. Nous avons un classbaseModel dans lequel nous pouvons définir un constructeur et une méthode getName ():
notez que j’utilise des valeurs de paramètres par défaut pour les options et les données., En outre, les noms de méthodes n’ont plus besoin d’avoir le mot fonction ou le deux-points (:). L’autre grande différence est que vous ne pouvez pas attribuer de propriétés this.NAME de la même manière que les méthodes, c’est-à-dire que vous ne pouvez pas dire name au même niveau d’indentation qu’une méthode. Pour définir la valeur d’une propriété, il suffit d’assigner une valeur dans le constructeur.,
Le AccountModel héritera de baseModel avec class NAME extends PARENT_NAME:
class AccountModel extends baseModel {
constructor(options, data) {
pour appeler le constructeur parent, invoquez sans effort super() avec params:
super({private: true}, ) // Call the parent method with super
this.name = 'Account Model'
this.url +='/accounts/'
}
Si vous voulez être vraiment chic, vous pouvez également configurer un getter comme celui-ci avec accountsData comme un propriété:
get accountsData() { // Calculated attribute getter
// ... make XHR
return this.data
}
}
donc, après tout ce travail, comment utilisez-vous réellement cette classe Abracadabra? C’est aussi facile que de tromper un enfant de trois ans en lui faisant croire au Père Noël., Utilisez un nouvel opérande:
let accounts = new AccountModel(5)
accounts.getName()
console.log('Data is %s', accounts.accountsData)
Au cas où vous vous poseriez la question, la sortie est:
Class name: Account Model
Data is %s 32113123123,524214691
bien sûr, les classes existaient dans CoffeeScript et les anciennes normes JavaScript, elles ne sont donc pas complètement nouvelles. Cependant, dans ES6, l’utilisation des classes a été facilitée, ce qui est particulièrement important pour les développeurs d’entreprise car ils travaillent généralement sur des projets plus importants couvrant plusieurs équipes (le code nécessite donc une modularisation).
Modules dans ES6
comme vous le savez peut-être, il n’y avait pas de support de modules natifs en JavaScript avant ES6., Les gens sont venus avec AMD, RequireJS, CommonJS et d’autres solutions de contournement, mais ils étaient juste que — solution de contournement et hacks. Avec ES6, il existe maintenant des modules intégrés avec des opérandes d’importation et d’exportation.
dans ES5, vous utiliseriez<script> balises avec IIFE, ou une bibliothèque comme AMD, tandis que dans ES6, vous pouvez exposer votre classe avec export. Depuis que je suis un nœud.js guy donc je vais utiliser CommonJS, qui est aussi un nœud.syntaxe js, pour résoudre ce problème. Il est assez simple d’utiliser CommonJS sur le navigateur avec le bundler Browserify., Disons que nous avons la variable de port et la méthode getAccounts dans le module ES5.js:
module.exports = {
port: 3000,
getAccounts: function() {
...
}
}
Dans l’ES5 principal.js, nous exigerions (’module’) cette dépendance:
var service = require('module.js')
console.log(service.port) // 3000
dans ES6, nous utiliserions l’exportation et l’importation. Par exemple, il s’agit de notre bibliothèque dans le module ES6.fichier js:
export var port = 3000
export function getAccounts(url) {
...
}
dans le fichier principal de l’importateur ES6.js, nous utilisons import {name} de la syntaxe ‘my-module’., Par exemple, nous pouvons importer des objets/méthodes port, et getAccounts à partir du module appelé module:
import {port, getAccounts} from 'module'
console.log(port) // 3000
ou nous pouvons tout importer en tant que service variable dans main.js:
import * as service from 'module'
console.log(service.port) // 3000
notez que la prise en charge native des modules ES6 dans les navigateurs n’arrive pas de sitôt (au moins à ce jour), vous aurez donc besoin de quelque chose comme jspm pour utiliser les modules ES6.
Pour plus d’informations et d’exemples sur les modules ES6, consultez ce texte. Et rappelez-vous, – quoi qu’il arrive, écrivez du JavaScript modulaire!,
Pour…of Comprehensions in ES6
Voici un problème avec ES5: lorsque nous voulons itérer sur des objets en utilisant ses clés, nous devons d’abord extraire ces clés avec Object.touches(). Par exemple:
Un autre problème avec forEach est que vous devez écrire la fonction word. Mais il y a une meilleure déclaration dans ES6! L’instruction for of of remplace la norme for et forEach, et est similaire à for…in sauf que ça for…in itère sur les clés et pour…de sur les valeurs.,
en utilisant les données de l’extrait de code précédent (livres), Nous pouvons itérer en utilisant for…in et les clés ou en utilisant for of of:
for (let key in books){
console.log(books)
}
sort les clés:
Pro Express.js
React Quickly
Full Stack JavaScript
Azat
tandis que for of of fonctionnera avec des valeurs:
for (let book of books){
console.log(book)
}
la sortie de for for of:
Pro Express.js
React Quickly
Full Stack JavaScript
notez que la sortie de For of of ignore la valeur avec key author comme le ferait foreach sur un tableau:
mon expérience personnelle de travail avec les compréhensions est qu’elles augmentent la lisibilité du code. Ceci est primordial pour la maintenance du code dans les applications d’entreprise.
