ESnd 箭头函数综合指南

ES6 の概要

ECMAScript 2015 は、ES6 (ECMAScript 6) とも呼ばれ、JavaScript の大幅なアップデートであり、コーディングの効率と管理を容易にする新しい構文と機能が導入されています。 JavaScript は Web 開発に使用される最も人気のあるプログラミング言語の 1 つであり、ES6 の改良によりその機能が大幅に強化されています。

このガイドでは、関数を記述する強力な新しい方法である アロー関数 に特に焦点を当てながら、ES6 で導入された重要な機能について説明します。

ES6 の主な機能

1. let と const

ES6 では、let と const という 2 つの新しい変数宣言方法が導入されました。

• let: ブロックスコープ変数を宣言します。つまり、変数は宣言されたブロック内でのみ使用可能です。
  

  let x = 10;
  if (true) {
    let x = 2;
    console.log(x); // 2 (inside block)
  }
  console.log(x); // 10 (outside block)

• const: 再代入できない定数変数を宣言します。ただし、これによって変数が不変になるわけではありません。const で宣言されたオブジェクトは引き続きプロパティを変更できます。
  

  const y = 10;
  y = 5; // Error: Assignment to constant variable.
  
  const person = { name: "John", age: 30 };
  person.age = 31; // This is allowed.

2. アロー関数

ES6 の最も話題になっている機能の 1 つは、アロー関数 です。これは、関数を作成するためのより短くて簡潔な構文を提供します。

#### 構文比較:

従来の関数 (ES5):

var add = function(x, y) {
  return x + y;
};

アロー関数 (ES6):

const add = (x, y) => x + y;

アロー関数の違いは次のとおりです:

• 短い構文: 関数キーワードを記述する必要はありません。また、関数にステートメントが 1 つある場合は中括弧 {} を省略できます。
• 暗黙的な戻り値: 関数に式が 1 つだけ含まれている場合、その式の結果が自動的に返されます。
• No this binding: アロー関数には独自の this がないため、オブジェクト メソッドには適していません。

単一行の矢印関数の例:

const multiply = (a, b) => a * b;
console.log(multiply(4, 5)); // 20

アロー関数はパラメータなしで使用することもできます:

const greet = () => "Hello, World!";
console.log(greet()); // "Hello, World!"

複数行の関数の場合、中括弧 {} が必要であり、return ステートメントは明示的である必要があります。

const sum = (a, b) => {
  let result = a + b;
  return result;
};

アロー関数とこれ
重要な違いの 1 つは、これがアロー関数でどのように動作するかです。従来の関数とは異なり、アロー関数は独自の this をバインドしません。周囲のコンテキストから this を継承します。

const person = {
  name: "John",
  sayName: function() {
    setTimeout(() => {
      console.log(this.name);
    }, 1000);
  }
};
person.sayName(); // "John"

上記の例では、setTimeout 内のアロー関数は、sayName メソッドからこれを継承し、person オブジェクトを正しく参照します。

3. 代入の構造化

分割により、配列またはオブジェクトから値を抽出し、より簡潔な方法で変数に割り当てることができます。

オブジェクトの分割:

const person = { name: "John", age: 30 };
const { name, age } = person;
console.log(name); // "John"
console.log(age);  // 30

配列の構造化:

const fruits = ["Apple", "Banana", "Orange"];
const [first, second] = fruits;
console.log(first);  // "Apple"
console.log(second); // "Banana"

4. 拡散演算子と休符演算子 (...)

... 演算子は、配列を個々の要素に展開したり、複数の要素を 1 つの配列に集めたりするために使用できます。

• Spread: 配列を個々の要素に展開します。
  

  const numbers = [1, 2, 3];
  const newNumbers = [...numbers, 4, 5];
  console.log(newNumbers); // [1, 2, 3, 4, 5]

• Rest: 複数の引数を配列に集めます。
  

  function sum(...args) {
    return args.reduce((acc, curr) => acc + curr);
  }
  console.log(sum(1, 2, 3, 4)); // 10

5. 約束

Promises は、JavaScript で非同期操作を処理するために使用されます。 Promise は、現在、将来、または決して利用できない可能性がある値を表します。

例:

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Success!");
  }, 1000);
});

myPromise.then(result => {
  console.log(result); // "Success!" after 1 second
});

この例では、Promise は 1 秒後に解決され、then() メソッドが解決された値を処理します。

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

ES6 では、関数パラメーターのデフォルト値を設定できます。これは、パラメータが指定されていないか未定義の場合に便利です。

例:

function greet(name = "Guest") {
  return `Hello, ${name}!`;
}
console.log(greet());       // "Hello, Guest!"
console.log(greet("John")); // "Hello, John!"

7. 文字列メソッド (includes()、startsWith()、endsWith())

一般的なタスクを簡単にするために、新しいメソッドが文字列に追加されました:

• includes(): 文字列に指定された値が含まれているかどうかを確認します。
  

  let str = "Hello world!";
  console.log(str.includes("world")); // true

• startsWith(): 文字列が指定された値で始まるかどうかを確認します。
  

  console.log(str.startsWith("Hello")); // true

• endsWith(): 文字列が指定された値で終わるかどうかを確認します。
  

  console.log(str.endsWith("!")); // true

8. 配列メソッド (find()、findIndex()、from())

ES6 では、配列を操作するための新しいメソッドが導入されました。

• find(): 条件を満たす最初の要素を返します。
  

  const numbers = [5, 12, 8, 130, 44];
  const found = numbers.find(num => num > 10);
  console.log(found); // 12

• findIndex(): 条件を満たす最初の要素のインデックスを返します。
  

  const index = numbers.findIndex(num => num > 10);
  console.log(index); // 1 (position of 12 in the array)

9. Classes

ES6 introduced classes to JavaScript, which are syntactical sugar over JavaScript’s existing prototype-based inheritance. Classes allow for cleaner and more understandable object-oriented programming.

Example:

class Car {
  constructor(brand, year) {
    this.brand = brand;
    this.year = year;
  }

  displayInfo() {
    return `${this.brand} from ${this.year}`;
  }
}

const myCar = new Car("Toyota", 2020);
console.log(myCar.displayInfo()); // "Toyota from 2020"

Conclusion

ES6 has transformed JavaScript, making it more efficient and easier to use. The introduction of Arrow Functions simplifies function syntax, while new features like destructuring, promises, classes, and the spread operator allow developers to write cleaner, more expressive code. Whether you are a beginner or an advanced developer, understanding these ES6 features is essential for writing modern JavaScript.

By mastering these concepts, you’ll be better equipped to handle real-world coding challenges and build efficient, scalable web applications.

Follow up with Arrow Functions project on GitHub

References

• https://www.w3schools.com/js/js_es6.asp
• https://towardsdatascience.com/javascript-es6-iterables-and-iterators-de18b54f4d4
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements

以上是ESnd 箭头函数综合指南的详细内容。更多信息请关注PHP中文网其他相关文章！