Home-theater-designers
ES6 merujuk kepada versi 6 bahasa pengaturcaraan Skrip ECMA. ECMA Script adalah nama standard 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 banyak lagi fitur yang dimaksudkan untuk mempermudah pengembangan perisian berskala besar .
ECMAScript, atau ES6, diterbitkan pada bulan Jun 2015. Kemudian dinamakan semula menjadi ECMAScript 2015. Sokongan penyemak imbas web untuk bahasa penuh belum lengkap, walaupun sebahagian besar disokong. Penyemak imbas web utama menyokong beberapa ciri ES6. Walau bagaimanapun, adalah mungkin untuk menggunakan perisian yang dikenali sebagai pemain untuk menukar kod ES6 menjadi ES5, yang disokong dengan lebih baik pada kebanyakan penyemak imbas.
Mari kita lihat beberapa perubahan besar yang dibawa oleh ES6 ke JavaScript.
1. Pemalar
Akhirnya konsep pemalar telah berjaya ke JavaScript! Pemalar adalah nilai yang dapat ditentukan hanya sekali (per skop, skop yang dijelaskan di bawah). Definisi semula dalam skop yang sama mencetuskan ralat.
const JOE = 4.0
JOE= 3.5
// results in: Uncaught TypeError: Assignment to constant variable.
Anda boleh menggunakan pemalar di mana sahaja anda boleh menggunakan pemboleh ubah ( di mana ).
console.log('Value is: ' + joe * 2)
// prints: 8
2. Pembolehubah dan Fungsi Blok-Skop
Selamat datang ke abad ke-21, JavaScript! Dengan ES6, pemboleh ubah dinyatakan menggunakan biarkan (dan pemalar yang dijelaskan di atas) ikuti peraturan pemblokiran blok seperti di Java, C ++, dll. (Untuk mengetahui lebih lanjut, lihat cara menyatakan pemboleh ubah dalam JavaScript.)
Sebelum kemas kini ini, pemboleh ubah dalam JavaScript berfungsi merangkumi fungsi. Maksudnya, ketika anda memerlukan ruang lingkup baru untuk pemboleh ubah, anda harus menyatakannya dalam fungsi.
Pemboleh ubah mengekalkan nilai hingga akhir blok. Selepas blok, nilai di blok luar (jika ada) dikembalikan.
aplikasi penyuntingan foto percuma terbaik untuk iphone
{
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 boleh mentakrifkan semula pemalar, 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 Anak Panah
ES6 memperkenalkan fungsi anak panah ke JavaScript. (Ini serupa dengan fungsi tradisional, tetapi mempunyai sintaks yang lebih sederhana.) Dalam 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 menentukan dan menyampaikan argumen dalam fungsi dengan mudah.
Menggunakan dengan a 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 pelbagai argumen dengan memasukkannya dalam kurungan:
[22, 98, 3, 44, 67].sort((a, b) => a - b)
// returns
[3, 22, 44, 67, 98]
4. Parameter Fungsi Lalai
Parameter fungsi kini dapat dinyatakan dengan nilai lalai. Berikut ini, x adalah fungsi dengan dua parameter ke dan b . Parameter kedua b diberi nilai lalai sebanyak 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 lalai mungkin muncul sebelum yang tanpa lalai. Perhatikan bahawa fungsi ini didefinisikan sebagai blok dengan a kembali nilai dengan cara ilustrasi.
var x = (a = 2, b) => { return a * b }
Bagaimanapun hujah dipadankan dari kiri ke kanan. Dalam doa pertama di bawah, b mempunyai tidak ditentukan nilai walaupun ke telah dinyatakan dengan nilai lalai. Hujah yang disahkan dipadankan dengan ke daripada b . Fungsi kembali NaN .
x(2)
// returns NaN
x(1, 3)
// returns 3
Apabila anda masuk secara terang-terangan tidak ditentukan sebagai hujah, nilai lalai digunakan jika ada.
x(undefined, 3)
// returns 6
5. Parameter Fungsi Rehat
Ketika menggunakan fungsi, kadang-kadang timbul keperluan untuk menyampaikan sejumlah argumen sewenang-wenangnya, dan memproses argumen ini dalam fungsi. Keperluan ini ditangani oleh parameter fungsi rehat sintaksis. Ini menyediakan cara untuk menangkap sisa argumen setelah argumen yang ditentukan menggunakan sintaks yang ditunjukkan di bawah. Argumen tambahan ini ditangkap dalam pelbagai.
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
String templating merujuk kepada interpolating variables dan expressions menjadi string menggunakan sintaks seperti perl atau shell. Templat rentetan dilampirkan dalam watak centang belakang ( ' ). Sebaliknya petikan tunggal ( ' ) atau petikan berganda ( ' ) menunjukkan tali normal. Ungkapan di dalam templat ditandai di antara $ { dan } . Berikut adalah contoh:
var name = 'joe';
var x = `hello ${name}`
// returns 'hello joe'
Sudah tentu, anda boleh menggunakan ungkapan sewenang-wenangnya untuk penilaian.
// 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 ini untuk menentukan rentetan juga boleh digunakan untuk menentukan rentetan berbilang baris.
var x = `hello world
next line`
// returns
hello world
next line
7. Sifat Objek
ES6 membawa sintaks penciptaan objek yang dipermudahkan. Lihat contoh di bawah:
var x = 'hello world', y = 25
var a = { x, y }
// is equivalent to the ES5:
{x: x, y: y}
Nama harta benda yang dikira juga cukup bagus. Dengan ES5 dan sebelumnya, untuk menetapkan harta benda dengan nama yang dikira, 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 boleh melakukan semuanya dalam satu definisi:
var a = {x, y, ['joe' + y]: 4}
// returns
{x: 'hello world', y: 25, joe25: 4}
Dan tentu saja, untuk menentukan kaedah, anda boleh menentukannya dengan nama:
var a = {x, y, ['joe' + y]: 4, foo(v) { return v + 4 }}
a.foo(2)
// returns
6
8. Sintaksis Definisi Kelas Formal
Definisi Kelas
Dan akhirnya, JavaScript mendapat sintaks definisi kelas formal. Walaupun hanya gula sintaksis berbanding kelas berdasarkan protitaip yang sudah ada, ia berfungsi untuk meningkatkan kejelasan kod. Ini bermakna ini berlaku tidak 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}
Kaedah Menyatakan
Menentukan kaedah juga agak mudah. 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
Pemula dan Pengawal
Kami kini mempunyai pemula dan penyusun juga, dengan kemas kini ringkas pada sintaks. Mari kita mentakrifkan semula Bulatan kelas dengan kawasan harta benda.
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
Mari kita tambah setter. Untuk dapat menentukan jejari sebagai harta yang boleh diselesaikan, kita harus mentakrifkan semula bidang sebenar untuk _radius atau sesuatu yang tidak akan bertembung dengan pengatur. Jika tidak, kami menghadapi ralat limpahan timbunan.
Inilah kelas yang ditakrifkan semula:
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 berorientasikan objek.
Warisan
Di samping menentukan kelas menggunakan kelas kata kunci, anda juga boleh menggunakan memanjang kata kunci untuk diwarisi dari kelas super. Mari kita lihat bagaimana ini berfungsi dengan 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 pengenalan ringkas kepada beberapa ciri JavaScript ES6.
Seterusnya: membiasakan diri beberapa kaedah array JavaScript penting dan skrip animasi robot sensitif suara! Juga, ketahui mengenai rangka depan yang hebat yang dipanggil Vue.
Kredit Imej: mikrologi / Depositphotos
Berkongsi Berkongsi Tweet E-mel Canon vs Nikon: Jenama Kamera mana yang lebih baik?Canon dan Nikon adalah dua nama terbesar dalam industri kamera. Tetapi jenama mana yang menawarkan barisan kamera dan lensa yang lebih baik?
tingkap perangkap mod kernel yang tidak dijangka 10Baca Seterusnya Topik-topik yang berkaitan
- Pengaturcaraan
- JavaScript
Langgan buletin kami
Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!
Klik di sini untuk melanggan