Rumah  >  Artikel  >  hujung hadapan web  >  33 kod satu baris JavaScript yang sangat praktikal, adalah disyorkan untuk mengumpulnya!

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

WBOY
WBOYke hadapan
2022-01-12 17:22:151583semak imbas

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

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

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
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

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

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'

3 Rentetan rawak

Kaedah ini digunakan untuk hasilkan rentetan rawak:

const randomString = () => Math.random().toString(36).slice(2);
randomString();

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;
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;;

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]));

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

Anda boleh menggunakan dua kaedah berikut untuk menggabungkan dua tatasusunan:

const merge = (a, b) => a.concat(b);
const merge = (a, b) => [...a, ...b];
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);

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

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);

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

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;

6. Operasi Pelayar

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

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");

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=/`));

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();

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)

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();

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;

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();

9. Ubah hala ke URL

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

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/")

Operasi lain

const showPrintDialog = () => window.print()

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();

3 Dapatkan jenis pembolehubah

Kaedah ini digunakan untuk mendapatkan jenis pembolehubah:
[foo, bar] = [bar, foo];

<.>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

5. 检测对象是否为空

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

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

【相关推荐: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:
Artikel ini dikembalikan pada:juejin.im. Jika ada pelanggaran, sila hubungi admin@php.cn Padam