Rumah hujung hadapan web Soal Jawab bahagian hadapan 33 kod satu baris JavaScript yang sangat praktikal, adalah disyorkan untuk mengumpulnya!

33 kod satu baris JavaScript yang sangat praktikal, adalah disyorkan untuk mengumpulnya!

Jan 12, 2022 pm 05:22 PM
html javascript hujung hadapan

Artikel ini membawakan anda 33 kod satu baris JavaScript yang sangat praktikal, disusun dan dikongsi dengan anda Kaedah ini menggunakan beberapa API untuk memudahkan operasi, tetapi beberapa kaedah tidak begitu elegan untuk menulis satu baris, jadi inilah yang utama. Ketahui cara menggunakan API! Semoga ia membantu semua orang.

33 kod satu baris JavaScript yang sangat praktikal, adalah disyorkan untuk mengumpulnya!

1. Pemprosesan tarikh

1 >

Kaedah ini digunakan untuk menyemak sama ada tarikh yang diberikan adalah sah:

const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());
isDateValid("December 17, 1995 03:24:00");  // true
Salin selepas log masuk

2. Kira selang antara dua tarikh

Ini kaedah Digunakan untuk mengira selang antara dua tarikh:

const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)
dayDif(new Date("2021-11-3"), new Date("2022-2-1"))  // 90
Salin selepas log masuk

3 Cari hari dalam tahun di mana tarikh itu terletak

Kaedah ini digunakan untuk. mengesan Tarikh yang diberikan adalah pada hari apa dalam tahun:

const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);
dayOfYear(new Date());   // 307
Salin selepas log masuk
2021 telah berlalu

4 Pemformatan masa

Kaedah ini Format yang boleh digunakan untuk menukar masa kepada jam:minit:saat:

const timeFromDate = date => date.toTimeString().slice(0, 8);
    
timeFromDate(new Date(2021, 11, 2, 12, 30, 0));  // 12:30:00
timeFromDate(new Date());  // 返回当前时间 09:00:00
Salin selepas log masuk

2. Pemprosesan rentetan

1. Gunakan huruf besar pada huruf pertama rentetan

Kaedah ini digunakan untuk menggunakan huruf besar rentetan bahasa Inggeris:

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
capitalize("hello world")  // Hello world
Salin selepas log masuk

2. Balikkan rentetan

Kaedah ini digunakan untuk membalikkan rentetan dan mengembalikan rentetan terbalik:

const reverse = str => str.split('').reverse().join('');
reverse('hello world');   // 'dlrow olleh'
Salin selepas log masuk

3 Rentetan rawak

Kaedah ini digunakan untuk hasilkan rentetan rawak:

const randomString = () => Math.random().toString(36).slice(2);
randomString();
Salin selepas log masuk

4 Potong rentetan

Kaedah ini boleh memotong rentetan daripada panjang yang ditentukan:

<🎜. >
const truncateString = (string, length) => string.length < length ? string : `${string.slice(0, length - 3)}...`;
truncateString(&#39;Hi, I should be truncated because I am too loooong!&#39;, 36)   // &#39;Hi, I should be truncated because...&#39;
Salin selepas log masuk
5. Alih keluar HTML daripada rentetan

Kaedah ini digunakan untuk mengalih keluar elemen HTML daripada rentetan:

const stripHtml = html => (new DOMParser().parseFromString(html, &#39;text/html&#39;)).body.textContent || &#39;&#39;;
Salin selepas log masuk

3 🎜>1 Alih keluar item pendua daripada tatasusunan

Kaedah ini digunakan untuk mengalih keluar item pendua daripada susunan Pendua:

2 Tentukan sama ada tatasusunan kosong
const removeDuplicates = (arr) => [...new Set(arr)];
console.log(removeDuplicates([1, 2, 2, 3, 3, 4, 4, 5, 5, 6]));
Salin selepas log masuk

Kaedah ini digunakan untuk menentukan sama ada tatasusunan ialah tatasusunan kosong, ia akan mengembalikan nilai Boolean :

3. Cantumkan dua tatasusunan
const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0;
isNotEmpty([1, 2, 3]);  // true
Salin selepas log masuk

Anda boleh menggunakan dua kaedah berikut untuk menggabungkan dua tatasusunan:

const merge = (a, b) => a.concat(b);
const merge = (a, b) => [...a, ...b];
Salin selepas log masuk
4. Operasi nombor

1 Tentukan sama ada nombor ganjil atau genap

Kaedah ini digunakan untuk menentukan sama ada nombor Ganjil atau genap:

2 Dapatkan purata set nombor
const isEven = num => num % 2 === 0;
isEven(996);
Salin selepas log masuk

3 Dapatkan rawak antara dua integer
const average = (...args) => args.reduce((a, b) => a + b) / args.length;
average(1, 2, 3, 4, 5);   // 3
Salin selepas log masuk

Kaedah ini digunakan untuk mendapatkan integer rawak antara dua integer

4. digunakan untuk membundarkan nombor mengikut digit yang ditentukan:
const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);
random(1, 50);
Salin selepas log masuk

5 Operasi warna

const round = (n, d) => Number(Math.round(n + "e" + d) + "e-" + d)
round(1.005, 2) //1.01
round(1.555, 2) //1.56
Salin selepas log masuk

1 mekanisme penukaran Kaedah ini boleh menukar nilai warna RGB kepada nilai heksadesimal:

2 Dapatkan Warna Tersuai perenambelasan rawak

Kaedah ini digunakan untuk mendapatkan nilai warna heksadesimal rawak:
const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
rgbToHex(255, 255, 255);  // &#39;#ffffff&#39;
Salin selepas log masuk

6. Operasi Pelayar

const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;
randomHex();
Salin selepas log masuk

1. Salin kandungan ke papan keratan Kaedah ini menggunakan navigator.clipboard.writeText untuk menyalin teks ke papan keratan:

Kosongkan semua kuki

Kaedah ini boleh mengakses kuki dan mengosongkan semua kuki yang disimpan dalam halaman web dengan menggunakan document.cookie:
const copyToClipboard = (text) => navigator.clipboard.writeText(text);
copyToClipboard("Hello World");
Salin selepas log masuk

3 Dapatkan teks yang dipilih

Kaedah ini mendapatkan teks yang dipilih oleh pengguna melalui atribut getSelection terbina dalam:
const clearCookies = document.cookie.split(&#39;;&#39;).forEach(cookie => document.cookie = cookie.replace(/^ +/, &#39;&#39;).replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`));
Salin selepas log masuk

4 Kesan sama ada ia adalah Mod gelap

Kaedah ini digunakan untuk mengesan sama ada persekitaran semasa ialah mod gelap, ia ialah nilai Boolean:
const getSelectedText = () => window.getSelection().toString();
getSelectedText();
Salin selepas log masuk

5 Tatal ke bahagian atas halaman

Kaedah ini digunakan untuk kembali ke bahagian atas halaman:
const isDarkMode = window.matchMedia && window.matchMedia(&#39;(prefers-color-scheme: dark)&#39;).matches
console.log(isDarkMode)
Salin selepas log masuk

6 Tentukan sama ada halaman tab semasa diaktifkan

Kaedah ini digunakan untuk mengesan Sama ada. halaman tab semasa telah diaktifkan:
const goToTop = () => window.scrollTo(0, 0);
goToTop();
Salin selepas log masuk

7 Tentukan sama ada peranti semasa ialah peranti Apple

Kaedah ini digunakan untuk mengesan sama ada peranti semasa adalah. peranti Apple:
const isTabInView = () => !document.hidden;
Salin selepas log masuk

8 Sama ada hendak menatal ke bahagian bawah halaman

Kaedah ini digunakan untuk menentukan sama ada halaman itu berada di bahagian bawah:
const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform);
isAppleDevice();
Salin selepas log masuk

9. Ubah hala ke URL

Kaedah ini digunakan untuk mengubah hala ke URL baharu:
const scrolledToBottom = () => document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight;
Salin selepas log masuk

10. Buka kotak cetakan penyemak imbas

Kaedah ini digunakan untuk membuka kotak cetakan penyemak imbas:
const redirect = url => location.href = url
redirect("https://www.google.com/")
Salin selepas log masuk

Operasi lain

const showPrintDialog = () => window.print()
Salin selepas log masuk

1. Nilai Boolean RawakKaedah ini boleh mengembalikan nilai Boolean rawak Gunakan Math.random() untuk mendapatkan nombor rawak dari 0-1. Bandingkan dengan 0.5, dan anda akan mempunyai separuh kebarangkalian Dapatkan nilai benar atau salah.

2. Pertukaran pembolehubah

Anda boleh menggunakan borang berikut untuk menukar nilai dua pembolehubah apabila pembolehubah ketiga tidak berkenaan:
const randomBoolean = () => Math.random() >= 0.5;
randomBoolean();
Salin selepas log masuk

3 Dapatkan jenis pembolehubah

Kaedah ini digunakan untuk mendapatkan jenis pembolehubah:
[foo, bar] = [bar, foo];
Salin selepas log masuk

<. 🎜>4. Penukaran Fahrenheit antara darjah Celsius

该方法用于摄氏度和华氏度之间的转化:

const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32;
const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5/9;
celsiusToFahrenheit(15);    // 59
celsiusToFahrenheit(0);     // 32
celsiusToFahrenheit(-20);   // -4
fahrenheitToCelsius(59);    // 15
fahrenheitToCelsius(32);    // 0
Salin selepas log masuk

5. 检测对象是否为空

该方法用于检测一个JavaScript对象是否为空:

const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object;
Salin selepas log masuk

【相关推荐:javascript学习教程

Atas ialah kandungan terperinci 33 kod satu baris JavaScript yang sangat praktikal, adalah disyorkan untuk mengumpulnya!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Arahan sembang dan cara menggunakannya
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Sempadan Jadual dalam HTML Sempadan Jadual dalam HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.

HTML jidar-kiri HTML jidar-kiri Sep 04, 2024 pm 04:48 PM

Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.

Jadual Bersarang dalam HTML Jadual Bersarang dalam HTML Sep 04, 2024 pm 04:49 PM

Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.

Susun Atur Jadual HTML Susun Atur Jadual HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.

Pemegang Tempat Input HTML Pemegang Tempat Input HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.

Senarai Tertib HTML Senarai Tertib HTML Sep 04, 2024 pm 04:43 PM

Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing

Memindahkan Teks dalam HTML Memindahkan Teks dalam HTML Sep 04, 2024 pm 04:45 PM

Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.

Butang onclick HTML Butang onclick HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.

See all articles