Ringkasan semua fitur baru di JavaScript ECMAScript 6

Sudah delapan tahun sejak ECMAScript secara resmi merilis ES6 pada tahun 2015. Sejak tahun 2015, versi baru akan dirilis pada bulan Juni setiap tahun, dengan tahun pada saat itu sebagai nomor versinya.

Banyak fitur baru yang muncul di banyak versi ini. Untuk memudahkan memori, saya telah mengatur semua fitur baru di artikel ini.

ps: Beberapa informasi mengatakan bahwa semua versi setelah ES2015 secara kolektif disebut ES6, dan ada pula yang mengatakan bahwa ES6 berarti ES2015, ES7 berarti ES2016, dan seterusnya, yang tidak akan dibahas di sini.

ES2015 (ES6)

ES2015 merupakan versi dengan perubahan terbesar. Pada dasarnya semua konten sebelum ES2015 telah diperluas, seperti terlihat pada gambar berikut:

cakupan

tingkat blok.

Sebelum ES6, hanya ada satu cara untuk mendeklarasikan variabel, yaitu dengan menggunakan kata kunci var . Di ES2015, kata kunci let dan const ditambahkan untuk mendeklarasikan variabel dan konstanta

berikut:

// Variabel Deklarasi misalkan v = 100
v = 200
// Deklarasikan konstanta konstanta V = 200
// Memodifikasi konstanta // V = ​​​​300 // Melaporkan kesalahan.

Variabel

atau

konstanta yang dideklarasikan menggunakan kata kunci let dan const memiliki cakupan tingkat blok.

  var v = 100
}
{
  misalkan val = 200
}
konsol.log(v)
console.log(val) // Kesalahan val tidak ditentukan

Perlu dicatat bahwa variabel yang dideklarasikan menggunakan kata kunci let atau const tidak memiliki karakteristik promosi variabel, dan terdapat zona mati sementara.

Perpanjangan fungsi

memungkinkan fungsi untuk menggunakan nilai default di ES2015. Contoh kodenya adalah sebagai berikut:

// Sebelum es2015 function foo(v) {
  v = v ?
  kembali v
}
//es2015
bilah fungsi(v = 100) {
  kembali v
}

Perlu dicatat bahwa jika ada beberapa parameter, parameter default harus digunakan dari belakang ke depan .

Fungsi panah ditambahkan di ES2015, yang merupakan bentuk singkatan dari fungsi . Contoh kodenya adalah sebagai berikut:

function foo(v) {.
  kembali v``
}
// Fungsi panah ditulis const foo = (v) => {
  kembali v
}
// singkatan 1
const foo = v => { // Hanya satu parameter yang dapat menghilangkan tanda kurung return v
}
// singkatan 2
const foo = v => v // Anda dapat menghilangkan kurung kurawal dan kurung kurawal ketika hanya ada return dalam pernyataan.

Perlu dicatat bahwa fungsi panah this ditentukan berdasarkan konteks eksekusi, dan this tidak terikat secara internal .

Saat menggunakan fungsi panah, tidak ada objek argumen internal, tetapi parameter lainnya digunakan sebagai gantinya.

Contoh kodenya adalah sebagai berikut:

const foo = (...args) => {
  // console.log(arguments) //ReferenceError: argumen tidak ditentukan
  console.log(args) // args adalah array}
foo(1, 2, 3, 4) // [1, 2, 3, 4]

Atribut nama yang ditambahkan ke fungsi di ES2015 menunjuk ke nama fungsi.

Kode contohnya adalah sebagai berikut:

function foo(v) {
  kembali v
}
batang konstan = v => v
console.log(foo.nama) // foo
console.log(bar.name) //Ekstensi

nilai

. Perluasan nilai di ES2015 terutama menambahkan beberapa metode ke objek Math dan Number , serta metode representasi biner dan oktal.

Di ES2015, 0b atau 0B digunakan untuk mewakili biner, dan 0o atau 0O digunakan untuk mewakili oktal.

Contoh kodenya adalah sebagai berikut:

console.log(0b111111111 === 511) // true
console.log(0o777 === 511) //

Atribut dan metode yang diperluas dengan true untuk Number adalah sebagai berikut:

Metode untuk ekstensi Matematika adalah sebagai berikut:

ekstensi string

ES2015 memperkenalkan string templat, yang didefinisikan menggunakan tanda backtick (`). String templat akan mempertahankan formatnya, dan variabel dapat digunakan.

Kode contohnya adalah sebagai berikut:

// Gunakan ` untuk mendefinisikan string templat let str = `semangkuk minggu`
// String templat dapat mempertahankan format let str2 = `Semangkuk minggu`
// String templat dapat menggunakan variabel const myName = 'Semangkuk minggu'
let str3 = `author: ${myName}` // Gunakan ${} untuk membungkus

ES2015 juga memperluas beberapa metode untuk instance String dan String, sebagai berikut:

Ekstensi

array menyediakan operator ekspansi di ES2015, yaitu..., digunakan dalam array untuk memperluas array dan pisahkan dengan koma,

contoh kodenya sebagai berikut:

const arr = [1, 2, 3, 4, 5, 6]

sebagai

parameter

menyediakan serangkaian metode, yang akan diperkenalkan satu per satu:

Array.from() : Membuat objek seperti array atau objek yang dapat diubah sebagai array baru . Kode contohnya adalah sebagai berikut:

function foo() {.
  return Array.from(argumen) // Ubah argumen menjadi array}

console.log(foo(1, 2, 3, 4, 5, 6)) // [ 1, 2, 3, 4, 5, 6 ]

Array.of() : Membuat array baru dengan sejumlah argumen yang bervariasi Contoh , contoh kodenya adalah sebagai berikut:

Array.of(1) // [1]
Array.of(true, 1, 'Semangkuk minggu') // [benar, 1, 'Semangkuk minggu']

Array.prototype.copyWithin(), menyalin bagian array secara dangkal ke lokasi lain dalam array yang sama , dan Mengembalikannya tidak mengubah panjang array asli.

Contoh kodenya adalah sebagai berikut:

const arr = [1, 2, 3, 4]

// Mulai dari indeks 2 dan salin konten ke indeks 0 di akhir arr.copyWithin(0, 2) // [ 3, 4, 3, 4 ]

Array.prototype.find() , sesuai dengan fungsi panggilan balik yang diberikan, temukan elemen pertama yang cocok, dan kembalikan undefinisi jika tidak ditemukan . Kode contohnya adalah sebagai berikut:

const arr = [1, 2, 3, 4]
arr.find(item => item === 2) // 2 (elemen penunjuk),

Array.prototype.findIndex() , sesuai dengan fungsi panggilan balik yang diberikan, temukan indeks elemen pertama yang cocok, kembalikan jika tidak ditemukan - 1 , contoh kodenya adalah sebagai berikut:

const arr = [1, 2, 3, 4]
arr.findIndex(item => item === 2) // 1 (menunjukkan indeks)

Array.prototype.fill() , mengisi array dengan nilai yang diberikan . Contoh kodenya adalah sebagai berikut:

const arr = [1, 2 , 3, 4 ]
// Isi indeks 1-3 dengan nilai yang diberikan
arr.fill('semangkuk minggu', 1, 3) // [ 1, 'semangkuk minggu', 'semangkuk minggu', 4 ]

Array.prototype.keys() , mengembalikan objek iterable yang isinya adalah kunci dari array , contoh kodenya adalah sebagai berikut:

const arr = [1, true, 'A bowl of week']
kunci const = arr.kunci()
untuk (const i kunci) {
  console.log(i) // Hasil traversal 0 1 2
}

Array.prototype.values() , mengembalikan objek iterable yang isinya adalah nilai array .

Contoh kodenya adalah sebagai berikut:

const arr = [1, true, 'A bowl of Zhou']
nilai const = arr.values()
untuk (konstan i dari nilai) {
  console.log(i) // Hasil traversal 1 true Semangkuk minggu}

Array.prototype.entries() , mengembalikan objek iterable yang isinya berupa array. Indeks 0 adalah elemen dari array asli, dan 1 adalah elemennya dari array asli. Nilai posisi,

contoh kodenya adalah sebagai berikut:

const arr = [1, true, 'Semangkuk minggu']

const iterator = arr.entri()
console.log(Array.from(iterator)) // [ [ 0, 1 ], [ 1, true ], [ 2, 'A bowl of week' ] ]

Perpanjangan objek

di ES2015 memungkinkan nama atribut objek dan nilai atribut agar konsisten Anda cukup menulis nama atribut.

Contoh kodenya adalah sebagai berikut:

const myName = 'Semangkuk minggu'
umur konstan = 18
const orang = { Namaku, umur }
console.log(person) // { myName: 'A bowl of Zhou', age: 18 }

Selain itu, saat mendefinisikan objek, Anda diperbolehkan menggunakan ekspresi terbungkus [] sebagai nama atribut. Kode contohnya adalah sebagai berikut:

const myName = 'Minggu mangkuk'
umur konstan = 18
konstanta orang = {
  Namaku,
  ['a' + 'g' + 'e']: usia,
}
console.log(person) // { myName: 'One Bowl Zhou', age: 18 }

Object.is() : digunakan untuk membandingkan apakah dua nilai sama, digunakan untuk menyelesaikan NaN ≠= NaN, +0 === - 0 masalah,

contoh kodenya sebagai berikut:

console.log(NaN === NaN) // false
konsol.log(+0 === -0) // benar

console.log(Object.is(NaN, NaN)) // benar
console.log(Object.is(+0, -0)) // false

Object.assign() : Menyalin nilai semua properti enumerable dari satu atau lebih objek sumber ke objek target dan mengembalikan objek target,

misalnya Kodenya sebagai berikut:

const person = Object.assign({}, { name: 'One Bowl Zhou' }, { age: 18 })
console.log(person) // { name: 'One Bowl Zhou', age: 18 }

Object.getPrototypeOf
• Object.setPrototypeOf() :
• Object.getPrototypeOf() objek prototipe ;

Kelas

mengedepankan konsep kelas di ES2015, dan kelas tersedia pada tingkat sintaksis. Kode contohnya adalah sebagai berikut:

class Person {
  konstruktor(usia) {
    //Attribute this.myName = 'Semangkuk minggu'
    this.age = usia
  }
  // Metode statis cetak statis() {
    konsol.log()
  }
  //Aksesor dapatkan Namaku() {
    console.log('pengambil')
    kembalikan 'semangkuk minggu'
  }
  setel Namaku(v) {
    konsol.log('penyetel' + v)
  }
  setNama(v) {
    ini.Namaku = v
  }
}
const orang = Orang baru(18)
person.setName('ywanzhou') // Memicu pengakses penyetel console.log(person.myName) // Memicu pengakses pengambil.

Modularitas

mengusulkan spesifikasi modularisasi ESModel di ES2015, yang merupakan spesifikasi modularisasi tingkat resmi pertama, dalam hal ini spesifikasi kita diperbolehkan menggunakan ekspor untuk mengekspor modul dan impor untuk memperkenalkan modul.

Contoh kodenya adalah sebagai berikut:

import a dari 'm' // Impor ekspor default di modul m dan beri nama a
import a, { b } from 'm' // Impor ekspor default di modul m dan impor anggota b secara terpisah
import * sebagai A dari 'm' // Impor semua anggota dalam modul import 'm' // Jalankan m modul ekspor const b = 1 // Ekspor secara terpisah ekspor default b // Ekspor default ekspor { b } // Ekspor sesuai permintaan ekspor { b sebagai bb } // Ganti nama dan ekspor ekspor { b } dari 'm' // Impor anggota b dalam modul m dan ekspor

tugas destrukturisasi.

ES2015 telah menambahkan sintaks baru untuk tugas destrukturisasi, yang memungkinkan kita menggunakan pola tertentu array. Atau ekstrak nilai yang ditentukan dari objek.

Contoh kodenya adalah sebagai berikut:

// Destrukturisasi penugasan array let [nama, umur, hobi = 'coding' /* Nilai default penugasan struktur */] = ['A Bowl dari Zhou', 18]
// Tukar nilai kedua variabel misalkan a = 1
misalkan b = 2
;[a, ​​​​b] = [b, a]
konsol.log(a, b) // 2 1

// Penugasan struktur objek let { nama: ObjName /* Pengrusakan tugas ganti nama*/, jenis kelamin } = { nama: 'Semangkuk minggu', jenis kelamin: 1 }

// Penghancuran penugasan parameter fungsi function bar({ nama, umur }) {
  nama kembali + usia
}
bar({ nama: 'Semangkuk minggu', umur: 18 }) // Semangkuk minggu 18

Simbol

adalah tipe data baru di ES2015. Simbol ini dibuat melalui metode Symbol() dan dapat meneruskan string sebagai a parameter. Digunakan untuk mendeskripsikan Simbol;

nilai simbol yang dibuat melalui metode Simbol() semuanya unik. Kode contohnya adalah sebagai berikut:

/**
 * Sintaks * Simbol ([deskripsi])
 * *deskripsi -> adalah informasi deskripsi opsional */
//Buat nilai bertipe Simbol const mySymbol = Simbol()
console.log(Simbol saya) // Simbol()

const myName = Simbol('Semangkuk minggu')
console.log(typeof myName) //

simbol Simbol juga memiliki serangkaian properti dan metode yang tidak akan diperkenalkan di sini.

Promise

Promise adalah solusi asynchronous yang disediakan di ES2015, yang memecahkan masalah callback hell.

Objek janji dapat dibuat melalui konstruktor Promise() . Setiap objek Promise memiliki status berikut:

• tertunda: status awal, bukan status berhasil atau gagal.
• terselesaikan: berarti operasi berhasil diselesaikan.
• ditolak: berarti operasi gagal.

Hanya ada dua jenis peralihan status, yaitu:

• pending→resolved
• pending→resolved

. Setelah status berubah, status tersebut tidak akan berubah lagi.

Ada metode then di instance Promise , yang memungkinkan kita melakukan panggilan berantai di instance Promise then metode juga memiliki instance Promise yang akan dikembalikan,

seperti yang ditunjukkan pada gambar di bawah ini:

Contoh kodenya adalah sebagai berikut:

new Promise((resolve, reject) => {
    console.log('Saya adalah log di Janji pertama')
    menyelesaikan()
})
    .lalu(() => {
        console.log('Saya yang log in dulu')
    })
    .lalu(() => {
        console.log('Saya yang login kedua, tapi saya punya pengecualian')
        melempar Kesalahan baru('Kesalahan')
    })
    .lalu(() => {
        console.log('Saya adalah log dari panggilan balik pertama pada panggilan ketiga, tetapi saya tidak akan menjalankannya karena pengecualian terjadi di atas saya')
    }, () => {
        console.log('Saya adalah log dari panggilan balik kedua di panggilan ketiga, lalu saya mengeksekusinya')
    })
    .lalu(() => {
        console.log('Saya log in yang keempat, saya bisa menjalankannya secara normal')
    })

/* Hasil eksekusinya adalah sebagai berikut: Saya yang login di Promise pertama
Saya yang login pertama
Saya adalah log in yang kedua, tetapi saya mendapat pengecualian. Saya adalah log dari panggilan balik kedua pada saat itu. Saya mengeksekusinya. Saya adalah log di yang keempat, lalu saya dapat menjalankannya secara normal*/

Terkait Beberapa metode Promise adalah sebagai berikut:

• Promise.prototype.then() : Ini memerlukan paling banyak dua parameter: fungsi panggilan balik dari keberhasilan dan
• then Promise.prototype.catch()
• Promise.all() : Kemas beberapa instance ke dalam instance baru, kembalikan array hasil setelah semua status instance berubah (ubah semua perubahan lalu kembalikan)
• Promise.race() : Kemas beberapa instance ke dalam instance baru, kembalikan semua status instance Prioritaskan hasil yang diubah (ubah dulu dan kembali dulu)
• Promise.resolve() : Mengonversi objek menjadi objek Promise (setara dengan new Promise(resolve => resolve()) )
• Promise.reject() : Mengonversi objek ke status rejected Objek janji (setara dengan new Promise((resolve, reject) => reject()) )

Iterator

Iterator adalah sebuah iterator. Ini adalah antarmuka yang menyediakan mekanisme akses terpadu untuk berbagai struktur data struktur menyebarkan antarmuka iterasi, itu dapat dilalui dengan cara yang terpadu.

Struktur data yang mengimplementasikan antarmuka iterable umumnya mengimplementasikan dirinya sendiri atau mewarisi atribut Symbol.iterator , dan merupakan objek iterable. Properti Symbol.iterator sendiri adalah sebuah fungsi, yang merupakan fungsi pembuatan iterator default dari struktur data saat ini.

Sebuah objek yang berisi metode next() bisa disebut objek iterable. Objek next() akan mengembalikan objek yang berisi dua nilai,

seperti yang ditunjukkan di bawah ini:

• value : nilai JavaScript apa pun yang dikembalikan oleh iterator. Dapat dihilangkan jika done true .
• done : Nilai Boolean. Jika bernilai false , berarti iterasi belum berhenti. Jika bernilai true , iterator akan segera dihentikan, dan nilai value dapat dihilangkan.

Antarmuka iterator yang disediakan secara asli oleh JavaScript ditunjukkan pada gambar di bawah ini:

Sekarang kita mengimplementasikan iterator untuk obj, kodenya sebagai berikut:

const obj = {
    [Simbol.iterator] () {
        kembali {
            Berikutnya () {
                console.log('Iterator dijalankan');
                kembali {
                    nilai: '',
                    selesai: benar // Tandai apakah sudah selesai, benar berarti sudah selesai}
            }
        }
    }
}

Kami menambahkan print dalam metode next() . Untuk memverifikasi bahwa iterator telah dieksekusi, hasil akhir yang berjalan adalah

iterator telah dieksekusi.

Generator

adalah solusi pemrograman asinkron yang disediakan di ES2015 kata kunci function Gunakan tanda bintang * di antara nama fungsi dan nama fungsi, dan gunakan kata kunci yield di dalam fungsi untuk menentukan status yang berbeda.

Contoh kodenya adalah sebagai berikut:

function* testGenerator() {
  // hasil mendefinisikan hasil negara bagian 'semangkuk minggu'
  menghasilkan 'fitur baru'
  return 'generator' // Hentikan Generator, meskipun nanti ada kata kunci hasil, itu tidak valid}
const g = testGenerator() // Kembalikan objek Generator dan pindahkan status melalui metode next() g.next()
/* { nilai: 'Semangkuk Zhou', selesai: false } */

g.berikutnya()
/* { nilai: 'fitur baru', selesai: false } */

g.berikutnya()
/* { nilai: 'generator', selesai: true } */

Proxy dan Reffect

Objek proxy digunakan untuk membuat objek proxy untuk mengimplementasikan intersepsi dan penyesuaian operasi dasar. Ada 13 operasi dasar, seperti yang ditunjukkan pada tabel berikut:

Vue3 ditulis berdasarkan Proxy . Kode berikut menunjukkan penggunaan objek Proxy :

<!DOCTYPE html>
<htmllang="id">
<kepala>
  <meta charset="UTF-8" />
  <meta http-equiv="Kompatibel dengan X-UA" content="IE=Edge" />
  <meta name="viewport" content="width=lebar perangkat, skala awal=1.0" />
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="nofollow eksternal" rel="stylesheet" />
  <title>Perbarui dom secara otomatis melalui set</title>
</kepala>

<tubuh>
  <p class="card" style="lebar: 300 piksel; margin: 100 piksel otomatis">
    <p class="kartu-tubuh">
      <h1 id="nama"></h1>
      <button id="btn" class="btn btn-primary">Ubah</button>
    </p>
  </p>
  <skrip>
    // Dapatkan node DOM const name = document.getElementById('name')
    const btn = dokumen.getElementById('btn')
    //Tentukan fungsi yang mengubah nilai const updateDOM = (el, value) => {
      el.innerHTML = nilai
    }
    const orang = Proksi baru({
      nama: 'Semangkuk bubur',
    }, {
      set(target, propKey, nilai) {
        //Jika nilai di dalamnya berubah, hubungi updateDOM kami
        updateDOM(nama, nilai)
        target[propKey] = nilai
        kembali benar
      },
    })
    nama.innerHTML = orang.nama
    // Klik tombol untuk memicu operasi modifikasi btn.addEventListener('click', () => {
      person.name === 'Semangkuk Zhou'?
        (person.name = 'Semangkuk bubur') :
        (orang.nama = 'Satu Mangkuk Zhou')
    })
  </skrip>
</tubuh>
</html>

Kode di atas menggunakan metode set untuk data binding. Jika objeknya berubah, DOM kita akan otomatis terupdate.

Reflect adalah objek yang disediakan handlers ECMAScript2015. Ini menyediakan beberapa metode statis untuk mencegat operasi JavaScript.

Reflect bukan konstruktor, artinya tidak dapat dipakai.

Setiap operasi intersepsi pada objek Proxy (misalnya: get , delete , dll.) secara internal akan memanggil metode Reflect yang sesuai. Metode statis yang disediakannya konsisten dengan nama metode pada handlers di Proxy,

sebagai berikut:

Set, Map, WeakSet, WeakMap

Set , Map , WeakSet , dan WeakMap adalah beberapa objek baru di ES2015:

• Set dan WeakSet mirip dengan array. Tepatnya, keduanya adalah himpunan. Perbedaan antara keduanya adalah Set dapat menyimpan tipe data apa pun, sedangkan WeakSet hanya dapat menyimpan referensi ke objek, dan merupakan referensi lemah yang

paling umum digunakan Mengatur objek dalam pengembangan sebenarnya adalah untuk mengimplementasikan deduplikasi data. Kode contohnya adalah sebagai berikut:

const arr = [1, 2, 2, 3, 4 , 3, 5]
set const = Set baru(arr)
// Objek set dapat digunakan... untuk memperluas semua item console.log([...set]) // [ 1, 2, 3, 4, 5 ]

• Map dan WeakMap mirip dengan objek dan disimpan di bentuk key-value pair Ya, bedanya keduanya adalah key-value pair Map bisa sembarang, sedangkan key WeakMap harus referensi ke objek dan valuenya bisa bertipe apa saja.

ES2016 (ES7)

ES2016 merilis relatif sedikit fitur baru, terutama dua fitur baru, seperti yang ditunjukkan pada gambar di bawah ini:

Operator eksponen

ES2016 memiliki eksponen baru ** , disebut juga operator pangkat, yang fungsinya sama dengan Math.pow().

Contoh kodenya adalah sebagai berikut:

console.log(2 ** 10 === Math.pow (2, 10 )) //

metode true Array.prototype.includes()

menambahkan metode includes() ke prototipe array di

ES2016 contoh kodenya adalah sebagai berikut:

const arr = [1, 2, 3, 4, 5, NaN]
konsol.log(arr.indexOf(NaN)) // -1
console.log(arr.includes(NaN)) // true

Perlu dicatat bahwa NaN dan NaN , +0 dan -0 adalah sama ketika menggunakan includes() .

ES2017(ES8)

sintaks async/await sugar

Promise memecahkan masalah callback hell, jika ada terlalu banyak panggilan berantai, keterbacaan akan tetap menjadi lebih buruk. Sintaks async/await sugar baru di ES2017 memecahkan masalah ini.

Janji ditulis sebagai berikut:

;(fungsi () {
  janji fungsi(v) {
    kembalikan Janji baru((putuskan, tolak) => {
      menyelesaikan(v)
    })
  }
  const p = janji(1)
  p.lalu(res => {
    janji kembali (res)
  }).lalu(res => {
    konsol.log(res)
  })
})()

Jika Promise berikutnya bergantung pada Promise sebelumnya, rangkaian panggilan ini akan sangat panjang. Sekarang mari kita tulis ulang menggunakan gula sintaksis async/await:

;(async function () {
  janji fungsi(v) {
    kembalikan Janji baru((putuskan, tolak) => {
      menyelesaikan(v)
    })
  }
  const r1 = menunggu janji(1)
  const r2 = menunggu janji(r1)
  const res = menunggu janji(r2)
  konsol.log(res)
})()

Seperti yang Anda lihat, kita dapat menggunakan gula sintaksis async/await untuk menulis ulang Promise ke dalam metode penulisan datar.

Objek Atomics

ES2017 menambahkan objek Atomics baru. Objek ini menyediakan serangkaian metode statis untuk mengoperasikan objek SharedArrayBuffer dan ArrayBuffer. Objek ini tidak dapat dipakai menggunakan kata kunci new . Ini hanya menyediakan beberapa properti statis dan

ekstensi objek

metode diperluas untuk Object di ES2017, sebagai berikut:

• Object.values() : Mengembalikan array dari semua nilai properti yang dapat dihitung dari objek tertentu itu sendiri;
• Object.entries() : Mengembalikan array dari semua nilai properti yang dapat dihitung dari suatu objek tertentu
;
• objek itu sendiri. Array pasangan nilai kunci untuk properti yang disebutkan;
• Object.getOwnPropertyDescriptors() : Mengembalikan deskriptor properti dari semua properti objek tertentu.

Perluasan fungsi

di ES2017 memungkinkan kita menambahkan koma di akhir daftar parameter fungsi. Fitur kecil ini sangat berguna, karena hanya satu baris kode yang perlu diubah saat memperbarui koma di akhir. dua baris kode perlu diubah.

Contoh kodenya adalah sebagai berikut:

function fun(
  aaaaa,
  bbbbb,
  ccccc,
) {}

Jika ada koma di akhir, Anda hanya perlu menambahkan satu baris di akhir; jika tidak ada, Anda perlu menambahkan koma di akhir, lalu menambahkan satu baris. Ini mengubah dua baris dalam manajemen versi, bukan satu.

Ekspansi string

untuk

string di ES2017, yaitu:

• padStart() : mengisi spasi di awal string;
• padEnd() : mengisi spasi di akhir string

;

= 'Semangkuk Zhou'
console.log(str.padStart(10)) /* Semangkuk Zhou*/
konsol.log(str.padEnd(10)) /* Yiwan Zhou*/

ES2018(ES9)

Iterasi asinkron

memiliki pernyataan for await...of baru di ES2018, yang dapat digunakan untuk melintasi objek iterable asinkron.

Kode contohnya adalah sebagai berikut:

var asyncIterable = {
  [Simbol.asyncIterator]() {
    kembali {
      saya: 0,
      Berikutnya() {
        if (ini.i < 3) {
          return Promise.resolve({ nilai: this.i++, selesai: false })
        }

        return Promise.resolve({ selesai: benar })
      },
    }
  },
}
;(fungsi asinkron () {
  untuk menunggu (jumlah asyncIterable) {
    konsol.log(angka)
  }
})()

// 0
// 1
// 2

Ekstensi ekspresi reguler

Di ES2018, ekstensi berikut dibuat untuk ekspresi reguler:

Penamaan grup ekspresi reguler:

Sebelum ES2018, kami tidak dapat memberi nama grup dalam ekspresi reguler. Fitur ini diperkenalkan di ES2018 referensi,

contoh kodenya adalah sebagai berikut:

const RE_DATE = /(?<year>d{4})-(?<month>d{2})-(?<day>d {2})/

const matchObj = RE_DATE.exec('22-02-2022')
const tahun = matchObj.groups.year // 2022
const bulan = matchObj.groups.bulan // 02
const day = matchObj.groups.day //

mode pengubah/dotALl 22 detik: Pengubah s baru memungkinkan penggunaan . Cocok dengan karakter mana pun, dan atribut **** menunjukkan apakah akan menggunakan modifikasi " s " bersama-sama dalam simbol ekspresi reguler .

Pernyataan terbalik: Hanya pernyataan maju yang ada sebelum ES2018, sedangkan pernyataan terbalik dan pernyataan negatif terbalik ditambahkan di ES2018.

Operator penyebaran objek

Operator penyebaran array baru telah ditambahkan di ES2015. Di ES2018, fitur ini ditambahkan ke objek. Kode contohnya adalah sebagai berikut:

const n = { name: 'One Bowl of Zhou' }
konstanta a = { umur: 18 }
konstanta orang = { ...n, ...a }
// Gabungkan objek console.log(person) // { name: 'A Bowl of Zhou', age: 18 }

Promise.prototype.finally()

Metode finally() akan mengembalikan objek Promise Ketika status janji berubah, baik jika rejected atau fulfilled , panggilan balik finally() akan dieksekusi.

Contoh kodenya adalah sebagai berikut:

ambil(url)
  .lalu(res => {
    konsol.log(res)
  })
  .menangkap(kesalahan => {
    konsol.log(kesalahan)
  })
  .akhirnya(() => {
    konsol.log('akhir')
  })

ES2019(ES10)

Pengoptimalan

telah mengoptimalkan dua konten berikut di ES2019:

try

• Function.prototype.toString()
• catch try...catch catch dalam pernyataan tidak mengizinkan parameter

{
  console.log('Semangkuk minggu')
} menangkap {
  console.error('Semangkuk minggu')
}

trimStart()/trimLeft() dan trimEnd()/trimRight()

• String.prototype.trimStart : digunakan untuk menghilangkan spasi di sisi kiri string;
• String.prototype.trimLeft : merupakan alias dari trimStart
• String.prototype.trimEnd : digunakan Hapus spasi di sisi kanan string;
• String.prototype.trimRight : Ini trimEnd

perpanjangan dari array alias

. Dua metode array diperluas di ES2019, yaitu:

• Array.prototype.flat() : Ini metode akan mengikuti array yang dapat ditentukan Secara rekursif dan menggabungkan semua elemen dengan elemen dalam sub-array yang dilintasi ke dalam array baru dan mengembalikannya, secara sederhana, ini untuk mencapai perataan array.

konstanta arr = [0, 1, 2, [3, 4]]
console.log(arr.flat()) // [ 0, 1, 2, 3, 4 ]

• Array.prototype.flatMap() : Metode ini memetakan dan meratakan array dan mengembalikan array baru (hanya satu level array yang bisa diperluas).

Object.fromEntries()

Metode Object.fromEntries() baru di ES2019 mengubah daftar pasangan nilai kunci menjadi objek. Ini adalah operasi kebalikan dari metode Object.entries() .

Kode contohnya adalah sebagai berikut:

const person = {
  nama: 'Semangkuk Zhou',
  usia: '18',
}
const e = Objek.entri(orang)

const p = Objek.fromEntries(e)
console.log(p) // { name: 'Semangkuk minggu', umur: '18' }

Simbol.prototipe.deskripsi

description properti baca-saja yang mengembalikan string deskripsi opsional saat membuat objek Simbol.

ES2020(ES11)

Modularisasi

menambahkan impor dinamis di ES2020, yang berarti modul akan dimuat saat kita membutuhkannya. Hal ini dapat mengurangi overhead dan waktu pemuatan halaman

. lalu(modul => {
  // Lakukan sesuatu dengan modul.
})

Impor dinamis menggunakan metode import() , yang mengembalikan Janji.

Di ES2020, objek meta juga ditambahkan ke import , yang mengekspos objek atribut metadata spesifik konteks ke modul JavaScript.

tipe data BigInt

BigInt memecahkan masalah bahwa angka maksimum yang diperbolehkan dalam JavaScript adalah 2**53-1 .

const theBiggestInt = 9007199254740991n;
const jugaBesar = BigInt(9007199254740991);
// ↪ 9007199254740991n
const hugeString = BigInt("9007199254740991");
// ↪ 9007199254740991n
const hugeHex = BigInt("0x1fffffffffffff");
// ↪ 9007199254740991n
const hugeBin = BigInt("0b1111111111111111111111111111111111111111111111111111");
// ↪ 9007199254740991n

globalThis objek

globalThis diperkenalkan pada ES2020, yang merupakan pengenalan objek global. Objek global di Node adalah Global , dan lingkungan browser adalah Window ; kode berikut menunjukkan perbedaan antara apakah ada GlobalThis :

// sebelumnya var getGlobal = fungsi () { 
  if (typeof self !== 'tidak terdefinisi') { return self; 
  if (jendela typeof !== 'tidak terdefinisi') { jendela kembali; 
  if (typeof global !== 'tidak terdefinisi') { return global } 
  throw new Error('tidak dapat menemukan objek global'); 
}; 

var global = getGlobal(); 

if (typeof globals.setTimeout !== 'fungsi') { 
  // tidak ada setTimeout di lingkungan ini! 
}

// setelah if (typeof globalThis.setTimeout !== 'function') {
  // tidak ada setTimeout di lingkungan ini!
}

Operator penggabungan nilai nol

Operator penggabungan nilai nol diwakili oleh dua tanda tanya. Operator ini juga merupakan operator logika, yang mirip dengan operator logika OR. Aturan penghitungannya adalah selama operan kiri adalah null atau undefined , operan kanan akan dikembalikan, jika tidak, operan kiri akan dikembalikan. Operator logika OR hanya mengembalikan operan kanan jika operan kiri dikonversi ke tipe boolean dan bernilai false .

Contoh kodenya adalah sebagai berikut:

console.log(null ?? 10) // 10
konsol.log(tidak terdefinisi ?? 10) // 10
Console.log (false ?? 10) // FALSE

Operator

ini berguna untuk menetapkan nilai ke variabel tanpa nilai

Kode adalah sebagai berikut:

Nilai var

// Jika nilai nilai bukan nol atau tidak ditentukan, tetapkan nilai 10
nilai = nilai ??
Console.log (nilai) // 10

Perlu dicatat () operator penghapusan nilai nol dan logis dan dan logis atau tidak dapat digunakan pada saat yang sama, jika tidak, pengecualian akan dilemparkan.

Operator Rantai Opsional

Operator rantai opsional digunakan untuk membaca nilai atribut yang dalam dalam rantai suatu objek. Atribut Aab , pertama -tama kita perlu memastikan Aa A ada Aab

undefind operator rantai opsional tidak akan menyebabkan masalah seperti itu.

var a = {}

// Console.log (AAB) // ERROR CONSOLE.LOG (AA? .B) // Operator rantai opsional yang tidak terdefinisi

juga

dapat digunakan untuk memanggil metode di bawah objek.

// Jika metode obj.fun () ada, itu akan dipanggil langsung di bawah ini.
Obj.fun?.a ()

janji

Promise.allSettled()

ES2021 (ES12)

String.prototype.replaceall ()

Metode

replaceAll() mengembalikan string baru.

const newstr = str.replaceall ('bubur', 'minggu')

//

Semangkuk

_

.

(

WeakRef

) // Simbol 100000000

hanya untuk kemudahan membaca

.

Referensi ke objek lain.

Janji.any ()

Promise.any() Promise.any() promise.all() (Artinya, semua janji gagal/tolak), janji yang gagal dan contoh jenis agregatererror dikembalikan.

Operator penugasan logis

Beberapa operator penugasan baru telah ditambahkan dalam ES2021, sebagai berikut:

&&

• &&=
• ||=
• ??=

pada kenyataannya, itu konsisten dengan operator penugasan biasa.

] = [true, false]
f1 && = 'semangkuk minggu' // setara dengan str = str && 'semangkuk minggu'
f2 || = 'semangkuk minggu' // setara dengan str = str ||
f3 ?? = 'semangkuk minggu' // setara dengan str = str ?? 'mangkuk minggu'

ES2022

Perpanjangan kelas

untuk

mendefinisikan anggota kelas tanpa mendefinisikannya di constructor di ES2022.

  myname = 'semangkuk zhou'
}
/* Keduanya konsisten*/
Kelas C {
  konstruktor() {
    myname = 'semangkuk zhou'
  }
}

Jika anggota dinyatakan tanpa inisialisasi, nilai defaultnya tidak ditentukan.

menggunakan

dinamai

mulai dengan # sebagai anggota pribadi kelas.

  #myname = 'One Bowl Week'
}
const c = c baru ()
Console.log (#myname) // Private Field '#Myname' harus dinyatakan dalam kelas yang tertutup

await

.

Level atas tanpa menggunakan fungsi async

.
Awaitasyncfun ()
Console.log (123)

Object.hasown ()

Metode Object.hasOwn() digunakan untuk menentukan apakah suatu objek memiliki atribut tertentu

.
  Nama: 'semangkuk zhou',
  usia: 18,
}
console.log (objek.hasown (orang, 'nama')) // true
console.log (objek.hasown (orang, 'sex')) // false

array.prototype.at ()

metode at() baru dalam ES2022, fungsinya adalah untuk mendapatkan anggota array dan parameternya adalah indeks dari array

. 6]
console.log (arr.at (-1)) // 6
// Setara dengan ARR [arr.length - 1]

D Modifier

Ekspresi reguler menambahkan pengubah A /d . Saat menggunakan metode exec() dari ekspresi reguler, jika ada pengubah A /d , hasilnya akan dikembalikan lebih banyak indeks Atribut yang digunakan untuk menunjukkan nilai indeks awal dari hasil pencocokan pada string asli.

Kode sampel adalah sebagai berikut:

const str = 'javascript'
const r = /a /d

const m = r.exec (str)
Console.log (M.indices [0]) // [1, 2]

ditulis pada akhirnya

.

Peta pikiran adalah sebagai berikut: