parámetros predeterminados en ES6
cuando escribimos módulos, necesitamos tener en cuenta los casos en los que se omitirán los argumentos. En otras palabras, los buenos módulos deben ser lo suficientemente inteligentes como para tener valores predeterminados para los parámetros. En ES5, escribirías algo como el código de abajo, que usa la lógica OR ( / /):
estas sentencias funcionan bien excepto para los casos de borde. Por ejemplo, si el valor es 0, y porque 0 es falso en JavaScript, la condición por defecto es el valor codificado en lugar de convertirse en el valor en sí, como podría desear en algunos casos., Por supuesto, que necesita 0 como un valor (#sarcasmfont), así que simplemente ignoramos este defecto y utilizamos la lógica o de todos modos
O tal vez evento una condición if / else para comprobar el valor indefinido:
var getAccounts = function(limit) {
if (typeof limit == 'undefined') limit = 10
...
}
No más! En ES6, podemos poner los valores predeterminados en la firma de las funciones como así:
var getAccounts = function(limit = 10) {
...
}
var link = function(height = 50, color = 'red', url = 'http://capitalone.io') {
...
}
esto no solo usa menos líneas de código, sino que también ha aumentado la legibilidad. Por cierto, esta sintaxis es similar a Ruby y Python!,
parámetros Rest y Spread en ES6
Si alguna vez ha utilizado o escrito una función JavaScript con una variable o incluso un número ilimitado de argumentos, conoce el objeto argument. Este objeto contiene todos los parámetros pasados a la función. El problema es que este objeto arguments no es un array real. Tienes que convertirlo en un array si quieres usar funciones como sort o map explícitamente. Por ejemplo, esta función de petición convierte argumentos usando call():
entonces, ¿hay una mejor manera en ES6 de acceder a un número indefinido de argumentos como una matriz? Sí!, Es la sintaxis de los parámetros de descanso y se define con elipses …. Por ejemplo, esta es la firma de la función ES6 con el parámetro rest callbacks que se convierte en una matriz con el resto de los parámetros:
function(url, options, ...callbacks) {
var callback1 = callbacks
var callback2 = callbacks
// ...
}
nota: en la matriz rest, el primer parámetro es el que no tiene nombre, por ejemplo, la devolución de llamada está en el índice 0, NO 2 como en los argumentos de es5. Además, poner otros argumentos con nombre después del parámetro rest causará un error de sintaxis. El parámetro rest es una gran adición de sugarcoating a JavaScript, ya que reemplaza el objeto arguments, que no era una matriz real.,
en ES5, si desea utilizar una matriz como argumento para una función, tendría que usar la función apply ():
function request(url, options, callback) {
// ...
}
var requestArgs =
request.apply(null, requestArgs)
ahora en ES6, podemos usar los parámetros de propagación que se ven similares a los parámetros rest en la sintaxis, ya que usan elipses
function request(url, options, callback) {
// ...
}
var requestArgs =
request(...requestArgs)
ES6 desarrolladores puede usar el operador spread en los siguientes casos:
el operador spread tiene una sintaxis similar a los parámetros rest, pero rest se usa en la definición/declaración de la función y spread se usa en las llamadas y literales., Evitan que los desarrolladores escriban líneas adicionales de código imperativo, por lo que conocerlas y usarlas es una buena habilidad.
los literales de plantilla en ES6
Los literales de plantilla (o interpolación como se les conoce en otros idiomas) son una forma de generar variables en la cadena mezcladas con algo de texto, normalmente en las interfaces de usuario. En ES5, teníamos que romper la cuerda así.,
var name = 'Your name is ' + first + ' ' + last + '.'
var url = 'http://localhost:3000/api/messages/' + id
afortunadamente, en ES6 podemos usar una nueva sintaxis {{NAME} dentro de la cadena marcada:
var name = `Your name is ${first} ${last}.`
var url = `http://localhost:3000/api/messages/${id}`
esto es limpio y permite a los desarrolladores ver el resultado final de las cadenas de un vistazo en lugar de intentar evaluar la expresión de concatenación.
ES6 las plantillas de cadena son buenas, pero la sintaxis causará conflictos en la documentación de Markdown si usa plantillas de cadena y marcado de código en línea (porque en Markdown el código en línea también está marcado por marcas de retroceso)., Por cierto, CoffeeScript tiene lo que creo que es una mejor solución cuando interpola cadenas de doble salida (similar a Ruby):
var name = "Your name is #{first} #{last}."
var url = "http://localhost:3000/api/messages/#{id}"
la interpolación es buena, pero ¿cómo se trabaja con texto multilínea en JavaScript?
cadenas multilíneas en ES6
otra sugarcoating sintáctico delicioso es cadena multilínea. En ES5, tuvimos que usar uno de estos enfoques y fue feo., Con concatenación:
O CON BARRA DE escape:
var fourAgreements = 'You have the right to be you.\n\
You can only be you when you do your best.'
mientras esté en ES6, simplemente utilice los backsticks de la siguiente manera:
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.`
Las cadenas de varias líneas son una adición útil si tiene que usar mucho texto en su código JavaScript.,
Desestructuring Assignment in es6
Desestructuring puede ser un concepto más difícil de entender que las cadenas multilínea porque hay algo de magia detrás de la escena say supongamos que tiene asignaciones simples donde las claves userId y accountNumber son variables userId y accountNumber:
var data = $('body').data(), // data has properties
userId and accountNumber userId = data.userId, accountNumber = data.accountNumber
otros ejemplos de asignaciones donde los nombres de las variables y las propiedades del objeto son los mismos:
en ES6, podemos reemplazar el código ES5 anterior con estas instrucciones:
var { userId, accountNumber} = $('body').data()
var {json} = require('body-parser')
var {username, password} = req.body
esto también funciona con matrices. ¡Chalado!,
var = $('.column'),
= file.split('\n')
puede tomar algún tiempo acostumbrarse a la sintaxis de asignación de desestructuración, pero es un dulce edulcorante sin embargo.
literales de objetos mejorados en ES6
¡lo que puedes hacer con literales de objetos en ES6 es alucinante! Pasamos de una versión glorificada de JSON en ES5 a algo muy parecido a las clases en ES6.
en el desarrollo empresarial, la modularización de código es importante porque los proyectos son más grandes y tienen un mayor número de partes móviles. Con los literales de objetos mejorados, puede crear objetos realmente fuertes cargados de funcionalidad.,
Aquí hay un literal típico de objeto ES5 con algunos métodos y atributos/propiedades:
si queremos ser sofisticados, podemos heredar de serviceBase convirtiéndolo en el prototipo con el objeto.crear método:
sé, accountServiceES5ObjectCreate y accountServiceES5 NO son totalmente idénticos, debido a que un objeto (accountServiceES5) tendrá las propiedades en el __proto__ objeto, como se muestra en la siguiente ilustración:
Pero por el bien de este ejemplo, vamos a considerar similares., En literales de objetos ES6, podemos usar abreviaturas para la asignación. Por ejemplo, getAccounts: getAccounts, se convierte en getAccounts.
también, podemos invocar super y tener claves dinámicas. Por ejemplo, el método toString () devuelve un objeto JSON como una cadena llamando a super.valueOf(), y valueOf_1_2_3 es un nombre de propiedad dinámico:
Esta es una gran mejora para los buenos literales de objetos antiguos porque los desarrolladores pueden más cosas que con objetos es5!,
funciones de flecha en ES6
Esta es probablemente la característica que más esperaba. Me encantaba CoffeeScript por sus flechas gordas. Ahora los tenemos en ES6.
Las flechas gordas son asombrosas porque harían que su esto se comporte correctamente, es decir, esto tendrá el mismo valor que en el contexto de la función — no mutará como sucede típicamente cada vez que usted crea un cierre. Este comportamiento fue una de las peores partes de JavaScript y a menudo causó mucha confusión con los desarrolladores nuevos en el lenguaje., El uso de funciones de flechas en ES6 nos permite dejar de usar that = this o self = this o _this = this or .bind (esto).
por ejemplo, este código en ES5 es feo porque puede olvidarse de transferir el contexto al cierre con _this:
var _this = this
$('.btn').click(function(event){
_this.sendData()
})
los enfoques bind() o call() no son mucho mejores debido a su verbosidad. Pero echa un vistazo a este bonito código ES6:
$('.btn').click((event) =>{
this.sendData()
})
lamentablemente, el Comité ES6 decidió que tomar prestadas flechas delgadas de CoffeeScript era demasiado bueno y nos dejó con una larga función antigua en su lugar., (Flecha delgada en CoffeeScript funciona como la función regular en ES5 y ES6).
Aquí hay otro ejemplo en el que usamos call para pasar el contexto a la función logUpperCase() en es5:
mientras que en ES6, no necesitamos jugar con _this:
tenga en cuenta que puede mezclar y emparejar la función antigua con => en ES6 como mejor le parezca. Y cuando una función de flecha se utiliza con una instrucción de una línea, se convierte en una expresión; es decir,. devolverá implícitamente el resultado de esa sola declaración. Si tienes más de una línea, entonces necesitarás usar return explícitamente.,
este código ES5 está creando una matriz a partir de la matriz de mensajes:
se convertirá en esto en ES6:
var ids =
var messages = ids.map(value => `ID is ${value}`) // implicit return
Otra característica de CoffeeScript I Me encantan!
los paréntesis () son opcionales para parámetros individuales en una firma de función de flecha. Sin embargo, los necesitarás cuando uses más de un parámetro. En ES5 el código tiene función con retorno explícito:
Ahora aquí hay una versión más elocuente del código en ES6 con paréntesis alrededor de parámetros y retorno implícito:
¿no son geniales las flechas gordas? Úsalos.,
las promesas en ES6
Las promesas han sido un tema de desarrollo controvertido, especialmente en organizaciones más grandes donde puede ser más difícil acordar un enfoque común. Una razón para esto es el número de implementaciones de promise usando sintaxis ligeramente diferentes-Q, bluebird, deferred.js, vow, avow y jquery diferidos por nombrar solo algunos. Otra razón es que algunos ingenieros de software dicen: «no necesitamos promesas y solo podemos usar async, generadores, devoluciones de llamada, etc.»
afortunadamente, existe la posibilidad de que los debates se calmen con la implementación de la promesa estándar añadida a ES6!,
consideremos un ejemplo bastante trivial de una ejecución asíncrona retrasada con setTimeout():
setTimeout(function(){ console.log('Yay!') }, 1000)
podemos reescribir este código en ES6 con Promise:
var wait1000 = new Promise(function(resolve, reject) {
setTimeout(resolve, 1000)
}).then(function() {
console.log('Yay!')
})
o con funciones de flecha ES6:
var wait1000 = new Promise((resolve, reject)=> {
setTimeout(resolve, 1000)
}).then(()=> {
console.log('Yay!')
})
hasta ahora, hemos aumentado el número de líneas de código de tres a cinco sin ningún beneficio obvio. Así es, parece contradictorio. El beneficio vendrá si tenemos más lógica anidada dentro de la devolución de llamada setTimeout ()., Por ejemplo, este código ES5 tiene dos devoluciones de llamada anidadas:
setTimeout(function(){
console.log('Yay!')
setTimeout(function(){
console.log('Wheeyee!')
}, 1000)
}, 1000)
Se puede reescribir con promesas ES6 como así:
como puede observar, la organización del código cambió cuando refactorizamos el código de solo devoluciones de llamada en código con promesas.
otro beneficio no cubierto en este ensayo: las promesas también tienen una devolución de llamada de fail-and-catch-all, que es una buena característica. Echa un vistazo a este post para obtener más información sobre promesas: Introducción a promesas ES6.
construcciones de ámbito de bloque: Let y Const
es posible que ya hayas visto el extraño sonido de let en el código ES6., Esto no es simplemente una característica endulzante. Es más intrincado y agrega más lógica a sus declaraciones de variables.
let es un nuevo var que permite a los desarrolladores escalar la variable a los bloques. Definimos los bloques por las llaves. En ES5, los bloques no hicieron nada a los vars como se ve aquí:
en el código anterior, el resultado será 1000. ¡Órale! Es un bicho muy malo. En ES6, usamos let para restringir el alcance a los bloques. Vars son entonces función de ámbito.
en este código, el valor es 0 porque el bloque if también tiene la declaración let., Si no tuviera nada (Cantidad=1), entonces la expresión habría sido 1.
cuando se trata de const, las cosas son más fáciles; solo evita la reasignación, y también tiene un ámbito de bloques como let. Solo para demostrar, aquí hay varias constantes y el código funciona bien porque las sentencias const pertenecen a diferentes bloques:
en mi humilde opinión, let y const complican demasiado el lenguaje. Sin ellos solo teníamos un comportamiento, ahora hay múltiples escenarios a considerar., ;- (Para las personas nuevas en JavaScript, que vienen de lenguajes como Java, const y let ofrecen una nueva capa de protección integrada contra algunos comportamientos impredecibles.
clases en ES6
Si te gusta la programación orientada a objetos (OOP), entonces te encantará esta función. Hace que escribir clases en ES6, y heredar de ellas, sea tan fácil como dar Me gusta a un comentario en Facebook.
en ES5, la creación y el uso de clases era difícil por decir lo menos. No había una clase de palabra clave(estaba reservada, pero no hacía nada)., Además de eso, muchos patrones de herencia como pseudo clásico, clásico, funcional agregaron a la confusión, echando gasolina a las divisiones ardientes entre los desarrolladores de JavaScript.
no te mostraré cómo escribir una clase en ES5, porque hay muchos patrones. Echemos un vistazo al ejemplo de ES6 de inmediato. Puedo decirles que la clase ES6 usará prototipos, no el enfoque de fábrica de funciones. Tenemos un classbaseModel en el que podemos definir un constructor y un método getName ():
observe que estoy usando valores de parámetros predeterminados para opciones y datos., Además, los nombres de los métodos ya no necesitan tener la palabra función o los dos puntos (:). La otra gran diferencia es que no puedes asignar propiedades this.NAME de la misma manera que los métodos, es decir, no se puede decir name en el mismo nivel de sangría que un método. Para establecer el valor de una propiedad, simplemente asigne un valor en el constructor.,
El AccountModel heredará de baseModel con class NAME extends PARENT_NAME:
class AccountModel extends baseModel {
constructor(options, data) {
para llamar al constructor padre, invoque sin esfuerzo super() con params:
super({private: true}, ) // Call the parent method with super
this.name = 'Account Model'
this.url +='/accounts/'
}
Si desea ser realmente elegante, también puede configurar un getter como este con accountsData como un property:
get accountsData() { // Calculated attribute getter
// ... make XHR
return this.data
}
}
así que después de todo este trabajo, ¿cómo se utiliza realmente esta clase Abracadabra? Es tan fácil como engañar a un niño de tres años para que crea en Santa Claus., Use Nuevo operando:
let accounts = new AccountModel(5)
accounts.getName()
console.log('Data is %s', accounts.accountsData)
en caso de que se lo pregunte, la salida es:
Class name: Account Model
Data is %s 32113123123,524214691
por supuesto, las clases existían en CoffeeScript y estándares JavaScript anteriores, por lo que no son completamente nuevas. Sin embargo, en ES6 el uso de clases se ha hecho más fácil, lo que es especialmente importante para los desarrolladores empresariales porque normalmente trabajan en proyectos más grandes que abarcan varios equipos (por lo que el código requiere modularización).
módulos en ES6
como usted puede saber, no había soporte de módulos nativos en JavaScript antes de ES6., A la gente se le ocurrió AMD, RequireJS, CommonJS y otras soluciones, pero eran solo eso: soluciones y hacks. Con ES6 ahora hay módulos integrados con operandos de importación y exportación.
en ES5, usarías etiquetas <script> con IIFE, o una biblioteca como AMD, mientras que en ES6 puedes exponer tu clase con export. Desde que soy un nodo.JS guy así que usaré CommonJS, que también es un nodo.sintaxis js, para resolver este problema. Es bastante sencillo utilizar CommonJS en el navegador con el Browserify bundler., Digamos que tenemos variable de puerto y método getAccounts en módulo ES5.js:
module.exports = {
port: 3000,
getAccounts: function() {
...
}
}
en ES5 main.js, requeriríamos (‘module’) esa dependencia:
var service = require('module.js')
console.log(service.port) // 3000
en ES6, usaríamos exportar e importar. Por ejemplo, esta es nuestra biblioteca en el módulo ES6.archivo js:
export var port = 3000
export function getAccounts(url) {
...
}
en el Archivo principal ES6 del importador.js, usamos import {name} desde la sintaxis ‘my-module’., Por ejemplo, podemos importar objetos / métodos port, y getAccounts desde el módulo llamado module:
import {port, getAccounts} from 'module'
console.log(port) // 3000
o podemos importar todo como un servicio variable en main.js:
import * as service from 'module'
console.log(service.port) // 3000
tenga en cuenta que el soporte nativo para módulos ES6 en navegadores no llegará pronto (al menos al momento de escribir este artículo), por lo que necesitará algo como jspm para utilizar módulos ES6.
para obtener más información y ejemplos sobre los módulos ES6, eche un vistazo a este texto. Y recuerde, – no importa qué, escribir JavaScript modular!,
para Compreh of Comprehensions en ES6
Aquí hay un problema con ES5: cuando queremos iterar sobre objetos usando sus claves, necesitamos extraer esas claves primero con Object.claves(). Por ejemplo:
otro problema con forEach es que necesita escribir la función word. Pero hay una mejor declaración en ES6! La instrucción for replaces of reemplaza al estándar for y forEach, y es similar a for…in excepto que que for…in itera sobre claves y para…de sobre valores.,
Usando los datos del fragmento de código anterior (libros), podemos iterar usando for…in y claves o usando para for de:
for (let key in books){
console.log(books)
}
salidas las claves:
Pro Express.js
React Quickly
Full Stack JavaScript
Azat
mientras que el para work de funcionará con valores:
for (let book of books){
console.log(book)
}
la salida de Para for de:
Pro Express.js
React Quickly
Full Stack JavaScript
observe que la salida de For of of ignora el valor con key author como lo haría foreach en un array:
mi experiencia personal trabajando con comprensiones es que aumentan la legibilidad del código. Esto es fundamental para el mantenimiento del código en aplicaciones empresariales.
