详细介绍：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 模板中拼接字符串常用：

---

✅ 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 插件开发、底层源码阅读

---