es6features
1.0.0
ECMAScript 6, também conhecido como ECMAScript 2015, é a versão mais recente do padrão ECMAScript. ES6 é uma atualização significativa da linguagem e a primeira atualização da linguagem desde que o ES5 foi padronizado em 2009. A implementação desses recursos nos principais mecanismos JavaScript está em andamento.
Consulte o padrão ES6 para especificações completas da linguagem ECMAScript 6.
ES6 inclui os seguintes novos recursos:
As setas são uma abreviação de função usando a sintaxe => . Eles são sintaticamente semelhantes ao recurso relacionado em C#, Java 8 e CoffeeScript. Eles suportam tanto corpos de blocos de instruções quanto corpos de expressões que retornam o valor da expressão. Ao contrário das funções, as setas compartilham o mesmo léxico this do código circundante.
// Expression bodies
var odds = evens . map ( v => v + 1 ) ;
var nums = evens . map ( ( v , i ) => v + i ) ;
var pairs = evens . map ( v => ( { even : v , odd : v + 1 } ) ) ;
// Statement bodies
nums . forEach ( v => {
if ( v % 5 === 0 )
fives . push ( v ) ;
} ) ;
// Lexical this
var bob = {
_name : "Bob" ,
_friends : [ ] ,
printFriends ( ) {
this . _friends . forEach ( f =>
console . log ( this . _name + " knows " + f ) ) ;
}
}Mais informações: Funções de seta MDN
As classes ES6 são um açúcar simples em relação ao padrão OO baseado em protótipo. Ter um único formulário declarativo conveniente torna os padrões de classe mais fáceis de usar e incentiva a interoperabilidade. As classes suportam herança baseada em protótipo, superchamadas, métodos e construtores de instância e estáticos.
class SkinnedMesh extends THREE . Mesh {
constructor ( geometry , materials ) {
super ( geometry , materials ) ;
this . idMatrix = SkinnedMesh . defaultMatrix ( ) ;
this . bones = [ ] ;
this . boneMatrices = [ ] ;
//...
}
update ( camera ) {
//...
super . update ( ) ;
}
get boneCount ( ) {
return this . bones . length ;
}
set matrixType ( matrixType ) {
this . idMatrix = SkinnedMesh [ matrixType ] ( ) ;
}
static defaultMatrix ( ) {
return new THREE . Matrix4 ( ) ;
}
}Mais informações: Aulas MDN
Literais de objeto são estendidos para suportar a configuração do protótipo na construção, abreviação de foo: foo , definição de métodos, realização de superchamadas e cálculo de nomes de propriedades com expressões. Juntos, eles também aproximam os literais de objetos e as declarações de classe e permitem que o design baseado em objetos se beneficie de algumas das mesmas conveniências.
var obj = {
// __proto__
__proto__ : theProtoObj ,
// Shorthand for ‘handler: handler’
handler ,
// Methods
toString ( ) {
// Super calls
return "d " + super . toString ( ) ;
} ,
// Computed (dynamic) property names
[ 'prop_' + ( ( ) => 42 ) ( ) ] : 42
} ;Mais informações: Gramática e tipos MDN: literais de objeto
Strings de modelo fornecem açúcar sintático para a construção de strings. Isso é semelhante aos recursos de interpolação de strings em Perl, Python e muito mais. Opcionalmente, uma tag pode ser adicionada para permitir que a construção da string seja customizada, evitando ataques de injeção ou construindo estruturas de dados de nível superior a partir do conteúdo da string.
// Basic literal string creation
`In JavaScript 'n' is a line-feed.`
// Multiline strings
`In JavaScript this is
not legal.`
// String interpolation
var name = "Bob" , time = "today" ;
`Hello ${ name } , how are you ${ time } ?`
// Construct an HTTP request prefix is used to interpret the replacements and construction
POST `http://foo.org/bar?a= ${ a } &b= ${ b }
Content-Type: application/json
X-Credentials: ${ credentials }
{ "foo": ${ foo } ,
"bar": ${ bar } }` ( myOnReadyStateChangeHandler ) ;Mais informações: Strings de modelo MDN
A desestruturação permite vinculação usando correspondência de padrões, com suporte para correspondência de matrizes e objetos. A desestruturação é suave, semelhante à pesquisa de objeto padrão foo["bar"] , produzindo valores undefined quando não encontrados.
// list matching
var [ a , , b ] = [ 1 , 2 , 3 ] ;
// object matching
var { op : a , lhs : { op : b } , rhs : c }
= getASTNode ( )
// object matching shorthand
// binds `op`, `lhs` and `rhs` in scope
var { op , lhs , rhs } = getASTNode ( )
// Can be used in parameter position
function g ( { name : x } ) {
console . log ( x ) ;
}
g ( { name : 5 } )
// Fail-soft destructuring
var [ a ] = [ ] ;
a === undefined ;
// Fail-soft destructuring with defaults
var [ a = 1 ] = [ ] ;
a === 1 ;Mais informações: Atribuição de desestruturação MDN
Valores de parâmetros padrão avaliados pelo chamador. Transforme um array em argumentos consecutivos em uma chamada de função. Vincule parâmetros finais a uma matriz. Rest substitui a necessidade de arguments e aborda casos comuns de forma mais direta.
function f ( x , y = 12 ) {
// y is 12 if not passed (or passed as undefined)
return x + y ;
}
f ( 3 ) == 15 function f ( x , ... y ) {
// y is an Array
return x * y . length ;
}
f ( 3 , "hello" , true ) == 6 function f ( x , y , z ) {
return x + y + z ;
}
// Pass each elem of array as argument
f ( ... [ 1 , 2 , 3 ] ) == 6Mais informações sobre MDN: Parâmetros padrão, Parâmetros restantes, Operador Spread
Construções de ligação com escopo de bloco. let é o novo var . const é uma atribuição única. Restrições estáticas impedem o uso antes da atribuição.
function f ( ) {
{
let x ;
{
// okay, block scoped name
const x = "sneaky" ;
// error, const
x = "foo" ;
}
// error, already declared in block
let x = "inner" ;
}
}Mais informações sobre MDN: instrução let, instrução const
Os objetos Iterator permitem iteração personalizada como CLR IEnumerable ou Java Iterable. Generalize for..in para iteração personalizada baseada em iterador com for..of . Não requer a realização de um array, permitindo padrões de design preguiçosos como LINQ.
let fibonacci = {
[ Symbol . iterator ] ( ) {
let pre = 0 , cur = 1 ;
return {
next ( ) {
[ pre , cur ] = [ cur , pre + cur ] ;
return { done : false , value : cur }
}
}
}
}
for ( var n of fibonacci ) {
// truncate the sequence at 1000
if ( n > 1000 )
break ;
console . log ( n ) ;
}A iteração é baseada nestas interfaces do tipo duck (usando a sintaxe do tipo TypeScript apenas para exposição):
interface IteratorResult {
done : boolean ;
value : any ;
}
interface Iterator {
next ( ) : IteratorResult ;
}
interface Iterable {
[ Symbol . iterator ] ( ) : Iterator
}Mais informações: MDN para...de
Os geradores simplificam a criação de iteradores usando function* e yield . Uma função declarada como function* retorna uma instância do Generator. Geradores são subtipos de iteradores que incluem next e throw adicionais. Isso permite que os valores fluam de volta para o gerador, portanto, yield é uma forma de expressão que retorna um valor (ou lança).
Nota: Também pode ser usado para ativar a programação assíncrona do tipo 'await', consulte também a proposta await do ES7.
var fibonacci = {
[ Symbol . iterator ] : function * ( ) {
var pre = 0 , cur = 1 ;
for ( ; ; ) {
var temp = pre ;
pre = cur ;
cur += temp ;
yield cur ;
}
}
}
for ( var n of fibonacci ) {
// truncate the sequence at 1000
if ( n > 1000 )
break ;
console . log ( n ) ;
}A interface do gerador é (usando a sintaxe do tipo TypeScript apenas para exposição):
interface Generator extends Iterator {
next ( value ?: any ) : IteratorResult ;
throw ( exception : any ) ;
}Mais informações: Protocolos de iteração MDN
Adições ininterruptas para suportar Unicode completo, incluindo nova forma literal Unicode em strings e novo modo RegExp u para lidar com pontos de código, bem como novas APIs para processar strings no nível de pontos de código de 21 bits. Essas adições oferecem suporte à construção de aplicativos globais em JavaScript.
// same as ES5.1
"?" . length == 2
// new RegExp behaviour, opt-in ‘u’
"?" . match ( / . / u ) [ 0 ] . length == 2
// new form
"u{20BB7}" == "?" == "uD842uDFB7"
// new String ops
"?" . codePointAt ( 0 ) == 0x20BB7
// for-of iterates code points
for ( var c of "?" ) {
console . log ( c ) ;
}Mais informações: MDN RegExp.prototype.unicode
Suporte em nível de linguagem para módulos para definição de componentes. Codifica padrões de carregadores de módulos JavaScript populares (AMD, CommonJS). Comportamento de tempo de execução definido por um carregador padrão definido pelo host. Modelo implicitamente assíncrono – nenhum código é executado até que os módulos solicitados estejam disponíveis e processados.
// lib/math.js
export function sum ( x , y ) {
return x + y ;
}
export var pi = 3.141593 ; // app.js
import * as math from "lib/math" ;
alert ( "2π = " + math . sum ( math . pi , math . pi ) ) ; // otherApp.js
import { sum , pi } from "lib/math" ;
alert ( "2π = " + sum ( pi , pi ) ) ; Alguns recursos adicionais incluem export default e export * :
// lib/mathplusplus.js
export * from "lib/math" ;
export var e = 2.71828182846 ;
export default function ( x ) {
return Math . log ( x ) ;
} // app.js
import ln , { pi , e } from "lib/mathplusplus" ;
alert ( "2π = " + ln ( e ) * pi * 2 ) ;Mais informações sobre MDN: declaração de importação, declaração de exportação
Suporte para carregadores de módulo:
O carregador de módulo padrão pode ser configurado e novos carregadores podem ser construídos para avaliar e carregar código em contextos isolados ou restritos.
// Dynamic loading – ‘System’ is default loader
System . import ( 'lib/math' ) . then ( function ( m ) {
alert ( "2π = " + m . sum ( m . pi , m . pi ) ) ;
} ) ;
// Create execution sandboxes – new Loaders
var loader = new Loader ( {
global : fixup ( window ) // replace ‘console.log’
} ) ;
loader . eval ( "console.log('hello world!');" ) ;
// Directly manipulate module cache
System . get ( 'jquery' ) ;
System . set ( 'jquery' , Module ( { $ : $ } ) ) ; // WARNING: not yet finalizedEstruturas de dados eficientes para algoritmos comuns. WeakMaps fornece tabelas laterais com chave de objeto sem vazamentos.
// Sets
var s = new Set ( ) ;
s . add ( "hello" ) . add ( "goodbye" ) . add ( "hello" ) ;
s . size === 2 ;
s . has ( "hello" ) === true ;
// Maps
var m = new Map ( ) ;
m . set ( "hello" , 42 ) ;
m . set ( s , 34 ) ;
m . get ( s ) == 34 ;
// Weak Maps
var wm = new WeakMap ( ) ;
wm . set ( s , { extra : 42 } ) ;
wm . size === undefined
// Weak Sets
var ws = new WeakSet ( ) ;
ws . add ( { data : 42 } ) ;
// Because the added object has no other references, it will not be held in the setMais informações sobre MDN: Mapa, Conjunto, WeakMap, WeakSet
Os proxies permitem a criação de objetos com toda a gama de comportamentos disponíveis para hospedar objetos. Pode ser usado para interceptação, virtualização de objetos, registro/criação de perfil, etc.
// Proxying a normal object
var target = { } ;
var handler = {
get : function ( receiver , name ) {
return `Hello, ${ name } !` ;
}
} ;
var p = new Proxy ( target , handler ) ;
p . world === 'Hello, world!' ; // Proxying a function object
var target = function ( ) { return 'I am the target' ; } ;
var handler = {
apply : function ( receiver , ... args ) {
return 'I am the proxy' ;
}
} ;
var p = new Proxy ( target , handler ) ;
p ( ) === 'I am the proxy' ;Existem armadilhas disponíveis para todas as metaoperações em nível de tempo de execução:
var handler =
{
get :... ,
set :... ,
has :... ,
deleteProperty :... ,
apply :... ,
construct :... ,
getOwnPropertyDescriptor :... ,
defineProperty :... ,
getPrototypeOf :... ,
setPrototypeOf :... ,
enumerate :... ,
ownKeys :... ,
preventExtensions :... ,
isExtensible :...
}Mais informações: Proxy MDN
Os símbolos permitem o controle de acesso ao estado do objeto. Os símbolos permitem que as propriedades sejam codificadas por string (como no ES5) ou symbol . Os símbolos são um novo tipo primitivo. Parâmetro description opcional usado na depuração - mas não faz parte da identidade. Os símbolos são únicos (como gensym), mas não são privados, pois são expostos por meio de recursos de reflexão como Object.getOwnPropertySymbols .
var MyClass = ( function ( ) {
// module scoped symbol
var key = Symbol ( "key" ) ;
function MyClass ( privateData ) {
this [ key ] = privateData ;
}
MyClass . prototype = {
doStuff : function ( ) {
... this [ key ] . . .
}
} ;
return MyClass ;
} ) ( ) ;
var c = new MyClass ( "hello" )
c [ "key" ] === undefinedMais informações: Símbolo MDN
No ES6, recursos integrados como Array , Date e DOM Element s podem ser subclassificados.
A construção de objetos para uma função chamada Ctor agora usa duas fases (ambas despachadas virtualmente):
Ctor[@@create] para alocar o objeto, instalando qualquer comportamento especial O símbolo @@create conhecido está disponível via Symbol.create . Os integrados agora expõem seu @@create explicitamente.
// Pseudo-code of Array
class Array {
constructor ( ... args ) { /* ... */ }
static [ Symbol . create ] ( ) {
// Install special [[DefineOwnProperty]]
// to magically update 'length'
}
}
// User code of Array subclass
class MyArray extends Array {
constructor ( ... args ) { super ( ... args ) ; }
}
// Two-phase 'new':
// 1) Call @@create to allocate object
// 2) Invoke constructor on new instance
var arr = new MyArray ( ) ;
arr [ 1 ] = 12 ;
arr . length == 2Muitas novas adições à biblioteca, incluindo bibliotecas básicas de matemática, auxiliares de conversão de array, auxiliares de string e Object.assign para cópia.
