Proposal ECMAScript: Array.prototype. {Flat, flatMap}

Inovasi ECMAScript

Halo pembaca Habr. Saya membawa perhatian Anda pada hal yang menarik akan segera muncul sudah muncul dalam standar ECMAScript. Sudah tersedia. hampir di semua browser dan semua fungsi juga. Inovasi ini hanyalah pembungkus gula dan dapat diselesaikan dengan cara Anda sendiri dan saya akan menunjukkan ini kepada Anda juga. Tetapi gula ini akan memungkinkan kita untuk menulis lebih sedikit kode, karena kita sangat menyukainya. Jadi, fungsi dasar ditambahkan ke array, dalam hal ini ada 2 di antaranya, yang akan memungkinkan kita untuk memperluas array multi-level menjadi satu atau beberapa level sarang. Ya, ya, dan semua ini seperti yang mereka katakan di luar kotak

Proposal ECMAScript: Array.prototype. {Flat, flatMap}

Proposal ini dulunya dikenal sebagai Array.prototype.flat {ten, Map} . Ini memiliki status panggung . 3 4 dari TC39 yaitu sudah Calon Selesai Saya pikir itu layak sedikit gangguan dan berbicara tentang TC39 ini dan tentang standar, yang akrab dengan dapat melewati retret ini. jadi:

Standar JavaScript dan cara persiapannya.

Naskah ECMAS

ECMAScript adalah standar yang dikembangkan dan dikelola oleh ECMA International . Ini diadopsi oleh Majelis Umum Ecma pada Juni 1997. Lebih khusus, ECMAScript adalah standar ECMA-262 yang disebut Spesifikasi Bahasa ECMAScript. Standar dibuat berdasarkan versi JavaScript asli oleh Brendan Aich dari Netscape dan juru bahasa Microsoft JScript, tetapi sejak itu dikembangkan secara signifikan.

JavaScript adalah implementasi spesifikasi ECMAScript . Ini berarti bahwa karena spesifikasi memiliki konsep baru atau edisi yang diterbitkan, pengembang peramban dan kerangka kerja seperti Node.js harus secara konsisten menerapkan fungsi baru. Untuk melakukan ini, dilakukan perubahan pada mesin yang digunakan browser dan kerangka kerja ini untuk menafsirkan dan mengeksekusi kode JavaScript.

Mengapa Anda membutuhkan spesifikasi? Browser yang berbeda menggunakan mesin JavaScript yang berbeda, misalnya, V8 di Chrome, SpiderMonkey di Firefox, dan sebagainya. Saat Anda menulis dalam JavaScript, Anda mengharapkan semua mesin di semua lingkungan mem-parsing dan mengeksekusi kode Anda persis sama. Tanpa spesifikasi standar, salah satu mesin ini akan bebas untuk mengeksekusi JavaScript sesukanya, jelas ini tidak terlalu baik.

TC39

Ecma International Technical Committee 39 (alias TC39) adalah komite yang terdiri dari orang-orang yang sangat pintar, ini terkait dengan sekelompok peserta, omong-omong, juga pintar. Mereka semua berkumpul bersama di rapat komite kira-kira setiap dua bulan dan mendiskusikan daftar masalah yang sudah disiapkan sebelumnya.
Tujuan TC39 adalah untuk memelihara dan memperbarui spesifikasi ECMAScript yang disebutkan sebelumnya, setelah diskusi dan konsensus. Ini termasuk sintaksis bahasa, semantik, perpustakaan, dan teknologi terkait yang menjadi dasar bahasa.

Proses ini didefinisikan oleh TC39. Semuanya dimulai dengan konsep fungsional yang memperluas atau mengubah spesifikasi. Draf ini sering berasal dari komunitas pengembang, atau dari anggota TC39 sendiri. Jika proposal tersebut layak, draft tersebut mendapatkan status proposal resmi.

Kemudian, dalam perjalanan dari ide ke publikasi, proposal melewati beberapa tahap tertentu. Mereka diberi nomor dari nol hingga empat programmer pria :

[“Strawman”, “Proposal”, “Draft”, “Candidat”, “Finished”] 

Pindah ke langkah berikutnya memerlukan persetujuan TC39. Jika proposal mencapai tahap 4, dapat diharapkan bahwa itu akan dimasukkan dalam edisi resmi berikutnya yang diterbitkan dari spesifikasi standar ECMA-262, dan sebagai hasilnya, itu akan muncul dalam lingkungan yang menjalankan JavaScript. Anda dapat mempelajari lebih lanjut tentang proses ini dari dokumen itu sendiri .

Semua proposal yang ada untuk pengantar standar dapat ditemukan di sini di github
Nah, sekarang mari kita melangkah lebih jauh ...

Array.prototype.flat

Metode flat () mengembalikan array baru,

 var newArray = arr.flat(depth); 

di mana semua elemen bersarang di bawah array secara rekursif "dinaikkan" ke tingkat kedalaman yang ditentukan.

Contoh:

 const arr1 = [1, 2, [3, 4]]; arr1.flat(); //? [1, 2, 3, 4] const arr2 = [1, 2, [3, 4, [5, 6]]]; arr2.flat(); //? [1, 2, 3, 4, [5, 6]] const arr3 = [1, 2, [3, 4, [5, 6]]]; arr3.flat(2); //? [1, 2, 3, 4, 5, 6] 

Ada juga efek samping, menghilangkan elemen array yang tidak ditentukan

Contoh:

 const arr4 = [1, 2, , 4, 5]; arr4.flat(); //? [1, 2, 4, 5] 

Pos melakukannya sendiri

Kami menggunakan mengurangi dan concat

Contoh:

 const arr1 = [1,2,3,[1,2,3,4, [2,3,4]]]; function flattenDeep(arr1) { return arr1.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []); } flattenDeep(arr1); //? [1, 2, 3, 1, 2, 3, 4, 2, 3, 4] 

Array.prototype.flatMap

Metode flatMap () pertama-tama menerapkan fungsi untuk setiap elemen, dan kemudian mengubah hasilnya menjadi struktur datar dan menempatkannya dalam array baru. Ini identik dengan fungsi peta, diikuti oleh penggunaan fungsi flat dengan parameter kedalaman 1, tetapi flatMap sering berguna karena berfungsi sedikit lebih efisien.

 var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) { // return element for new_array }[, thisArg]) 

callback - Fungsi yang menghasilkan elemen-elemen dari array baru membutuhkan tiga argumen:

1. currentValue - Elemen saat ini dari array untuk diproses.
2. index (opsional) - Indeks item yang akan diproses dalam array.
3. array (opsional) - Array yang akan dilintasi.
   thisArg (opsional) - Nilai yang digunakan saat memanggil fungsi panggilan balik.
   Nilai kembali - Array baru, yang setiap elemennya merupakan hasil dari fungsi panggilan balik dan "dinaikkan" ke level 1.

contoh:

 [ { x: 1, y: 2 }, { x: 3, y: 4 }, { x: 5, y: 6 } ].flatMap(c => [cx, cy]) //? [1, 2, 3, 4, 5, 6] // or const orders = [ { orderId: 42, items: [ {name: 'soap', price: 1.99}, {name: 'shampoo', price: 4.99} ] }, { orderId: 1337, items: [ {name: 'toothpaste', price: 5.59}, {name: 'toothbrush', price: 8.99} ] } ]; orders.flatMap(i => i.items.map(i => i.name)); //? ["soap", "shampoo", "toothpaste", "toothbrush"] 

Pos melakukannya sendiri

 var arr1 = [1, 2, 3, 4]; arr1.reduce((acc, x) => acc.concat([x * 2]), []); // [2, 4, 6, 8] 

Kesimpulan

Ingatlah bahwa fungsi ini ditambahkan ke bahasa karena suatu alasan. Alasan orang pintar dari TC39 melakukan ini adalah meningkatkan kualitas bahasa, abstrak, kegunaan, dan lainnya. Pelajari inovasi-inovasi ini sebelumnya, dan pada saat mereka secara resmi diterbitkan dan didukung di mana-mana, Anda dapat segera mulai bekerja tanpa membuang waktu. Anda juga dapat memposisikan diri sebagai pakar JavaScript di organisasi Anda, yang dapat menawarkan fitur bahasa baru yang dapat meningkatkan kode dan produk itu sendiri.

ps: ketika artikel sedang ditulis :), Proposal pindah ke tahap 4
Array.prototype.{flat,flatMap} ke tahap 4, per 2019.01.29 TC39