21天精通JavaScript核心语法，大厂面试官都在看这篇

震惊！这个 JavaScript 基础知识，95%的前端都学错了！

你是否还在为 JavaScript 的基础语法感到困惑？

你是否曾经被面试官问到变量提升、闭包、原型链而答不上来？

你是否觉得自己写的代码总是不够优雅，无法达到大厂要求？

如果你有以上任何一个困扰，那这篇文章将彻底改变你的 JavaScript 学习之路！让我们开始这段激动人心的 JavaScript 进阶之旅吧！

一、变量声明的三大法宝：var、let、const

在 JavaScript 中，变量声明看似简单，实则暗藏玄机。很多人以为随便用一个就行，这个想法简直太危险了！让我们一起揭开变量声明的神秘面纱。

1. const：你的代码守护神

const PI = 3.14159;
// 以下代码会报错
PI = 3.14; // TypeError: Assignment to constant variable

为什么大厂都在推崇 const？

防止意外修改变量值
提高代码可读性
帮助代码优化

2. let：块级作用域的完美代言人

let message = '外部消息';
if (true) {
  let message = '内部消息';
  console.log(message); // 输出：内部消息
}
console.log(message); // 输出：外部消息

let 的三大超能力：

块级作用域：变量只在当前代码块有效
暂时性死区：必须先声明后使用
不允许重复声明：保证代码的清晰性

3. var：历史遗留问题（慎用）

var x = 1;
if (true) {
  var x = 2;
  console.log(x); // 输出：2
}
console.log(x); // 输出：2（var没有块级作用域！）

var 的三大坑：

没有块级作用域
变量提升
允许重复声明

🔥 面试高频题：var、let、const 的区别是什么？

完美回答：

作用域：var 是函数作用域，let/const 是块级作用域

变量提升：var 会提升，let/const 不会

重复声明：var 允许，let/const 禁止

修改性：const 声明常量，不能修改；var/let 可以修改

二、数组操作：一个高手的自我修养

数组是前端开发中最常用的数据结构，但很多人只会基本操作，这样怎么能写出高性能的代码？

1. 创建数组的正确姿势

// 👍 推荐写法
let arr1 = [1, 2, 3];
let arr2 = new Array(3).fill(0);

// ⛔ 危险写法（别这么干！）
let arr3 = new Array(3); // [empty × 3]

为什么要用 fill()？

防止出现空数组坑
确保数组有初始值
提高代码可靠性

2. 数组方法大揭秘

// 超级英雄联盟来帮你记忆数组方法😎
let superheroes = ['钢铁侠', '蜘蛛侠', '雷神'];

// 添加英雄
let length1 = superheroes.push('黑寡妇'); // 尾部添加
let length2 = superheroes.unshift('美国队长'); // 头部添加

// 移除英雄
let lastHero = superheroes.pop(); // 尾部移除
let firstHero = superheroes.shift(); // 头部移除

// 查找英雄
let index = superheroes.indexOf('雷神'); // 返回索引

// 切片操作
let team = superheroes.slice(1, 3); // 返回新数组，不修改原数组

3. 数组高级操作

// 数组遍历（三种方式）
let nums = [1, 2, 3, 4, 5];

// 1. forEach
nums.forEach((num) => console.log(num));

// 2. map
let doubled = nums.map((num) => num * 2);

// 3. filter
let evenNums = nums.filter((num) => num % 2 === 0);

// 数组合并
let arr1 = [1, 2];
let arr2 = [3, 4];
let combined = [...arr1, ...arr2]; // 展开运算符

🔥 面试高频题：数组的 map 和 forEach 有什么区别？

完美回答：

map 会返回一个新数组，forEach 返回 void

map 适合做数据转换，forEach 适合执行操作

map 的性能相对较差，因为要创建新数组

三、Map 和 Set：面试官最爱考的数据结构

如果说数组是前端开发的“必修课”，那么 Map 和 Set 就是你的“进阶选修”。这两个数据结构可以让你的代码更加优雅、高效！

1. Map：对象的完美替代品

// 创建一个用户信息管理系统

// 👍 使用Map
let userMap = new Map();
userMap.set('name', '张三');
userMap.set('age', 25);
userMap.set('skills', ['前端', 'JavaScript']);

// 获取数据
console.log(userMap.get('name')); // 输出：张三

// 检查存在
console.log(userMap.has('age')); // true

// 删除数据
userMap.delete('age');

// 遍历Map
for (let [key, value] of userMap) {
  console.log(`${key}: ${value}`);
}

Map 的四大超能：

键可以是任意类型（对象只能用字符串）
保持插入顺序（对象不保证）
易于遍历（直接遍历键值对）
简单获取大小（size 属性）

2. Set：数组去重的终极武器

// 创建一个用户标签系统

// 👍 使用Set
let tagSet = new Set(['JavaScript', 'React', 'Vue', 'React']);

// 自动去重！
console.log(tagSet.size); // 3，而不是4

// 添加标签
tagSet.add('TypeScript');

// 删除标签
tagSet.delete('Vue');

// 检查标签
console.log(tagSet.has('React')); // true

// 转换回数组
let tagsArray = [...tagSet];

实战案例：用 Set 实现数组去重

// 传统方式
function uniqueArray(arr) {
  return arr.filter((item, index) => arr.indexOf(item) === index);
}

// 使用Set（一行代码搞定！）
const uniqueArray = (arr) => [...new Set(arr)];

// 测试
let numbers = [1, 2, 2, 3, 3, 4];
console.log(uniqueArray(numbers)); // [1, 2, 3, 4]

🔥 面试高频题：为什么要用 Map 而不是普通对象？

完美回答：

Map 的键可以是任意类型，对象只能是字符串

Map 保持键的插入顺序，对象不保证

Map 专门用于数据存储，性能更好

Map 提供了直接遍历键值对的方法

四、必读书籍推荐

1. JavaScript 高级程序设计（第 4 版）

这本书被誉为前端界的”红宝书”，是每个前端工程师的必读经典。它不仅系统地介绍了 JavaScript 的基础知识，还深入探讨了语言的底层原理。

核心亮点：

全面覆盖 ES6+语法特性
深入浅出的原理解析
大量实战案例
性能优化指南

2. 你不知道的 JavaScript

这套”黄宝书”是深入理解 JavaScript 的必读之作。它将带你探索 JavaScript 中最难懂的概念：

独特之处：

深入剖析 this 绑定机制
完整讲解原型链继承
揭秘闭包的实现原理
解密异步编程模型

3. 冴羽的 JavaScript 博客

如果说前两本书是”理论圣经”，那么冴羽的博客就是”实战指南”。

为什么推荐？

内容精炼：每篇文章都直指要害，不废话
实例丰富：大量代码示例，便于理解
更新及时：紧跟前端发展潮流
重点突出：完美契合面试重点

结语：你的 JavaScript 进阶之旅从这里开始！

记住，JavaScript 学习是一个循序渐进的过程。通过本文介绍的知识点和推荐的学习资源，相信你已经找到了正确的学习方向。接下来就是实践、实践、再实践！

🎁 福利放送

冴羽的博客

[JavaScrip 书籍]https://www.alipan.com/s/hMqw7fpqH8d

点击链接保存，或者复制本段内容，打开「阿里云盘」APP ，无需下载极速在线查看，视频原画倍速播放。

JavaScript 语言基础