M ES6+ 特性.js-CSDN博客

前言：ES6 的诞生无疑是一场深刻的变革，它为开发者带来了众多令人兴奋的特性，极大地提升了代码的可读性、简洁性和开发效率。

箭头函数

函数定义的“小短箭”

以前写函数，老得敲function，现在用箭头函数，简单又方便。

// 传统写法，是不是有点啰嗦？
function add(a, b) {
  return a + b;
}

// 箭头函数写法，是不是清爽多了？
const add = (a, b) => a + b;

console.log(add(2, 3)); // 输出：5，这就是结果，没毛病！

箭头函数还有一个好处，就是this指向不会变。比如说在对象的方法里用箭头函数，this还是指向那个对象，不会乱跑。

const person = {
  name: "张三",
  sayHello: () => {
    console.log(`大家好，我是${this.name}`); // 这里this指向window，不是person，有点坑
  }
};

person.sayHello(); // 输出：大家好，我是undefined

哎呀，这里有个坑！虽然箭头函数方便，但在对象方法里用的时候要小心this指向问题。是不是有点反直觉？不过别怕，只要记住这个特性，就能避免踩坑。

解构赋值

轻松把数据“掏”出来

解构赋值是个啥？简单来说，就是从数组或对象里直接把值拿出来，放到变量里。以前得这么写：

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

现在用解构赋值，一行代码搞定：

const [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 输出：1 2 3，是不是超快？

对象解构也一样，看看这个例子：

const person = { name: "张三", age: 25, gender: "男" };

// 解构赋值，把对象里的值拿出来
const { name, age } = person;
console.log(name, age); // 输出：张三 25，方便吧？

解构赋值还有一个好处，就是可以给变量设置默认值。比如说：

const [x = 1, y = 2] = [3];
console.log(x, y); // 输出：3 2，是不是很灵活？

是不是感觉数据提取变得简单多了？这就是解构赋值的魅力。

模板字符串

字符串处理的“新招式”

以前拼接字符串，老得用+，麻烦不说，还容易出错。现在用模板字符串，直接用反引号（`），里面想放啥放啥。

const name = "李四";
const age = 20;

// 传统拼接，看着就眼花
const message1 = "大家好，我是" + name + "，今年" + age + "岁。";

// 模板字符串，清爽又直观
const message2 = `大家好，我是${name}，今年${age}岁。`;

console.log(message1); // 输出：大家好，我是李四，今年20岁。
console.log(message2); // 输出：大家好，我是李四，今年20岁。

模板字符串还能写多行，不像以前得用\n换行。比如说：

const message = `大家好，
我是${name}，
今年${age}岁。`;

console.log(message);
// 输出：
// 大家好，
// 我是李四，
// 今年20岁。

是不是超方便？模板字符串让字符串处理变得轻松又有趣。

let 和 const

变量声明的“新规矩”

以前用var声明变量，老是出现变量提升、作用域混乱的问题。现在有了let和const，问题好多了。

let声明的变量，作用域是块级的，不像var是函数级的。比如说：

if (true) {
  let x = 10;
}
// console.log(x); // 这里会报错，x在块外面访问不到

const声明的是常量，一旦赋值就不能改变。比如说：

const PI = 3.14;
// PI = 3.15; // 这里会报错，不能重新赋值

用let和const代替var，可以避免很多变量污染和命名冲突的问题。是不是感觉变量管理变得简单了？

Promise

异步操作的“救星”

异步操作一直是JavaScript的痛点，以前用回调函数，经常陷入回调地狱。现在有了Promise，异步操作变得清晰又可控。

Promise是一个对象，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。比如说：

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = "获取到的数据";
      resolve(data); // 操作成功，返回数据
    }, 1000);
  });
};

fetchData()
  .then((data) => {
    console.log("数据来了：", data); // 输出：数据来了： 获取到的数据
  })
  .catch((error) => {
    console.error("出错了：", error);
  });

Promise的链式调用让异步操作变得清晰易懂，再也不用写一堆回调函数了。是不是感觉异步编程变得简单多了？