谁懂啊家人们！前端入门绕不开ES6，可网上的教程要么太晦涩，要么代码零散，新手看了直接劝退😭
其实ES6根本没那么难！它不是全新的语言，只是JavaScript的“升级补丁”——把ES5里繁琐的写法简化，新增了超多实用功能，学会它，写代码效率直接翻倍，面试也能轻松拿捏！
今天就结合实战代码，把ES6核心知识点拆解得明明白白，从基础到进阶，小白也能跟着敲、跟着会，收藏这一篇就够了，再也不用东拼西凑找资料！
一、先搞懂：ES和JS到底是什么关系？（新手必看）
很多小白刚入门就被“ES6”“JavaScript”搞懵，其实一句话就能说清：
ES 是 ECMAScript 的简写，是 JavaScript 的“核心语法标准”；而 JS 由 3 部分组成：ECMAScript（核心）+ DOM（文档对象模型）+ BOM（浏览器对象模型）。简单说，ES 就是 JS 的“灵魂”，学 JS 必学 ES！
以前我们学的大多是 ES5 语法，而 ES6 及以后的版本，做了大量优化，解决了 ES5 的很多痛点（比如变量提升、代码冗余），现在前端开发几乎全员用 ES6+ 写法，不学真的会被淘汰！
💡 开发工具推荐：VS Code（免费又强大），必装 2 个插件：
- View in Browser：一键在浏览器中查看效果
- JavaScript (ES6) code snippets：ES6 代码片段，一键生成，提升编码速度
二、ES6 核心知识点（实操为王，代码可直接复制）
这部分是重点！每个知识点都配了「代码示例+通俗解释」，敲一遍就懂，建议边看边练，记得更牢～
1. 变量声明：let/const 替代 var（彻底解决变量提升坑）
ES5 里我们用 var 声明变量，会有“变量提升”“重复声明”“全局污染”三个大坑，而 ES6 的 let 和 const 直接解决了这些问题，用法超简单！
✨ let 用法（声明局部变量）
// 1. 不允许未定义就使用（避免变量提升）
// console.log(k); // 报错：Uncaught ReferenceError: k is not defined
// 2. 不允许重复声明
let k = 10;
// let k = 101; // 报错：Uncaught SyntaxError: Identifier 'k' has already been declared
// 3. 块级作用域（只在当前代码块有效）
for (let j = 0; j < 5; j++) {
console.log("循环里的j:" + j); // 正常输出 0-4
}
// console.log("循环外的j:" + j); // 报错：j is not defined
✨ const 用法（声明常量）
// 声明常量，指向的内存地址不能修改
const x = 2;
// x = 991; // 报错：Uncaught TypeError: Assignment to constant variable.
// 注意：如果常量是对象/数组，内部属性可以修改
const obj = { name: "jspang" };
obj.name = "技术胖"; // 正常生效，不报错
小技巧：能⽤ const 就⽤ const，需要修改的变量再⽤ let，避免全局污染！
2. 变量解构赋值：简化赋值，少写冗余代码
以前给多个变量赋值，要写多行代码，ES6 的解构赋值，一行就能搞定，还支持数组、对象、字符串解构，超实用！
✨ 数组解构
// ES5 写法
let a = 0; let b = 1; let c = 2;
// ES6 解构写法（简洁！）
let [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
// 嵌套数组解构
let [a, [b, c], d] = [1, [2, 3], 4];
console.log(a); // 1，b:2，c:3，d:4
✨ 对象解构（最常用，重点记！）
// 核心：变量名必须和对象属性名一致
let { foo, bar } = { foo: 'JSPang', bar: '技术胖' };
console.log(foo + bar); // 输出：JSPang技术胖
// 圆括号用法（当变量已经声明时）
let foo;
({ foo } = { foo: 'JSPang' }); // 必须加圆括号，否则报错
console.log(foo); // JSPang
✨ 解构默认值（避免 undefined）
// 当解构的值不存在时，使用默认值
let [a, b = "JS"] = ['张三'];
console.log(a + b); // 张三JS
// 注意：undefined 和 null 的区别
let [a, b = "JSPang"] = ['技术胖', undefined]; // undefined 用默认值
console.log(a + b); // 技术胖JSPang
let [a, b = "JSPang"] = ['技术胖', null]; // null 不用默认值
console.log(a + b); // 技术胖null
3. 字符串扩展：新增方法，简化字符串操作
ES6 给字符串新增了 includes()、startsWith()、endsWith()、repeat() 等方法，替代了传统的 indexOf()，写法更简洁，语义更清晰！
let str = "https://www.baidu.com/";
// 1. includes()：判断是否包含指定字符串（返回true/false）
console.log(str.includes("www")); // true
console.log(str.includes("yyy")); // false
// 2. startsWith()：判断是否以指定字符串开头
console.log(str.startsWith("https")); // true
console.log(str.startsWith("baidu", 12)); // 从第12位开始，是否以baidu开头？true
// 3. endsWith()：判断是否以指定字符串结尾
console.log(str.endsWith("com")); // false（原字符串结尾是/）
console.log(str.endsWith("www", 11)); // 前11位是否以www结尾？true
// 4. repeat()：复制字符串
console.log('jspang|'.repeat(3)); // jspang|jspang|jspang|
4. 数组扩展：新增方法，搞定数组操作
ES6 给数组新增了 Array.from()、Array.of()、find()、filter()、map() 等方法，再也不用手动写循环，效率翻倍！
// 1. Array.from()：将类数组（如JSON）转为真正的数组
let json = {
'0': 'jspang',
'1': '技术胖',
'2': '大胖逼逼叨',
length: 3
};
let arr = Array.from(json);
console.log(arr); // ['jspang', '技术胖', '大胖逼逼叨']
// 2. Array.of()：将任意值转为数组
let arr1 = Array.of(3, 4, 5, 6);
console.log(arr1); // [3,4,5,6]
// 3. find()：查找数组中第一个满足条件的元素
let arr2 = [1,2,3,4,5,6];
console.log(arr2.find(value => value > 5)); // 6
// 4. filter()：过滤数组（返回满足条件的新数组）
let num = [1, 5, 5, 9];
let num1 = num.filter(x => x != 5); // 过滤掉5
console.log(num1); // [1,9]
// 5. map()：映射数组（对每个元素做处理，返回新数组）
let arr3 = ['jspang','技术胖','前端教程'];
console.log(arr3.map(x => 'web')); // ['web', 'web', 'web']
5. 扩展运算符（...）：万能简化神器
扩展运算符（...）是 ES6 最常用的语法之一，能拆分数组、对象，简化函数参数传递，解决数组浅拷贝问题，用法超灵活！
// 1. 简化函数参数
let add = (...c) => {
let sum = 0;
for (const num of c) {
sum += num;
}
return sum;
};
let num = [1, 5, 5, 9];
console.log(add(...num)); // 20（相当于add(1,5,5,9)）
// 2. 数组浅拷贝（避免修改新数组影响原数组）
let arr1 = ['www','jspang','com'];
let arr2 = [...arr1]; // 浅拷贝
arr2.push('shengHongYu');
console.log(arr1); // ['www','jspang','com']（原数组不变）
console.log(arr2); // ['www','jspang','com','shengHongYu']
6. 箭头函数：简化函数写法，告别this坑
ES6 的箭头函数，把 function 关键字简化成 =>，代码更简洁，还解决了传统函数中 this 指向混乱的问题，前端面试高频考点！
// ES5 函数写法
function fun1(x, y) {
return x + y;
}
// ES6 箭头函数写法（简化！）
let fun1 = (x, y) => x + y; // 只有一句执行语句，可省略{}和return
console.log(fun1(2, 6)); // 8
// 带默认值的箭头函数
let fun3 = (x, y = 1) => x + y;
console.log(fun3(4)); // 5（y默认值为1）
// 注意：箭头函数没有自己的this，this指向外层作用域
const obj = {
name: "技术胖",
say: () => {
console.log(this.name); // undefined（this指向window，不是obj）
}
};
obj.say();
7. Set/WeakSet：数组去重神器
Set 是 ES6 新增的数据结构，和数组类似，但不允许有重复值，天生适合数组去重，还有 add()、delete()、has() 等方法，用法简单！
// 1. 声明Set（自动去重）
let setArr = new Set(['jspang','技术胖','web','jspang']);
console.log(setArr); // Set {"jspang", "技术胖", "web"}（重复值被自动过滤）
// 2. 常用方法
setArr.add('前端职场'); // 新增元素
setArr.delete('jspang'); // 删除元素
console.log(setArr.has('技术胖')); // true（判断是否存在）
setArr.clear(); // 清空Set
// 3. 数组去重（实战常用）
let arr = [1,2,2,3,3,3];
let newArr = [...new Set(arr)];
console.log(newArr); // [1,2,3]
8. Map：比对象更灵活的键值对
Map 和对象类似，都是键值对结构，但 Map 的键可以是任意类型（数字、数组、函数、对象），而对象的键只能是字符串/ Symbol，灵活性更高！
// 声明Map并添加键值对
const map = new Map();
let num = 123;
let arr = [1,2,3];
map.set(num, "数字键");
map.set(arr, "数组键");
map.set('name', "技术胖");
// 常用方法
console.log(map.get(num)); // 数字键（获取值）
console.log(map.has('name')); // true（判断键是否存在）
map.delete(arr); // 删除指定键值对
console.log(map.size); // 2（获取键值对数量）
map.clear(); // 清空Map
9. Promise：解决回调地狱，异步编程神器
以前写异步代码（如请求接口、定时器），会出现“回调嵌套回调”的情况，也就是回调地狱，代码混乱难维护，而 Promise 完美解决了这个问题！
// 实战案例：模拟异步操作（洗菜做饭→吃饭→收拾桌子）
let state = 1; // 1表示成功，0表示失败
// 第一步：洗菜做饭
function step1(resolve, reject) {
console.log('1.开始-洗菜做饭');
if (state == 1) {
resolve('洗菜做饭--完成'); // 成功，执行then
} else {
reject('洗菜做饭--出错'); // 失败，执行catch
}
}
// 第二步：吃饭
function step2(resolve, reject) {
console.log('2.开始-坐下来吃饭');
if (state == 1) {
resolve('坐下来吃饭--完成');
} else {
reject('坐下来吃饭--出错');
}
}
// 第三步：收拾桌子
function step3(resolve, reject) {
console.log('3.开始-收拾桌子洗碗');
if (state == 1) {
resolve('收拾桌子洗碗--完成');
} else {
reject('收拾桌子洗碗--出错');
}
}
// 链式调用，避免回调地狱
new Promise(step1)
.then(val => {
console.log(val);
return new Promise(step2); // 执行下一步
})
.then(val => {
console.log(val);
return new Promise(step3);
})
.then(val => {
console.log(val);
})
.catch(err => {
console.log(err); // 捕获任意一步的错误
});
10. Class：面向对象编程，简化构造函数
ES6 引入了 Class（类）的概念，简化了 ES5 中构造函数的写法，让面向对象编程更直观，还支持继承，适合大型项目开发！
// 声明类
class Coder {
// 构造函数（初始化属性）
constructor(a, b) {
this.a = a;
this.b = b;
}
// 类的方法
name(val) {
console.log(val);
return val;
}
skill(val) {
console.log(this.name('jspang') + ':' + 'Skill:' + val);
}
add() {
return this.a + this.b;
}
}
// 实例化类
let jspang = new Coder(1, 2);
jspang.name('jspang'); // 输出：jspang
jspang.skill('web'); // 输出：jspang:Skill:web
console.log(jspang.add()); // 3
// 类的继承（extends关键字）
class htmler extends Coder {}
let pang = new htmler;
pang.name('技术胖'); // 输出：技术胖（继承了Coder类的方法）
三、ES6 必背面试考点（小白必记）
学会以上知识点，日常开发足够用了，但如果要面试，这几个考点一定要记牢，避免踩坑！
- let/const 和 var 的区别（变量提升、重复声明、块级作用域）
- 箭头函数和普通函数的区别（this 指向、arguments、不能作为构造函数）
- Promise 的三种状态（pending、fulfilled、rejected）及链式调用
- Set 和 Array 的区别（去重、无索引）
- Map 和对象的区别（键的类型、遍历方式）
四、最后说几句掏心窝的话
很多小白觉得 ES6 难，其实是因为一开始就啃复杂的概念，忽略了“实操”。ES6 的核心是“简化代码、提高效率”，所有知识点都围绕这个核心，只要多敲代码、多练案例，3-7 天就能掌握核心用法！
这篇文章整理了 ES6 最常用、最核心的知识点，代码可直接复制练习，建议收藏起来，遇到不会的就翻一翻，慢慢就熟练了～
如果觉得有用，记得点赞+收藏，关注我，后续更新更多前端小白干货，一起从入门到精通！💪
