JavaScript は、最新の Web 開発に不可欠な言語です。基本をマスターすることは重要ですが、その中心となる概念を理解することでコーディング スキルが向上し、複雑な課題に取り組むことができるようになります。ここでは、JavaScript 開発者が知っておくべき 33 の概念を例を挙げて説明します。

1.変數(shù)

変數(shù)は JavaScript でデータを保存するために使用されます。

名前 = "ジョン" にします;
const age = 30;
var isActive = true;
**

1. データ型**

JavaScript には、文字列、數(shù)値、ブール値、オブジェクト、配列などのいくつかのデータ型があります。

constgreeting = "Hello, World!"; // 文字列
定數(shù) = 42; // 數(shù)値
const isAvailable = false; // ブール値
const user = { 名前: "ジョン"、年齢: 30 }; // オブジェクト
const items = ["アップル", "バナナ", "チェリー"]; // 配列

3.関數(shù)

関數(shù)は再利用可能なロジックをカプセル化します。

関數(shù) add(a, b) {
b を返します;
}
const sum = add(5, 7);
console.log(合計); // 出力: 12

4.スコープ

スコープは変數(shù)にアクセスできる場所を決定します。

let globalVar = "私はグローバルです";
関數(shù) localScope() {
let localVar = "私は地元です";
console.log(globalVar); // アクセス可能
console.log(localVar); // アクセス可能
}
localScope();
// console.log(localVar); // エラー: localVar が定義されていません

5.クロージャ

クロージャーは、內(nèi)部関數(shù)から外部関數(shù)の変數(shù)にアクセスできるようにします。

関數(shù) createCounter() {
カウント = 0 にします;
return 関數(shù) () {
カウント ;
戻り數(shù);
};
}
const counter = createCounter();
console.log(カウンター()); // 出力: 1
console.log(カウンター()); // 出力: 2

6.吊り上げ

変數(shù)と関數(shù)の宣言は、スコープの先頭に移動されます。

console.log(hoistedVar); // 出力: 未定義
var hoistedVar = "私は吊り上げられています";
ホイスト関數(shù)(); // 出力: こんにちは!
function hoistedFunction() {
console.log("こんにちは!");
}
**

1. Promise と Async/Await**

非同期操作の処理は、JavaScript の重要な概念です。

// Promise の使用
fetch("https://api.example.com")
.then(response =>response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
// Async/Await を使用する
非同期関數(shù) fetchData() {
{
を試してください const response = await fetch("https://api.example.com");
const data = await response.json();
console.log(データ);
} キャッチ (エラー) {
console.error(エラー);
}
}
fetchData();

8.イベントループ

イベント ループは、JavaScript での非同期コードの実行を処理します。

console.log("開始");
setTimeout(() => {
console.log("中");
}, 0);
console.log("終了");
// 出力: 開始、終了、中間

9.プロトタイプ

JavaScript は継承にプロトタイプを使用します。

関數(shù) 人(名前) {
this.name = 名前;
}
person.prototype.greet = function () {
console.log(こんにちは、私の名前は ${this.name});
};
const john = 新しい人("ジョン");
ジョン.グリート(); // 出力: こんにちは、私の名前は John

10.このキーワード

この値は、関數(shù)の呼び出し方法によって異なります。

const obj = {
名前: "アリス"、
挨拶() {
console.log(こんにちは、${this.name});
}、
};
obj.greet(); // 出力: こんにちは、アリス

11.構(gòu)造化

配列またはオブジェクトからの値の抽出を簡素化します。

const user = { 名前: "アリス"、年齢: 25 };
const {名前、年齢} = ユーザー;
console.log(名前); // 出力: アリス
console.log(年齢); // 出力: 25

12.スプレッド演算子とレスト演算子

配列とオブジェクトを効率的に操作します。

const arr = [1, 2, 3];
const newArr = [...arr, 4, 5]; // スプレッド
function sum(...numbers) { // Rest
數(shù)値を返す.reduce((a, b) => a b, 0);
}
console.log(sum(1, 2, 3, 4)); // 出力: 10

1. モジュール

インポートとエクスポートを使用してコードをモジュール化します。

// math.js
エクスポート const add = (a, b) => a b;
// app.js
import { add } from "./math.js";
console.log(add(2, 3)); // 出力: 5

14.エラー処理

実行時エラーを適切に処理します。

{
を試してください const result =riskyOperation();
} キャッチ (エラー) {
console.error("エラーが発生しました:", error);
}

15. DOM 操作

ドキュメント オブジェクト モデル (DOM) と対話します。

document.getElementById("btn").addEventListener("click", () => {
document.getElementById("output").textContent = "クリックされました!";
});

結(jié)論

これらの 33 の概念をマスターすると、JavaScript スキルが向上し、現(xiàn)実世界の問題に取り組む準(zhǔn)備が整います。進(jìn)化し続ける JavaScript エコシステムで常に先を行くために、練習(xí)と探索を続けてください!

以上がすべての JavaScript 開発者が知っておくべき重要な概念の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。