JavaScript 的重要概念

以下是一些重要且經常使用的 JavaScript 概念，它們對於日常開發至關重要：

1. 變數和常數

• var、let 和 const 用於宣告變數。
• var 是函數作用域的。
• let 和 const 是區塊作用域的，const 用於常數（不改變的值）。

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

2. 資料類型

• 原始型別：數字、字串、布林值、未定義、Null、符號、BigInt。
• 引用型別：物件、陣​​列、函數

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

3. 功能

函數宣告：命名函數。
函數表達式：將函數指派給變數。
箭頭函數：更短的語法，按詞法綁定它。

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

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

4. 關閉

• 記住創建它們的環境的函數。

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

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

5. Promise 和非同步/等待

• 處理非同步操作。
• Promises：用於 API 呼叫等非同步操作。
• Async/Await：處理 Promise 的更簡潔的方式。

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

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

getData();

6. 解構

• 從陣列中提取值或從物件中提取屬性。

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

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

7. 展開和休息運算符

• Spread (...)：擴充陣列或物件。
• Rest (...)：將參數收集到陣列中。

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. 數組方法

• forEach：迭代數組。
• map：傳回包含修改元素的新陣列。
• filter：傳回一個新數組，其中包含滿足條件的元素。
• reduce：將陣列縮減為單一值。

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. 物件和原型

• JavaScript 物件是動態的，可以具有屬性和方法。
• 原型： 允許新增方法到物件類型。

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

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

10. 事件處理

• 處理瀏覽器中的使用者事件（例如點擊、輸入）。

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

11. DOM 操作

• 透過 JavaScript 存取和修改 HTML 元素

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

12. 模組（ES6+）

• JavaScript 程式碼可以拆分為模組以獲得更好的可維護性

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

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

13. 錯誤處理

• Try/Catch 用於處理異常的區塊。

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

14. 模板文字

• 對多行字串和嵌入表達式使用反引號

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

15.真實與虛假的價值觀

• 了解哪些值評估為 true 或 false。

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

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

掌握這些概念將使您能夠應對日常 JavaScript 開發中的大多數挑戰！

以上是JavaScript 的重要概念的詳細內容。更多資訊請關注PHP中文網其他相關文章！