Dalam tutorial ini, anda akan belajar mengenai JavaScript ES6 dengan bantuan contoh.
JavaScript ES6 (juga dikenali sebagai ECMAScript 2015 atau ECMAScript 6 ) adalah versi JavaScript yang lebih baru yang diperkenalkan pada tahun 2015.
ECMAScript adalah standard yang digunakan oleh bahasa pengaturcaraan JavaScript. ECMAScript memberikan spesifikasi bagaimana bahasa pengaturcaraan JavaScript berfungsi.
Tutorial ini memberikan ringkasan ringkas ciri-ciri ES6 yang biasa digunakan supaya anda dapat memulakan dengan cepat di ES6.
Biarkan JavaScript
JavaScript letdigunakan untuk menyatakan pemboleh ubah. Sebelum ini, pemboleh ubah dinyatakan menggunakan varkata kunci.
Untuk mengetahui lebih lanjut mengenai perbezaan antara letdan var, kunjungi JavaScript let vs var.
Pemboleh ubah yang dinyatakan menggunakan letadalah blok-lingkup . Ini bermaksud mereka hanya boleh diakses dalam blok tertentu. Sebagai contoh,
// variable declared using let let name = 'Sara'; ( // can be accessed only inside let name = 'Peter'; console.log(name); // Peter ) console.log(name); // Sara
Tetapan JavaScript
The constkenyataan digunakan untuk mengisytiharkan pemalar dalam JavaScript. Sebagai contoh,
// name declared with const cannot be changed const name = 'Sara';
Setelah diisytiharkan, anda tidak boleh mengubah nilai constpemboleh ubah.
Fungsi Arrow JavaScript
Dalam versi ES6 , anda dapat menggunakan fungsi anak panah untuk membuat ekspresi fungsi. Contohnya,
fungsi ini
// function expression let x = function(x, y) ( return x * y; )
boleh ditulis sebagai
// function expression using arrow function let x = (x, y) => x * y;
Untuk mengetahui lebih lanjut mengenai fungsi anak panah, kunjungi JavaScript Arrow Function.
Kelas JavaScript
Kelas JavaScript digunakan untuk membuat objek. Kelas serupa dengan fungsi konstruktor. Sebagai contoh,
class Person ( constructor(name) ( this.name = name; ) )
Kata kunci classdigunakan untuk membuat kelas. Sifat ditugaskan dalam fungsi konstruktor.
Sekarang anda boleh membuat objek. Sebagai contoh,
class Person ( constructor(name) ( this.name = name; ) ) const person1 = new Person('John'); console.log(person1.name); // John
Untuk mengetahui lebih lanjut mengenai kelas, lawati Kelas JavaScript.
Nilai Parameter Lalai
Dalam versi ES6, anda dapat menyampaikan nilai lalai dalam parameter fungsi. Sebagai contoh,
function sum(x, y = 5) ( // take sum // the value of y is 5 if not passed console.log(x + y); ) sum(5); // 10 sum(5, 15); // 20
Dalam contoh di atas, jika anda tidak melewati parameternya y, itu akan mengambil 5 secara lalai.
Untuk mengetahui lebih lanjut mengenai parameter lalai, kunjungi Parameter Lalai Fungsi JavaScript.
Literal Templat JavaScript
Literal templat telah menjadikannya lebih mudah untuk memasukkan pemboleh ubah dalam rentetan. Sebagai contoh, sebelum anda perlu melakukan:
const first_name = "Jack"; const last_name = "Sparrow"; console.log('Hello ' + first_name + ' ' + last_name);
Ini dapat dicapai dengan menggunakan templat literal dengan:
const first_name = "Jack"; const last_name = "Sparrow"; console.log(`Hello $(first_name) $(last_name)`);
Untuk mengetahui lebih lanjut mengenai literal templat, kunjungi JavaScript Template Literal.
Pemusnahan JavaScript
Sintaks yang merosakkan menjadikannya lebih mudah untuk menetapkan nilai kepada pemboleh ubah baru. Sebagai contoh,
// before you would do something like this const person = ( name: 'Sara', age: 25, gender: 'female' ) let name = person.name; let age = person.age; let gender = person.gender; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Menggunakan sintaks ES6 Destructuring, kod di atas boleh ditulis sebagai:
const person = ( name: 'Sara', age: 25, gender: 'female' ) let ( name, age, gender ) = person; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Untuk mengetahui lebih lanjut mengenai pemusnahan, kunjungi JavaScript Pemusnahan.
Import dan eksport JavaScript
Anda boleh mengeksport fungsi atau program dan menggunakannya dalam program lain dengan mengimportnya. Ini membantu membuat komponen yang boleh digunakan semula. Contohnya, jika anda mempunyai dua fail JavaScript bernama contact.js dan home.js.
Dalam fail contact.js, anda boleh mengeksport yang contact()fungsi:
// export export default function contact(name, age) ( console.log(`The name is $(name). And age is $(age).`); )
Kemudian apabila anda ingin menggunakan contact()fungsi dalam fail lain, anda hanya boleh mengimport fungsi tersebut. Contohnya, dalam fail home.js:
import contact from './contact.js'; contact('Sara', 25); // The name is Sara. And age is 25
Janji JavaScript
Janji digunakan untuk menangani tugas tidak segerak. Sebagai contoh,
// returns a promise let countValue = new Promise(function (resolve, reject) ( reject('Promise rejected'); )); // executes when promise is resolved successfully countValue.then( function successValue(result) ( console.log(result); // Promise resolved ), )
Untuk mengetahui lebih lanjut mengenai janji, kunjungi Janji JavaScript.
Parameter Rehat JavaScript dan Penyebar Spread
Anda boleh menggunakan parameter selebihnya untuk mewakili sejumlah argumen sebagai array. Sebagai contoh,
function show(a, b,… args) ( console.log(a); // one console.log(b); // two console.log(args); // ("three", "four", "five", "six") ) show('one', 'two', 'three', 'four', 'five', 'six')
Anda lulus argumen yang tinggal menggunakan … sintaks. Oleh itu, parameter nama rehat .
Anda menggunakan sintaks spread … untuk menyalin item ke dalam satu array. Sebagai contoh,
let arr1 = ('one', 'two'); let arr2 = (… arr1, 'three', 'four', 'five'); console.log(arr2); // ("one", "two", "three", "four", "five")
Parameter selebihnya dan pengendali spread menggunakan sintaks yang sama. Walau bagaimanapun, pengendali penyebaran digunakan dengan tatasusunan (nilai berulang).
Untuk mengetahui lebih lanjut mengenai pengendali spread, kunjungi Operator Penyebaran JavaScript.
