Sebagai seorang anak yang suka mengetik kode dengan tangan, menurut saya kode tersebut sebaiknya diketik sendiri agar lebih baik dihafal, maka hari ini saya akan memperkenalkan fitur-fitur ES6 ~ ES12. Jika Anda memiliki titik buta dalam penggunaan ES, atau tidak tahu banyak tentang fitur-fitur baru , saya yakin artikel ini akan dapat membantu Anda dengan baik ~

Untuk lebih memahami, kami akan menjelaskannya dalam mode kasus , jadi untuk memiliki pemahaman yang lebih baik, dan pada saat yang sama, kasus ini juga mendukung debugging dalam mode pengembang, saya harap Anda dapat mendukungnya~

ECMAScript

ECMAScript adalah bahasa pemrograman skrip yang distandarisasi oleh Ecma International (sebelumnya Asosiasi Produsen Komputer Eropa) melalui ECMA -262 . Bisa juga dikatakan bahwa hanya ada dua versi JavaScript sebagai standar

dalam dunia programmer: ES5 dan ES6 . Konon ES6 sebenarnya dirilis pada tahun 2015, yang juga merupakan saat era front-end besar secara resmi. dimulai. Artinya, tahun 2015 digunakan sebagai tahun Batas, sebelum tahun 2015 disebut ES5 , dan setelah tahun 2016 secara kolektif disebut ES6

Untuk informasi tentang fitur ES6 , Anda dapat membaca "Pengantar Standar ES6" oleh Guru Ruan Yifeng.

Deklarasi

ES6

let & const

Perbedaan let, const dan var:

• Variabel yang dideklarasikan oleh var ada Promosi variabel, sedangkan let dan const tidak mempunyai masalah promosi variabel. Promosi variabel: Apakah suatu variabel dapat dipanggil sebelum
• var dideklarasikan. Tidak ada cakupan tingkat blok, let dan const memiliki cakupan tingkat blok.
• Var dapat mendeklarasikan variabel berulang kali, let dan const tidak boleh dideklarasikan berulang kali dalam suatu cakupan , dan const mendeklarasikan variabel Read -only, dan harus diberi nilai

Selain itu, ketika suatu objek dideklarasikan dengan const , properti objek tersebut dapat diubah, karena: obj yang dideklarasikan oleh const hanya menyimpan alamat referensinya. objek. Selama alamatnya tetap tidak berubah, tidak akan ada kesalahan

dalam destrukturisasi.

Destrukturisasi

• dapat
• mengekstraksi nilai dari array secara berurutan, dan menetapkan nilai ke variabel sesuai dengan posisi yang sesuai metode milik pencocokan pola dan
• dapat didekonstruksi menggunakan ... untuk mewakili semua yang tersisa
.
• Jika array asli tidak memilikinya, maka nilai yang sesuai dapat disetel ke nilai default, jika tidak disetel, maka akan menjadi undefined

biarkan [. a, b, c] = [1, 2, 3]
 konsol.log(a, b, c) // 1 2 3
 
 misalkan [a, , c] = [1, 2, 3]
 konsol.log(a, , c) // 1 3
 
 misalkan [a, b, ...c] = [1, 2, 3, 4, 5]
 konsol.log(a, b, c) // 1 2 [3, 4, 5]
 
 misalkan [a, b, ...c] = [1]
 console.log(a, b, c) // 1 tidak terdefinisi []
 
 misalkan [a = 1, b = a] = []
 const.log(a, b) // 1 1
 
 misalkan [a = 1, b = a] = [2]
 const.log(a, b) // 2 2

Struktur objek

• tidak berurutan. Hanya saja variabel dan nama atribut harus memiliki nama yang sama.
• Jika nama atribut variabel dan objek tidak diulang , nilai variabelnya tidak akan undefined
• Catatan : , yang lain Setara dengan alias

let { a, b } = { a: 1, b: 2 };
 konsol.log(a, b); // 1 2
 
 misalkan { a } = { b: 2 };
 konsol.log(a); // tidak terdefinisi
 
 misalkan { a, b = 2 } = { a: 1 };
 konsol.log(a, b); // 1 2
 
 misalkan { a: b = 2 } = { a: 1 };
 console.log(a); // Variabel a tidak ada console.log(b); // 1

Destrukturisasi string

• String juga dapat didekonstruksi, yang setara dengan mengubahnya menjadi objek mirip array
• dengan atribut length . , mewakili bilangan

misalkan [a, b, c, d, e] = "halo"
 konsol.log(a, b, c, d, e) // halo
 
 misalkan { panjang } = "halo"
 console.log(length) // 5

Penghancuran Bilangan dan Nilai Boolean

• Selama objek atau array tersebut belum mati, maka akan diubah menjadi objek terlebih dahulu, maka tipe numerik dan tipe Boolean juga diubah menjadi objek

misalkan { keString: s } = 123;
 console.log(s === Nomor.prototipe.toString) // benar
 
 misalkan { toString: s } = benar;
 console.log(s === Boolean.prototype.toString) // dekonstruksi sebenarnya

dari parameter fungsi.

• Parameter fungsi dapat didekonstruksi, atau nilai defaultnya dapat
• tidak
• ditentukan
• dua metode untuk menentukan nilai default. Yang pertama adalah menentukan variabel, yang lain adalah menentukan parameter, dan Anda akan mendapatkan jawaban yang berbeda:

let arr = [[1,2], [3, 4]]
 misalkan res = arr.map([a, b] => a + b)
 konsol.log(res) // [3, 7]
 
 biarkan arr = [1, tidak terdefinisi, 2]
 misalkan res = arr.map((a = 'test') => a);
 console.log(res) // [1, 'tes', 2]
 
 misalkan fungsi = ({x, y} = {x: 0, y: 0}) => {
    kembali[x, y]
 }
 console.log(func(1, 2)) // [tidak terdefinisi, tidak terdefinisi]
 konsol.log(func()) // [0, 0]
 console.log(func({})) // [tidak terdefinisi, tidak terdefinisi]
 console.log(func({x: 1})) // [1, tidak terdefinisi]
 
 
 misalkan fungsi = ({x=0, y=0}) => {
    kembali[x, y]
 }
 
 konsol.log(fungsi({x:1,y:2})) // [1, 2]
 konsol.log(func()) // kesalahan
 konsol.log(fungsi({})) // [0, 0]
  console.log(func({x: 1})) // [1, 0]

ekspansi reguler

sebenarnya adalah poin pengetahuan yang sangat sulit untuk dipahami. Jika seseorang dapat menguasainya sepenuhnya, ini sangat berguna di sini Pertama-tama,

ini dibagi menjadi dua gaya: JS分格dan perl 分格

: RegExp()

let re = new RegExp('a'); //Temukan apakah ada dalam sebuah string
 let re = new RegExp('a', 'i'); //Yang pertama adalah objek pencarian, yang kedua adalah opsi

perl style: / rule/option, dan dapat diikuti oleh kelipatan, apa pun urutannya

let re = /a/; //Cari apakah ada dalam sebuah string
 let re = /a/i;//Yang pertama adalah objek yang akan dicari, yang kedua adalah opsi.

Di sini kami memperkenalkan tes online ekspresi reguler (dengan ekspresi reguler umum):

Ekstensi string

• Unicode :大括号包含karakter Unicode
• codePointAt() : mengembalikan titik kode yang sesuai dengan karakter, sesuai dengan fromCharCode()
• String.fromCharCode() : mengembalikan titik kode yang sesuai sebagai karakter, sesuai dengan codePointAt()
• String.raw() : mengembalikan karakter Hasil dari mengganti semua variabel dalam string dan meng-escape garis miring
• startWith() : Mengembalikan nilai Boolean yang menunjukkan apakah parameter string berada di awal string asli.
• endWith() : Mengembalikan nilai Boolean yang menunjukkan apakah string parameter berada di akhir string asli.
• repeat() : Metode mengembalikan string baru, yang berarti mengulangi string asli sebanyak n kali
• : for-of
• include() : mengembalikan nilai Boolean, yang menunjukkan apakah string parameter ditemukan.
• trimStart() : Metode menghilangkan spasi dari awal string. trimLeft() adalah alias untuk metode ini.
• trimEnd() : Metode menghapus karakter spasi dari akhir string. trimRight() adalah alias untuk metode ini.

//Unikode
 konsol.log("a", "u0061"); // aa
 console.log("d", "u{4E25}"); // d biarkan saja str = 'Domesy'
 
 //kodePointAt()
 konsol.log(str.codePointAt(0)) // 68
 
 //String.dariCharCode()
 konsol.log(String.fromCharCode(68)) // D
 
 //String.mentah()
 console.log(String.raw`Hain${1 + 2}`); // Hain3
 console.log(`Hain${1 + 2}`); // Hai 3
 
 let str = 'Domesy'
 
 //dimulai dengan()
 console.log(str.startsWith("D")) // benar
 konsol.log(str.startsWith("s")) // salah

 //berakhirDengan()
 console.log(str.endsWith("y")) // benar
 konsol.log(str.endsWith("s")) // salah
 
 //repeat(): Parameter yang diteruskan akan otomatis dibulatkan ke atas. Jika berupa string, parameter tersebut akan diubah menjadi angka console.log(str.repeat(2)) // DomesyDomesy
 console.log(str.repeat(2.9)) // DomesyDomesy
 
 // Traversal: untuk-dari
  for(biarkan kode str){
    console.log(code) // Kembalikan D omesy satu kali
  }
  
  //termasuk()
  console.log(str.includes("s")) // benar
  console.log(str.includes("a")) // salah
  
  // trimMulai()
  const string = "Halo dunia!";
  console.log(string.trimStart()); // "Halo dunia!"
  console.log(string.trimLeft()); // "Halo dunia!"
  
  // trimAkhir()
  const string = "Halo dunia!";
  console.log(string.trimEnd()); // "Halo dunia!"
  console.log(string.trimRight()); // "Halo dunia!"

lainnya

dapat disisipkan dalam satu baris atau beberapa baris, gunakan `

let str = `Dome
    sy`
 console.log(str) //Akan secara otomatis membungkus garis//Dome
 //

templat label sy:

const str = {
     nama: 'Dudu Kecil',
     info: 'Halo semuanya'
 }

console.log(`${str.info}, saya `${str.name}`) // Halo semuanya, saya Xiao Dudu

Ekstensi array

• Array.of() : Ubah sekumpulan nilai menjadi array dan mengembalikan array baru, berapa pun jumlah atau jenis argumennya.
• copyWithin() : Menyalin anggota pada posisi yang ditentukan ke posisi lain dan mengembalikan array asli
• find() : Mengembalikan nilai pertama yang memenuhi syarat
• findIndex() : Mengembalikan indeks pertama yang memenuhi syarat key
• () : Melintasi nama kunci, mengembalikan objek traverser , yang dapat digunakan dalam perulangan for-of
• value() : Penggunaan yang sama seperti kunci(), namun melintasi nilai kunci.
• entri() : Penggunaan yang sama seperti kunci(), namun melintasi nilai kunci berpasangan.
• Array.from() : Membuat instance array baru dari objek mirip array atau objek yang dapat diubah.
• fill() : mengisi array dengan elemen yang ditentukan dan mengembalikan array asli .
• include() : menentukan apakah elemen tertentu disertakan dan mengembalikan nilai Boolean. Ini juga valid untuk NaN, tetapi tidak dapat diposisikan

. 1, 2, 3, 4, 5]

 //Array.of()
 biarkan arr1 = Array.of(1, 2, 3);
 konsol.log(arr1) // [1, 2, 3]
 
 //copyWithin(): tiga parameter (target, start = 0, end = this.length)
 // target: posisi target // start: posisi awal, yang dapat dihilangkan dan dapat berupa angka negatif.
 // end: posisi akhir, bisa dihilangkan, bisa berupa angka negatif, posisi sebenarnya adalah end-1.
 console.log(arr.copyWithin(0, 3, 5)) // [4, 5, 3, 4, 5]
 
 //menemukan()
 konsol.log(arr.find((item) => item > 3 )) // 4
 
 //temukanIndeks()
 console.log(arr.findIndex((item) => item > 3 )) // 3
 
 //kunci()
 for (biarkan indeks arr.keys()) {
     console.log(index); // Mengembalikan 0 1 2 3 4 sekaligus
 }
 
 // nilai()
 for (biarkan indeks arr.values()) {
     console.log(index); // Mengembalikan 1 2 3 4 5 sekaligus
 }
 
 // entri()
 for (biarkan indeks arr.entries()) {
     console.log(index); // Kembalikan [0, 1] [1, 2] [2, 3] [3, 4] [4, 5] sekali
 }
 
  misalkan arr = [1, 2, 3, 4, 5]
 
 // Array.from(): Traversal dapat berupa array semu, seperti String, Struktur set, Node node let arr1 = Array.from([1, 3, 5], (item) => {
     barang kembalian * 2;
 })
 konsol.log(arr1) // [2, 6, 10] 
 
 // isi(): tiga parameter (target, awal = 0, akhir = ini.panjangnya)
 // target: posisi target // start: posisi awal, yang dapat dihilangkan dan dapat berupa angka negatif.
 // end: posisi akhir, bisa dihilangkan, bisa berupa angka negatif, posisi sebenarnya adalah end-1.
 konsol.log(arr.isi(7)) // [7, 7, 7, 7, 7]
 konsol.log(arr.isi(7, 1, 3)) // [1, 7, 7, 4, 5]
 
 misalkan arr = [1, 2, 3, 4]
 
 //termasuk()
 console.log(arr.includes(3)) // benar
 console.log([1, 2, NaN].includes(NaN)); // true

operator ekspansi

lainnya

// Fungsinya untuk memperluas array let arr = [3, 4, 5]
 konsol.log(...arr) // 3 4 5
 
 misalkan arr1 = [1, 2, ...arr]
 console.log(...arr1) // 1 2 3 4 5

Ekstensi objek

• Object.getPrototypeOf() : Mengembalikan objek prototipe dari objek
• Object.setPrototypeOf() : Menyetel objek prototipe dari objek
• proto : Mengembalikan atau menyetel objek prototipe dari objek
• Object .getOwnPropertyNames()
: Mengembalikan array kunci properti non-Simbol dari objek itu sendiri Object.getOwnPropertySymbols
• (
• ) : Mengembalikan array kunci properti non-Simbol dari objek itu sendiri.
• : Mengembalikan array yang berisi semua kunci properti dari objek itu sendiri.
• Object.is() : Menentukan apakah dua objek sama. Alamat yang ditunjuk oleh array berbeda, jadi selama itu adalah perbandingan array, maka alamatnya pasti salah .Traversal
• : for-in
• Object.keys() : Mengembalikan nama atribut
• Object.assign() : Digunakan untuk menetapkan semua enumerable. Salin nilai atribut dari satu atau lebih objek sumber ke objek target dan kembalikan objek target ke kali ini, objek target juga akan berubah

//Object.is()
console.log(Object.is('abc', 'abc')) // benar
console.log(Object.is([], [])) // salah 

//Melintasi: masuk
let obj = { nama: 'Domesy', nilai: 'React' }

for(biarkan memasukkan objek){
    console.log(key); // Mengembalikan nilai nama nilai atribut secara bergantian
    console.log(obj[key]); // Mengembalikan nilai atribut secara berurutan Domesy React
}

//Objek.kunci()
console.log(Objek.kunci(obj)) // ['nama', 'nilai']

 //Objek.menetapkan()
 target konstan = { a: 1, b: 2 };
 sumber const = { b: 4, c: 5 };
 
 const result = Objek.assign(target, sumber)
 
 console.log(hasil) // {a: 1, b: 4, c: 5}
 console.log(target) // {a: 1, b: 4, c: 5}

ekspresi ringkas

lainnya

misalkan a = 1;
  misalkan b = 2;
  misalkan obj = { a, b }
  konsol.log(obj) // { a: 1, b: 2 }
  
  biarkan metode = {
      Halo() {
          console.log('halo')
      }
  }
  console.log(method.hello()) //

ekspresi atribut hello: langsung menggunakan variabel atau ekspresi untuk mendefinisikan kunci Object

let a = "b"
 misalkan obj = {
     [a]: "c"
 }
 

operator ekspansi

{b : "c"}

• menambahkan banyak fungsi tambahan di ES9 , seperti menggabungkan, meng-escape string, dll.

// Fungsinya untuk memperluas array let { a , b , ...c } = { a: 1, b: 2, c: 3, d: 4};
 konsol.log(c) // {c: 3, d: 4}
 
 misalkan obj1 = { c: 3 }
 misalkan obj = { a: 1, b: 2, ...obj1}
 console.log(obj) // { a: 1, b: 2, c: 3}

Numerik perluasan

• biner : dimulai dengan 0b atau 0B , menunjukkan
• oktal biner : dimulai dengan 00 atau 0O , menunjukkan biner
• Number.isFinite() : digunakan untuk memeriksa apakah suatu nilai dibatasi, mengembalikan nilai Boolean
• Number.isNaN() : digunakan untuk memeriksa apakah suatu nilai adalah NaN, mengembalikan nilai Boolean
• Number.isInteger() : digunakan untuk memeriksa apakah suatu nilai adalah bilangan bulat, mengembalikan Boolean value
• Number.isSafeInteger() : Digunakan untuk memeriksa apakah suatu nilai adalah "integer aman", mengembalikan nilai Boolean
• Math.cbrt() : Mengembalikan kubus dan
• Math.abrt()() : Mengembalikan kubus dan
• Math.cbrt( ) : Mengembalikan kubus dan
• Math .clz32() : Mengembalikan bentuk nilai integer 32-bit yang tidak ditandatangani.
• Math.imul() : Mengembalikan perkalian dua nilai.
• Math.fround() : Mengembalikan nilai tunggal 32-bit. bentuk nilai floating-point yang presisi
• Math.hypot() : Mengembalikan semua Akar kuadrat dari jumlah kuadrat nilai
• Math.expm1() : Mengembalikan e^n - 1
• Math.log1p() : Mengembalikan nilai natural logaritma 1 + n (Math.log(1 + n))
• Math.log10() : Mengembalikan logaritma natural dari 1 + n Logaritma n dengan basis 2
• Math.log2() : Mengembalikan logaritma n dengan basis 2
• Math.trunc() : Menghapus bagian desimal dari angka tersebut, hanya menyisakan bagian bilangan bulat
• Math.sign() : Mengembalikan正数为1 ,负数为-1 ,正零0 ,负零-0 , NaN
• Math.abrt() : Mengembalikan akar pangkat tiga
• Math.sinh() : Mengembalikan sinus hiperbolik
• Math.cosh() : Mengembalikan kosinus hiperbolik
• Math.tanh () : Mengembalikan tangen hiperbolik
• Math.asinh() : Mengembalikan invers hiperbolik sinus
• Math.acosh() : Mengembalikan invers hiperbolik kosinus
• Math.atanh() : Mengembalikan invers tangen hiperbolik
• Number.parseInt() : Mengembalikan bilangan bulat dari nilai Bagian, metode ini setara dengan parseInt
• Number.parseFloat() : Mengembalikan bagian nilai floating point, metode ini setara dengan parseFloat

//Binary console.log(0b101) // 5
 konsol.log(0o151) //105
 
 //Nomor.isFinite()
 console.log(Nomor.isFinite(7)); // benar
 console.log(Nomor.isFinite(benar)); // salah
 
 //Nomor.isNaN()
 console.log(Nomor.isNaN(NaN)); // benar
 console.log(Nomor.isNaN("benar" / 0)); // benar
 console.log(Nomor.isNaN(benar)); // salah
 
 //Nomor.isInteger()
 console.log(Nomor.isInteger(17)); // benar
 console.log(Nomor.isInteger(17.58)); // salah
 
 //Nomor.isSafeInteger()
 console.log(Nomor.isSafeInteger(3)); // benar
 console.log(Nomor.isSafeInteger(3.0)); // benar
 console.log(Nomor.isSafeInteger("3")); // false
 console.log(Nomor.isSafeInteger(3.1)); // salah
 
  //Matematika.trunc()
 konsol.log(Matematika.trunc(13.71)); // 13
 konsol.log(Matematika.trunc(0)); // 0
 console.log(Matematika.trunc(benar)); // 1
 console.log(Matematika.trunc(salah)); // 0 
 
 //Matematika.tanda()
 konsol.log(Matematika.tanda(3)); // 1
 console.log(Matematika.tanda(-3)); // -1
 konsol.log(Matematika.tanda(0)); // 0
 console.log(Matematika.tanda(-0)); // -0
 console.log(Matematika.tanda(NaN)); // NaN
 console.log(Matematika.tanda(benar)); // 1
 console.log(Matematika.tanda(salah)); // 0
 
 //Matematika.abrt()
 konsol.log(Matematika.cbrt(8)); // 2
 
  //Nomor.parseInt()
 konsol.log(Nomor.parseInt("6.71")); // 6
 konsol.log(parseInt("6.71")); // 6
 
 //Nomor.parseFloat()
 console.log(Nomor.parseFloat("6.71@")); // 6.71
 console.log(parseFloat("6.71@")); // 6.71

• Parameter fungsi di akhir koma: Izinkan parameter terakhir dari fungsi memiliki
• tanda koma di akhir. Parameter diberi nilai tertentu
secara default.

//Parameter diberi nilai tertentu secara default
 fungsi menyenangkan(x, y = x){
    konsol.log(x, y)
 }
 fungsi kesenangan1(c, y = x){
    konsol.log(c, x, y)
 }
 kesenangan(2); //2 2
 fun1(1); //1 1 1

lainnya

(operator ekspansi...)

function fun(...arg){
   konsol.log(arg) // [1, 2, 3, 4]
 }
 
 fun(1, 2, 3, 4)

fungsi panah

• didefinisikan sebagai =>

biarkan panah = (v) => v + 2
 console.log(arrow(1)) // 3

Perbedaan antara fungsi panah dan fungsi biasa.

• Gaya fungsi panah dan fungsi biasa berbeda. Sintaks fungsi panah lebih ringkas dan jelas , dan fungsi biasa adalah fungsi yang ditentukan fungsi.
• Set tidak memiliki kunci, hanya nilai. Dapat dianggap bahwa kunci dan nilai adalah sama
• . Fungsi panah sebenarnya tidak memiliki ini. Ini dalam fungsi panah hanya bergantung pada fungsi biasa pertama yang membungkus panah fungsi.
• Fungsi panah tidak memiliki argumennya sendiri. Mengakses argumen dalam fungsi panah sebenarnya memperoleh nilai di lingkungan eksekusi (fungsi) lokal luar.
• call, apply, dan bind tidak akan mempengaruhi arah ini.
• Ini dari fungsi panah menunjuk ke konteks , tetapi ini dari fungsi biasa tidak menunjuk ke konteks. Tambahkan bind(ini) bila diperlukan.

Set

adalah struktur data baru di ES6, yang mirip dengan array, tetapi nilai anggotanya unik dan tidak ada

deklarasi nilai yang berulang. : const set = new Set()

Atribut:

• size : Mengembalikan jumlah nilai pada objek Set

Metode:

• add() : Menambahkan elemen ke objek Set akhir objek Set. Mengembalikan objek Set
• delete() : menghapus elemen dalam Set yang sama dengan nilai ini, mengembalikan nilai true jika ada, jika tidak, mengembalikan false
• clear() : menghapus semua elemen Set
• has() : apakah nilai ini ada, jika benar, jika tidak salah
• key() : objek iterator dengan nilai atribut
• value() : objek iterator dengan nilai atribut
• entry() : objek iterator dengan nilai atribut dan
• nilai
atribut
• forEach() : mengulangi setiap elemen

secara spesifik Catatan:

• Traverser adalah objek iterator . Dalam urutan penyisipan,
• nilai yang ditambahkan ke Set dalam bentuk [Key, Value] tidak akan mengalami konversi tipe, jadi 1 dan "1 " adalah dua nilai yang berbeda
• . Di dalam Set, keduanya dilewatkan === Untuk menilai, artinya, dua objek tidak akan pernah bisa sama karena alamatnya berbeda.
• Satu-satunya perbedaan adalah NaN

let list = new Set()
 
 //menambahkan()
 daftar.tambahkan("1")
 daftar.tambahkan(1)
 konsol(daftar) // Set(2) {1, "1"}
 
 //ukuran
 konsol(daftar.ukuran) // 2
 
 //menghapus()
 daftar.hapus("1")
 konsol(daftar) // Set(1) {1}
 
 //memiliki()
 daftar.has(1) // benar
 daftar.memiliki(3) // salah
 
 //jernih()
 daftar.hapus()
 konsol(daftar) // Set(0) {}
 
 misalkan arr = [{id: 1}, {id: 2}, {id: 3}]
 biarkan daftar = Set baru(arr)
 
 //kunci()
 untuk (biarkan kunci daftar.kunci()) {
    console.log(kunci); // Cetak ini: {id: 1} {id: 2} {id: 3}
 }
 
 //nilai()
 for (biarkan kunci daftar.values()) {
    console.log(kunci); // Cetak ini: {id: 1} {id: 2} {id: 3}
 }
 
 //entri()
 for (biarkan data daftar.entries()) {
    console.log(data); // Cetak ini: [{id: 1},{id: 1}] [{id: 2},{id: 2}] [{id: 3},{id: 3 } ]
 }
 
 //untukSetiap
 daftar.forEach((item) => {
    console.log(item)//Cetak ini: {id: 1} {id: 2} {id: 3}
 });

Aplikasi:

Deduplikasi array.

yang

• perlu diperhatikan adalah new Set tidak dapat menghapus objek.

tidak terdefinisi, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a'];
 
 console.log([...Set baru(arr)]) 
 //atau console.log(Array.from(Set baru(arr)))
 // [1, 'benar', benar, 15, salah, tidak terdefinisi, null, NaN, 'NaN', 0, 'a']

dapat menemukan gabungan, perpotongan, dan perbedaan

misalkan a = new Set([1, 2 , 3])
 misalkan b = Set baru([2, 3, 4])
 
 //Union console.log(Set baru([...a, ...b])) // Set(4) {1, 2, 3, 4}
 
 //Persimpangan console.log(Set baru([...a].filter(v => b.has(v)))) // Set(2) {2, 3}
 
 //Perbedaan himpunan new Set([...a].filter(v => !b.has(v))) // Set(1) {1}

himpunan pemetaan

let set = new Set([1,2, 3])
 console.log(new Set([...set].map(v => v * 2))) // Set(3) {2, 4, 6}

WeakSet

: Struktur yang sama dengan Set, tetapi anggotanya nilai hanya Dapat

dideklarasikan untuk objek: const set = new WeakSet()

metode:

• add() : Menambahkan elemen ke akhir objek WeakSet. Kembalikan instance
• delete() : hapus elemen di WeakSet yang sama dengan nilai ini,
• has() : apakah nilai ini ada, jika ada, itu benar, jika tidak

• maka

salah

• semuanya merupakan referensi yang lemah, yaitu pengumpulan sampah Mekanismenya tidak memperhitungkan penerapan objek. Sederhananya ,
• keuntungan dari objek WebSet yang tidak dapat dilintasi adalah ketika instance dihapus, tidak akan ada kebocoran memori.

Indeks rekomendasi

peta

Peta adalah struktur data baru di ES6, yang merupakan objek serupa key adalah deklarasi nilai jenis apa pun

: const map = new Map()

atribut:

• konstruktor : konstruktor, mengembalikan
• Ukuran peta : mengembalikan jumlah nilai dalam instance Peta

Metode:

• set() : menambahkan pasangan nilai kunci setelahnya Peta, mengembalikan instance
• get() : mengembalikan nilai kunci For
• delete() : Menghapus elemen dalam Peta yang sama dengan nilai ini, mengembalikan nilai true jika ada, jika tidak, mengembalikan false
• clear() : Menghapus semua elemen dari Map
• has() : Apakah nilai ini ada, jika ada, itu benar, sebaliknya adalah false
• key() : objek traverser dengan kunci atribut
• value() : objek traverser dengan nilai atribut
• entry() : objek traverser dengan kunci atribut dan nilai atribut
• forEach() : melintasi setiap elemen

Catatan khusus:

• untuk Referensi ke objek yang sama dianggap sebagai
• kunci dengan kunci yang sama dan akan ditimpa

let map = new Map()
 
 //mengatur()
 peta.set('a', 1)
 peta.set('b', 2)
 console.log(peta) // Peta(2) {'a' => 1, 'b' => 2}
 
 //mendapatkan
 peta.mendapatkan("a") // 1
 
 //ukuran
 konsol.log(ukuran peta) // 2
 
 //menghapus()
 peta.hapus("a") // benar
 console.log(peta) // Peta(1) {'b' => 2}
 
 //memiliki()
 peta.has('b') // benar
 peta.has(1) // salah
 
 //jernih()
 peta.jelas()
 console.log(peta) // Peta(0) {}
 
 misalkan arr = [["a", 1], ["b", 2], ["c", 3]]
 biarkan peta = Peta baru(arr)
 
 //kunci()
 for (biarkan kunci map.keys()) {
    console.log(kunci); // Cetak ini: abc
 }
 
 //nilai()
 for (biarkan nilai map.values()) {
    console.log(nilai); // Cetak ini: 1 2 3
 }
 
 //entri()
 for (biarkan data peta.entries()) {
    console.log(data); // Cetak ini: ["a", 1] ["b", 2] ["c", 3]
 }
 
 //untukSetiap
 peta.forEach((item) => {
    console.log(item)//Cetak ini: 1 2 3
 });

WeakMap

: dan struktur Peta, tetapi nilai anggota hanya dapat

dideklarasikan untuk objek: const set = new WeakMap()

metode:

• set() : menambahkan pasangan kunci-nilai, mengembalikan instance
• get() : mengembalikan kunci- pasangan nilai
• delete() : Menghapus pasangan kunci-nilai. Jika ada, maka bernilai salah.
• has() : Jika ada, maka bernilai salah.

Simbol (tipe asli)

Simbol adalah tipe data primitif yang diperkenalkan di ES6, yang mewakili独一无二Deklarasi

: const sy = Stmbol()

Parameter: string (opsional)

Metode:

• Simbol.for() : Membuat Symbol值yang dijelaskan oleh parameter If parameter ini ada, kembalikan Symbol值asli (cari terlebih dahulu lalu buat, Terdaftar di lingkungan global)
• Symbol.keyFor() : Mengembalikan deskripsi Symbol值yang terdaftar (hanya key Symbol.for() yang dapat dikembalikan)
• Object.getOwnPropertySymbols() : Mengembalikan array dari semua Symbol值yang digunakan sebagai nama properti dalam objek

// Deklarasikan let a = Simbol();
 misalkan b = Simbol();
 konsol.log(a === b); // salah
 
 //Simbol.untuk()
 biarkan c = Simbol.untuk("domesy");
 biarkan d = Simbol.untuk("domesy");
 konsol.log(c === d); // benar
 
 //Simbol.keyFor()
 const e = Simbol.untuk("1");
 console.log(Simbol.keyFor(e)); // 1
 
 //Simbol.deskripsi
 biarkan simbol = Simbol("es");
 console.log(simbol.deskripsi); //es
 console.log(Simbol("es") === Simbol("es")); // salah
 console.log(simbol === simbol); // benar
 console.log(symbol.description === "es"); // true

Proxy

Proxy digunakan untuk mengubah perilaku default operasi tertentu, yang setara dengan membuat perubahan pada tingkat bahasa, jadi ini semacam "meta programming") yaitu pemrograman dalam bahasa pemrograman

dapat dipahami dengan cara ini. Proxy adalah lapisan拦截yang dipasang sebelum objek target. Dunia luar harus melalui lapisan intersepsi ini jika ingin mengaksesnya. Oleh karena itu, mekanisme disediakan untuk memfilter dan menyaring akses dari dunia luar.

Proxy dapat dipahami di sini代理器

deklarasi proxy: const proxy = new Proxy(target, handler)

• target : mencegat objek
• handler : mendefinisikan

metode intersepsi:

• get() : mencegat pembacaan atribut objek
• set() : mencegat pengaturan objek Properties , mengembalikan nilai Boolean
• has() : memotong operasi propKey di proxy, mengembalikan nilai Boolean
• ownKeys() : memotong traversal properti objek, mengembalikan array
• deleteProperty() : memotong operasi menghapus proxy[propKey], mengembalikan Boolean value ()
• apply() : Mencegat pemanggilan fungsi, memanggil dan menerapkan operasi
• konstruk() : Mencegat perintah baru, mengembalikan sebuah objek: Mencegat perintah baru, mengembalikan sebuah objek

let obj = {
  nama: 'domestik',
  waktu: '27-01-2022',
  nilai: 1
 }
 
 biarkan data = Proksi baru(obj, {
     //mendapatkan()
     dapatkan(target, kunci){
         kembalikan target[kunci].ganti("2022", '2015')
     },
     
     //mengatur()
     set(target, kunci, nilai) {
        if (kunci === "nama") {
           kembali (target[kunci] = nilai);
        } kalau tidak {
           kembalikan target[kunci];
         }
     },
     
     // memiliki()
    memiliki(target, kunci) {
        if (kunci === "nama") {
            kembalikan target[kunci];
        } kalau tidak {
            kembali salah;
        }
    },
    //hapusProperti()
    deleteProperty(target, kunci) {
        if (kunci.indexOf("_") > -1) {
            hapus target[kunci];
            kembali benar;
        } kalau tidak {
            kembalikan target[kunci];
        }
    },
    // kunci milik sendiri()
    kunci sendiri(target) {
        return Object.keys(target).filter((item) => item != "time");
    },
 })
 
 console.log(data.time) // 27-01-2015
 
 data.waktu = '2020'
 data.name = 'Bereaksi'
 console.log(data) //Proksi {nama: 'Reaksi', waktu: '27-01-2022', nilai: 1}
 
 //Mencegat memiliki()
 console.log("nama" dalam data) // benar
 console.log("waktu" dalam data) // salah
 
 // Hapus hapusProperti()
 hapus data.waktu; // benar
 
 // Melintasi ownKeys()
 console.log(Objek.kunci(data)); //['nama', 'nilai']

 //menerapkan()
 misalkan jumlah = (...args) => {
    misalkan angka = 0;
    args.forEach((item) => {
        angka += barang;
    });
    nomor pengembalian;
 };

 jumlah = Proksi baru(jumlah, {
    terapkan(target, ctx, args) {
        kembali target(...args) * 2;
    },
 });
 
 konsol.log(jumlah(1, 2)); // 6
 konsol.log(jumlah.panggilan(null, 1, 2, 3)); // 12
 konsol.log(jumlah.berlaku(null, [1, 2, 3])); // 12
 
 //konstruktor()
 biarkan Pengguna = kelas {
    konstruktor(nama) {
        ini.nama = nama;
    }
 }
 Pengguna = Proksi baru(Pengguna, {
    membangun(target, argumen, Target baru) {
        kembalikan target baru(...args);
    },
  });
 console.log(new User("domesy")); // Pengguna {name: 'domesy'}

Reflect

Reflect mirip dengan Proxy, hanya saja ia mempertahankan perilaku default Object dan

• menggantikan beberapa metode objek Object yang jelas-jelas internal ke bahasa (seperti Object.defineProperty) dan meletakkannya di objek Reflect.
• Pada tahap ini, beberapa metode diterapkan pada objek Object dan Reflect. Di masa mendatang, metode baru akan diterapkan hanya pada objek Reflect
• untuk mengubah hasil pengembalian beberapa metode Object agar lebih masuk akal. Misalnya, Object.defineProperty(obj, name, desc) akan memunculkan kesalahan ketika properti tidak dapat didefinisikan, sementara Reflect.defineProperty(obj, name, desc) akan mengembalikan false
• untuk mengubah operasi Object menjadi perilaku

fungsional dan Metode Proxy berhubungan satu dengan satu, jadi kami tidak akan memperkenalkannya di sini.

Kelas

: abstraksi suatu kelas benda dengan karakteristik umum (sintaks konstruktor gula)

konstruktor() definisi dasar dan

kelas instance yang dihasilkan Induk {
     konstruktor(nama = 'es6'){
         ini.nama = nama
     }
 }
 biarkan data = Induk baru('domesy')
 console.log(data) // Induk { nama: 'domesy'}

meluas mewarisi

kelas Induk {
     konstruktor(nama = 'es6'){
         ini.nama = nama
     }
 }
 
 // Kelas pewarisan biasa Anak diperluas Induk {}
 console.log(Anak baru()) // Anak { nama: 'es6'} 
 
 // Melewati kelas parameter Child extends Parent {
    konstruktor(nama = "anak") {
        super(nama);
        this.type = "anak";
    }
 }
 console.log(new Child('domesy')) // Child { name: 'domesy', type: 'child'}

getter dan setter

• lebih penting dan sering digunakan untuk merangkum API
• get dan set atribut, bukan

kelas metode Induk {
     konstruktor(nama = 'es6'){
         ini.nama = nama
     }
     // pengambil
     dapatkan getName() {
         kembalikan 'sy' + nama ini
     } 
     // penyetel
     setel setNama(nilai){
         ini.nama = nilai
     }
 }
 
 biarkan data = Induk baru()
 console.log(data.getName) // syes6
 
 data.setName = 'domestik'
 console.log(data.getName) //

metode statis statis

• Metode statis tidak dapat dipanggil pada instance kelas, tetapi harus dipanggil melalui kelas itu sendiri

class Parent {
     getName statis = (nama) => {
         kembali `Halo! ${nama}`
     }
 }
 
 console.log(Parent.getName('domesy')) // Halo!

properti statis

yang megah

Induk {}
 Induk.type = "tes";
 
 console.log(Parent.type); //test

Promise

Promise adalah untuk memecahkan masalah "callback hell" yang dapat membuat pemrosesan operasi asinkron menjadi sangat elegan.

Promise dapat mendukung beberapa permintaan secara bersamaan dan memperoleh data dalam permintaan secara bersamaan. Promise ini dapat menyelesaikan masalah asinkron. Promise itu sendiri tidak dapat dikatakan sebagai

definisi asinkron: Status objek yang berisi hasil operasi asinkron

:

• tertunda: [tertunda] Status awal
• terpenuhi: [ Implementasi] Operasi berhasil
• ditolak: [Ditolak] Operasi gagal

Catatan:

• Janji akan menentukan metode mana yang akan dieksekusi berdasarkan status
• . Saat Promise dipakai, status tertunda secara default. Jika status asinkron tidak normal, maka akan ditolak
• transisi keadaan bersifat satu arah dan tidak dapat diubah. , keadaan yang ditentukan (terpenuhi/ditolak) tidak dapat ditransfer kembali ke keadaan awal (tertunda), dan hanya dapat dari tertunda ke terpenuhi atau ditolak

Penggunaan dasar

//Definisi normal biarkan ajax = ( panggilan balik) => {
     konsol.log('≈')
     setWaktu habis(() => {
         panggilan balik && panggilan balik.panggilan();
     }, 1000)
 } 
 ajax(() => {
     console.log('batas waktu')
 })
 // Pertama akan dicetak untuk memulai eksekusi, kemudian batas waktu akan dicetak setelah 1 detik.
 
 //Janji
 biarkan ajax = () => {
    console.log("Mulai eksekusi");
    kembalikan Janji baru((putuskan, tolak) => {
        setWaktu habis(() => {
            menyelesaikan();
        }, 1000);
    });
 };
 ajax().lalu(() => {
    console.log("batas waktu"); 
 });
 // Pertama akan dicetak untuk memulai eksekusi, kemudian batas waktu akan dicetak setelah 1 detik.
 
 //Kemudian()
 biarkan ajax = () => {
    console.log("Mulai eksekusi");
    kembalikan Janji baru((putuskan, tolak) => {
        setWaktu habis(() => {
            menyelesaikan();
        }, 1000);
    });
 };
 ajax()
 .lalu(() => {
     kembalikan Janji baru((putuskan, tolak) => {
        setWaktu habis(() => {
            menyelesaikan();
        }, 2000);
    });
 })
 .lalu(() => {
     console.log("batas waktu")
 })
 // Pertama akan diketik untuk memulai eksekusi, lalu batas waktu akan diketik setelah 3 detik (1+2)
 
 // menangkap()
 biarkan ajax = (angka) => {
    console.log("Mulai eksekusi");
    kembalikan Janji baru((putuskan, tolak) => {
        jika (angka > 5) {
            menyelesaikan();
        } kalau tidak {
            throw new Error("Terjadi kesalahan");
        }
    });
 };
 
 ajax(6)
 .lalu(fungsi () {
    console.log("timeout"); // Akan memulai eksekusi terlebih dahulu, kemudian batas waktu akan dicetak setelah 1 detik
 })
 .catch(fungsi (err) {
    console.log("menangkap", err);
 });
 
  ajax(3)
 .lalu(fungsi () {
    console.log("batas waktu"); 
 })
 .catch(fungsi (err) {
    console.log("catch"); // Akan memulai eksekusi terlebih dahulu, lalu menangkap setelah 1 detik.
 });

Promise.all() Operasi batch

• Promise.all(arr) digunakan untuk mengemas beberapa instance janji ke dalam instance Promise baru. Instance yang dikembalikan adalah janji biasa,
yang menerima
• array
• sebagai parameter
• Objek janji, atau itu bisa menjadi nilai
• lain
• .
• Janji gagal, dan nilai pengembalian adalah yang pertama

.
     Return New Promise (Resolve, Reject) => {
        Biarkan img = document.createElement ("img");
        img.src = src;
        img.onload = function () {
                Resolve (IMG);
        };
        img.onError = function (err) {
                tolak (err);
        };
    });
 }
 
 const showimgs = (imgs) => {
     imgs.foreach ((img) => {
         document.body.appendchild (IMG);
     })
 }
 
 Janji.all ([[
    LoadImg ("https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/pic/item/71cf3bc79f3df8dcc6511159cd11728b46102888888.jp8dcc651117cd11728b4610288888.jp8"),
    LoadImg ("https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/pic/item/71cf3bc79f3df8dcc6511159cd11728b46102888888.jp8dcc651117cd11728b4610288888.jp8"),
    LoadImg ("https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/pic/item/71cf3bc79f3df8dcc6511159cd11728b46102888888.jp8dcc651117cd11728b4610288888.jp8"),
 

• )

. Lalu (showimgs

)

; {
    Return New Promise (Resolve, Reject) => {
       Biarkan img = document.createElement ("img");
       img.src = src;
       img.onload = function () {
               Resolve (IMG);
       };
       img.onError = function (err) {
               tolak (err);
       };
   });
}

const showimgs = (imgs) => {
   Biarkan p = document.createElement ("p");
   P. lampgild (IMG);
   Document.Body.AppendChild (P);
}

Janji.race ([
   LoadImg ("https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/pic/item/71cf3bc79f3df8dcc6511159cd11728b46102888888.jp8dcc651117cd11728b4610288888.jp8"),
   LoadImg ("https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/pic/item/71cf3bc79f3df8dcc6511159cd11728b46102888888.jp8dcc651117cd11728b4610288888.jp8"),
   LoadImg ("https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/pic/item/71cf3bc79f3df8dcc6511159cd11728b46102888888.jp8dcc651117cd11728b4610288888.jp8"),
] kemudian (

• showimgs
• )

;

• , Fungsi dan kesalahan yang dilemparkan di dalam janji tidak akan mencerminkan
• bagaimana janji eksternal dieksekusi secara internal. akan selesai)

Generator

• ,

untuk

mengontrol iterator juga merupakan solusi pemrograman asinkron yang merangkum beberapa keadaan internal.

Dalam
• done value
• mengembalikan done value
• telah selesai)
• Selanjutnya
• digunakan untuk恢复eksekusi program

.
     menghasilkan "a";
     menghasilkan "b";
     mengembalikan "C"
 }
 
 Biarkan generator = data ();
 console.log (generator.next ()) // {value: 'a', selesai: false} 
 console.log (generator.next ()) // {value: 'b', selesai: false} 
 console.log (generator.next ()) // {value: 'c', selesai: true} 
 console.log (generator.next ()) // {value: tidak terdefinisi, selesai: true}

iterator

adalah antarmuka yang menyediakan mekanisme akses terpadu untuk berbagai struktur data. Selama setiap struktur data menggunakan antarmuka iterator, ia dapat menyelesaikan operasi traversal (yaitu, memproses semua anggota struktur data secara berurutan).

Fungsi Iterator:

• Pertama, ia menyediakan antarmuka akses yang terpadu dan sederhana untuk berbagai struktur data
• sehingga
• anggota struktur data dapat diatur dalam urutan tertentu.
• Terutama untuk ... konsumsi
• urutan traversal: mesin yang berbeda telah sepakat tentang bagaimana mengulangi properti, sehingga standarisasi perilaku ES11

Catatan:

• Dalam ES6, beberapa struktur data memiliki antarmuka iterator secara alami (seperti array), yaitu, yaitu, yaitu, yaitu, yaitu, yaitu, yaitu, yaitu, yaitu, yaitu, yaitu, yaitu, yaitu, yaitu, yaitu, yaitu, yaitu, yaitu Tanpa pemrosesan apa pun dapat dilintasi dengan ... dari loop, tetapi beberapa tidak dapat (seperti objek).
• Di ES6, ada tiga jenis struktur data dengan antarmuka iterator asli:数组,某些类似数组的对象, Set dan peta dan Map结构.
• Contoh menambahkan antarmuka iterator ke suatu objek.

// pada dasarnya menggunakan let arr = ["hello", "world"];
 Biarkan peta = arr [simbol.iterator] ();
 console.log (map.next ()); // {value: 'hello', selesai: false}
 console.log (map.next ()); // {value: 'world', selesai: false}
 console.log (map.next ());
 
 // untuk loop let arr = ["hello", "world"];
 untuk (biarkan nilai arr) {
    Console.log (nilai);
 }
 
 // Pemrosesan Objek Biarkan obj = {
     Mulai: [1, 5, 2],
     Akhir: [7, 9, 6],
     [Simbol.iterator](){
         Biarkan indeks = 0;
         Biarkan arr = this.start.concat (this.end)
         kembali {
             Berikutnya(){
                 if (index <arr.length) {
                     kembali {
                         Nilai: ARR [Indeks ++],
                         Selesai: Salah
                     }
                 }kalau tidak{
                     kembali {
                         Nilai: ARR [Indeks ++],
                         selesai: benar
                     }
                 }
             }
         }
     }
 }
 untuk (biarkan kunci obj) {
    Console.log (Key);
 }

Dekorator dekorator

untuk

• @ dan memodifikasi perilaku kelas
• core-decorators

     target.name = "domesy"
 }
 
 @nama
 tes kelas {}
 
 

Modularisasi

Domesy

untuk

menggunakan fungsi eksekusi langsung untuk mencapai modularisasi

menggunakan modularisasi:

• menyelesaikan konflik penamaan
• memberikan penggunaan kembali
• dan meningkatkan kode pemeliharaan kode

:

• CommonJS : untuk server (dependensi dinamis)
• AMD : Untuk browser (dependensi dinamis, jarang digunakan)
• CMD : untuk browser (dependensi dinamis, jarang digunakan)
• UMD : digunakan untuk browser dan server (dependensi dinamis)
• ESM : Digunakan untuk browser dan server (dependensi statis)

Ekspor Ekspor Ekspor Ekspor

• Secara Default: export default Index
• Ekspor Sendiri: `Ekspor Const Name = 'Domesy'
• Ekspor atas Permintaan (Direkomendasikan):` Ekspor {Name, Value, ID} '
• Named Name Export: export { name as newName }

Impor Impor Modul

• Impor Default (Disarankan): import Index from './Index'
• Impor keseluruhan: import * as Index from './Index'
• on-demand Impor (Disarankan): import { name, value, id } from './Index'
• Diberi
• nama Impor: import { name as newName } from './Index'
• Impor yang diarahkan sendiri: import './Index'
• ): import Index, { name, value, id } from './Index'

Mode

export命令dan import命令digabungkan dan ditulis dalam satu baris. Antarmuka, menghasilkan modul saat ini yang tidak dapat secara langsung menggunakan variabel yang

• diimpor
• .
• * dari './index'
• impor dan ekspor sesuai permintaan: `ekspor {name, value, id} dari './index'
• default ke impor dan ekspor bernama:` ekspor {default sebagai nama} dari './index'

ES7

Ekstensi Array

• Termasuk () : Ditambahkan satu berdasarkan indeks ES6, mewakili tempat untuk menemukan ES7

let arr = [1, 2, 3, 4]
 
 // Termasuk () ES6
 console.log (arr.includes (3)) // true
 Console.log ([1, 2, Nan]. Termasuk (NAN));
 
 // Termasuk () ES7
 console.log (arr.includes (1, 0)) // true
 console.log (arr.includes (1, 1)) // false

numeric extended

• power operator : use ** untuk mewakili Math.pow()

// operator daya es7
 Console.log (Math.pow (2, 3)) // 8
 Console.log (2 ** 8) // 256

ES8

Ekstensi Transfer Karakter

• Padstart () : Digunakan untuk
• Padend Penyelesaian Kepala () : Digunakan untuk penyelesaian ekor.

Biarkan str = 'Domesy'
 
 // PadStart (): Apakah akan diisi dalam bentuk spasi? "0"));
 Console.log ("8-27" .padstart (10, "yyyy-0m-0d"));
  
 

yang

• (
• )

Console.log ("1" .padend (2, "0"));

• Mengembalikan array nama atribut dan nilai atribut

Biarkan obj = {name: 'domesy', nilai: 'react'}

//Object.values ​​()
Console.log (Object.Values ​​(OBJ)) // ['React', 'React']

//Object.entries ()
console.log (objek.entries (obj)) // [['name', 'value'], ['react', 'react']]

async tunggu

fungsi: Ubah fungsi asinkron menjadi fungsi sinkron , (gula sintaks generator)

const func = async () => {
    Let Promise = New Promise ((Resolve, Reject) => {
    setWaktu habis(() => {
          tekad ("Execute");
        }, 1000);
    });
     
      Console.log (Await Promise);
      console.log (menunggu 0);
      console.log (menunggu janji.resolve (1));
      konsol.log(2);
      return promise.resolve (3);
 }
 
 func (). Lalu (val => {
      Console.log (Val);
 

}

)

• forEach()
• Promise then
• ​

Async

• async/await for-of Promise.all()
• reject try catch

apakah

itu objek janji.

Hal non-janji ini menunggu.

Jika menunggu objek janji, menunggu juga akan menjeda kode di belakang async, terlebih dahulu menjalankan kode sinkronisasi di luar async, tunggu objek janji dipenuhi, dan kemudian gunakan parameter Resolve sebagai hasil operasi dari ekspresi menunggu.

kerugian dari async menunggu dan menjanjikan

:

itu
• mencapai
tulisan sinkron serial yang
• sebenarnya
• , dan kode ini relatif mudah dibaca.

kejelasan

• kode ditingkatkan

• . , menyebabkan kode kehilangan konkurensi.

Ekstensi transfer karakter

ES9

• melonggarkan pembatasan pada string yang melarikan diri dalam templat tag : undefined dikembalikan ketika string ilegal melarikan diri ditemui, dan string asli dapat diperoleh dari raw .

// rileks pembatasan string const test = (value) => {
     Console.log (nilai)
 }
 Tes `Domesy` // ['Domesy', Raw: [" Domesy "]]

Promise

Promise.finally ()

• Fungsi panggilan balik yang akan dieksekusi terlepas dari status akhir

Biarkan func = time => {
     return new janji ((res, rej) => {
         setWaktu habis(() => {
             if (waktu <500) {
                 res (waktu)
             }kalau tidak{
                 REJ (waktu)
             }
         }, waktu)
     })
 }
 
 menyenangkan (300)
 .then ((val) => console.log ('res', val))
 .catch ((erro) => console.log ('rej', erro))
 . Final (() => console.log ('selesai'))
 // Hasil Eksekusi: RES 300 FUNC Selesai (700)
 .then ((val) => console.log ('res', val))
 .catch ((erro) => console.log ('rej', erro))
 . Final (() => console.log ('selesai'))
 // Hasil Eksekusi: REJ 700 Diselesaikan

untuk-Await-of

-Await-Of: Iterator Asinkron, Loop Menunggu untuk setiap Promise对象untuk menjadi resolved状态sebelum memasuki langkah berikutnya

Let GetTime = (detik) => {
     Return New Promise (res => {
         setWaktu habis(() => {
             res (detik)
         }, detik)
     })
 }
 
tes fungsi async () {
    Biarkan ARR = [GetTime (2000), GetTime (500), GetTime (1000)]
    untuk menunggu (biarkan x arr) {
        console.log (x); 
    }
}

test () // Jalankan 2000 500 1000

ES10

Ekstensi Transfer Karakter

• JSON.Stringify () : Dapat mengembalikan string yang tidak memenuhi standar UTF-8 (U+2028 dan U+2029 dapat dimasukkan secara langsung)

//json.stringify ( ) Meningkatkan konsol.log (json.stringify (" ud83d  ude0e")); 
 

• (

json.stringify (" u {d800}"))

;

• (Catatan: Hampir sama dengan peta yang diikuti oleh datar dengan nilai kedalaman 1, tetapi flatmap biasanya sedikit lebih efisien ketika digabungkan menjadi metode tunggal.)
• Flat : Metode ini secara rekursif melintasi array pada kedalaman yang dapat ditentukan dan menggabungkan semua Elemen menggabungkannya dengan elemen-elemen di sub-array yang dilintasi untuk membentuk array baru dan mengembalikannya. Standarnya adalah 1. (Aplikasi: perataan array (secara otomatis menyelesaikan ke bawah saat Infinity dimasukkan))

Biarkan arr = [1, 2, 3, 4]
 
 // flatmap ()
 console.log (arr.map ((x) => [x * 2]));
 console.log (arr.flatmap ((x) => [x * 2]));
 console.log (arr.flatmap ((x) => [[x * 2]]));
 
 const arr1 = [0, 1, 2, [3, 4]];
 const arr2 = [0, 1, 2, [[[3, 4]]]];

 Console.log (arr1.flat ());
 Console.log (arr2.flat (2));
 

(

arr2.flat (infinity)

• )

;

• Object.entries()
• Anda dapat melakukan beberapa konversi tipe data

dari peta ke objek

mari peta = peta baru ([
    ["A", 1],
    ["B", 2],
 ]);
 
 Biarkan obj = objek.fromentries (peta);
 console.log (obj); // {a: 1, b: 2}

array dikonversi ke objek

// Perhatikan bentuk array let arr = [
    ["A", 1],
    ["B", 2],
 ]
 Biarkan OBJ = Object.Fromentries (ARR);
 console.log (obj); // {a: 1, b: 2}

konversi objek

biarkan obj = {
    A: 1,
    B: 2,
    C: 3
 }
 
 Biarkan res = object.fromentries (
     Object.entries (obj) .filter (([Key, val]) => value! == 3)
 )
 
 console.log (res) // {a: 1, b: 2}

ekspansi numerik

• ToString () transformasi : kembalikan kode asli fungsi (konsisten dengan pengkodean)

// tostring ()
 function test () {
     Consople.log ('Domesy')
 }
 console.log (test.tostring ());
 // test fungsi () {
 //consople.log('domesy ')
 //}

parameter tangkapan opsional

di ES10, coba tangkap dapat mengabaikan parameter tangkapan

mari func = (name) => {
      mencoba {
         return json.parse (nama)
      } menangkap {
         kembali salah
      }
  }
  
  Console.log (func (1)) // 1
  console.log (func ({a: '1'})) // false

es11

bigint (tipe asli)

• tipe data primitif baru: bigint, yang mewakili integer presisi sewenang -wenang dan dapat mewakili data yang sangat panjang, yang dapat melebihi 2 dari

• dalam

aman

• dalam
• kisaran-(2^53-1) hingga 2^53-1.

• hanya dapat 53 digit biner (setara dengan 16 digit desimal, plus atau minus 9007199254740992).
• Bigint tidak memiliki batasan jumlah digit, dan bilangan bulat apa pun dapat diwakili secara akurat. Namun, itu hanya dapat digunakan untuk mewakili bilangan bulat, dan untuk membedakannya dari angka, data tipe BigInt harus ditambahkan dengan akhiran n.

tetapi

• tidak
• dapat menggunakan tanda -tanda positif.

 Console.log (2 ** 53) // 9007199254740992
 console.log (number.max_safe_integer) // 9007199254740991
 
 // Bigint
 const bigint = 9007199254740993n
 Console.log (BigInt) // 9007199254740993n
 Console.log (Typeof BigInt) // Bigint
 Console.log (1n == 1) // Benar
 console.log (1n === 1) // false
 const bigintnum = bigint (9007199254740993n)
 Console.log (BigIntnum) // 9007199254740993n

tipe data dasar

di ES6, yaitu: srting , number , boolean , object , null , undefined , symbol

termasuk

object Array , Function , Date , RegExp

8. Mereka adalah: srting , number , boolean , object , null , undefined , symbol , janji BigInt

Promise.allsettled

():

• Kemas beberapa contoh menjadi contoh baru dan kembalikan array status setelah perubahan status semua contoh (ubah semua perubahan dan kemudian kembali)
• terlepas dari apakah hasilnya terpenuhi atau ditolak, tidak ada tangkapan
• yang setara dengan Promise.all() yang ditingkatkan

.
    Promise.reject ({
      Kode: 500,
      MSG: "Pengecualian Layanan",
    }),
    Janji.resolve ({
      Kode: 200,
      Data: ["1", "2", "3"],
    }),
    Janji.resolve ({
      Kode: 200,
      Data: ["4", "5", "6"],
    }),
  ]). Kemudian ((res) => {
      console.log (res) // [{reason: {code: 500, msg: 'Layanan Pengecualian'}, Status: "Ditolak"},
                      // {reason: {code: 200, data: ["1", "2", "3"]}, status: "ditolak"},
                      // {Reason: {code: 200, data: ["4", "5", "6"]}, status: "ditolak"}]
      const data = res.filter ((item) => item.status === "terpenuhi");
      console.log (data);
                          // {Reason: {code: 200, data: ["4", "5", "6"]}, status: "ditolak"}]
  })

Impor ():

• import() require() Impor yang require
• berdasarkan Permintaan.
• memuat

// kemudian ()
 Biarkan modulepage = "index.js";
 impor (modulepage) .then ((modul) => {
    module.init ();
 });
 
 // dikombinasikan dengan async menunggu
 (asinkron () => {
  const modulepage = 'index.js'
  modul const = menunggu impor (modulepage);
  Console.log (modul)
 })

global

• ini, tidak peduli lingkungan apa pun (browser, node, dll.), Selalu menunjuk ke objek global

// browser lingkungan konsol.log (globalthis) // window

// node

• Simbol

Rantai Opsional

Global

apakah

• naskah
• ada.

 // Sebelum ES11 Biarkan a = user && user.name
 
 // Sekarang biarkan b = pengguna? Nama

NULL NULL Operator

• Konferensi Konvensi untuk Menangani Nilai Default
• Dibandingkan dengan ||, Null Value Coalescing Operator ?? .

"" ||. "Nilai default";
  "??" Nilai default ";
  
 const b = 0;
 const a = b ||
 Console.log (A);
 
 const b = null // tidak terdefinisi
 const a = b ??
 

Console.log

(

A

)

• ;​
• ​​
• String asli yang cocok dengan pola dengan penggantian.
• Pola dapat berupa string atau ekspresi reguler, dan penggantian dapat berupa string atau fungsi yang diterapkan untuk setiap kecocokan.
• replaceall () setara untuk meningkatkan karakteristik ganti (), mengganti semua

let str = "hai!, ini adalah fitur baru ES6 ~ ES12, saat ini ES12"
 
 console.log (str.replace ("es", "sy")); , ini adalah fitur baru dari sy6 ~ es12, saat ini ES12
 console.log (str.replace (/es/g, "sy")); , ini adalah fitur baru Sy6 ~ sy12, saat ini SY12
 
 console.log (str.replaceall ("es", "sy"); , ini adalah fitur baru Sy6 ~ sy12, saat ini SY12
 console.log (str.replaceall (/es/g, "sy")); , ini adalah fitur baru dari Sy6 ~ sy12, saat ini

janji

janji

• . Kembalikan janji yang diselesaikan terlebih dahulu.

Janji.
    Janji.
    Janji.resolve ("kedua"),
    Janji.resolve ("pertama"),
 ])
 .then ((res) => console.log (res)) // kedua
 .catch ((err) => console.error (err)); 
 
 Janji.
    Janji.
    Promise.reject ("Error 2"),
    Promise.reject ("Error 3"),
 ])
 .then ((res) => console.log (res))
 .catch ((err) => console.error (err));
 // AgregateError: Semua janji ditolak
 
 Janji.
    Janji.resolve ("ketiga"),
    Janji.resolve ("kedua"),
    Janji.resolve ("pertama"),
 ])
 .then ((res) => console.log (res)) // ketiga
 

• err

(

err));

• Hal ini memungkinkan objek yang ada dilacak tanpa mencegahnya dikumpulkan.
• Sangat
• berguna
• untuk caching dan pemetaan objek
• . mungkin. Penting juga untuk menghindari mengandalkan perilaku spesifik apa pun yang tidak dijamin oleh spesifikasi. Kapan, bagaimana, dan apakah pengumpulan sampah terjadi tergantung pada implementasi mesin JavaScript yang diberikan.

let loverref = new weastref ({name: 'domesy', tahun: 24})
 
 ledakan.deref () // {name: 'domesy', tahun: 24}
 ledakan.deref (). Tahun // 24

operator logis dan ekspresi penugasan

&& =

biarkan num1 = 5;
Biarkan num2 = 10;
num1 && = num2;
Console.log (num1);

// setara dengan num1 && (num1 = num2);
if (num1) {
    num1 = num2;
 }

|| =

biarkan num1;
Biarkan num2 = 10;
num1 || = num2;
Console.log (num1);

// setara dengan num1 || (num1 = num2);
if (! num1) {
   num1 = num2;
}

?? =

• Operator Null Value Coalescing

??
Biarkan num2 = 10;
Biarkan num3 = null; // tidak ditentukan

num1 ?? = num2;
Console.log (num1);

num1 = false;
num1 ?? = num2;
Console.log (num1);

num3 ?? = 123;
Console.log (num3);

// setara dengan //

num1

??
Biarkan num2 = 100_000;

Console.log (num1);
Console.log (num2);

const num3 = 10.12_34_56
Console.log (num3);