ES6核心基础

🧠 一、核心知识点（与 Vue 紧密相关）

---

✅ 1. 解构赋值（Destructuring）

✅ 基本解释：

解构赋值允许你从数组或对象中快速提取数据，并赋值给变量。

🔹数组解构：

const arr = [1, 2, 3];
const [a, b] = arr;
// 相当于：a = arr[0]; b = arr[1]

🔹对象解构：

const user = { name: 'Tom', age: 20 };
const { name, age } = user;
// 相当于：name = user.name; age = user.age

🔹Vue 应用：

在 Vue 3 中的 setup() 函数里，经常使用对象解构来提取 props、context 或响应式变量。

function setup(props) {
  const { title, content } = props;
}

这样写比 props.title、props.content 更简洁、更易读。

---

✅ 2. 模板字符串（Template Literals）

✅ 基本解释：

模板字符串是一种新的字符串写法，它使用 反引号 ` 而不是单引号或双引号 ，并且支持插入变量或表达式。

const name = 'Vue';
console.log(`Hello, ${name}`); // 输出：Hello, Vue

传统写法是：

console.log('Hello, ' + name); // 旧写法

🔹Vue 应用：

在 Vue 模板中拼接字符串常用：

<img :src="`/assets/${fileName}.png`" />

---

✅ 3. 箭头函数（Arrow Functions）

✅ 基本解释：

箭头函数是函数的简写形式，语法更短，并且有一个重要特点是：

箭头函数不会创建自己的 this，它会使用定义它时的外层作用域的 this。

🔹示例说明：

const obj = {
  count: 0,
  regularFunc: function () {
    console.log(this.count); // this 指的是 obj 本身
  },
  arrowFunc: () => {
    console.log(this.count); // ❌ this 不是 obj，而是外层作用域（如 window）
  }
};

通俗理解：

• function () {} 会根据谁调用它来决定 this；
• ()=>{} 不关心谁调用它，它的 this 和外部是"绑定在一起"的。

🔹Vue 应用：

watchEffect(() => {
  // 箭头函数中使用响应式变量，无需担心 this
  console.log(state.count);
});

---

✅ 4. 扩展运算符（...）

✅ 基本解释：

扩展运算符 ... 用来展开一个对象或数组的内容，可以用在拷贝、合并、传参等很多地方。

🔹数组用法：

const arr = [1, 2];
const newArr = [...arr, 3]; // [1, 2, 3]

🔹对象用法：

const base = { a: 1 };
const merged = { ...base, b: 2 }; // { a: 1, b: 2 }

🔹Vue 应用：

合并组件属性：

const defaultProps = { color: 'red' };
const props = { ...defaultProps, size: 'large' };

---

✅ 5. 默认参数

✅ 基本解释：

在函数定义时，可以为参数设置默认值。调用时如果该参数未传，就使用默认值。

function greet(name = 'Guest') {
  console.log(`Hello, ${name}`);
}

greet();           // Hello, Guest
greet('Vue User'); // Hello, Vue User

🔹Vue 应用：

在 Vue 方法中使用默认值可以简化判断：

methods: {
  log(msg = '默认信息') {
    console.log(msg);
  }
}

---

✅ 6. 对象简洁写法

✅ 基本解释：

当你定义一个对象时，如果属性名和变量名相同，就可以只写一次。

const name = 'Vue';
const version = 3;

const app = {
  name,
  version
};
// 相当于 { name: name, version: version }

🔹Vue 应用：

export default {
  data() {
    const name = 'Vue';
    return { name }; // 等同于 { name: name }
  }
}

---

✅ 7. Promise / async await

✅ 基本解释：

Promise 是用来处理异步任务的一种结构，例如网络请求或定时器。

const p = new Promise(resolve => {
  setTimeout(() => resolve('完成'), 1000);
});

async / await 是基于 Promise 的语法糖，写法更直观，像写同步代码一样。

async function loadData() {
  const result = await p;
  console.log(result); // 完成
}

🔹Vue 应用：

在 onMounted 中加载数据常使用 async：

onMounted(async () => {
  const res = await fetch('/api/data');
  const data = await res.json();
});

---

✅ 8. import / export 模块化

✅ 基本解释：

模块化的意思是将代码分成多个文件，每个文件负责一部分功能。

使用 export 公开一个变量或函数，使用 import 引入它们。

// math.js
export function add(a, b) {
  return a + b;
}

// main.js
import { add } from './math.js';
console.log(add(1, 2)); // 3

🔹Vue 应用：

Vuex、API、工具函数等经常使用模块拆分：

// store/modules/user.js
export default {
  state: { name: 'Tom' }
};

// store/index.js
import user from './modules/user';

---

🧪 二、配套练习题（实战 + 基础）

保持原样，仅略微调整语言，使题目更贴合基础读者

📌 练习 1：解构 props 和响应式数据

// 请补全 setup 函数中的解构语句
const props = { title: 'Hello', content: 'World' };

function setup(props) {
  // 解构 title 和 content
   const  {title,content}= props
}

📌 练习 2：箭头函数与 this 的区别

const obj = {
  count: 0,
  increase: () => {
    console.log(this.count);
  }
};

// 请解释：为什么 this.count 输出 undefined？this是指的是全局的this 但是最外层没有定义count

📌 练习 3：异步请求与组合式 API

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const data = ref([]);

    // 定义一个异步函数来获取数据
    const fetchData = async () => {
      try {
        // 这里可以使用 fetch API 或其他 HTTP 库来发送请求
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const result = await response.json();
        // 将获取到的数据赋值给响应式引用
        data.value = result;
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    // 在组件挂载后执行获取数据的函数
    onMounted(async () => {
      await fetchData();
    });

    return { data };
  }
};

📌 练习 4：使用扩展运算符合并 props

const defaultProps = { a: 1, b: 2 };
const incomingProps = { b: 3, c: 4 };
const a ={...defaultProps,...incomingProps}
console.log(a)
// 合并两个对象，结果为 { a: 1, b: 3, c: 4 }

📌 练习 5：模块导入导出拆分逻辑

// utils/math.js
// 请导出一个 add(a, b) 函数
export function add(a,b){
      return a + b;
}

// main.js
// 从 math.js 中导入 add 并调用它
import {add}from "./utils/math.js"
console.log(add(1, 2));

---

📘 三、推荐学习路径（与 Vue 搭配）

阶段	ES6 知识点	Vue 应用场景
入门	解构、箭头函数、模板字符串、默认值	setup 解构、事件处理
进阶	模块化、Promise/async、扩展运算符	Vuex、异步组件、组合式 API
提升	类、Symbol、生成器等	Vue 插件开发、底层源码阅读

---