Semua petua dan cara baru ES2019

ES2019 membawa beberapa ciri baru kepada standard ECMAScript. Ciri -ciri ini boleh didapati secara rasmi di Node.js, Chrome, Firefox, dan Safari. Untuk menyokong pelayar yang lebih tua, anda juga boleh menggunakan Babel untuk menyusun ciri -ciri ini ke dalam versi JavaScript yang berlainan.

Mari lihat apa ciri baru yang ada!

Object.fromEntries

ES2017 memperkenalkan kaedah Object.entries , yang menukarkan objek ke dalam perwakilan array mereka. Contohnya:

 Biarkan Pelajar = {
  Amelia: 20,
  Beatrice: 22,
  CECE: 20,
  Deirdre: 19,
  Eloise: 21
}

Object.entries (pelajar) 
// [
// ['Amelia', 20],
// ['Beatrice', 22],
// ['Cece', 20],
// ['Deirdre', 19],
// ['Eloise', 21]
//]

Ini sangat berguna kerana ia membolehkan objek menggunakan beberapa fungsi yang dibina ke dalam prototaip array seperti map , filter , reduce , dan lain -lain. Walau bagaimanapun, menukar hasilnya kembali ke objek memerlukan proses yang agak membosankan.

 Biarkan Pelajar = {
  Amelia: 20,
  Beatrice: 22,
  CECE: 20,
  Deirdre: 19,
  Eloise: 21
}

// Tukar ke array untuk menggunakan fungsi .filter () biarkan overtwentyOne = object.EnTries (pelajar) .filter (([name, usia]) => {
  Umur kembali> = 21
}) // [['Beatrice', 22], ['Eloise', 21]]

// Tukar array multidimensi kembali ke objek Let DrinkingAgestudents = {}
untuk (biarkan [nama, umur] overtwentyone) {
    DrinkingAgestudents [name] = usia;
}
// {Beatrice: 22, Eloise: 21}

Kaedah Object.fromEntries direka untuk menghapuskan gelung ini! Ia menyediakan kod bersih untuk memudahkan anda menggunakan kaedah prototaip array pada objek.

 Biarkan Pelajar = {
  Amelia: 20,
  Beatrice: 22,
  CECE: 20,
  Deirdre: 19,
  Eloise: 21
}

// Tukar ke array untuk menggunakan fungsi .filter () biarkan overtwentyOne = object.EnTries (pelajar) .filter (([name, usia]) => {
  Umur kembali> = 21
}) // [['Beatrice', 22], ['Eloise', 21]]

// Menukar array multidimensi kembali ke objek Let DrinkingAgestudents = Object.Fromentries (overtwentyOne); 
// {Beatrice: 22, Eloise: 21}

Harus diingat bahawa tatasusunan dan objek adalah struktur data yang berbeza, dan menukar antara kedua -duanya boleh menyebabkan kehilangan data. Contoh berikut menunjukkan bagaimana elemen array menjadi kunci objek pendua:

 Biarkan Pelajar = [
  ['Amelia', 22], 
  ['Beatrice', 22], 
  ['Eloise', 21], 
  ['Beatrice', 20]
]

biarkan studentObj = object.FromEntries (pelajar); 
// {Amelia: 22, Beatrice: 20, Eloise: 21}
// Beatrice pertama dibuang!

Berhati -hati dengan kesan sampingan yang berpotensi apabila menggunakan fungsi ini.

Situasi Sokongan Object.fromEntries

Chrome	Firefox	Safari	Tepi
75	67	12.1	Tidak disokong

Array.prototype.flat kaedah

Arus multidimensi adalah struktur data yang sangat biasa, terutamanya apabila mengambil data. Keupayaan untuk meratakan susunan multidimensi diperlukan. Walaupun ia boleh dilakukan sebelum ini, kaedah ini tidak elegan.

Mari kita lihat contoh di mana fungsi map mengembalikan array multidimensi yang perlu diratakan.

 Biarkan kursus = [
  {
    Subjek: "Matematik",
    NumberOfudents: 3,
    Waitliststudents: 2,
    Pelajar: ['Janet', 'Martha', 'Bob', ['Phil', 'Candace']]
  },
  {
    Subjek: "Bahasa Inggeris",
    NumberOfDents: 2,
    Pelajar: ['Wilson', 'Taylor']
  },
  {
    Subjek: "Sejarah",
    NumberOfdudents: 4,
    Pelajar: ['Edith', 'Jacob', 'Peter', 'Betty']
  }
]

Biarkan Coursestudents = Courses.Map (kursus => kursus.Duden)
// [
// ['Janet', 'Martha', 'Bob', ['Phil', 'Candace']],
// ['Wilson', 'Taylor'],
// ['Edith', 'Jacob', 'Peter', 'Betty']
//]

[] .concat.apply ([], coursestudents) // kita mesti menggunakan kaedah ini

Kaedah Array.prototype.flat muncul. Ia menerima parameter kedalaman pilihan.

 Biarkan Coursestudents = [
  ['Janet', 'Martha', 'Bob', ['Phil', 'Candace']],
  ['Wilson', 'Taylor'],
  ['Edith', 'Jacob', 'Peter', 'Betty']
]

Biarkan flattenonelevel = coursestudents.flat (1)
Console.log (flattenonelevel)
// [
// 'Janet',
// 'Martha',
// 'bob',
// ['Phil', 'Candace'],
// 'Wilson',
// 'Taylor',
// 'Edith',
// 'Jacob',
// 'Peter',
// 'Betty'
//]

Biarkan flattentWoleVels = coursestudents.flat (2)
Console.log (FlattentWolevels)
// [
// 'Janet', 'Martha',
// 'bob', 'phil',
// 'Candace', 'Wilson',
// 'Taylor', 'Edith',
// 'Jacob', 'Peter',
// 'Betty'
//]

Perhatikan bahawa jika tiada parameter ditentukan, kedalaman lalai adalah 1. Ini sangat penting kerana dalam contoh kami, ini tidak sepenuhnya meratakan array.

 Biarkan Coursestudents = [
  ['Janet', 'Martha', 'Bob', ['Phil', 'Candace']],
  ['Wilson', 'Taylor'],
  ['Edith', 'Jacob', 'Peter', 'Betty']
]

Biarkan defaultFlattened = coursestudents.flat ()
Console.log (DefaultFlattened)
// [
// 'Janet',
// 'Martha',
// 'bob',
// ['Phil', 'Candace'],
// 'Wilson',
// 'Taylor',
// 'Edith',
// 'Jacob',
// 'Peter',
// 'Betty'
//]

Alasan untuk reka bentuk ini ialah fungsi itu tidak tamak secara lalai dan memerlukan arahan yang jelas untuk dijalankan dengan cara ini. Infinity boleh digunakan sebagai parameter untuk kes -kes di mana kedalaman tidak diketahui dan niatnya adalah untuk meratakan sepenuhnya array.

 Biarkan Coursestudents = [
  ['Janet', 'Martha', 'Bob', ['Phil', 'Candace']],
  ['Wilson', 'Taylor'],
  ['Edith', 'Jacob', 'Peter', 'Betty']
]

Biarkan Sentiasa Sentiasa = CourSestudents.Flat (Infinity)
Console.log (selaluFlattened)
// [
// 'Janet', 'Martha',
// 'bob', 'phil',
// 'Candace', 'Wilson',
// 'Taylor', 'Edith',
// 'Jacob', 'Peter',
// 'Betty'
//]

Seperti biasa, operasi tamak harus digunakan dengan berhati -hati, dan jika kedalaman array memang tidak diketahui, operasi tamak mungkin bukan pilihan yang baik.

Array.prototype.flat kaedah sokongan kaedah

Chrome	Firefox	Safari	Tepi
75	67	12	Tidak disokong

Chrome Android	Firefox Android	IOS Safari	Iaitu mudah alih	Samsung Internet	Android WebView
75	67	12.1	Tidak disokong	Tidak disokong	67

Kaedah Array.prototype.flatMap

Dengan penambahan kaedah flat , kami juga mendapat Array.prototype.flatMap fungsi gabungan. Kami sebenarnya telah melihat apa yang berfungsi dalam contoh di atas, tetapi mari kita lihat satu lagi.

Jika kita mahu memasukkan elemen ke dalam array, apakah yang akan kelihatan seperti sebelum ES2019 menambah ciri -ciri ini?

 Biarkan gred = [78, 62, 80, 64]

Biarkan melengkung = gred.map (gred => [gred, gred 7])
// [[78, 85], [62, 69], [80, 87], [64, 71]]

Biarkan flatMapped = [] .concat.apply ([], melengkung) // sekarang rata, rata boleh digunakan tetapi tidak wujud sebelum // [
// 78, 85, 62, 69,
// 80, 87, 64, 71
//]

Sekarang kita mempunyai Array.prototype.flat , kita dapat memperbaiki contoh ini sedikit.

 Biarkan gred = [78, 62, 80, 64]

Biarkan flatMapped = gred.map (gred => [gred, gred 7]). rata ()
// [
// 78, 85, 62, 69,
// 80, 87, 64, 71
//]

Walau bagaimanapun, ini masih merupakan corak yang agak popular, terutamanya dalam pengaturcaraan berfungsi. Oleh itu, sangat bagus untuk membinanya menjadi prototaip array. Menggunakan flatMap kita boleh melakukan ini:

 Biarkan gred = [78, 62, 80, 64]

biarkan flatMapped = gred.flatmap (gred => [gred, gred 7]);
// [
// 78, 85, 62, 69,
// 80, 87, 64, 71
//]

Ingat, parameter lalai untuk Array.prototype.flat adalah 1. flatMap bersamaan dengan menggabungkan map dan flat tanpa parameter. Oleh itu, flatMap hanya akan meratakan satu lapisan.

 Biarkan gred = [78, 62, 80, 64]

biarkan flatMapped = gred.flatmap (gred => [gred, [gred 7]]);
// [
// 78, [85],
// 62, [69],
// 80, [87],
// 64, [71]
//]

Array.prototype.flatMap Kaedah Sokongan Sokongan

Chrome	Firefox	Safari	Tepi
75	67	12	Tidak disokong

Chrome Android	Firefox Android	IOS Safari	Iaitu mudah alih	Samsung Internet	Android WebView
75	67	12.1	Tidak disokong	Tidak disokong	67

String.trimStart dan String.trimEnd Kaedah

Satu lagi tambahan yang bagus untuk ES2019 adalah alias, yang menjadikan beberapa nama fungsi rentetan lebih jelas. Sebelum ini, String.trimRight dan String.trimLeft tersedia.

 Biarkan mesej = "Selamat datang ke CS 101"
mesej.trimright ()
// 'Selamat datang ke CS 101'
mesej.trimleft ()
// 'Selamat datang ke CS 101'
mesej.trimright (). trimleft ()
// 'Selamat datang ke CS 101'

Ini adalah fungsi yang hebat, tetapi ia juga berguna untuk memberi mereka nama yang sesuai dengan tujuan mereka. Padam ruang permulaan dan akhir.

 Biarkan mesej = "Selamat datang ke CS 101"
mesej.trimend ()
// 'Selamat datang ke CS 101'
mesej.trimstart ()
// 'Selamat datang ke CS 101'
mesej.trimend (). trimstart ()
// 'Selamat datang ke CS 101'

String.trimStart dan String.trimEnd Kaedah Sokongan Sokongan

Chrome	Firefox	Safari	Tepi
75	67	12	Tidak disokong

Pilihan catch mengikat

Satu lagi ciri yang bagus dari ES2019 adalah untuk membuat parameter dalam blok try-catch cuba. Sebelum ini, semua blok catch melepasi pengecualian sebagai parameter. Ini bermakna walaupun kod di blok catch mengabaikannya, ia masih wujud.

 Cuba {
  Biarkan parsed = json.parse (obj)
} menangkap (e) {
  // Abaikan e, atau gunakan console.log (OBJ)
}

Ini tidak lagi berlaku. Sekiranya tiada pengecualian digunakan dalam blok catch , tiada yang diperlukan sama sekali.

 Cuba {
  Biarkan parsed = json.parse (obj)
} menangkap {
  Console.log (OBJ)
}

Ini adalah pilihan yang baik jika anda sudah tahu apa ralat dan mencari data yang mencetuskannya.

Sokongan untuk mengikat catch pilihan

Chrome	Firefox	Safari	Tepi
75	67	12	Tidak disokong

Perubahan pada Function.toString() kaedah

ES2019 juga mengubah cara Function.toString() kaedah berjalan. Sebelum ini, ia benar -benar dikeluarkan ruang.

 fungsi ucapan () {
  const name = 'CSS Tricks'
  Console.log (`Hello dari $ {name}`)
}

salam.ToString ()
// 'salam fungsi () {\ nconst name = \' css tricks \ '\ nconsole.log (`hello from $ {name} //`) \ n}'

Kini ia mencerminkan perwakilan sebenar fungsi dalam kod sumber.

 fungsi ucapan () {
  const name = 'CSS Tricks'
  Console.log (`Hello dari $ {name}`)
}

salam.ToString ()
// 'ucapan fungsi () {\ n'  
// "const name = 'css tricks' \ n"  
// 'console.log (`hello dari $ {name}`) \ n'  
// '}'

Ini terutamanya perubahan dalaman, tetapi saya tidak dapat membantu berfikir bahawa ini boleh menjadikan kehidupan lebih mudah untuk blogger atau dua pada masa akan datang.

Sokongan Function.toString() Kaedah

Chrome	Firefox	Safari	Tepi
75	60	12 - Sokongan Separa	17 - Sokongan separa

Ini adalah ciri baru ES2019!

Anda juga mungkin ingin meneroka beberapa ciri baru yang lain, termasuk:

• Penerangan Simbol
• Kestabilan menyusun
• Ecmascript sebagai superset json
• JSON.stringify

Selamat menjalani pengaturcaraan JavaScript!

Atas ialah kandungan terperinci Semua petua dan cara baru ES2019. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!