Konsep penting javaScript

Berikut ialah beberapa konsep JavaScript yang penting dan kerap digunakan yang penting untuk pembangunan harian:

1. Pembolehubah dan Pemalar

• var, let dan const digunakan untuk mengisytiharkan pembolehubah.
• var adalah skop fungsi.
• let dan const adalah berskop blok, dengan const digunakan untuk pemalar (nilai yang tidak berubah).

let age = 25;
const name = 'John';

2. Jenis Data

• Jenis Primitif: Nombor, Rentetan, Boolean, Tidak Ditakrifkan, Null, Simbol, BigInt.
• Jenis Rujukan: Objek, Tatasusunan, Fungsi

const person = { name: 'Alice', age: 30 };  // Object
const numbers = [1, 2, 3, 4];               // Array

3. Fungsi

Pengisytiharan Fungsi: Fungsi bernama.
Ungkapan Fungsi: Berikan fungsi kepada pembolehubah.
Fungsi Anak Panah: Sintaks yang lebih pendek, mengikat ini secara leksikal.

function greet() {
  console.log('Hello!');
}

const sum = (a, b) => a + b;  // Arrow Function

4. Penutupan

• Fungsi yang mengingati persekitaran di mana ia dicipta.

function outer() {
  let count = 0;
  return function increment() {
    count++;
    return count;
  };
}

const inc = outer();
console.log(inc());  // 1
console.log(inc());  // 2

5. Janji & Async/Menunggu

• Mengendalikan operasi tak segerak.
• Janji: Digunakan untuk operasi tak segerak seperti panggilan API.
• Async/Await: Cara yang lebih bersih untuk mengendalikan janji.

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve("Data"), 1000);
  });
};

async function getData() {
  const data = await fetchData();
  console.log(data);  // "Data"
}

getData();

6. Memusnahkan

• Ekstrak nilai daripada tatasusunan atau sifat daripada objek.

const person = { name: 'John', age: 30 };
const { name, age } = person;

const nums = [1, 2, 3];
const [first, second] = nums;

7. Operator Hamparan dan Rehat

• Sebarkan (...): Mengembangkan tatasusunan atau objek.
• Rehat (...): Mengumpul argumen ke dalam tatasusunan.

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];  // [1, 2, 3, 4]

function sum(...numbers) {
  return numbers.reduce((acc, val) => acc + val, 0);
}

sum(1, 2, 3);  // 6

8. Kaedah Tatasusunan

• forEach: Berulang pada tatasusunan.
• peta: Mengembalikan tatasusunan baharu dengan elemen yang diubah suai.
• penapis: Mengembalikan tatasusunan baharu dengan elemen yang memenuhi syarat.
• kurangkan: Mengurangkan tatasusunan kepada satu nilai.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(n => n * 2);     // [2, 4, 6, 8]
const evens = numbers.filter(n => n % 2 === 0);  // [2, 4]
const sum = numbers.reduce((acc, n) => acc + n, 0);  // 10

9. Objek dan Prototaip

• Objek JavaScript adalah dinamik dan boleh mempunyai sifat dan kaedah.
• Prototaip: Membenarkan menambah kaedah pada jenis objek.

const person = { name: 'John', age: 30 };
Object.prototype.greet = function() {
  return `Hello, ${this.name}`;
};

console.log(person.greet());  // "Hello, John"

10. Pengendalian Acara

• Mengendalikan acara pengguna dalam penyemak imbas (cth., klik, input).

document.querySelector('button').addEventListener('click', function() {
  console.log('Button clicked!');
});

11. Manipulasi DOM

• Akses dan ubah suai elemen HTML melalui JavaScript

const header = document.querySelector('h1');
header.textContent = 'Hello World!';
header.style.color = 'blue';

12. Modul (ES6+)

• Kod JavaScript boleh dibahagikan kepada modul untuk kebolehselenggaraan yang lebih baik

// module.js
export const greet = () => console.log('Hello');

// main.js
import { greet } from './module.js';
greet();  // "Hello"

13. Pengendalian Ralat

• Cuba/Tangkap blok untuk mengendalikan pengecualian.

try {
  throw new Error('Something went wrong');
} catch (error) {
  console.error(error.message);
}

14. Template Literal

• Menggunakan tanda belakang untuk rentetan berbilang baris dan membenamkan ungkapan

const name = 'John';
const greeting = `Hello, ${name}`;

15. Nilai Benar dan Palsu

• Memahami nilai yang dinilai kepada benar atau salah.

if (0) {  // Falsy
  console.log('This won’t run');
}

if (1) {  // Truthy
  console.log('This will run');
}

Menguasai konsep ini akan membolehkan anda menangani kebanyakan cabaran dalam pembangunan JavaScript sehari-hari!

Atas ialah kandungan terperinci Konsep penting javaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!