私の React の旅: 10 日目

ES6 の機能

今日学んだこと

最新の JavaScript (ES6 以降) では、言語をより強力で読みやすく、開発者にとって使いやすいものにする機能が導入されました。概要は次のとおりです:

1. テンプレートリテラル

• 機能: 文字列補間と複数行の文字列を有効にします。

• 例:
  

let year = 2024;
console.log(`This is year ${year}`);

• 利点: 従来の連結と比較して、文字列の読み取りと管理が容易です。

1. アロー関数

• 機能: 関数を記述するための短い構文を提供します。

• 例:
  

let add = (a, b) => console.log(`${a} + ${b} = ${a + b}`);
add(4, 5); // Output: 4 + 5 = 9

• 利点: 特にインライン関数のコードが簡素化されます。

1. デフォルトパラメータ

• 機能: 引数が渡されない場合、関数パラメータにデフォルト値を割り当てます。

• 例:
  

function callMe(name = "Damilare") {
    console.log(`My name is ${name}`);
}
callMe(); // Output: My name is Damilare
callMe("Ayoola"); // Output: My name is Ayoola

• 利点: パラメーターの欠落によるエラーを防ぎます。

1. 破壊

• 機能: 配列またはオブジェクトから値を抽出し、それらを変数に割り当てます。 例:

//Array Destructuring:
const [a, b] = [2, 3];
console.log(a, b); // Output: 2 3

//Object Destructuring:
const { age, year } = { age: 32, year: "Year 5" };
console.log(age, year); // Output: 32 Year 5

• 利点: コードがクリーンになり、オブジェクトのプロパティまたは配列要素への繰り返しのアクセスが減ります。

1. スプレッド演算子とレスト演算子 (...)

• 展開: 配列またはオブジェクトの要素を個々の要素に展開します。

const arr1 = [0, 1, 2];
const arr2 = [...arr1, 3, 4, 5];
console.log(arr2); // Output: [0, 1, 2, 3, 4, 5]

• Rest: 残りの要素を単一の配列またはオブジェクトに収集します。

const collectRest = (first, ...rest) => {
    console.log(`First number is ${first}`);
    console.log(`The rest of the numbers: ${rest}`);
};
collectRest(1, 2, 3, 4); 
// Output:
// First number is 1
// The rest of the numbers: [2, 3, 4]

1. for...of ループ

• 機能: 反復可能なオブジェクト (配列など) のループを簡素化します。

• 例:
  

let arr = [1, 2, 3, 4, 5];
for (let num of arr) {
    console.log(num);
}
// Output:
// 1
// 2
// 3
// 4
// 5

• 利点: 配列インデックスに手動でアクセスする必要がなくなり、可読性が向上します。

以上が私の React の旅: 10 日目の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。