Geekly articles weekly

Contoh menggunakan beberapa fitur JavaScript baru

Penulis materi, terjemahan yang kami terbitkan hari ini, mengatakan bahwa fitur JavaScript baru yang masuk dalam standar ES2019 sudah secara resmi tersedia di browser Chrome, Firefox dan Safari, serta pada platform Node.js. Jika Anda perlu mendukung peramban yang sudah ketinggalan zaman, maka Anda dapat memanfaatkan inovasi dengan mengubah kode JS menggunakan Babel . Di sini kita melihat contoh beberapa fitur JS baru.



Metode Object.fromEntries


Di ES2017, metode Object.entries telah Object.entries . Itu mengkonversi objek ke array. Misalnya, mungkin terlihat seperti ini:

 let students = {  amelia: 20,  beatrice: 22,  cece: 20,  deirdre: 19,  eloise: 21 } Object.entries(students) // [ // [ 'amelia', 20 ], // [ 'beatrice', 22 ], // [ 'cece', 20 ], // [ 'deirdre', 19 ], // [ 'eloise', 21 ] // ]

Metode ini telah menjadi tambahan yang bagus untuk kemampuan bahasa. Faktanya adalah bahwa hal itu memungkinkan untuk dengan mudah memproses data objek menggunakan banyak metode yang dibangun ke dalam prototipe Array . Di antara metode ini, misalnya, map , filter , reduce dapat dicatat. Tetapi untuk mengubah array kembali ke objek, sayangnya, tidak ada alat yang mudah digunakan. Semuanya harus dilakukan secara manual, menggunakan loop:

 let students = {  amelia: 20,  beatrice: 22,  cece: 20,  deirdre: 19,  eloise: 21 } //          .filter() let overTwentyOne = Object.entries(students).filter(([name, age]) => {  return age >= 21 }) // [ [ 'beatrice', 22 ], [ 'eloise', 21 ] ] //       let drinkingAgeStudents = {} for (let [name, age] of overTwentyOne) {    drinkingAgeStudents[name] = age; } // { beatrice: 22, eloise: 21 }

Metode Object.fromEntries dirancang untuk menghilangkan loop tersebut. Ini memungkinkan Anda untuk memecahkan masalah yang sama dengan jumlah kode yang jauh lebih kecil. Ini mungkin membantu pengembang untuk menggunakan metode array lebih sering untuk memproses objek yang dikonversi menjadi array.

 let students = {  amelia: 20,  beatrice: 22,  cece: 20,  deirdre: 19,  eloise: 21 } //          .filter() let overTwentyOne = Object.entries(students).filter(([name, age]) => {  return age >= 21 }) // [ [ 'beatrice', 22 ], [ 'eloise', 21 ] ] //       let drinkingAgeStudents = Object.fromEntries(overTwentyOne); // { beatrice: 22, eloise: 21 }

Penting untuk dicatat bahwa array dan objek tidak dalam struktur data yang sia-sia berbeda. Dalam beberapa kasus, mengonversi satu sama lain menyebabkan hilangnya data. Dalam contoh berikut, Anda dapat melihat bagaimana saat mengonversi array ke objek, elemen-elemen array yang merupakan kunci duplikat objek hilang.

 let students = [  [ 'amelia', 22 ],  [ 'beatrice', 22 ],  [ 'eloise', 21],  [ 'beatrice', 20 ] ] let studentObj = Object.fromEntries(students); // { amelia: 22, beatrice: 20, eloise: 21 } //    beatrice!

UpDukungan


  • Chrome 75
  • Firefox 67
  • Safari 12.1

Metode Array.prototype.flat


Array multidimensi adalah struktur data yang sering ditemui programmer. Terutama - saat memuat beberapa data. Pada saat yang sama, mengurangi dimensi array selalu menjadi tugas penting. Selalu mungkin untuk menyelesaikan masalah ini, tetapi kode untuk solusinya tidak dapat disebut sangat menarik.

Perhatikan contoh berikut. Di sini, sebagai hasil dari pemrosesan array objek menggunakan fungsi map , kami memiliki array multidimensi. Kami ingin membuatnya lebih "rata."

 let courses = [  {    subject: "math",    numberOfStudents: 3,    waitlistStudents: 2,    students: ['Janet', 'Martha', 'Bob', ['Phil', 'Candace']]  },  {    subject: "english",    numberOfStudents: 2,    students: ['Wilson', 'Taylor']  },  {    subject: "history",    numberOfStudents: 4,    students: ['Edith', 'Jacob', 'Peter', 'Betty']  } ] let courseStudents = courses.map(course => course.students) // [ //  [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ], //  [ 'Wilson', 'Taylor' ], //  [ 'Edith', 'Jacob', 'Peter', 'Betty' ] // ] //       -  [].concat.apply([], courseStudents)

Sekarang kita miliki metode Array.prototype.flat , yang mengambil argumen opsional yang menunjukkan pada tingkat apa elemen-elemen array harus "dinaikkan".

 let courseStudents = [  [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ],  [ 'Wilson', 'Taylor' ],  [ 'Edith', 'Jacob', 'Peter', 'Betty' ] ] let flattenOneLevel = courseStudents.flat(1) console.log(flattenOneLevel) // [ //  'Janet', //  'Martha', //  'Bob', //  [ 'Phil', 'Candace' ], //  'Wilson', //  'Taylor', //  'Edith', //  'Jacob', //  'Peter', //  'Betty' // ] let flattenTwoLevels = courseStudents.flat(2) console.log(flattenTwoLevels) // [ //  'Janet',  'Martha', //  'Bob',   'Phil', //  'Candace', 'Wilson', //  'Taylor', 'Edith', //  'Jacob',  'Peter', //  'Betty' // ]

Harap dicatat bahwa jika Anda tidak memberikan argumen ke metode ini, itu akan menaikkan elemen array satu level. Ini sangat penting, karena dalam kasus kami, kami perlu mengubah array menjadi struktur data yang benar-benar datar. Inilah yang terjadi ketika menggunakan metode ini tanpa parameter:

 let courseStudents = [  [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ],  [ 'Wilson', 'Taylor' ],  [ 'Edith', 'Jacob', 'Peter', 'Betty' ] ] let defaultFlattened = courseStudents.flat() console.log(defaultFlattened) // [ //  'Janet', //  'Martha', //  'Bob', //  [ 'Phil', 'Candace' ], //  'Wilson', //  'Taylor', //  'Edith', //  'Jacob', //  'Peter', //  'Betty' // ]

Pembenaran perangkat semacam itu dari metode ini dapat ditemukan dalam kenyataan bahwa, secara default, itu tidak berusaha mengubah array apa pun menjadi satu dimensi, memerlukan instruksi khusus untuk mengubah array. Jika Anda perlu mengubah array yang parameter pastinya tidak diketahui menjadi array satu dimensi, Anda bisa meneruskan nilai Infinity ke metode flat .

 let courseStudents = [  [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ],  [ 'Wilson', 'Taylor' ],  [ 'Edith', 'Jacob', 'Peter', 'Betty' ] ] let alwaysFlattened = courseStudents.flat(Infinity) console.log(alwaysFlattened) // [ //  'Janet',  'Martha', //  'Bob',   'Phil', //  'Candace', 'Wilson', //  'Taylor', 'Edith', //  'Jacob',  'Peter', //  'Betty' // ]

Seperti biasa, operasi seperti itu harus digunakan dengan hati-hati. Pendekatan ini, mungkin, tidak bisa disebut pilihan yang baik untuk kasus-kasus tersebut ketika kedalaman array yang diproses benar-benar tidak diketahui.

UpDukungan


  • Chrome 75
  • Firefox 67
  • Safari 12

Metode Array.prototype.flatMap


Bersama-sama dengan metode flat , kami sekarang memiliki metode gabungan baru - Array.prototype.flatMap . Di atas, kita sebenarnya sudah melihat contoh situasi di mana metode ini mungkin berguna, tetapi mari kita lihat contoh lain.

Misalkan kita dihadapkan dengan tugas memasukkan elemen tertentu ke dalam array. Bagaimana kita menyelesaikannya sebelum munculnya fitur JS baru? Misalnya, seperti ini:

 let grades = [78, 62, 80, 64] let curved = grades.map(grade => [grade, grade + 7]) // [ [ 78, 85 ], [ 62, 69 ], [ 80, 87 ], [ 64, 71 ] ] let flatMapped = [].concat.apply([], curved) //    .       flat,      JS   // [ // 78, 85, 62, 69, // 80, 87, 64, 71 // ]

Sekarang kita memiliki metode Array.prototype.flat , kode ini dapat ditingkatkan:

 let grades = [78, 62, 80, 64] let flatMapped = grades.map(grade => [grade, grade + 7]).flat() // [ // 78, 85, 62, 69, // 80, 87, 64, 71 // ]

Masalah yang kita selesaikan di sini didasarkan pada pola yang relatif populer (terutama pemrograman fungsional). Oleh karena itu, betapa indahnya kita dapat menyelesaikannya dengan menggunakan metode flatMap tidak bisa lain kecuali bersukacita:

 let grades = [78, 62, 80, 64] let flatMapped = grades.flatMap(grade => [grade, grade + 7]); // [ // 78, 85, 62, 69, // 80, 87, 64, 71 // ]

Ingatlah bahwa, secara default, metode Array.prototype.flat berfungsi seolah-olah dilewatkan unit. Metode flatMap berperilaku dengan cara yang persis sama, yaitu, ia “meningkatkan” elemen-elemen array dengan hanya 1 level. Ini adalah hasil dari kombinasi metode map dan flat .

 let grades = [78, 62, 80, 64] let flatMapped = grades.flatMap(grade => [grade, [grade + 7]]); // [ //  78, [ 85 ], //  62, [ 69 ], //  80, [ 87 ], //  64, [ 71 ] // ]

UpDukungan


  • Chrome 75
  • Firefox 67
  • Safari 12

Metode String.prototype.trimStart dan String.prototype.trimEnd


Fitur baru lain yang bagus dari ES2019 adalah alias yang memberikan beberapa metode string nama yang lebih bermakna. Sebelumnya, kami memiliki metode String.prototype.trimLeft dan String.prototype.trimLeft yang kami miliki:

 let message = "  Welcome to CS 101  " message.trimRight() // '  Welcome to CS 101' message.trimLeft() // 'Welcome to CS 101  ' message.trimRight().trimLeft() // 'Welcome to CS 101'

Metodenya luar biasa, tetapi hal baiknya adalah mereka diberi nama yang lebih relevan dengan tujuannya. Dan tujuan mereka adalah untuk menghapus spasi putih terdepan dan tertinggal dari string.

 let message = "  Welcome to CS 101  " message.trimEnd() // '  Welcome to CS 101' message.trimStart() // 'Welcome to CS 101  ' message.trimEnd().trimStart() // 'Welcome to CS 101'

UpDukungan


  • Chrome 75
  • Firefox 67
  • Safari 12

Argumen blok tangkap opsional


Fitur bagus lain dari ES2019 adalah bahwa argumen dalam blok try-catch kini telah menjadi opsional. Sebelumnya, semua blok catch harus melewati objek pengecualian sebagai parameter. Argumen harus disahkan untuk catch bahkan jika itu tidak digunakan.

 try {  let parsed = JSON.parse(obj) } catch(e) {  // e      console.log("error") }

Sekarang tidak demikian. Jika objek pengecualian tidak digunakan dalam catch , maka tidak ada yang perlu ditransfer ke blok ini.

 try {  let parsed = JSON.parse(obj) } catch {  console.log("error") }

Ini adalah peluang besar, yang akan berguna dalam kasus-kasus di mana programmer mengetahui terlebih dahulu tentang terjadinya situasi darurat yang akan mengarah ke masuk ke catch sesuai.

UpDukungan


  • Chrome 75
  • Firefox 67
  • Safari 12

Perubahan ke Function.prototype.toString Method


Standar ES2019 telah membawa perubahan pada cara metode fungsi toString bekerja. Sebelumnya, ia sedikit mengubah penampilan kode output:

 function greeting() {  const name = 'CSS Tricks'  console.log(`hello from ${name}`) } greeting.toString() //'function greeting() {\nconst name = \'CSS Tricks\'\nconsole.log(`hello from ${name} //`)\n}

Sekarang metode ini mencerminkan representasi nyata dari kode sumber fungsi.

 function greeting() {  const name = 'CSS Tricks'  console.log(`hello from ${name}`) } greeting.toString() // 'function greeting() {\n' + // " const name = 'CSS Tricks'\n" + // ' console.log(`hello from ${name}`)\n' + // '}'

UpDukungan


  • Chrome 75
  • Firefox 60
  • Safari 12 ( sebagian )

Ringkasan


Di sini kami melihat beberapa contoh menggunakan hanya beberapa fitur JavaScript baru. Jika Anda tertarik pada inovasi JS, lihat repositori ini dan tabel ini .

Pembaca yang budiman! Pernahkah Anda mengalami situasi di mana fitur-fitur baru JS secara signifikan menyederhanakan solusi dari setiap masalah?

Source: https://habr.com/ru/post/id464295/

More articles:


All Articles