Home-theater-designers
ES6 mengacu pada versi 6 dari bahasa pemrograman ECMA Script. ECMA Script adalah nama standar untuk JavaScript , dan versi 6 adalah versi berikutnya setelah versi 5, yang dirilis pada tahun 2011. Ini adalah peningkatan besar pada bahasa JavaScript, dan menambahkan lebih banyak fitur yang dimaksudkan untuk mempermudah pengembangan perangkat lunak skala besar .
ECMAScript, atau ES6, diterbitkan pada Juni 2015. Kemudian diubah namanya menjadi ECMAScript 2015. Dukungan browser web untuk bahasa lengkap belum lengkap, meskipun sebagian besar didukung. Browser web utama mendukung beberapa fitur ES6. Namun, dimungkinkan untuk menggunakan perangkat lunak yang dikenal sebagai pemain untuk mengonversi kode ES6 menjadi ES5, yang lebih baik didukung di sebagian besar browser.
Sekarang mari kita lihat beberapa perubahan besar yang dibawa ES6 ke JavaScript.
1. Konstanta
Akhirnya konsep konstanta telah berhasil menjadi JavaScript! Konstanta adalah nilai yang dapat didefinisikan hanya sekali (per ruang lingkup, ruang lingkup dijelaskan di bawah). Definisi ulang dalam lingkup yang sama memicu kesalahan.
const JOE = 4.0
JOE= 3.5
// results in: Uncaught TypeError: Assignment to constant variable.
Anda dapat menggunakan konstanta di mana pun Anda dapat menggunakan variabel ( di mana ).
console.log('Value is: ' + joe * 2)
// prints: 8
2. Variabel dan Fungsi Cakupan Blok
Selamat datang di abad ke-21, JavaScript! Dengan ES6, variabel dideklarasikan menggunakan membiarkan (dan konstanta dijelaskan di atas) ikuti aturan pelingkupan blok seperti di Java, C++, dll. (Untuk mempelajari lebih lanjut, lihat cara mendeklarasikan variabel dalam JavaScript.)
Sebelum pembaruan ini, variabel dalam JavaScript memiliki cakupan fungsi. Artinya, ketika Anda membutuhkan ruang lingkup baru untuk suatu variabel, Anda harus mendeklarasikannya di dalam suatu fungsi.
Variabel mempertahankan nilai sampai akhir blok. Setelah blok, nilai di blok luar (jika ada) dikembalikan.
bagaimana Anda mendapatkan karma di reddit?
{
let x = 'hello';
{
let x = 'world';
console.log('inner block, x = ' + x);
}
console.log('outer block, x = ' + x);
}
// prints
inner block, x = world
outer block, x = hello
Anda juga dapat mendefinisikan ulang konstanta, di dalam blok tersebut.
{
let x = 'hello';
{
const x = 4.0;
console.log('inner block, x = ' + x);
try {
x = 3.5
} catch(err) {
console.error('inner block: ' + err);
}
}
x = 'world';
console.log('outer block, x = ' + x);
}
// prints
inner block, x = 4
inner block: TypeError: Assignment to constant variable.
outer block, x = world
3. Fungsi Panah
ES6 memperkenalkan fungsi panah ke JavaScript. (Ini mirip dengan fungsi tradisional, tetapi memiliki sintaks yang lebih sederhana.) Pada contoh berikut, x adalah fungsi yang menerima parameter yang disebut ke , dan mengembalikan kenaikannya:
var x = a => a + 1;
x(4) // returns 5
Dengan menggunakan sintaks ini, Anda dapat mendefinisikan dan meneruskan argumen dalam fungsi dengan mudah.
Menggunakan dengan untuk setiap() :
[1, 2, 3, 4].forEach(a => console.log(a + ' => ' + a*a))
// prints
1 => 1
2 => 4
3 => 9
4 => 16
Tentukan fungsi yang menerima banyak argumen dengan menyertakannya dalam tanda kurung:
[22, 98, 3, 44, 67].sort((a, b) => a - b)
// returns
[3, 22, 44, 67, 98]
4. Parameter Fungsi Default
Parameter fungsi sekarang dapat dideklarasikan dengan nilai default. Berikut ini, x adalah fungsi dengan dua parameter ke dan B . Parameter kedua B diberikan nilai default 1 .
var x = (a, b = 1) => a * b
x(2)
// returns 2
x(2, 2)
// returns 4
Tidak seperti bahasa lain seperti C++ atau python, parameter dengan nilai default mungkin muncul sebelum parameter tanpa default. Perhatikan bahwa fungsi ini didefinisikan sebagai blok dengan a kembali nilai dengan cara ilustrasi.
var x = (a = 2, b) => { return a * b }
Namun argumen dicocokkan dari kiri ke kanan. Dalam seruan pertama di bawah ini, B memiliki tidak terdefinisi nilai meskipun ke telah dideklarasikan dengan nilai default. Argumen yang diteruskan dicocokkan dengan ke daripada B . Fungsi kembali NaN .
x(2)
// returns NaN
x(1, 3)
// returns 3
Ketika Anda secara eksplisit masuk tidak terdefinisi sebagai argumen, nilai default digunakan jika ada.
x(undefined, 3)
// returns 6
5. Parameter Fungsi Istirahat
Saat memanggil suatu fungsi, terkadang muncul kebutuhan untuk dapat meneruskan sejumlah argumen yang berubah-ubah, dan untuk memproses argumen-argumen ini di dalam fungsi. Kebutuhan ini ditangani oleh parameter fungsi istirahat sintaksis. Ini menyediakan cara untuk menangkap sisa argumen setelah argumen yang ditentukan menggunakan sintaks yang ditunjukkan di bawah ini. Argumen tambahan ini ditangkap dalam array.
var x = function(a, b, ...args) { console.log('a = ' + a + ', b = ' + b + ', ' + args.length + ' args left'); }
x(2, 3)
// prints
a = 2, b = 3, 0 args left
x(2, 3, 4, 5)
// prints
a = 2, b = 3, 2 args left
6. Templat String
Template string mengacu pada interpolasi variabel dan ekspresi ke dalam string menggunakan sintaks seperti perl atau shell. Template string diapit oleh karakter back-tick ( `` ). Sebaliknya tanda kutip tunggal ( ' ) atau tanda kutip ganda ( ' ) menunjukkan string normal. Ekspresi di dalam template ditandai antara $ { dan } . Berikut ini contohnya:
var name = 'joe';
var x = `hello ${name}`
// returns 'hello joe'
Tentu saja, Anda dapat menggunakan ekspresi arbitrer untuk evaluasi.
// define an arrow function
var f = a => a * 4
// set a parameter value
var v = 5
// and evaluate the function within the string template
var x = `hello ${f(v)}`
// returns 'hello 20'
Sintaks untuk mendefinisikan string ini juga dapat digunakan untuk mendefinisikan string multi-baris.
var x = `hello world
next line`
// returns
hello world
next line
7. Properti Objek
ES6 menghadirkan sintaks pembuatan objek yang disederhanakan. Perhatikan contoh di bawah ini:
var x = 'hello world', y = 25
var a = { x, y }
// is equivalent to the ES5:
{x: x, y: y}
Nama properti yang dihitung juga cukup bagus. Dengan ES5 dan sebelumnya, untuk menetapkan properti objek dengan nama yang dihitung, Anda harus melakukan ini:
var x = 'hello world', y = 25
var a = {x: x, y: y}
a['joe' + y] = 4
// a is now:
{x: 'hello world', y: 25, joe25: 4}
Sekarang Anda dapat melakukan semuanya dalam satu definisi:
var a = {x, y, ['joe' + y]: 4}
// returns
{x: 'hello world', y: 25, joe25: 4}
Dan tentu saja, untuk mendefinisikan metode, Anda cukup mendefinisikannya dengan nama:
var a = {x, y, ['joe' + y]: 4, foo(v) { return v + 4 }}
a.foo(2)
// returns
6
8. Sintaks Definisi Kelas Formal
Definisi Kelas
Dan akhirnya, JavaScript mendapatkan sintaks definisi kelas formal. Meskipun ini hanyalah gula sintaksis di atas kelas berbasis protytype yang sudah tersedia, itu berfungsi untuk meningkatkan kejelasan kode. Itu berarti ini terjadi bukan tambahkan model objek baru atau sesuatu yang mewah seperti itu.
class Circle {
constructor(radius) {
this.radius = radius
}
}
// use it
var c = new Circle(4)
// returns: Circle {radius: 4}
Mendeklarasikan Metode
Mendefinisikan metode juga cukup sederhana. Tidak ada kejutan di sana.
class Circle {
constructor(radius) {
this.radius = radius
}
computeArea() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
c.computeArea()
// returns: 50.26548245743669
Getter dan Setter
Kami sekarang memiliki getter dan setter juga, dengan pembaruan sederhana pada sintaks. Mari kita definisikan kembali Lingkaran kelas dengan daerah Properti.
class Circle {
constructor(radius) {
this.radius = radius
}
get area() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
// returns: Circle {radius: 4}
c.area
// returns: 50.26548245743669
Sekarang mari kita tambahkan setter. Untuk dapat mendefinisikan radius sebagai properti yang dapat diatur, kita harus mendefinisikan ulang bidang aktual menjadi _radius atau sesuatu yang tidak akan berbenturan dengan setter. Kalau tidak, kami menemukan kesalahan stack overflow.
Berikut adalah kelas yang didefinisikan ulang:
class Circle {
constructor(radius) {
this._radius = radius
}
get area() { return Math.PI * this._radius * this._radius }
set radius(r) { this._radius = r }
}
var c = new Circle(4)
// returns: Circle {_radius: 4}
c.area
// returns: 50.26548245743669
c.radius = 6
c.area
// returns: 113.09733552923255
Secara keseluruhan, ini adalah tambahan yang bagus untuk JavaScript berorientasi objek.
Warisan
Selain mendefinisikan kelas menggunakan kelas kata kunci, Anda juga dapat menggunakan meluas kata kunci untuk mewarisi dari kelas super. Mari kita lihat bagaimana ini bekerja dengan sebuah contoh.
class Ellipse {
constructor(width, height) {
this._width = width;
this._height = height;
}
get area() { return Math.PI * this._width * this._height; }
set width(w) { this._width = w; }
set height(h) { this._height = h; }
}
class Circle extends Ellipse {
constructor(radius) {
super(radius, radius);
}
set radius(r) { super.width = r; super.height = r; }
}
// create a circle
var c = new Circle(4)
// returns: Circle {_width: 4, _height: 4}
c.radius = 2
// c is now: Circle {_width: 2, _height: 2}
c.area
// returns: 12.566370614359172
c.radius = 5
c.area
// returns: 78.53981633974483
Dan itu adalah pengantar singkat untuk beberapa fitur JavaScript ES6 .
Selanjutnya: berkenalan dengan beberapa metode larik JavaScript penting dan membuat skrip animasi robot yang peka terhadap suara! Juga, cari tahu tentang kerangka kerja front-end hebat yang disebut Vue .
Kredit Gambar: mikrologia/ foto deposit
Membagikan Membagikan Menciak Surel Canon vs. Nikon: Merek Kamera Mana yang Lebih Baik?Canon dan Nikon adalah dua nama besar di industri kamera. Tetapi merek mana yang menawarkan jajaran kamera dan lensa yang lebih baik?
cara mendapatkan wallpaper bergerak windows 10Baca Selanjutnya Topik-topik yang berkaitan
- Pemrograman
- JavaScript
Berlangganan newsletter kami
Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!
Klik di sini untuk berlangganan