救命！ES6入门到精通，前端小白也能秒上手

大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。

谁懂啊家人们！前端入门绕不开ES6，可网上的教程要么太晦涩，要么代码零散，新手看了直接劝退😭

其实ES6根本没那么难！它不是全新的语言，只是JavaScript的"升级补丁"——把ES5里繁琐的写法简化，新增了超多实用功能，学会它，写代码效率直接翻倍，面试也能轻松拿捏！

今天就结合实战代码，把ES6核心知识点拆解得明明白白，从基础到进阶，小白也能跟着敲、跟着会，收藏这一篇就够了，再也不用东拼西凑找资料！

很多小白刚入门就被"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 代码片段，一键生成，提升编码速度

这部分是重点！每个知识点都配了「代码示例+通俗解释」，敲一遍就懂，建议边看边练，记得更牢～

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，避免全局污染！

以前给多个变量赋值，要写多行代码，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

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|

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’]

扩展运算符（...）是 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’]

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();

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]

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

以前写异步代码（如请求接口、定时器），会出现"回调嵌套回调"的情况，也就是回调地狱，代码混乱难维护，而 Promise 完美解决了这个问题！

 
  
    
     
     // 实战案例：模拟异步操作（洗菜做饭→吃饭→收拾桌子）  
     let state = 1; // 1表示成功，0表示失败 
     // 第一步：洗菜做饭 function step1(resolve, reject) else { 
     reject('洗菜做饭--出错'); // 失败，执行catch  
     } } 
     // 第二步：吃饭 function step2(resolve, reject) else { 
     reject('坐下来吃饭--出错');  
     } } 
     // 第三步：收拾桌子 function step3(resolve, reject) 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); // 捕获任意一步的错误  
     });

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类的方法）

学会以上知识点，日常开发足够用了，但如果要面试，这几个考点一定要记牢，避免踩坑！

let/const 和 var 的区别（变量提升、重复声明、块级作用域）
箭头函数和普通函数的区别（this 指向、arguments、不能作为构造函数）
Promise 的三种状态（pending、fulfilled、rejected）及链式调用
Set 和 Array 的区别（去重、无索引）
Map 和对象的区别（键的类型、遍历方式）

很多小白觉得 ES6 难，其实是因为一开始就啃复杂的概念，忽略了"实操"。ES6 的核心是"简化代码、提高效率"，所有知识点都围绕这个核心，只要多敲代码、多练案例，3-7 天就能掌握核心用法！

这篇文章整理了 ES6 最常用、最核心的知识点，代码可直接复制练习，建议收藏起来，遇到不会的就翻一翻，慢慢就熟练了～

如果觉得有用，记得点赞+收藏，关注我，后续更新更多前端小白干货，一起从入门到精通！💪