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 中国語 Web サイトの他の関連記事を参照してください。