Konsep JavaScript Penting Untuk Belajar Sebelum Mula Bertindak

React ialah perpustakaan Javascript popular yang digunakan untuk membina aplikasi dunia sebenar. Untuk menjadi pembangun React yang mahir, memahami beberapa konsep asas Javascript adalah penting. Bagi kebanyakan orang, pembelajaran React nampaknya sukar, tetapi memahami konsep asas ini boleh memudahkan proses pembelajaran seseorang.
Dalam artikel ini, saya akan membincangkan 15 konsep penting yang perlu diketahui oleh setiap pembangun sebelum memulakan React. Setiap konsep diterangkan dengan contoh untuk menunjukkan kepentingannya.
Jika anda baru bermula dengan React atau anda akan meneroka perpustakaan, artikel ini adalah untuk anda.

15 Konsep JavaScript Penting

1.Fungsi Panggilan Balik
Fungsi ialah blok binaan mana-mana atur cara yang membenarkan kod dipanggil beberapa kali tanpa ulangan.
Satu jenis fungsi ialah Fungsi Panggilan Balik.
Jika anda mahu pengguna mengklik pada anak panah dalam penyemak imbas sebelum sebarang maklumat dipaparkan atau mahu beberapa kod dilaksanakan sejurus selepas anda selesai mengambil data daripada API, anda boleh menggunakan kuasa panggilan balik.
Fungsi panggil balik melaksanakan tugasnya selepas fungsi atau peristiwa berlaku dan membenarkan kawalan ke atas pelaksanaan fungsi.
Ia adalah fungsi yang diluluskan sebagai hujah kepada fungsi lain dan digunakan untuk menentukan perkara yang harus berlaku selepas selesainya operasi tak segerak atau peristiwa.

Contoh

// The callback function
function showText() {
  console.log('The written text should show after 2 seconds.');
}
 function showAfterDelay(callback, delay) {
  setTimeout(callback, delay);
}
showAfterDelay(showText, 2000);

2.Fungsi Anak Panah
Fungsi Anak Panah telah diperkenalkan dalam ES6 dan membolehkan sintaks fungsi ditulis dengan lebih ringkas. Fungsi anak panah digunakan secara meluas dalam React kerana ringkasnya.

Contoh

const showText = () => {
  console.log('This written text should show after 2 seconds.');
};
const showAfterDelay = (callback, delay) => {
  setTimeout(callback, delay);
};
showAfterDelay(showText, 2000);

3.Kaedah Array.Map()
Mengubah tatasusunan sedia ada biasanya tidak digalakkan dalam React kerana ia boleh mengakibatkan pepijat dan isu prestasi yang tidak perlu. Atas sebab itu, pembangun menggunakan kaedah tatasusunan. Kaedah tatasusunan berfungsi tidak mengubah tatasusunan asal sebaliknya mengembalikan tatasusunan baharu daripada tatasusunan sedia ada.
Salah satu kaedah tatasusunan berfungsi ialah kaedah Array.map().
Kaedah Array.map() menggelungkan pada tatasusunan sedia ada dan mengembalikan tatasusunan baharu dengan panjang yang sama. Perubahan boleh dibuat pada tatasusunan baharu tanpa mempunyai sebarang kesan pada tatasusunan sedia ada.

Contoh

Const BookNumbers = [1,2,3,4];
Const DoubleNumbers = BookNumbers.map((book)=> book *2);
Console.log(DoubleNumbers);
//Output BookNumbers= [2,4,6,8]

4.Kaedah Array.Filter()
Kaedah Array.filter() berfungsi dengan cara yang menarik dan logik. Kaedah ini boleh digunakan untuk menapis beberapa elemen tatasusunan berdasarkan keadaan benar atau salah.
Apabila pernyataan palsu, ia akan ditapis secara automatik dan apabila ia benar, ia menjadikannya pendekatan yang sesuai untuk mengalih keluar elemen yang tidak diingini daripada tatasusunan.

Contoh

// The callback function
function showText() {
  console.log('The written text should show after 2 seconds.');
}
 function showAfterDelay(callback, delay) {
  setTimeout(callback, delay);
}
showAfterDelay(showText, 2000);

5.Kaedah Array.reduce()
Seperti namanya, kaedah array.reduce() mengurangkan keseluruhan tatasusunan kepada satu nilai. Ia adalah salah satu kaedah terbaik untuk menjumlahkan atau mengumpulkan elemen tatasusunan.

3 Kata Kunci Penting dalam Kaedah Kurangkan

• Nilai awal (pilihan): Nilai permulaan untuk penumpuk. Jika tidak disediakan, elemen tatasusunan pertama digunakan sebagai nilai awal dan lelaran bermula dari elemen kedua.
• Penumpuk (diperlukan):Hasil terkumpul daripada lelaran sebelumnya.
• Nilai Semasa( diperlukan): Elemen semasa sedang diproses.

Contoh

const showText = () => {
  console.log('This written text should show after 2 seconds.');
};
const showAfterDelay = (callback, delay) => {
  setTimeout(callback, delay);
};
showAfterDelay(showText, 2000);

6.Templat Huruf
Templat literal membenarkan rentetan mengandungi pembolehubah Javascript atau sebarang ungkapan JavaScript.
Ia menyediakan pendekatan mudah untuk mencipta rentetan dalam JavaScript menggunakan backtick dan dolar dengan pendakap kerinting ${}.

Contoh

Const BookNumbers = [1,2,3,4];
Const DoubleNumbers = BookNumbers.map((book)=> book *2);
Console.log(DoubleNumbers);
//Output BookNumbers= [2,4,6,8]

7.Pengendali ternary
Pengendali ternary ialah pengendali bersyarat yang menawarkan cara yang mudah dan ringkas untuk menulis pernyataan if..else.
React tidak secara langsung menyokong pernyataan if..else kerana ia tidak sesuai untuk ungkapan sintaks yang dikenali sebagai JSX yang wujud dalam React.
JSX ialah sambungan sintaks JavaScript yang membenarkan pembenaman Javascript, CSS dan Komponen React ke dalam HTML.
Sintaks React dianggap lebih sebagai ungkapan daripada pernyataan dan ternary berfungsi sebagai pengendali yang sesuai untuknya.

Contoh

Const BookNumbers = [1,2,3,4];
Const FilteredNumbers = BookNumbers.filter((book) => book % 2 !== 0 );
Console.log(FilteredNumbers);
// Output 1,3

8.Pengendali litar pintas dan Logik
Pengendali logik digunakan untuk menggabungkan berbilang keadaan menjadi satu ungkapan. Operator logik utama yang wujud dalam JavaScript ialah:

• DAN- kembali benar hanya jika kedua-dua operan adalah benar.
• ATAU- mengembalikan benar jika sekurang-kurangnya satu operan adalah benar.
• BUKAN- terbalikkan nilai sebenar operannya..

Litar pintas ialah tingkah laku yang berlaku dalam operator logik di mana, dalam keadaan tertentu, operan kedua tidak dinilai kerana hasil keseluruhan ungkapan boleh ditentukan semata-mata oleh operan pertama.

Cara litar pintas berfungsi

DAN (&&)

• jika operan pertama palsu, keseluruhan ungkapan adalah palsu, jadi operan kedua tidak dinilai.
• jika operan pertama adalah benar, operan kedua dinilai untuk menentukan nilai yang akan dikembalikan.

ATAU (||)

• jika operan pertama adalah benar, keseluruhan ungkapan adalah benar, jadi operan kedua tidak dinilai.
• jika operan itu palsu, operan kedua dinilai untuk menentukan nilai yang akan dikembalikan.

// The callback function
function showText() {
  console.log('The written text should show after 2 seconds.');
}
 function showAfterDelay(callback, delay) {
  setTimeout(callback, delay);
}
showAfterDelay(showText, 2000);

9.Operator RestSpread
Dalam keadaan apabila anda ingin menambah harta baharu pada tatasusunan sedia ada atau menggabungkan kumpulan tatasusunan sedia ada, Operator hamparan ialah pengendali yang boleh digunakan.
Spread Operator (...) dilambangkan dengan 3 titik mengembangkan tatasusunan menjadi elemen individu dan digunakan pada permulaan tatasusunan. Ia digunakan untuk:

• Gabungkan tatasusunan

const showText = () => {
  console.log('This written text should show after 2 seconds.');
};
const showAfterDelay = (callback, delay) => {
  setTimeout(callback, delay);
};
showAfterDelay(showText, 2000);

• Salin tatasusunan

Const BookNumbers = [1,2,3,4];
Const DoubleNumbers = BookNumbers.map((book)=> book *2);
Console.log(DoubleNumbers);
//Output BookNumbers= [2,4,6,8]

• tambah sifat baharu pada tatasusunan sedia ada

Const BookNumbers = [1,2,3,4];
Const FilteredNumbers = BookNumbers.filter((book) => book % 2 !== 0 );
Console.log(FilteredNumbers);
// Output 1,3

• luluskan hujah kepada fungsi

const BookNumbers = [1, 2, 3, 4];
const NumberSum = BookNumbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum); // Output: 15

Operator Rehat(...) juga dilambangkan dengan 3 titik tetapi ditulis pada penghujung tatasusunan. Ia digunakan untuk mengumpul berbilang sifat daripada objek/tatasusunan yang dimusnahkan.

Contoh

Const NameValue = "Ade";
const NumValue = 5;
const TempLit= `I am ${NameValue}, a ${NumValue} year old girl `

10.Perantaian pilihan
Rantaian pilihan mengendalikan nilai nol atau tidak ditentukan dengan cara yang mudah. Ia digunakan untuk mengakses sifat atau mana-mana sifat perantaraan yang nampaknya batal atau tidak ditentukan dalam rantaian. Ia secara automatik akan menjadi litar pintas dan tidak ditentukan. Sebaik-baiknya, tanpa perantaian pilihan, ia mengembalikan ralat.
Dalam sesetengah keadaan anda tidak pasti semua nilai wujud dalam objek, pertimbangkan untuk menggunakan rantaian pilihan kerana ia adalah sintaks yang menawarkan semakan untuk nilai null dan undefined.

const BookNumbers = 4;
const result = (BookNumbers % 2 === 0) ? "Even" : "Odd";
console.log(result); 
// Output: "Even"

11.Susun Memusnahkan
Kod boleh menjadi menyusahkan apabila berbilang sifat perlu dipanggil serentak daripada tatasusunan. Dengan pemusnahan, ini boleh dicegah.
Pemusnahan membenarkan memasang nilai daripada tatasusunan ke dalam pembolehubah yang berbeza.
Pemusnahan boleh digunakan untuk

• Langkau elemen
• Unsur sarang
• Tetapkan nilai lalai.

Konsep penting yang tidak boleh diabaikan sebelum memulakan React ialah Memusnahkan.

const idVerify = true;
const displayMessage = idVerify && "Identified";

console.log(displayMessage); 
// Output: "Identified"

12.Bekerja Dengan Tatasusunan Tidak Berubah
Tatasusunan boleh diubah dalam JavaScript bermakna sifat boleh ditambah, dialih keluar atau dikemas kini dalam tatasusunan.
Walau bagaimanapun, dalam React, kebolehubahan selalunya diutamakan untuk mengekalkan integriti keadaan dan memastikan React dapat mengesan perubahan. Untuk bekerja dengan tatasusunan tidak berubah dalam React, kaedah seperti peta, penapis dan operator hamparan biasanya digunakan untuk menambah, memadam dan mengemas kini item dalam tatasusunan tanpa mengubah tatasusunan asal.

Contoh

• Menambah item

// The callback function
function showText() {
  console.log('The written text should show after 2 seconds.');
}
 function showAfterDelay(callback, delay) {
  setTimeout(callback, delay);
}
showAfterDelay(showText, 2000);

• Untuk memadamkan item

const showText = () => {
  console.log('This written text should show after 2 seconds.');
};
const showAfterDelay = (callback, delay) => {
  setTimeout(callback, delay);
};
showAfterDelay(showText, 2000);

• Untuk mengemas kini item

Const BookNumbers = [1,2,3,4];
Const DoubleNumbers = BookNumbers.map((book)=> book *2);
Console.log(DoubleNumbers);
//Output BookNumbers= [2,4,6,8]

13.Fungsi Async/menunggu
Async JavaScript mentadbir cara tugasan yang mengambil masa untuk diselesaikan dilakukan. JavaScript ialah bahasa segerak iaitu menjalankan kod satu demi satu dalam satu urutan.
Dalam keadaan apabila anda mengambil data daripada pangkalan data, beberapa kod mungkin diperlukan untuk dimuatkan sebelum pengambilan selesai.
Dengan fungsi async, kod boleh dilaksanakan tanpa menunggu operasi selesai, sekali gus meningkatkan pengalaman pengguna dan prestasi keseluruhan.
Dalam React, anda akan kerap menggunakan Antara Muka Pengaturcaraan Aplikasi (API), oleh itu, adalah penting untuk mengetahui cara fungsi ini berfungsi.

Contoh

Const BookNumbers = [1,2,3,4];
Const FilteredNumbers = BookNumbers.filter((book) => book % 2 !== 0 );
Console.log(FilteredNumbers);
// Output 1,3

14.Janji
Janji merujuk kepada objek terbina dalam yang mewakili penyiapan atau kegagalan operasi tak segerak.
Janji wujud di salah satu daripada tiga negeri:

• Belum selesai: Keadaan awal, tidak dipenuhi atau ditolak.
• Dipenuhi: operasi berjaya diselesaikan
• Ditolak: Operasi mengalami ralat.

Janji memainkan peranan penting dalam JavaScript, yang menjadikannya konsep penting untuk dipelajari. Ia membolehkan anda menulis kod yang lebih bersih, mengendalikan ralat secara sistematik dan meningkatkan prestasi keseluruhan.

15.Mengendalikan Ralat menggunakan try.catch.finally
Terdapat saat apabila ralat muncul semasa pengambilan data membuatkan anda terfikir tentang cara mencari atau membetulkan pepijat ini.
Dengan penggunaan kata kunci, pengambilan data dikendalikan dengan cara yang lebih berstruktur.
Try..catch..finally block ialah binaan pengendalian ralat yang berkuasa dalam JavaScript, yang membolehkan kemungkinan ralat dikendalikan dengan jayanya dan kod khusus dilaksanakan tanpa mengira sama ada ralat berlaku.
Ia mungkin memakan masa untuk mencari ralat tertentu dalam kod anda. Dengan menggunakan blok ini, ia menjadi mudah.

• Cuba- Melampirkan kod yang mungkin menimbulkan ralat.
• Tangkap- jalankan jika ralat dilemparkan dalam blok cuba. Menerima objek ralat sebagai hujah.
• Akhir sekali - Laksanakan tidak kira sama ada ralat berlaku.

Contoh

const BookNumbers = [1, 2, 3, 4];
const NumberSum = BookNumbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum); // Output: 15

Kesimpulan

Mendapatkan cerapan tentang konsep JavaScript penting yang diterangkan di atas akan memudahkan proses pembelajaran seseorang dan membimbing anda ke arah menjadi pembangun React yang mahir. Jika anda masih belum mempelajari konsep ini, berusahalah untuk berbuat demikian. Jangan ragu untuk berkongsi cadangan anda di bahagian komen!

Atas ialah kandungan terperinci Konsep JavaScript Penting Untuk Belajar Sebelum Mula Bertindak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!