es6features
1.0.0
ECMAScript 6, juga dikenal sebagai ECMAScript 2015, adalah versi terbaru dari standar ECMAScript. ES6 adalah pembaruan signifikan pada bahasa ini, dan pembaruan pertama pada bahasa tersebut sejak ES5 distandarisasi pada tahun 2009. Implementasi fitur-fitur ini di mesin JavaScript utama sedang berlangsung sekarang.
Lihat standar ES6 untuk spesifikasi lengkap bahasa ECMAScript 6.
ES6 menyertakan fitur baru berikut:
Panah adalah singkatan fungsi yang menggunakan sintaks => . Mereka secara sintaksis mirip dengan fitur terkait di C#, Java 8 dan CoffeeScript. Mereka mendukung badan blok pernyataan serta badan ekspresi yang mengembalikan nilai ekspresi. Tidak seperti fungsi, panah memiliki leksikal yang this dengan kode di sekitarnya.
// 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 ) ) ;
}
}Info lebih lanjut: Fungsi Panah MDN
Kelas ES6 adalah contoh sederhana dari pola OO berbasis prototipe. Memiliki satu bentuk deklaratif yang mudah digunakan membuat pola kelas lebih mudah digunakan, dan mendorong interoperabilitas. Kelas mendukung pewarisan berbasis prototipe, panggilan super, metode instan dan statis, serta konstruktor.
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 ( ) ;
}
}Info lebih lanjut: Kelas MDN
Literal objek diperluas untuk mendukung pengaturan prototipe pada konstruksi, singkatan dari foo: foo , mendefinisikan metode, membuat panggilan super, dan menghitung nama properti dengan ekspresi. Bersama-sama, hal ini juga mendekatkan literal objek dan deklarasi kelas, dan memungkinkan desain berbasis objek mendapatkan keuntungan dari beberapa kemudahan yang sama.
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
} ;Info lebih lanjut: Tata Bahasa dan tipe MDN: Literal objek
String templat menyediakan gula sintaksis untuk membuat string. Ini mirip dengan fitur interpolasi string di Perl, Python, dan lainnya. Secara opsional, tag dapat ditambahkan untuk memungkinkan konstruksi string disesuaikan, menghindari serangan injeksi atau membangun struktur data tingkat yang lebih tinggi dari konten 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 ) ;Info lebih lanjut: String Templat MDN
Destrukturisasi memungkinkan pengikatan menggunakan pencocokan pola, dengan dukungan untuk pencocokan array dan objek. Pengrusakan bersifat lunak, mirip dengan pencarian objek standar foo["bar"] , menghasilkan nilai undefined ketika tidak ditemukan.
// 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 ;Info lebih lanjut: Penugasan Destrukturisasi MDN
Nilai parameter default yang dievaluasi oleh Callee. Ubah array menjadi argumen berurutan dalam pemanggilan fungsi. Ikat parameter tambahan ke array. Istirahat menggantikan kebutuhan akan arguments dan menangani kasus-kasus umum secara lebih langsung.
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 ] ) == 6Info MDN lebih lanjut: Parameter default, Parameter istirahat, Operator Spread
Konstruksi pengikatan cakupan blok. let var baru. const adalah tugas tunggal. Pembatasan statis mencegah penggunaan sebelum penugasan.
function f ( ) {
{
let x ;
{
// okay, block scoped name
const x = "sneaky" ;
// error, const
x = "foo" ;
}
// error, already declared in block
let x = "inner" ;
}
}Info MDN lebih lanjut: pernyataan let, pernyataan const
Objek Iterator mengaktifkan iterasi khusus seperti CLR IEnumerable atau Java Iterable. Generalisasikan for..in ke iterasi berbasis iterator khusus dengan for..of . Tidak perlu mewujudkan array, mengaktifkan pola desain malas seperti 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 ) ;
}Iterasi didasarkan pada antarmuka tipe bebek berikut (menggunakan sintaksis tipe TypeScript untuk eksposisi saja):
interface IteratorResult {
done : boolean ;
value : any ;
}
interface Iterator {
next ( ) : IteratorResult ;
}
interface Iterable {
[ Symbol . iterator ] ( ) : Iterator
}Info lebih lanjut: MDN untuk...dari
Generator menyederhanakan pembuatan iterator menggunakan function* dan yield . Fungsi yang dideklarasikan sebagai function* mengembalikan instance Generator. Generator adalah subtipe iterator yang menyertakan tambahan next dan throw . Hal ini memungkinkan nilai mengalir kembali ke generator, sehingga yield adalah bentuk ekspresi yang mengembalikan nilai (atau lemparan).
Catatan: Dapat juga digunakan untuk mengaktifkan pemrograman async seperti 'menunggu', lihat juga proposal await 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 ) ;
}Antarmuka generatornya adalah (menggunakan sintaks tipe TypeScript untuk eksposisi saja):
interface Generator extends Iterator {
next ( value ?: any ) : IteratorResult ;
throw ( exception : any ) ;
}Info lebih lanjut: Protokol Iterasi MDN
Penambahan non-breaking untuk mendukung Unicode penuh, termasuk bentuk literal Unicode baru dalam string dan mode RegExp u baru untuk menangani titik kode, serta API baru untuk memproses string pada tingkat titik kode 21bit. Penambahan ini mendukung pembuatan aplikasi global dalam 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 ) ;
}Info lebih lanjut: MDN RegExp.prototype.unicode
Dukungan tingkat bahasa untuk modul untuk definisi komponen. Mengkodifikasi pola dari pemuat modul JavaScript populer (AMD, CommonJS). Perilaku waktu proses ditentukan oleh pemuat default yang ditentukan host. Model asinkron secara implisit – tidak ada kode yang dieksekusi hingga modul yang diminta tersedia dan diproses.
// 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 ) ) ; Beberapa fitur tambahan termasuk export default dan 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 ) ;Info MDN lebih lanjut: pernyataan impor, pernyataan ekspor
Dukungan pemuat modul:
Pemuat modul default dapat dikonfigurasi, dan pemuat baru dapat dibuat untuk mengevaluasi dan memuat kode dalam konteks terisolasi atau terbatas.
// 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 finalizedStruktur data yang efisien untuk algoritma umum. WeakMaps menyediakan tabel samping dengan kunci objek yang bebas kebocoran.
// 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 setInfo MDN lebih lanjut: Peta, Set, WeakMap, WeakSet
Proksi memungkinkan pembuatan objek dengan berbagai perilaku yang tersedia untuk menghosting objek. Dapat digunakan untuk intersepsi, virtualisasi objek, logging/profiling, dll.
// 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' ;Ada jebakan yang tersedia untuk semua operasi meta tingkat runtime:
var handler =
{
get :... ,
set :... ,
has :... ,
deleteProperty :... ,
apply :... ,
construct :... ,
getOwnPropertyDescriptor :... ,
defineProperty :... ,
getPrototypeOf :... ,
setPrototypeOf :... ,
enumerate :... ,
ownKeys :... ,
preventExtensions :... ,
isExtensible :...
}Info lebih lanjut: Proksi MDN
Simbol mengaktifkan kontrol akses untuk status objek. Simbol memungkinkan properti dikunci dengan string (seperti pada ES5) atau symbol . Simbol adalah tipe primitif baru. Parameter description opsional digunakan dalam proses debug - tetapi bukan bagian dari identitas. Simbol bersifat unik (seperti gensym), tetapi tidak bersifat pribadi karena diekspos melalui fitur refleksi seperti 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" ] === undefinedInfo lebih lanjut: Simbol MDN
Di ES6, bawaan seperti Array , Date dan DOM Element dapat disubklasifikasikan.
Konstruksi objek untuk fungsi bernama Ctor sekarang menggunakan dua fase (keduanya dikirim secara virtual):
Ctor[@@create] untuk mengalokasikan objek, memasang perilaku khusus apa pun Simbol @@create yang dikenal tersedia melalui Symbol.create . Bawaan sekarang mengekspos @@create secara eksplisit.
// 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 == 2Banyak tambahan perpustakaan baru, termasuk perpustakaan inti Matematika, pembantu konversi Array, pembantu String, dan Object.assign untuk penyalinan.
