ECMAScript ES と ECMAScript ES6) の比較

1. 変数の宣言

ES5:

• 変数を宣言するための var の使用。スコープとして機能があり、ホイスティングを引き起こす可能性があります。

var nombre = 'Maria';

ES6:

• スコープとして block を持つ let と const を導入し、変数の処理における セキュリティ を向上させます。

let nombre = 'Maria';  // Variable que puede cambiar
const edad = 30;       // Constante, no puede cambiar

---

2. アロー関数

ES5:

• 従来の関数にはより多くのコードが必要であり、その処理が混乱する可能性があります。

var suma = function(a, b) {
  return a + b;
};

ES6:

• アロー関数はより簡潔であり、このコンテキストを変更しません。

const suma = (a, b) => a + b;

---

3. テンプレート文字列

ES5:

• 文字列の連結は .
演算子を使用して行われます。

var saludo = 'Hola ' + nombre + ', tienes ' + edad + ' años.';

ES6:

• バックティック (`) は文字列テンプレートの作成に使用され、補間が可能になります。

const saludo = `Hola ${nombre}, tienes ${edad} años.`;

---

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

ES5:

• デフォルトのパラメータはサポートされていなかったため、手動で実装されました。

function saludo(nombre) {
  nombre = nombre || 'Invitado';
  return 'Hola ' + nombre;
}

ES6:

• デフォルトのパラメータは関数シグネチャで直接宣言されます。

function saludo(nombre = 'Invitado') {
  return `Hola ${nombre}`;
}

---

5. 授業

ES5:

• クラスという概念は存在しませんでした。ビルダー関数とプロトタイプが使用されました。

function Persona(nombre, edad) {
  this.nombre = nombre;
  this.edad = edad;
}

Persona.prototype.saludar = function() {
  return 'Hola, soy ' + this.nombre;
};

ES6:

• 他のプログラミング言語に近い、よりクリーンな構文である クラスが導入されました。

class Persona {
  constructor(nombre, edad) {
    this.nombre = nombre;
    this.edad = edad;
  }

  saludar() {
    return `Hola, soy ${this.nombre}`;
  }
}

---

6. モジュール (インポートとエクスポート)

ES5:

• モジュールのネイティブ サポートはありませんでした。 RequireJS や CommonJS などのライブラリが使用されました。

// CommonJS
var modulo = require('modulo');
module.exports = modulo;

ES6:

• インポートとエクスポートを備えたモジュールのネイティブ サポートを導入します。

// Exportar
export const suma = (a, b) => a + b;

// Importar
import { suma } from './modulo';

---

7. 約束

ES5:

• ネイティブの Promise 処理はありませんでした。非同期の処理にコールバックが依存しており、「コールバック地獄」のような問題が発生していました。

function hacerAlgo(callback) {
  setTimeout(function() {
    callback('Hecho');
  }, 1000);
}

hacerAlgo(function(resultado) {
  console.log(resultado);
});

ES6:

• promise は、非同期操作をよりクリーンに処理するために導入されました。

const hacerAlgo = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('Hecho'), 1000);
  });
};

hacerAlgo().then(resultado => console.log(resultado));

---

8. レストアンドスプレッド演算子

ES5:

• 配列やオブジェクトを簡単に結合または分離するためのサポートはありませんでした。 apply の使用などのテクニックが使用されました。

function sumar(a, b, c) {
  return a + b + c;
}

var numeros = [1, 2, 3];
sumar.apply(null, numeros);

ES6:

• rest 演算子と spread 演算子は、引数リストと配列の処理を容易にするために導入されました。

// Spread
const numeros = [1, 2, 3];
const resultado = sumar(...numeros);

// Rest
function sumar(...numeros) {
  return numeros.reduce((a, b) => a + b, 0);
}

---

9. 構造の分割

ES5:

• オブジェクトまたは配列からの値の抽出は手動であり、エラーが発生しやすくなりました。

var persona = { nombre: 'Maria', edad: 30 };
var nombre = persona.nombre;
var edad = persona.edad;

ES6:

• destructuring は、よりクリーンな方法でオブジェクトと配列から値を抽出するために導入されました。

const { nombre, edad } = persona;

---

結論

ECMAScript 6 (ES6) では、JavaScript での開発を簡素化する構文と機能の大幅な改善が行われ、ECMAScript 5 (ES5) と比較して読みやすさ、保守性、効率性が向上しています。

以上がECMAScript ES と ECMAScript ES6) の比較の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。