parâmetros padrão em ES6
quando escrevemos módulos, precisamos contabilizar os casos em que os argumentos serão omitidos. Em outras palavras, bons módulos devem ser inteligentes o suficiente para ter valores padrão para parâmetros. In ES5, you would write something like the code below, which uses the logical OR (||):
These stations work well except for the edge cases. Por exemplo, se o valor é 0 — e porque 0 é falsy em JavaScript — a condição defaults para o valor hard-coded em vez de se tornar o próprio valor, como você pode querer em alguns casos., É claro, que precisa de 0 como valor (#sarcasmfont), de modo que apenas ignorado essa falha e usou a lógica OU de qualquer maneira…
Ou talvez um evento de um if/else condição para verificar se o valor indefinido:
var getAccounts = function(limit) {
if (typeof limit == 'undefined') limit = 10
...
}
Sem mais! Em ES6, podemos colocar os valores padrão para a direita na assinatura de funções, como por exemplo:
var getAccounts = function(limit = 10) {
...
}
var link = function(height = 50, color = 'red', url = 'http://capitalone.io') {
...
}
Este é não só usa menos linhas de código, mas tem maior legibilidade bem. A propósito, esta sintaxe é semelhante a Ruby e Python!,
Rest and Spread Parameters in ES6
If you have ever used or written a JavaScript function with a variable or even unlimited number of arguments you know the argument object. Este objeto contém todos os parâmetros passados à função. O problema é que este objeto de argumentos não é um array real. Você tem que convertê-lo para um array se você quiser usar funções como sort ou mapa explicitamente. Por exemplo, esta função de requisição converte argumentos usando call ():
então existe uma maneira melhor em ES6 para acessar um número indefinido de argumentos como um array? É!, É sintaxe de Parâmetros de descanso e é definida com elipses… Por exemplo, esta é a assinatura da função ES6 com os outros parâmetros callbacks que se tornam um array com o resto dos parâmetros:
function(url, options, ...callbacks) {
var callback1 = callbacks
var callback2 = callbacks
// ...
}
nota: no array restante, o primeiro parâmetro é aquele que não tem um nome, por exemplo, o callback é no índice 0, não 2 Como nos argumentos da ES5. Além disso, colocar outros argumentos nomeados após o parâmetro restante irá causar um erro de sintaxe. O parâmetro restante é uma grande adição sugarcoating ao JavaScript uma vez que ele substitui o objeto argumentos, que não era um array real.,
Em ES5, se você quisesse usar uma matriz como um argumento para uma função, você teria que usar a aplicar() função:
function request(url, options, callback) {
// ...
}
var requestArgs =
request.apply(null, requestArgs)
Agora no ES6, podemos usar a propagação parâmetros que parecem semelhantes para os parâmetros de descanso na sintaxe como eles usam reticências…:
function request(url, options, callback) {
// ...
}
var requestArgs =
request(...requestArgs)
ES6 os Desenvolvedores podem usar a propagação do operador, nos seguintes casos:
A propagação operador tem uma sintaxe semelhante para os parâmetros de descanso, mas o descanso é usado na definição da função/declaração e o spread é utilizada em chamadas e literais., Eles salvam desenvolvedores de digitar linhas extras de código imperativo, então conhecê-los e usá-los é uma boa habilidade.
os literais de modelos em ES6
os literais de modelos (ou interpolação como são conhecidos noutras línguas) são uma forma de produzir variáveis na cadeia misturada com algum texto, tipicamente em interfaces de utilizador. Na ES5, tivemos de Partir a corda assim.,
var name = 'Your name is ' + first + ' ' + last + '.'
var url = 'http://localhost:3000/api/messages/' + id
Felizmente, no ES6, podemos usar o novo sintaxe ${NOME} dentro do back-assinalada de seqüência de caracteres:
var name = `Your name is ${first} ${last}.`
var url = `http://localhost:3000/api/messages/${id}`
Isso é puro e permite que os desenvolvedores para ver o resultado final das cadeias de caracteres em um piscar de olhos, em vez de tentar avaliar a concatenação de expressão.
ES6 modelos de texto são bons, mas a sintaxe irá causar conflitos na documentação de marcação se você usar modelos de texto e marcação de código inline, (porque no código de marcação inline é marcado por carraças também)., A propósito, CoffeeScript tem o que eu acho uma solução melhor quando interpola cadeias de duplo quited (semelhante ao Ruby):
var name = "Your name is #{first} #{last}."
var url = "http://localhost:3000/api/messages/#{id}"
interpolação é bom, mas como você trabalha com texto multi-linha em JavaScript?
strings multi-line em ES6
outra sintática sintática yummy é a string multi-line. Na ES5, tivemos que usar uma dessas abordagens e foi feio., Com concatenação:
Ou com o escape de barra:
var fourAgreements = 'You have the right to be you.\n\
You can only be you when you do your best.'
Enquanto no ES6, basta utilizar as aspas invertidas da seguinte forma:
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.`
Multi-linha de seqüências de caracteres são uma adição útil se você tiver que usar um monte de texto em seu código JavaScript.,
Desestruturação de Atribuição em ES6
Desestruturação pode ser um conceito mais difícil de entender do que o multi-linha cadeias porque não há um pouco de magia acontecendo por trás da cena… Vamos dizer que você tem atribuições simples, onde as chaves de identificação do usuário e accountNumber são variáveis de id de usuário e accountNumber:
var data = $('body').data(), // data has properties
userId and accountNumber userId = data.userId, accountNumber = data.accountNumber
Outros exemplos de atribuições de onde nomes de variáveis e propriedades do objeto são o mesmo:
Em ES6, podemos substituir o ES5 código acima com estas instruções:
var { userId, accountNumber} = $('body').data()
var {json} = require('body-parser')
var {username, password} = req.body
Isto também funciona com matrizes. Louco!,
var = $('.column'),
= file.split('\n')
pode levar algum tempo para se acostumar com a sintaxe de atribuição de destruição, mas é um doce açúcar no entanto.
literais de objectos melhorados em ES6
o que pode fazer com literais de objectos em ES6 é impressionante! Passámos de uma versão glorificada do JSON na ES5 para algo que se assemelhava muito às aulas na ES6.
no desenvolvimento de empresas, a modularização de código é importante porque os projetos são maiores e têm um maior número de partes móveis. Com literais de objetos melhorados, você pode criar objetos realmente fortes carregados com funcionalidade.,
Aqui está um típico objeto ES5 literal com alguns métodos e atributos/propriedades:
Se quisermos ser chiques, podemos herdar da base servic tornando-a o protótipo com o objeto.criar método:
eu sei, accountServiceES5ObjectCreate e accountServiceES5 NÃO são totalmente idênticos, como um objeto (accountServiceES5) terá as propriedades no __proto__ objeto, como mostrado na ilustração abaixo:
Mas para fins deste exemplo, vamos considerá-los semelhantes., No ES6 object literals, nós podemos usar abreviaturas para a atribuição. Por exemplo, getAccounts: getAccounts, torna-se apenas getAccounts.
também, podemos invocar super e ter teclas dinâmicas. Por exemplo, o método toString() retorna um objeto JSON como uma string chamando super.valueOf(), e valueOf_1_2_3 é uma propriedade dinâmica nome:
Este é um ótimo acessório para o bom e velho literais de objeto porque os desenvolvedores podem pack mais lógica e fazer mais coisas do que com ES5 objetos!,
funções de seta em ES6
esta é provavelmente a característica que mais esperei. Adorava o CoffeeScript pelas suas flechas Gordas. Agora temo-los na ES6.
as setas de gordura são incríveis porque eles fariam com que o seu comportamento se comportasse corretamente, isto é, isto terá o mesmo valor que no contexto da função — ele não vai sofrer mutação como normalmente acontece cada vez que você cria um fechamento. Este comportamento foi uma das partes piores do JavaScript e muitas vezes causou muita confusão com desenvolvedores novos para a linguagem., Usando funções setas em ES6 nos permite parar de usar isso = isto ou self = isto ou _this = este or .bind (this).
Por exemplo, este código em ES5 é feio porque você pode se esquecer de transferir o contexto para o fechamento com _this:
var _this = this
$('.btn').click(function(event){
_this.sendData()
})
as abordagens bind() ou call() não são muito melhores devido à sua verbosidade. Mas dê uma olhada neste bonito código ES6:
$('.btn').click((event) =>{
this.sendData()
})
Infelizmente, o Comitê ES6 decidiu que emprestar flechas magras do CoffeeScript era muito bom e deixou-nos com uma longa e antiga função em vez disso., (Skinny arrow in CoffeeScript works like regular function in ES5 and ES6).
Aqui está outro exemplo em que usamos a chamada para passar o contexto para o logUpperCase() função no ES5:
Enquanto no ES6, não precisamos mexer com _este:
Note que você pode misturar e combinar função antigos com => no ES6 como você vê o ajuste. E quando uma função de seta é usada com uma instrução de uma linha, ela se torna uma expressão; I. E.,. irá implicitamente devolver o resultado dessa Declaração única. Se você tiver mais de uma linha, então você precisará usar o return explicitamente.,
Este código ES5 está a criar um array a partir do array de mensagens:
irá tornar-se isto em ES6:
var ids =
var messages = ids.map(value => `ID is ${value}`) // implicit return
Notice that I used the string templates? Outra característica do CoffeeScript… eu amo-os!
os parêntesis () são opcionais para os parâmetros únicos numa assinatura da função arrow. No entanto, você vai precisar deles quando usar mais de um param. In ES5 the code has function with explicit return:
Nowe’s a more eloquent version of the code in ES6 with parêntesis around params and implícito return:
Aren’T fat arrows great? Usa-os.,
promessas em ES6
promessas têm sido um tema de desenvolvimento controverso, especialmente em organizações maiores onde pode ser mais difícil chegar a acordo sobre uma abordagem comum. Uma razão para isso é o número de implementações prometedoras usando sintaxes — Q ligeiramente diferentes, bluebird, diferido.js, vow, avow e jquery adiaram para citar apenas alguns. Outra razão é que alguns engenheiros de software dizem: “Nós não precisamos de promessas e podemos apenas usar async, geradores, callbacks, etc.”
felizmente, há uma chance de os debates acalmarem com a implementação de Promessa padrão adicionado ao ES6!,
Vamos considerar, ao invés de um exemplo trivial de um atraso execução assíncrona com setTimeout():
setTimeout(function(){ console.log('Yay!') }, 1000)
podemos re-escrever esse código em ES6 com Promessa:
var wait1000 = new Promise(function(resolve, reject) {
setTimeout(resolve, 1000)
}).then(function() {
console.log('Yay!')
})
Ou com ES6 seta funções:
var wait1000 = new Promise((resolve, reject)=> {
setTimeout(resolve, 1000)
}).then(()=> {
console.log('Yay!')
})
até agora, temos aumentado o número de linhas de código a partir de três para cinco, sem qualquer benefício óbvio. Isso mesmo, parece contra-intuitivo. O benefício virá se tivermos mais lógica aninhada dentro do callback setTimeout ()., Por exemplo, este código ES5 tem dois callbacks aninhados:
setTimeout(function(){
console.log('Yay!')
setTimeout(function(){
console.log('Wheeyee!')
}, 1000)
}, 1000)
ele pode ser reescrito com as promessas ES6 como você pode observar, a organização do Código mudou quando nós refactored callbacks-only code into code with promises.
outro benefício não coberto neste ensaio-promessas também têm uma falha-e-pegar-tudo callback que é uma característica agradável. Dê uma olhada neste post para mais informações sobre promessas: Introdução às promessas ES6.
construções com escopo em bloco: Let e Const
você pode já ter visto a estranha sonoridade no código ES6., Este não é simplesmente um recurso de suavização. É mais complexo e adiciona mais lógica às suas declarações variáveis.
let é uma nova var que permite aos desenvolvedores escopo da variável para os blocos. Definimos os blocos pelo aparelho encaracolado. Em ES5, os blocos não fizeram nada aos vars como visto aqui:
no código acima, o resultado será 1000. Uau! É um insecto muito mau. No ES6, usamos let para restringir o escopo aos blocos. Vars são então função escoprada.
neste código, o valor é 0 porque o bloco if também tem a declaração de caracteres., Se não tivesse nada (Quantidade=1), então a expressão teria sido 1.
Quando se trata de const, as coisas são mais fáceis; ele apenas impede a re-atribuição, e também é bloqueado como o let. Apenas para demonstrar, aqui estão várias constantes e o código funciona bem, porque as declarações const pertencem a diferentes blocos:
na minha humilde opinião, deixe e const sobrecomplicar a linguagem. Sem eles tivemos apenas um comportamento, agora há vários cenários a considerar., ;- (Para pessoas novas ao JavaScript, que vêm de linguagens como Java, const e let oferecem uma nova camada de proteção embutida contra algum comportamento imprevisível.
Classes em ES6
Se você ama a programação orientada a objetos (OOP), então você vai adorar esta característica. Faz com que escrever aulas em ES6, e herdar delas, tão fácil quanto gostar de um comentário no Facebook.
em ES5, a criação de classes e o uso era difícil de dizer o mínimo. Não havia uma classe de palavras-chave (estava reservada, mas não fez nada)., Além disso, muitos padrões de herança como pseudo clássico, clássico, funcional adicionado à confusão, derramando Gasolina nas divisões de fogo entre desenvolvedores JavaScript.
Eu não vou mostrar como escrever uma classe em ES5, porque há muitos padrões. Vamos dar uma olhada no exemplo ES6 imediatamente. Posso dizer-lhe que a classe ES6 vai usar protótipos, não a abordagem de fábrica de funções. Temos um classbaseModel no qual podemos definir um construtor e um método getName ():
Notice that i’m using default parameter values for options and data., Além disso, os nomes de métodos não precisam mais ter a função palavra ou o cólon (:). A outra grande diferença é que você não pode atribuir propriedades this.NAME da mesma forma que os métodos, isto é, você não pode dizer nome no mesmo nível de indentação que um método. Para definir o valor de uma propriedade, basta atribuir um valor no construtor.,
O AccountModel irá herdar de baseModel com o NOME de classe estende PARENT_NAME:
class AccountModel extends baseModel {
constructor(options, data) {
Para chamar o pai construtor, sem esforço invocar super() com os parâmetros:
super({private: true}, ) // Call the parent method with super
this.name = 'Account Model'
this.url +='/accounts/'
}
Se você quiser ser realmente gosta, você pode também configurar um getter como este com accountsData como uma propriedade:
get accountsData() { // Calculated attribute getter
// ... make XHR
return this.data
}
}
Então, depois de todo esse trabalho, como você realmente usar essa classe abracadabra? É tão fácil como enganar um miúdo de três anos para acreditar no Pai Natal., Use novo operando:
let accounts = new AccountModel(5)
accounts.getName()
console.log('Data is %s', accounts.accountsData)
No caso de estar a pensar, o resultado é:
Class name: Account Model
Data is %s 32113123123,524214691
é claro, classes existiam no CoffeeScript e padrões JavaScript mais antigos, de modo que eles não são completamente novos. No entanto, no ES6, o uso de classes foi facilitado, o que é especialmente importante para os desenvolvedores de empresas porque eles normalmente trabalham em projetos maiores abrangendo várias equipes (então o código requer modularização).
módulos em ES6
Como você pode saber, não havia suporte de módulos nativos em JavaScript antes de ES6., As pessoas vieram com AMD, RequireJS, CommonJS e outros workarounds, mas eles eram apenas isso — workaround e hacks. Com o ES6 existem agora módulos incorporados com operandos de importação e exportação.
Em ES5, você deve usar <script> marcas com IIFE, ou uma biblioteca como a AMD, enquanto em ES6 você pode expor a sua classe com a exportação. Já que sou um nó.o tipo do js, por isso vou usar o CommonJS, que também é um nó.sintaxe js, para resolver este problema. É bastante simples usar CommonJS no Browserify bundler., Digamos que temos a variável port e o método getAccounts no módulo ES5.js:
module.exports = {
port: 3000,
getAccounts: function() {
...
}
}
In ES5 main.js, we would require (‘module’) that dependency:
var service = require('module.js')
console.log(service.port) // 3000
In ES6, we would use export and import. Por exemplo, esta é a nossa biblioteca no módulo ES6.js file:
export var port = 3000
export function getAccounts(url) {
...
}
No importador ES6 file main.js, usamos import {name} a partir da sintaxe’ my-module’., Por exemplo, podemos importar objetos/métodos porta, e getAccounts do módulo, denominado módulo:
import {port, getAccounts} from 'module'
console.log(port) // 3000
Ou podemos importar tudo como uma variável do serviço principal.js:
import * as service from 'module'
console.log(service.port) // 3000
Note que o suporte nativo para ES6 módulos em navegadores não está chegando a qualquer momento em breve (como esta escrito pelo menos), então você vai precisar de algo como jspm utilizar ES6 módulos.
para mais informações e exemplos sobre módulos ES6, dê uma olhada neste texto. E lembre — se, – não importa o quê, escreva JavaScript modular!,
Para…de Compreensões em ES6
Aqui está um problema com ES5: quando queremos para iterar através de objetos usando suas chaves, precisamos extrair as chaves primeiro com o Objeto.chave(). Por exemplo:
outro problema com forEach é que você precisa escrever a função palavra. Mas há uma declaração melhor no ES6! O for…of statement substitui standard for e forEach, e é semelhante a for…in excepto que … for…in itera sobre chaves e para … sobre valores.,
Usando o código anterior trecho de dados (livros), podemos iterar usando para…e teclas ou usando para…de:
for (let key in books){
console.log(books)
}
Saídas as teclas:
Pro Express.js
React Quickly
Full Stack JavaScript
Azat
Enquanto o for…a vontade, o trabalho com valores:
for (let book of books){
console.log(book)
}
A saída para…de:
Pro Express.js
React Quickly
Full Stack JavaScript
Repare que a saída de…de ignora o valor com a tecla autor como seria forEach em uma matriz:
Minha experiência pessoal com compreensões é que eles aumentam a legibilidade do código. Isto é fundamental para a manutenção de códigos em aplicações empresariais.
