11 Pelapis JavaScript yang mengejutkan!

Apakah yang anda akan lakukan jika anda ingin menarik perhatian pembangun profesional? Ia mudah: gunakan logik mudah dan kod sesedikit mungkin untuk menyelesaikan masalah yang kompleks. Dengan pengenalan fungsi anak panah ES6, adalah mungkin untuk mencipta satu baris kod yang kelihatan elegan dan ringkas.

Dalam artikel ini, saya akan berkongsi dengan anda 11 pelapis yang jarang tetapi berkuasa. Adakah anda bersedia? Mari kita mulakan dengan yang pertama!

1. Dapatkan bilangan aksara dalam rentetan

Dapatkan bilangan aksara ialah utiliti berguna yang berguna dalam banyak situasi. Anda boleh menggunakan ini untuk mendapatkan bilangan ruang diikuti dengan bilangan perkataan, atau ini boleh digunakan untuk mendapatkan kiraan pembatas tertentu dalam rentetan.

const characterCount = (str, char) => str.split(char).length - 1

Ideanya sangat mudah. Kami membahagi rentetan menggunakan char hujah yang diluluskan dan dapatkan panjang tatasusunan yang dikembalikan. Kerana setiap kali rentetan dipecahkan, terdapat satu lagi rentetan daripada pembahagi jadi dengan menolak 1, kita mempunyai satu baris characterCount.

2. Menyemak sama ada objek kosong

Menyemak kekosongan objek sebenarnya jauh lebih sukar daripada yang kelihatan. Setiap semakan untuk melihat sama ada objek sama dengan {} mengembalikan palsu, walaupun objek itu kosong.

Nasib baik, baris tunggal kod berikut melakukan apa yang kita mahukan.

const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object

Dalam baris ini kita menyemak sama ada panjang kekunci objek adalah sama dengan 0 dan jika hujah yang diluluskan ialah objek sebenar.

3. Tunggu untuk tempoh masa tertentu dan kemudian laksanakan

Dalam satu baris kod ini, kita akan didedahkan kepada beberapa pengaturcaraan tak segerak. Ideanya mudah sahaja.

Semasa menjalankan kod, jika anda ingin menunggu untuk jangka masa tertentu, berikut ialah menunggu satu baris:

const wait = async (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));

Dalam the wait one-liner , kami mencipta janji dan menyelesaikannya selepas masa tertentu menggunakan fungsi setTimeout.

4. Dapatkan perbezaan hari antara dua tarikh

Apabila membangunkan aplikasi web, tarikh selalunya merupakan bahagian yang paling mengelirukan kerana terdapat banyak konsep yang sangat mengelirukan tersalah kira.

Ini adalah satu pelapik yang berkuasa untuk mengira perbezaan hari antara dua tarikh. Tetapi ada lagi yang perlu dilakukan. Seperti saya, anda boleh membuat baris tunggal anda sendiri untuk mengira perbezaan bulanan, tahunan, dsb.

const daysBetween = (date1, date2) => Math.ceil(Math.abs(date1 - date2) / (1000 * 60 * 60 * 24))

Logik di sebalik satu baris ini mudah difahami. Apabila dua tarikh ditolak, nilai pulangan ialah perbezaan dalam milisaat. Untuk menukar milisaat kepada hari, kita perlu membahagikannya dengan milisaat, saat, minit dan jam masing-masing.

5. Ubah hala ke URL lain

Jika anda pernah mencipta tapak web sebenar, saya pasti anda akan menghadapi logik pengesahan. Sebagai contoh, pengguna bukan pentadbir seharusnya tidak boleh mengakses laluan /admin. Jika pengguna mencuba, maka anda mesti mengubah hala mereka ke URL lain.

Satu pelapik ini sesuai dengan situasi yang saya nyatakan di atas, tetapi saya rasa anda boleh menemui lebih banyak kes penggunaan.

const redirect = url => location.href = url

lokasi ialah kaedah pada objek tetingkap global Tingkah laku menetapkan atribut href adalah sama dengan gelagat pengguna mengklik pautan.

6. Semak sokongan sentuhan pada peranti anda

Memandangkan semakin banyak peranti boleh menyambung ke Internet, keperluan untuk mencipta tapak web responsif semakin tinggi. Dua puluh tahun yang lalu, pembangun akan mempertimbangkan versi desktop tapak web mereka, tetapi hari ini lebih daripada 50% trafik web datang daripada peranti sentuh.

Jadi mengambil beberapa tindakan berdasarkan sokongan sentuhan peranti anda adalah satu konsep yang sangat penting.

const touchSupported = () => ('ontouchstart' in window || DocumentTouch && document instanceof DocumentTouch)

Dalam baris ini kami menyemak sama ada dokumen itu menyokong acara permulaan sentuh.

7 Sisipkan rentetan HTML selepas elemen

Semasa membangunkan aplikasi web, adalah perkara biasa untuk menggunakan JavaScript untuk mengemas kini DOM. Terdapat beberapa cara asas untuk menyelesaikan kerja, tetapi apabila keadaan menjadi rumit, ia boleh menjadi sukar untuk diatasi.

Ini ialah satu baris kod yang menyuntik rentetan HTML sejurus selepas elemen HTML. Dengan beberapa minit berfikir dan googling, saya pasti anda boleh menemui versi terdahulu satu pelapis ini.

const insertHTMLAfter = (html, el) => el.insertAdjacentHTML('afterend', html)

8. Mengocok tatasusunan Mengkocok set data semasa pembangunan adalah situasi biasa yang mungkin anda hadapi pada bila-bila masa. , tiada kaedah shuffling tatasusunan terbina dalam dalam JavaScript. Tetapi, berikut ialah shuffle satu pelapik yang boleh anda gunakan setiap hari:

const shuffle = arr => arr.sort(() => 0.5 - Math.random())

它利用数组的排序方法，在数组的前一个元素之前或之后进行随机排序。

9、在网页上获取选定的文本

浏览器在全局 windows 对象上有一个名为 getSelection 的内置方法。

使用此方法，你可以创建一个单行，返回网页上突出显示或选定的文本。

const getSelectedText = () => window.getSelection().toString()

10、 获取一个随机布尔值

在编程时，尤其是在编写游戏时，有时你会想要随机采取行动。在这种情况下，下面的单行非常方便。

const getRandomBoolean = () => Math.random() >= 0.5

上面的单行有 50/50 的机会返回 true 或 false。因为生成的随机数大于 0.5 的概率等于较小的概率。

但是，例如，如果你想获得一个概率为 70% 错误的随机布尔值，那么，你可以简单地将 0.5 更改为 0.7，依此类推。

11、计算数组的平均值

可以使用多种方法计算数组的平均值。但道理对所有人都是一样的。你必须获得数组及其长度的总和；然后除法给出平均值。

const average = (arr) => arr.reduce((a, b) => a + b) / arr.length

在平均单行中，我们使用 reduce 来获取一行中的数组的总和，而不是使用循环。然后，我们将其除以数组长度，这是数组的平均值。

写在最后

今天的内容，就是这样，现在，我想你已经了解了 11 个简单但功能强大的 JavaScript 单行程序。我试着选择那些不是很受欢迎和知名度的东西，这样你就可以学习新东西。我每天都在使用它们，我想对你也会有所帮助。

感谢你的阅读，如果你喜欢它，一定要点赞，如果你对这篇文章有什么想说的，请在留言区告诉我们。

翻译： 杨小二

英文：

https://betterprogramming.pub/11-rare-javascript-one-liners-that-will-amaze-you-331659832301