Keupayaan JavaScript yang mungkin tidak anda ketahui. Bahagian 1

Artikel ini akan berkongsi beberapa kemahiran JavaScript untuk membantu anda memahami dengan lebih baik kehalusan bahasa ini dan meningkatkan kod anda. Artikel ini terutamanya untuk pemaju junior dan pertengahan. ?

Jangan lupa untuk melanggan saluran Telegram saya, saya akan berkongsi artikel menarik mengenai pembangunan depan! ?

Mula!

simbol segmentasi digital

1. Dalam nombor, anda boleh menggunakan
untuk meningkatkan kebolehbacaan kod.

_

const sixBillion = 6000000000;

// 难以阅读
const sixBillion2 = 6000_000_000;

// 更易于阅读
console.log(sixBillion2); // 6000000000

// 也可用于计算
const sum = 1000 + 6000_000_000; // 6000001000

memudahkan pengendali rantai pilihan

dan watak pengkomputeran ternary

2. && Contohnya, kami ingin memudahkan kod berikut:

Gunakan pengendali rantai pilihan untuk membuat semula kod:

const obj = null;
console.log(obj && obj.name);
const title1 = document.querySelector('.title');
const title = title1 ? title.innerText : undefined;

Operasi rantai pilihan menjadikan kod lebih ringkas dan mudah dibaca.

const obj = null;
console.log(obj?.name);
const title1 = document.querySelector('.title');
const title = title1?.innerText;

menggunakan bigin untuk menyelesaikan masalah pengiraan integer besar

contohnya: <例>

Untuk mengira jumlah yang besar, disarankan untuk menggunakan BIGINT. Ini akan membantu mengelakkan kesilapan mengira. Number.MAX_SAFE_INTEGER

Math.pow(2, 53) === Math.pow(2, 53) + 1; // true

// Math.pow(2, 53) => 9007199254740992

// Math.pow(2, 53) + 1 => 9007199254740992

<算> alternatif pengendali

BigInt(Math.pow(2, 53)) === BigInt(Math.pow(2, 53)) + BigInt(1); // false

Untuk memeriksa sama ada atribut dalam objek, kami biasanya menggunakan pengendali
4. , tetapi anda juga boleh menggunakan

   . in

   kedua -duanya mempunyai kekurangan mereka:

<算> Atribut sedia ada dalam pemeriksaan watak pengkomputeran, termasuk sifat -sifat warisan prototaip. Jika anda hanya ingin menyemak atribut objek itu sendiri, bukan sifat prototaipnya, ini boleh menyebabkan hasil yang tidak dijangka. in Kaedah hanya memeriksa sifat -sifat objek itu sendiri, tidak termasuk sifat -sifat warisan prototaip. Walau bagaimanapun, jika objek menulis semula kaedah <象>, kaedah ini tidak akan berfungsi dengan betul. Dalam kes ini, panggilan <下> boleh menyebabkan kesilapan atau keputusan yang salah. obj.hasOwnProperty()

Tiada kaedah ini tidak menganggap sifat -sifat yang boleh diakses melalui rantaian prototaip. Jika anda perlu menyemak atribut dalam objek, termasuk prototaipnya, anda perlu menggunakan kaedah lain, seperti

atau

.
• in Apabila memproses objek besar atau struktur data bersarang,
dan
• mungkin menyusahkan dan tidak cekap. Ini mungkin memerlukan pelbagai pemeriksaan dan panggilan kaedah untuk melambatkan pelaksanaan program. obj.hasOwnProperty() hasOwnProperty Contoh mudah: obj.hasOwnProperty()

Terdapat juga pengendali yang lebih mudah dan lebih selamat

. Object.getPrototypeOf()

const sixBillion = 6000000000;

// 难以阅读
const sixBillion2 = 6000_000_000;

// 更易于阅读
console.log(sixBillion2); // 6000000000

// 也可用于计算
const sum = 1000 + 6000_000_000; // 6000001000

5. Gunakan <明> untuk mengisytiharkan atribut swasta #

Pada masa lalu, untuk menunjukkan bahawa medan adalah peribadi, kami digunakan untuk menambah garis di hadapan nama atribut (_). Tetapi sekarang, kita boleh menggunakan <声> untuk mengisytiharkan atribut peribadi yang sebenar:

#

const obj = null;
console.log(obj && obj.name);
const title1 = document.querySelector('.title');
const title = title1 ? title.innerText : undefined;

Gunakan <替> bukan

6. ?? ||

   Gunakan <算> untuk menggantikan
untuk memeriksa sama ada nilai sebelah kiri nasib adalah batal atau tidak ditentukan, dan kemudian mengembalikan nilai sebelah kanan.

Contoh: <> ?? || Dalam contoh di atas, jika nilai pembolehubah kiri tidak null atau kurang diberi, pengendali

mengembalikan nilai pembolehubah kiri di sebelah kiri.

Jika tidak, jika nilai pembolehubah kiri adalah batal atau tidak ditentukan, simbol pengiraan mengembalikan nilai pembolehubah yang betul.

const obj = null;
console.log(obj?.name);
const title1 = document.querySelector('.title');
const title = title1?.innerText;

??

rentetan ditukar kepada nombor

7. Banyak pemaju menggunakan

   fungsi untuk menukar rentetan ke nombor, tetapi anda boleh menggunakan simbol pengkomputeran

   untuk mencapai hasil yang sama.

kedua -dua kaedah adalah berkesan, tetapi

simbol pengkomputeran lebih mudah dan lebih jelas. parseInt()

Math.pow(2, 53) === Math.pow(2, 53) + 1; // true

// Math.pow(2, 53) => 9007199254740992

// Math.pow(2, 53) + 1 => 9007199254740992

kaedah ringkas bilangan nombor untuk menggantikan

8. Daripada menggunakan fungsi untuk menyerahkan nombor ke bawah, lebih baik menggunakan pengendali kedudukan bukan -

   sebagai singkatan: Math.floor()

Saya tidak mengesyorkan anda menggunakan semua teknik yang diterangkan dalam artikel ini. Sesetengah kaedah boleh merosakkan kod anda, tetapi penting untuk memahami mereka.

Terima kasih kerana membaca artikel ini! Saya harap anda telah belajar sesuatu yang berguna. Sila nantikan bahagian kedua! ?

Atas ialah kandungan terperinci Keupayaan JavaScript yang mungkin tidak anda ketahui. Bahagian 1. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!