Konsep Penting Setiap Pembangun JavaScript Perlu Tahu

JavaScript ialah bahasa penting untuk pembangunan web moden. Walaupun menguasai asas adalah penting, memahami konsep terasnya akan meningkatkan kemahiran pengekodan anda dan membolehkan anda menangani cabaran yang kompleks. Berikut ialah 33 konsep yang perlu diketahui oleh setiap pembangun JavaScript, dijelaskan dengan contoh.

1. Pembolehubah

Pembolehubah digunakan untuk menyimpan data dalam JavaScript.

nama biarkan = "John";
umur const = 30;
var isActive = benar;
**

1. Jenis Data**

JavaScript mempunyai beberapa jenis data, termasuk rentetan, nombor, boolean, objek dan tatasusunan.

const greeting = "Hello, World!"; // Rentetan
nombor const = 42; // Nombor
const isAvailable = palsu; // Boolean
pengguna const = { nama: "John", umur: 30 }; // Objek
item const = ["Epal", "Pisang", "Cherry"]; // Tatasusunan

3. Fungsi

Fungsi merangkumi logik boleh guna semula.

fungsi tambah(a, b) {
kembalikan a b;
}
const sum = tambah(5, 7);
console.log(jumlah); // Output: 12

4. Skop

Skop menentukan tempat pembolehubah boleh diakses.

biar globalVar = "Saya global";
fungsi localScope() {
let localVar = "Saya tempatan";
console.log(globalVar); // Boleh diakses
console.log(localVar); // Boleh diakses
}
localScope();
// console.log(localVar); // Ralat: localVar tidak ditakrifkan

5. Penutupan

Penutupan memberikan akses kepada pembolehubah fungsi luar daripada fungsi dalam.

fungsi createCounter() {
biar kira = 0;
kembalikan fungsi () {
kira ;
kiraan pulangan;
};
}
const counter = createCounter();
console.log(counter()); // Output: 1
console.log(counter()); // Output: 2

6. Mengangkat

Pembolehubah dan pengisytiharan fungsi dialihkan ke bahagian atas skopnya.

console.log(hoistedVar); // Output: undefined
var hoistedVar = "Saya dinaikkan";
hoistedFunction(); // Output: Hello!
function hoistedFunction() {
console.log("Hello!");
}
**

1. Janji dan Async/Menunggu**

Mengendalikan operasi tak segerak ialah konsep utama dalam JavaScript.

// Menggunakan Janji
fetch("https://api.example.com")
.then(respons => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
// Menggunakan Async/Await
fungsi async fetchData() {
cuba {
respons const = tunggu ambil("https://api.example.com");
data const = tunggu respons.json();
console.log(data);
} tangkap (ralat) {
console.error(error);
}
}
fetchData();

8. Gelung Acara

Gelung acara mengendalikan pelaksanaan kod tak segerak dalam JavaScript.

console.log("Mula");
setTimeout(() => {
console.log("Tengah");
}, 0);
console.log("Tamat");
// Output: Mula, Tamat, Tengah

9. Prototaip

JavaScript menggunakan prototaip untuk warisan.

fungsi Orang(nama) {
this.name = nama;
}
Person.prototype.greet = fungsi () {
console.log(Helo, nama saya ${nama ini});
};
const john = Orang baharu("John");
john.greet(); // Output: Helo, nama saya John

10. Kata Kunci ini

Nilai ini bergantung pada cara sesuatu fungsi dipanggil.

const obj = {
nama: "Alice",
salam() {
console.log(Helo, ${nama ini});
},
};
obj.greet(); // Output: Hello, Alice

11. Memusnahkan

Memudahkan mengekstrak nilai daripada tatasusunan atau objek.

pengguna const = { nama: "Alice", umur: 25 };
const { nama, umur } = pengguna;
console.log(nama); // Output: Alice
console.log(umur); // Output: 25

12. Operator Spread and Rest

Kerja dengan cekap dengan tatasusunan dan objek.

const arr = [1, 2, 3];
const newArr = [...arr, 4, 5]; // Sebarkan
function sum(...nombor) { // Rehat
kembalikan nombor.reduce((a, b) => a b, 0);
}
console.log(jumlah(1, 2, 3, 4)); // Output: 10

1. Modul

Modularkan kod anda menggunakan import dan eksport.

// math.js
eksport const add = (a, b) => a b;
// app.js
import { add } daripada "./math.js";
console.log(tambah(2, 3)); // Output: 5

14. Ralat Pengendalian

Kendalikan ralat masa jalan dengan anggun.

cuba {
keputusan const = riskyOperation();
} tangkap (ralat) {
console.error("Ralat berlaku:", ralat);
}

15. Manipulasi DOM

Berinteraksi dengan Model Objek Dokumen (DOM).

document.getElementById("btn").addEventListener("click", () => {
document.getElementById("output").textContent = "Diklik!";
});

Kesimpulan

Menguasai 33 konsep ini akan meningkatkan kemahiran JavaScript anda dan menyediakan anda untuk menangani masalah dunia sebenar. Teruskan berlatih dan meneroka untuk kekal di hadapan dalam ekosistem JavaScript yang sentiasa berkembang!

Atas ialah kandungan terperinci Konsep Penting Setiap Pembangun JavaScript Perlu Tahu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!