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

谁懂啊家人们！前端入门绕不开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 用法（声明局部变量）

ini 复制代码

// 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 用法（声明常量）

ini 复制代码

// 声明常量，指向的内存地址不能修改
const x = 2;
// x = 991; // 报错：Uncaught TypeError: Assignment to constant variable.

// 注意：如果常量是对象/数组，内部属性可以修改
const obj = { name: "jspang" };
obj.name = "技术胖"; // 正常生效，不报错

小技巧：能⽤ const 就⽤ const，需要修改的变量再⽤ let，避免全局污染！

2. 变量解构赋值：简化赋值，少写冗余代码

以前给多个变量赋值，要写多行代码，ES6 的解构赋值，一行就能搞定，还支持数组、对象、字符串解构，超实用！

✨ 数组解构

javascript 复制代码

// 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

✨ 对象解构（最常用，重点记！）

javascript 复制代码

// 核心：变量名必须和对象属性名一致
let { foo, bar } = { foo: 'JSPang', bar: '技术胖' };
console.log(foo + bar); // 输出：JSPang技术胖

// 圆括号用法（当变量已经声明时）
let foo;
({ foo } = { foo: 'JSPang' }); // 必须加圆括号，否则报错
console.log(foo); // JSPang

✨ 解构默认值（避免 undefined）

scss 复制代码

// 当解构的值不存在时，使用默认值
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()，写法更简洁，语义更清晰！

javascript 复制代码

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() 等方法，再也不用手动写循环，效率翻倍！

javascript 复制代码

// 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 最常用的语法之一，能拆分数组、对象，简化函数参数传递，解决数组浅拷贝问题，用法超灵活！

ini 复制代码

// 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 指向混乱的问题，前端面试高频考点！

javascript 复制代码

// 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() 等方法，用法简单！

javascript 复制代码

// 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，灵活性更高！

c 复制代码

// 声明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 完美解决了这个问题！

javascript 复制代码

// 实战案例：模拟异步操作（洗菜做饭→吃饭→收拾桌子）
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 中构造函数的写法，让面向对象编程更直观，还支持继承，适合大型项目开发！

javascript 复制代码

// 声明类
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 最常用、最核心的知识点，代码可直接复制练习，建议收藏起来，遇到不会的就翻一翻，慢慢就熟练了～

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