ES6（ECMAScript 2015）是 JavaScript 的重要版本更新，新增了大量简化开发的语法和特性，以下是前端开发中高频使用的核心内容及可直接运行的代码示例：

1. 变量声明  let / const 

替代  var ，解决变量提升和作用域问题， const  声明只读常量， let  声明块级作用域变量。

 

javascript

// const 声明常量，必须初始化且不能重新赋值

const PI = 3.14159;

// let 声明块级变量，仅在 {} 内有效

let count = 0;

if (true) {

  let count = 10; // 局部变量，不影响外部

  console.log(count); // 输出 10

}

console.log(count); // 输出 0

 

 

2. 箭头函数

简化函数写法，没有自己的  this ， this  指向外层作用域。

 

javascript

// 普通函数转箭头函数

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

console.log(add(2, 3)); // 输出 5

 

// 处理数组遍历

const arr = [1, 2, 3];

const doubleArr = arr.map(item => item * 2);

console.log(doubleArr); // 输出 [2,4,6]

 

 

3. 解构赋值

快速提取数组、对象中的数据，简化变量赋值。

 

javascript

// 数组解构

const [a, b, c] = [1, 2, 3];

console.log(a, b, c); // 输出 1 2 3

 

// 对象解构

const user = { name: "Tom", age: 20 };

const { name, age } = user;

console.log(name, age); // 输出 Tom 20

 

// 函数参数解构

function printUser({ name, age }) {

  console.log(`${name} is ${age} years old`);

}

printUser(user); // 输出 Tom is 20 years old

 

 

4. 模板字符串

 

用反引号  `  包裹，支持换行和变量插值  ${变量} 。

 

javascript

const name = "Tom";

const age = 20;

// 拼接字符串

const info = `${name} is ${age} years old

and he is a student`;

console.log(info);

 

 

5. 扩展运算符  ... 

 

展开数组或对象，用于合并、拷贝。

 

javascript

// 数组扩展

const arr1 = [1, 2];

const arr2 = [3, 4];

const arr3 = [...arr1, ...arr2]; // 合并数组

console.log(arr3); // 输出 [1,2,3,4]

 

// 对象扩展

const obj1 = { a: 1 };

const obj2 = { b: 2 };

const obj3 = { ...obj1, ...obj2 }; // 合并对象

console.log(obj3); // 输出 {a:1, b:2}

 

 

6. 类  class 

 

语法糖，简化原型链继承，更清晰地定义类和继承关系。

 

javascript

class Person {

  // 构造函数

  constructor(name) {

    this.name = name;

  }

  // 类方法

  sayHi() {

    console.log(`Hi, I'm ${this.name}`);

  }

}

 

// 继承

class Student extends Person {

  constructor(name, grade) {

    super(name); // 调用父类构造函数

    this.grade = grade;

  }

}

 

const stu = new Student("Tom", 1);

stu.sayHi(); // 输出 Hi, I'm Tom

console.log(stu.grade); // 输出 1

 

 

7. Promise

 

解决异步回调地狱，用于处理异步操作（如接口请求）。

 

javascript

// 模拟异步请求

const fetchData = () => {

  return new Promise((resolve, reject) => {

    setTimeout(() => {

      const data = { code: 200, data: "success" };

      if (data.code === 200) {

        resolve(data.data); // 成功

      } else {

        reject("error"); // 失败

      }

    }, 1000);

  });

};

 

// 调用 Promise

fetchData()

  .then(res => console.log(res)) // 输出 success

  .catch(err => console.log(err));

 

我比较常用async/await

async fun1() {

    let response ＝ await axios.post(＂url＂, data);

}