Mari segera jelaskan ES6 secara detail dan pelajari fitur-fitur barunya!

Artikel ini akan memberi Anda pemahaman mendalam tentang ES6 dan mempelajari fitur-fitur baru ES6. Saya harap ini dapat membantu Anda!

Entri front-end (vue) ke kursus penguasaan: masuk ke pembelajaran

Pahami ES6

ECMAScript adalah脚本语言的标准化规范yang dikembangkan oleh Netscape, awalnya bernama Mocha , kemudian berganti nama menjadi LiveScript , dan akhirnya berganti nama menjadi JavaScript
ECMAScript 2015 (ES2015), versi 6, awalnya dikenal sebagai ECMAScript 6 ( ES6 ), menambahkan fitur baru.

Lingkup blok ES6 biarkan

Pertama, apa itu ruang lingkup? Cakupan berarti mendeklarasikan suatu variabel. Cakupan valid dari variabel ini adalah sebelum let datang. js hanya memiliki全局作用域dan函数作用域var , dan ES6 menghadirkan块级作用域ke js.

 {
var a = "?";
misalkan b = "⛳";
}
konsol.log(a);
konsol.log(b);

 ?
Kesalahan Referensi yang Tidak Tertangkap: b tidak ditentukan

Seperti yang Anda lihat, kami menggunakan kata kunci var untuk mendefinisikan variabel a di blok. Faktanya, variabel tersebut dapat diakses secara global. Oleh karena itu, var声明的变量是全局的, tetapi kami ingin variabel tersebut berlaku di blok dan menjadi diakses setelah keluar dari blok. Tidak, maka Anda dapat menggunakan kata kunci cakupan tingkat blok baru let di ES6 untuk mendeklarasikan variabel a. Ketika saya mengaksesnya lagi, kesalahan dilaporkan, mengatakan a is not defined , a tidak ditentukan.

Array perusakan ES6

Seperti yang ditunjukkan di bawah ini, pertama-tama tentukan fungsi yang mengembalikan array. Sebelum menggunakan array yang dirusak, panggil array dan tetapkan nilai kembalian ke temp, lalu cetak array temp. Setelah menggunakan解构数组, langsung tentukan variabel array, dan kemudian Fungsi mengembalikan nilai menunjuk ke variabel. Secara otomatis akan menetapkan nilai item pertama ke variabel array pertama, item kedua ke variabel array kedua, dan seterusnya masalah.

 fungsi sarapan() {
kembali ['?', '?', '?'];
}
var temp = sarapan();
konsol.log(temp[0], temp[1], temp[2]);

misalkan [a, b, c] = sarapan();
konsol.log(a, b, c);

 ?
?

ES6 merusak objek

Pertama, fungsi breakfast mengembalikan对象. Gunakan解构对象untuk mendefinisikan objek. Kunci dalam pasangan nilai kunci mewakili nama kunci dari objek sebenarnya yang dipetakan. Nilainya adalah variabel khusus akan selesai secara otomatis. Kemudian fungsi sarapan dipanggil untuk mengembalikan objek. Kemudian cetak variabel a, b, c dan Anda dapat melihat bahwa tidak ada masalah

 fungsi sarapan() {
kembali { a: '?', b: '?', c: '?'
}
misalkan { a: a, b: b, c: c } = sarapan();
konsol.log(a, b, c);

 ?

String templat ES6

Sebelum menggunakan string templat, kita menggabungkan variabel string menggunakan +

Gunakan string template yang disediakan ${变量} ES6. Pertama gunakan `` untuk menggabungkan string.

 misalkan a = '?',
b = '?️';

misalkan c = 'Makan hari ini' + a + 'Lihat setelah makan' + b;
konsol.log(c);

misalkan d = `Makan ${a} hari ini dan tonton setelah makan ${b}`;
konsol.log(d);

 Makan hari ini? Mari kita lihat setelah makan?️
Makan hari ini? Mari kita lihat setelah makan?️

ES6 menentukan apakah suatu string berisi string lain

Dengan menggunakan fungsi ini, Anda dapat dengan mudah menyelesaikan operasi seperti apakah string dimulai dengan sesuatu, apakah string diakhiri dengan sesuatu, dan apakah string berisi string apa pun.

 let str = 'Halo, saya Xiao Zhou ❤️';
console.log(str.startsWith('Halo'));
console.log(str.endsWith('❤️'));
console.log(str.endsWith('Halo'));
console.log(str.includes(" "));

 BENAR
BENAR
PALSU
BENAR

Parameter bawaan ES6

Di ES6, Anda dapat menggunakan parameter default. Saat memanggil suatu fungsi, jika tidak ada nilai yang ditetapkan ke parameter, maka akan dieksekusi menggunakan parameter default yang ditetapkan nilai, menimpa nilai default.

 fungsi katakan(str) {
konsol.log(str);
}
fungsi say1(str = 'Hai') {
konsol.log(str);
}
mengatakan();
katakan1();
katakan1('❤️');

 belum diartikan
Hei hei❤️

Operator penyebaran ES6

Gunakan ... untuk memperluas elemen agar mudah dioperasikan.

 misalkan arr = ['❤️', '?', '?'];
konsol.log(arr);
konsol.log(...arr);
let brr = ['Pangeran', ...arr];
konsol.log(brr);
konsol.log(...brr);

 [ '❤️', '?', '?' ]
❤️ ?
[ 'Pangeran', '❤️', '?', '?' ]
Pangeran ❤️ ?

Operator sisa ES6

Operator ... digunakan pada parameter fungsi dan menerima array parameter. Ini digunakan sebagai berikut:

 fungsi f1(a, b, ...c) {
konsol.log(a, b, c);
konsol.log(a, b, ...c);
}
f1('?','?','☃️','㊙️');

 ?
?

Nama fungsi ES6

Anda dapat menggunakan .name untuk mendapatkan nama fungsinya. Penggunaan spesifiknya adalah sebagai berikut:

 fungsi f1() {} }
console.log(f1.nama);
misalkan f2 = fungsi() {};
console.log(f2.nama);
misalkan f3 = fungsi f4() {};
console.log(f3.nama);

 f1
f2
f4

Fungsi panah ES6

Menggunakan fungsi panah dapat membuat kode lebih ringkas, tetapi Anda juga harus memperhatikan batasan fungsi panah, dan fungsi panah itu sendiri tidak memiliki ini, ini menunjuk ke induknya

 misalkan f1 = a => a;

misalkan f2 = (a, b) => {
kembalikan a+b;
}

konsol.log(f1(10));
konsol.log(f2(10, 10));

 10
20

Ekspresi objek ES6

Menggunakan ekspresi objek es6, jika atribut objek sama dengan nilainya, nilainya dapat dihilangkan, dan function dapat dihilangkan saat menulis fungsinya.

 misalkan a = '㊙️';
misalkan b = '☃️';

objek konstan = {
A A,
b: b,
katakan: fungsi () {

}
}

const es6obj = {
A,
B,
mengatakan() {

}
}

konsol.log(obj);
konsol.log(es6obj);

 { a: '㊙️', b: '☃️', ucapkan: [Fungsi: ucapkan] }
{ a: '㊙️', b: '☃️', ucapkan: [Fungsi: ucapkan] }

Konstanta ES6

Gunakan kata kunci const untuk mendefinisikan pengukuran. const membatasi tindakan menetapkan nilai pada pengukuran, tetapi tidak membatasi nilai dalam pengukuran.

 const aplikasi = ['☃️', '?'];
console.log(...aplikasi);
aplikasi.push('?');
console.log(...aplikasi);
aplikasi = 10;

Anda dapat melihat bahwa saat menetapkan nilai lagi ke pengukuran, kesalahan dilaporkan.

 ☃️ ?
☃️ ?
aplikasi = 10;
^
TypeError: Penugasan ke variabel konstan.

Nama properti objek ES6

Saat menggunakan titik untuk mendefinisikan atribut objek, jika nama atribut berisi karakter spasi, itu ilegal dan sintaksisnya tidak dapat diteruskan. Menggunakan [属性名] dapat menyelesaikan masalah dengan sempurna, dan tidak hanya nama atribut dapat ditulis secara langsung, tetapi juga dapat ditentukan menggunakan variabel. Penggunaan spesifiknya adalah sebagai berikut:

 misalkan obj = {};
let a = 'nama kecil';
obj.name = 'Pangeran';
// Dilarang menggunakan titik untuk mendefinisikan atribut dengan spasi di tengahnya // obj.little name = 'Little Prince';
obj[a] = 'Pangeran Kecil';
konsol.log(obj);

 { nama: 'Pangeran', 'nama kecil': 'Pangeran Kecil' }

ES6 menentukan apakah dua nilai sama

Hasil membandingkan beberapa nilai khusus menggunakan === atau == mungkin tidak memenuhi kebutuhan Anda. Anda dapat menggunakan Object.is(第一个值，第二个值) untuk menilai, dan Anda mungkin akan tertawa

 konsol.log(NaN == NaN);
konsol.log(+0 == -0);
konsol.log(Objek.is(NaN, NaN));
konsol.log(Objek.is(+0, -0));

 PALSU
BENAR
BENAR
PALSU

ES6 menyalin objek

Gunakan Object.assign() untuk menyalin satu objek ke objek lain, sebagai berikut:

 misalkan obj = {};
Objek.menetapkan(
// sumber objek,
//Salin objek target { a: '☃️' }
);
konsol.log(obj);

 {sebuah: '☃️' }

ES6 Tetapkan prototipe objek

Anda dapat menggunakan es6 untuk mengatur prototipe suatu objek sebagai berikut:

 misalkan obj1 = {
mendapatkan() {
kembali 1;
}
}
misalkan obj2 = {
sebuah: 10,
mendapatkan() {
kembali 2;
}
}
biarkan tes = Objek.buat(obj1);
konsol.log(tes.get());
console.log(Object.getPrototypeOf(test) === obj1);
Objek.setPrototypeOf(test, obj2);
konsol.log(tes.get());
console.log(Object.getPrototypeOf(test) === obj2);

 1
BENAR
2
BENAR

prototipe ES6

 misalkan obj1 = {
mendapatkan() {
kembali 1;
}
}
misalkan obj2 = {
sebuah: 10,
mendapatkan() {
kembali 2;
}
}
biarkan tes = {
__proto__:obj1
}
konsol.log(tes.get());
console.log(Object.getPrototypeOf(test) === obj1);
tes.__proto__ = obj2;
konsol.log(tes.get());
console.log(Object.getPrototypeOf(test) === obj2);

 1
BENAR
2
BENAR

ES6 super

 misalkan obj1 = {
mendapatkan() {
kembali 1;
}
}
biarkan tes = {
__proto__: keberatan1,
mendapatkan() {
kembalikan super.get() + ' ☃️';
}
}
konsol.log(tes.get());

 1 ☃️

ES6 menghasilkan iterator

Sebelum belajar, tulis dulu iteratornya

 fungsi mati(arr) {
misalkan saya = 0;

kembali {
Berikutnya() {
biarkan selesai = (i >= arr.length);
biarkan nilai = !selesai ? arr[i++] : tidak terdefinisi;

kembali {
nilai: nilai,
selesai: selesai
}
}
}
}
misalkan arr = ['☃️', '?', '?'];

biarkan matiArr = mati(arr);
konsol.log(dieArr.next());
konsol.log(dieArr.next());
konsol.log(dieArr.next());
konsol.log(dieArr.next());

 { nilai: '☃️', selesai: salah }
{ nilai: '?', selesai: salah }
{ nilai: '?', selesai: salah }
{ nilai: tidak terdefinisi, selesai: benar }

Oke, mari kita lihat generator yang disederhanakan

 fungsi* mati(arr) {
for (misalkan i = 0; i < arr.length; i++) {
hasil arr[i];
}
}
biarkan tes = mati(['?','☃️']);
konsol.log(tes.berikutnya());
konsol.log(tes.berikutnya());
konsol.log(tes.berikutnya());

 { nilai: '?', selesai: salah }
{ nilai: '☃️', selesai: salah }
{ nilai: tidak terdefinisi, selesai: benar }

kelas ES6

Gunakan es6 untuk membuat kelas dengan cepat dan nyaman, bagus

 kelas kamu {
konstruktor(nama) {
ini.nama = nama;
}
mengatakan() {
kembalikan nama ini + 'Katakan Ori';
}
}
biarkan xiaoming = new stu("小明");
konsol.log(xiaoming.say());

 Xiao Ming berkata Ori memberi

ES6 bersiap-siap

Tentukan metode get/set untuk memperoleh atau mengubah atribut kelas

 kelas kamu {
konstruktor(nama) {
ini.nama = nama;
}
mendapatkan() {
kembalikan nama ini;
}
set(Str baru) {
ini.nama = newStr;
}
}
biarkan xiaoming = new stu("小明");
konsol.log(xiaoming.get());
xiaoming.set("Merusak")
konsol.log(xiaoming.get());

 Xiao Ming dan Da Ming

ES6 statis

Metode yang dimodifikasi dengan kata kunci static dapat digunakan secara langsung tanpa membuat instance objek.

 kelas kamu {
statis katakan(str) {
konsol.log(str);
}
}
stu.say("Metode statis asli");

 Metode statis origi

ES6 meluas

Menggunakan warisan dapat mengurangi redundansi kode, seperti:

 kelas Orang {
konstruktor(nama, bir) {
ini.nama = nama;
ini.bir = bir;
}
tampilkanInfo() {
return 'Nama:' + ini.nama + 'Ulang Tahun:' + ini.bir;
}
}
kelas A memperluas Orang {
konstruktor(nama, bir) {
super(nama, bir);
}
}
biarkan zhouql = new A("Zhou Qiluo", "01-06-2002");
// Zhou Qiluo sendiri tidak memiliki metode showInfo, metode ini diwarisi dari console.log(zhouql.showInfo());

 Nama: Zhou Qiluo Ulang Tahun: 01-06-2002

Paket ES6

Koleksi kumpulan, tidak seperti array, tidak mengizinkan elemen duplikat dalam koleksi Kumpulan

 //Buat koleksi Set let food = new Set('??');
// Tambahkan berulang kali, hanya satu yang bisa masuk food.add('?');
makanan.tambahkan('?');

console.log(makanan);
//Ukuran koleksi saat ini console.log(food.size);
// Tentukan apakah suatu elemen ada di koleksi console.log(food.has('?'));
// Hapus elemen dalam koleksi food.delete('?');
console.log(makanan);
// Ulangi koleksi food.forEach(f => {
konsol.log(f);
});
// Hapus koleksi food.clear();
console.log(makanan);

 Himpunan(3) { '?', '?', '?'
3
BENAR
Himpunan(2) { '?', '?'
?
?
Set(0) {}

Peta ES6

Gabungan peta untuk menyimpan pasangan nilai kunci

 biarkan makanan = Peta baru();
misalkan a = {}, b = fungsi () {}, c = "nama";

makanan.set(a, '?');
makanan.set(b, '?');
makanan.set(b, '?');
makanan.set(c, 'nasi');

console.log(makanan);
console.log(makanan.ukuran);
konsol.log(makanan.dapatkan(a));
makanan.hapus(c);
console.log(makanan);
console.log(makanan.has(a));

makanan.forEach((v, k) => {
konsol.log(`${k} + ${v}`);
});
makanan.hapus();
console.log(makanan);

 Peta(3) { {} => '?', [Fungsi: b] => '?', 'nama' => 'beras' }
3
?
Peta(2) { {} => '?', [Fungsi: b] => '?'
BENAR
[Objek Objek] + ?
fungsi () {} + ?
Peta(0) {}

Modularitas ES6

Dengan menggunakan pengembangan modular, es6 dapat dengan mudah mengimpor dan mengekspor beberapa konten, serta ekspor default dan detail lainnya.

 misalkan a = '?';
let f1 = function (str = 'Parameter Anda') {
konsol.log(str);
}
ekspor { a, f1 };

 impor {a, f1} dari './27moduletest.js';
konsol.log(a);
f1();
f1('mengerti');