ES6 for humans
1.0.0
? Panduan lengkap sekarang tersedia di Amazon
let , const dan Blokir Lingkup let Anda membuat deklarasi yang terikat pada blok apa pun, yang disebut Block Scoping. Alih -alih menggunakan var , yang menyediakan ruang lingkup fungsi, disarankan untuk menggunakan variabel scoped block ( let atau const ) di ES6.
var a = 2 ;
{
let a = 3 ;
console . log ( a ) ; // 3
let a = 5 ; // TypeError: Identifier 'a' has already been declared
}
console . log ( a ) ; // 2 Bentuk lain dari deklarasi blok-scoped adalah const , yang menciptakan konstanta. Dalam ES6, sebuah const mewakili referensi konstan ke suatu nilai. Dengan kata lain, konten Object dan Array dapat berubah, hanya penugasan kembali variabel yang dicegah. Inilah contoh sederhana:
{
const b = 5 ;
b = 10 ; // TypeError: Assignment to constant variable
const arr = [ 5 , 6 ] ;
arr . push ( 7 ) ;
console . log ( arr ) ; // [5,6,7]
arr = 10 ; // TypeError: Assignment to constant variable
arr [ 0 ] = 3 ; // value is mutable
console . log ( arr ) ; // [3,6,7]
}Beberapa hal yang perlu diingat:
let dan const bervariasi dari pengangkat variabel dan fungsi tradisional. Baik let dan const diangkat, tetapi tidak dapat diakses sebelum deklarasi mereka, karena zona mati temporallet and const dilecehkan ke blok tertutup terdekat.const PI = 3.14 )const harus didefinisikan dengan deklarasinya.const over let , kecuali Anda berencana untuk menilai kembali variabel. Fungsi panah adalah notasi singkat untuk fungsi menulis di ES6. Definisi fungsi panah terdiri dari daftar parameter ( ... ) , diikuti oleh penanda => dan badan fungsi. Untuk fungsi argumen tunggal, tanda kurung dapat dihilangkan.
// Classical Function Expression
function addition ( a , b ) {
return a + b ;
} ;
// Implementation with arrow function
const addition = ( a , b ) => a + b ;
// With single argument, no parentheses required
const add5 = a => 5 + a ; Perhatikan bahwa dalam contoh di atas, fungsi panah addition diimplementasikan dengan "badan singkat" yang tidak memerlukan pernyataan pengembalian eksplisit. Perhatikan { } yang dihilangkan setelah => .
Berikut adalah contoh dengan "bodi blok" yang biasa. Termasuk pembungkus brace keriting.
const arr = [ 'apple' , 'banana' , 'orange' ] ;
const breakfast = arr . map ( fruit => {
return fruit + 's' ;
} ) ;
console . log ( breakfast ) ; // ['apples', 'bananas', 'oranges']Melihat! Ada lagi ...
Fungsi panah tidak hanya membuat kode lebih pendek. Mereka terkait erat dengan perilaku mengikat this .
Panah fungsi perilaku dengan kata kunci this bervariasi dari fungsi normal. Setiap fungsi dalam JavaScript mendefinisikan sendiri konteks this tetapi fungsi panah menangkap nilai this dari konteks tertutup terdekat ini. Lihat kode berikut:
function Person ( ) {
// The Person() constructor defines `this` as an instance of itself.
this . age = 0 ;
setInterval ( function growUp ( ) {
// In non-strict mode, the growUp() function defines `this`
// as the global object, which is different from the `this`
// defined by the Person() constructor.
this . age ++ ;
} , 1000 ) ;
}
var p = new Person ( ) ; Dalam ecmascript 3/5, masalah ini diperbaiki dengan menetapkan nilai dalam this ke variabel yang dapat ditutup.
function Person ( ) {
const self = this ;
self . age = 0 ;
setInterval ( function growUp ( ) {
// The callback refers to the `self` variable of which
// the value is the expected object.
self . age ++ ;
} , 1000 ) ;
}Seperti disebutkan di atas, fungsi panah menangkap nilai konteks tertutup terdekat ini, sehingga kode berikut berfungsi seperti yang diharapkan, bahkan dengan fungsi panah bersarang.
function Person ( ) {
this . age = 0 ;
setInterval ( ( ) => {
setTimeout ( ( ) => {
this . age ++ ; // `this` properly refers to the person object
} , 1000 ) ;
} , 1000 ) ;
}
let p = new Person ( ) ;Baca lebih lanjut tentang 'Lexical This' di Fungsi Arrow di sini
ES6 memungkinkan Anda untuk mengatur parameter default dalam definisi fungsi. Ini adalah ilustrasi sederhana.
const getFinalPrice = ( price , tax = 0.7 ) => price + price * tax ;
getFinalPrice ( 500 ) ; // 850 ... Operator disebut sebagai Operator Spread atau REST, tergantung pada bagaimana dan di mana ia digunakan.
Ketika digunakan dengan iterable, ia bertindak sebagai "menyebarkan" menjadi elemen individu:
const makeToast = ( breadType , topping1 , topping2 ) => {
return `I had ${ breadType } toast with ${ topping1 } and ${ topping2 } ` ;
} ; const ingredients = [ 'wheat' , 'butter' , 'jam' ] ;
makeToast ( ... ingredients ) ;
// "I had wheat toast with butter and jam"
makeToast ( ... [ 'sourdough' , 'avocado' , 'kale' ] ) ;
// "I had sourdough toast with avocado and kale"Spread juga bagus untuk membentuk objek baru dari objek lain:
const defaults = { avatar : 'placeholder.jpg' , active : false }
const userData = { username : 'foo' , avatar : 'bar.jpg' }
console . log ( { created : '2017-12-31' , ... defaults , ... userData } )
// {created: "2017-12-31", avatar: "bar.jpg", active: false, username: "foo"}Array baru juga dapat dibentuk secara ekspresif:
const arr1 = [ 1 , 2 , 3 ] ;
const arr2 = [ 7 , 8 , 9 ] ;
console . log ( [ ... arr1 , 4 , 5 , 6 , ... arr2 ] ) // [1, 2, 3, 4, 5, 6, 7, 8, 9] Penggunaan umum lainnya dari ... adalah mengumpulkan semua argumen menjadi array. Ini disebut sebagai operator "istirahat".
function foo ( ... args ) {
console . log ( args ) ;
}
foo ( 1 , 2 , 3 , 4 , 5 ) ; // [1, 2, 3, 4, 5]ES6 memungkinkan mendeklarasikan literal objek dengan memberikan sintaks steno untuk menginisialisasi properti dari variabel dan mendefinisikan metode fungsi. Ini juga memungkinkan kemampuan untuk menghitung kunci properti dalam definisi literal objek.
function getCar ( make , model , value ) {
return {
// with property value shorthand
// syntax, you can omit the property
// value if key matches variable
// name
make , // same as make: make
model , // same as model: model
value , // same as value: value
// computed values now work with
// object literals
[ 'make' + make ] : true ,
// Method definition shorthand syntax
// omits `function` keyword & colon
depreciate ( ) {
this . value -= 2500 ;
}
} ;
}
let car = getCar ( 'Kia' , 'Sorento' , 40000 ) ;
console . log ( car ) ;
// {
// make: 'Kia',
// model:'Sorento',
// value: 40000,
// makeKia: true,
// depreciate: function()
// } ES6 memiliki dukungan baru untuk literal oktal dan biner. PREPENDENGEN AMER DENGAN 0o atau 0O akan mengubahnya menjadi nilai oktal. Lihat kode berikut:
let oValue = 0o10 ;
console . log ( oValue ) ; // 8
let bValue = 0b10 ; // 0b or 0B for binary
console . log ( bValue ) ; // 2Penghancuran membantu dalam menghindari kebutuhan akan variabel suhu saat berhadapan dengan objek dan array.
function foo ( ) {
return [ 1 , 2 , 3 ] ;
}
let arr = foo ( ) ; // [1,2,3]
let [ a , b , c ] = foo ( ) ;
console . log ( a , b , c ) ; // 1 2 3 function getCar ( ) {
return {
make : 'Tesla' ,
model : 'g95' ,
metadata : {
vin : '123abc' ,
miles : '12000'
}
} ;
}
const { make , model } = getCar ( ) ;
console . log ( make , model ) ; // Tesla g95
const { make , metadata : { miles } } = getCar ( ) ;
console . log ( make , miles ) ; // Tesla 12000
ES6 memungkinkan untuk menggunakan metode super dalam objek (tanpa kelas) dengan prototipe. Berikut ini adalah contoh sederhana:
const parent = {
foo ( ) {
console . log ( "Hello from the Parent" ) ;
}
}
const child = {
foo ( ) {
super . foo ( ) ;
console . log ( "Hello from the Child" ) ;
}
}
Object . setPrototypeOf ( child , parent ) ;
child . foo ( ) ; // Hello from the Parent
// Hello from the ChildES6 memperkenalkan cara yang lebih mudah untuk menambahkan interpolasi yang dievaluasi secara otomatis.
`${ ... }` digunakan untuk rendering variabel.` Backtick digunakan sebagai pembatas. let user = 'Kevin' ;
console . log ( `Hi ${ user } !` ) ; // Hi Kevin!for...of iterasi atas objek yang dapat diulang, seperti array. const nicknames = [ 'di' , 'boo' , 'punkeye' ] ;
nicknames . size = 3 ;
for ( let nickname of nicknames ) {
console . log ( nickname ) ;
}
// di
// boo
// punkeyefor...in iterasi atas semua sifat yang dapat dihindarkan dari suatu objek. const nicknames = [ 'di' , 'boo' , 'punkeye' ] ;
nicknames . size = 3 ;
for ( let nickname in nicknames ) {
console . log ( nickname ) ;
}
// 0
// 1
// 2
// size ES6 memperkenalkan set baru struktur data yang disebut Map dan WeakMap . Sekarang, kami benar -benar menggunakan peta di JavaScript sepanjang waktu. Bahkan setiap objek dapat dianggap sebagai Map .
Suatu objek terbuat dari kunci (selalu string) dan nilai, sedangkan di Map , nilai apa pun (baik objek dan nilai primitif) dapat digunakan sebagai kunci atau nilai. Lihat kode ini:
const myMap = new Map ( ) ;
const keyString = "a string" ,
keyObj = { } ,
keyFunc = ( ) => { } ;
// setting the values
myMap . set ( keyString , "value associated with 'a string'" ) ;
myMap . set ( keyObj , "value associated with keyObj" ) ;
myMap . set ( keyFunc , "value associated with keyFunc" ) ;
myMap . size ; // 3
// getting the values
myMap . get ( keyString ) ; // "value associated with 'a string'"
myMap . get ( keyObj ) ; // "value associated with keyObj"
myMap . get ( keyFunc ) ; // "value associated with keyFunc"Lemah
WeakMap adalah peta di mana kunci dirujuk dengan lemah, yang tidak mencegah kuncinya dikumpulkan. Itu berarti Anda tidak perlu khawatir tentang kebocoran memori.
Hal lain yang perlu diperhatikan di sini- di WeakMap yang berlawanan dengan Map setiap kunci harus menjadi objek .
A WeakMap hanya memiliki empat metode delete(key) , has(key) , get(key) dan set(key, value) .
const w = new WeakMap ( ) ;
w . set ( 'a' , 'b' ) ;
// Uncaught TypeError: Invalid value used as weak map key
const o1 = { } ,
o2 = ( ) => { } ,
o3 = window ;
w . set ( o1 , 37 ) ;
w . set ( o2 , "azerty" ) ;
w . set ( o3 , undefined ) ;
w . get ( o3 ) ; // undefined, because that is the set value
w . has ( o1 ) ; // true
w . delete ( o1 ) ;
w . has ( o1 ) ; // falseAtur objek adalah koleksi nilai unik. Nilai duplikat diabaikan, karena koleksi harus memiliki semua nilai unik. Nilai dapat berupa tipe primitif atau referensi objek.
const mySet = new Set ( [ 1 , 1 , 2 , 2 , 3 , 3 ] ) ;
mySet . size ; // 3
mySet . has ( 1 ) ; // true
mySet . add ( 'strings' ) ;
mySet . add ( { a : 1 , b : 2 } ) ; Anda dapat mengulangi satu set dengan pesanan penyisipan menggunakan metode forEach atau for...of loop.
mySet . forEach ( ( item ) => {
console . log ( item ) ;
// 1
// 2
// 3
// 'strings'
// Object { a: 1, b: 2 }
} ) ;
for ( let value of mySet ) {
console . log ( value ) ;
// 1
// 2
// 3
// 'strings'
// Object { a: 1, b: 2 }
} Set juga memiliki metode delete() dan clear() .
Lemah
Mirip dengan WeakMap , objek WeakSet memungkinkan Anda menyimpan objek yang dipegang dengan lemah dalam sebuah koleksi. Objek dalam WeakSet hanya terjadi sekali; Ini unik dalam koleksi Lemari.
const ws = new WeakSet ( ) ;
const obj = { } ;
const foo = { } ;
ws . add ( window ) ;
ws . add ( obj ) ;
ws . has ( window ) ; // true
ws . has ( foo ) ; // false, foo has not been added to the set
ws . delete ( window ) ; // removes window from the set
ws . has ( window ) ; // false, window has been removedES6 memperkenalkan sintaks kelas baru. Satu hal yang perlu diperhatikan di sini adalah bahwa kelas ES6 bukan model warisan yang berorientasi objek baru. Mereka hanya berfungsi sebagai gula sintaksis di atas pewarisan berbasis prototipe Javascript yang ada.
Salah satu cara untuk melihat kelas di ES6 hanyalah sintaks baru untuk bekerja dengan prototipe dan fungsi konstruktor yang akan kami gunakan di ES5.
Fungsi yang didefinisikan menggunakan kata kunci static mengimplementasikan fungsi statis/kelas pada kelas.
class Task {
constructor ( ) {
console . log ( "task instantiated!" ) ;
}
showId ( ) {
console . log ( 23 ) ;
}
static loadAll ( ) {
console . log ( "Loading all tasks.." ) ;
}
}
console . log ( typeof Task ) ; // function
const task = new Task ( ) ; // "task instantiated!"
task . showId ( ) ; // 23
Task . loadAll ( ) ; // "Loading all tasks.."meluas dan super di kelas
Pertimbangkan kode berikut:
class Car {
constructor ( ) {
console . log ( "Creating a new car" ) ;
}
}
class Porsche extends Car {
constructor ( ) {
super ( ) ;
console . log ( "Creating Porsche" ) ;
}
}
let c = new Porsche ( ) ;
// Creating a new car
// Creating Porsche extends Izinkan kelas anak untuk mewarisi dari kelas orang tua di ES6. Penting untuk dicatat bahwa konstruktor yang diturunkan harus memanggil super() .
Anda juga dapat memanggil metode kelas orang tua dalam metode kelas anak menggunakan super.parentMethodName()
Baca lebih lanjut tentang kelas di sini
Beberapa hal yang perlu diingat:
function saat mendefinisikan fungsi di dalam definisi kelas. Symbol adalah tipe data yang unik dan tidak berubah yang diperkenalkan di ES6. Tujuan simbol adalah untuk menghasilkan pengidentifikasi yang unik tetapi Anda tidak akan pernah bisa mendapatkan akses ke pengidentifikasi itu.
Inilah cara Anda membuat simbol:
const sym = Symbol ( "some optional description" ) ;
console . log ( typeof sym ) ; // symbol Perhatikan bahwa Anda tidak dapat menggunakan new dengan Symbol(…) .
Jika simbol digunakan sebagai properti/kunci dari suatu objek, itu disimpan dengan cara khusus bahwa properti tidak akan muncul dalam enumerasi normal dari properti objek.
const o = {
val : 10 ,
[ Symbol ( "random" ) ] : "I'm a symbol" ,
} ;
console . log ( Object . getOwnPropertyNames ( o ) ) ; // val Untuk mengambil properti simbol objek, gunakan Object.getOwnPropertySymbols(o)
Iterator mengakses item dari koleksi satu per satu, sambil melacak posisi saat ini dalam urutan itu. Ini menyediakan metode next() yang mengembalikan item berikutnya dalam urutan. Metode ini mengembalikan objek dengan dua properti: selesai dan nilai.
ES6 memiliki Symbol.iterator yang menentukan iterator default untuk suatu objek. Setiap kali suatu objek perlu diulang (seperti pada awal loop untuk..of loop), metode @@ iteratornya dipanggil tanpa argumen, dan iterator yang dikembalikan digunakan untuk mendapatkan nilai yang akan diulang.
Mari kita lihat array, yang merupakan iterable, dan iterator yang dapat dihasilkannya untuk mengkonsumsi nilainya:
const arr = [ 11 , 12 , 13 ] ;
const itr = arr [ Symbol . iterator ] ( ) ;
itr . next ( ) ; // { value: 11, done: false }
itr . next ( ) ; // { value: 12, done: false }
itr . next ( ) ; // { value: 13, done: false }
itr . next ( ) ; // { value: undefined, done: true } Perhatikan bahwa Anda dapat menulis iterator khusus dengan mendefinisikan obj[Symbol.iterator]() dengan definisi objek.
Fungsi generator adalah fitur baru di ES6 yang memungkinkan fungsi untuk menghasilkan banyak nilai dari waktu ke waktu dengan mengembalikan objek yang dapat diulangi untuk menarik nilai dari fungsi satu nilai pada satu waktu.
Fungsi generator mengembalikan objek iterable ketika dipanggil. Ini ditulis menggunakan sintaks * baru serta kata kunci yield baru yang diperkenalkan di ES6.
function * infiniteNumbers ( ) {
let n = 1 ;
while ( true ) {
yield n ++ ;
}
}
const numbers = infiniteNumbers ( ) ; // returns an iterable object
numbers . next ( ) ; // { value: 1, done: false }
numbers . next ( ) ; // { value: 2, done: false }
numbers . next ( ) ; // { value: 3, done: false }Setiap kali hasil dipanggil, nilai yang dihasilkan menjadi nilai berikutnya dalam urutan.
Juga, perhatikan bahwa generator menghitung nilai yang dihasilkan berdasarkan permintaan, yang memungkinkan mereka untuk secara efisien mewakili urutan yang mahal untuk menghitung, atau bahkan urutan yang tak terbatas.
ES6 memiliki dukungan asli untuk janji. Janji adalah objek yang menunggu operasi asinkron untuk menyelesaikan, dan ketika operasi itu selesai, janji itu terpenuhi (diselesaikan) atau ditolak.
Cara standar untuk membuat janji adalah dengan menggunakan konstruktor new Promise() yang menerima pawang yang diberikan dua fungsi sebagai parameter. Handler pertama (biasanya dinamai resolve ) adalah fungsi untuk menelepon dengan nilai masa depan saat siap; Dan pawang kedua (biasanya bernama reject ) adalah fungsi untuk menelepon untuk menolak janji jika tidak dapat menyelesaikan nilai masa depan.
const p = new Promise ( ( resolve , reject ) => {
if ( /* condition */ ) {
resolve ( /* value */ ) ; // fulfilled successfully
} else {
reject ( /* reason */ ) ; // error, rejected
}
} ) ; Setiap janji memiliki metode bernama then yang mengambil sepasang panggilan balik. Panggilan balik pertama dipanggil jika janji diselesaikan, sedangkan yang kedua dipanggil jika janji itu ditolak.
p . then ( ( val ) => console . log ( "Promise Resolved" , val ) ,
( err ) => console . log ( "Promise Rejected" , err ) ) ; Mengembalikan nilai dari callback then akan memberikan nilai ke yang berikutnya then panggilan balik.
const hello = new Promise ( ( resolve , reject ) => { resolve ( "Hello" ) } ) ;
hello . then ( ( str ) => ` ${ str } World` )
. then ( ( str ) => ` ${ str } !` )
. then ( ( str ) => console . log ( str ) ) // Hello World!Ketika mengembalikan janji, nilai yang diselesaikan dari janji akan diteruskan ke panggilan balik berikutnya untuk secara efektif mengikat mereka bersama. Ini adalah teknik sederhana untuk menghindari "neraka callback".
const p = new Promise ( ( resolve , reject ) => { resolve ( 1 ) } ) ;
const eventuallyAdd1 = ( val ) => new Promise ( ( resolve , reject ) => { resolve ( val + 1 ) } ) ;
p . then ( eventuallyAdd1 )
. then ( eventuallyAdd1 )
. then ( ( val ) => console . log ( val ) ) ; // 3
