ES6xec是一个为JavaScript开发者提供的学习平台，专注于让用户测试并实践ES6（ECMAScript 2015）的新特性，并将其与之前的ES5进行对比，帮助开发者理解并适应现代JavaScript功能。该平台涵盖以下关键特性：

1. 箭头函数

ES6引入了箭头函数，使函数定义更加简洁，并遵循词法作用域，解决了ES5中this指向不一致的问题。


// ES5

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



// ES6

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

2. 模板字符串

使用反引号（`）包裹的模板字符串，可以嵌入变量并支持多行，方便构建复杂字符串。


// ES5

var name = \"Alice\";

var greeting = \"Hello, \" + name + \"!\";



// ES6

let name = \"Alice\";

let greeting = `Hello, ${name}!`;

3. let和const声明

ES6的let和const替代传统的var关键字，提供块级作用域控制。let允许重新赋值，而const不可更改。


// ES5

for (var i = 0; i < 5; i++) {

  setTimeout(function() { console.log(i); }, 100);

  // 输出5次5

}



// ES6

for (let i = 0; i < 5; i++) {

  setTimeout(() => console.log(i), 100);

  // 输出0,1,2,3,4

}

4. 解构赋值

通过解构赋值，可以轻松从数组或对象中提取数据，代码更简洁直观。


// 数组解构

let arr = [1, 2, 3];

let [a, b, c] = arr; // a = 1, b = 2, c = 3



// 对象解构

let obj = { foo: \"bar\", baz: 42 };

let { foo, baz } = obj; // foo = \"bar\", baz = 42

5. 类

ES6提供了更接近传统OOP的class语法糖，简化了基于原型的面向对象编程。


// ES5

function Person(name) { this.name = name; }

Person.prototype.sayName = function() { console.log(this.name); }



// ES6

class Person {

  constructor(name) { this.name = name; }

  sayName() { console.log(this.name); }

}

6. 模块

ES6引入了import和export关键词用于模块化开发，简化了代码结构和重用。


// 导出模块（myModule.js）

export const pi = 3.14159;



// 导入模块（main.js）

import { pi } from './myModule';

console.log(pi); // 输出3.14159