12个JS核心，搞懂这些直接起飞！
<h1 data-id="heading-0">🧑💻 写在开头</h1><p>点赞 + 收藏 === 学会🤣🤣🤣</p>
<div>
<div>
<blockquote>
<p>你是不是也遇到过这样的场景？面试官抛出一个闭包问题，你支支吾吾答不上来；团队代码review时，看到同事用的Promise链一脸懵逼；明明功能实现了，性能却总是差那么一点...</p>
<p>别慌！今天我整理了12个JavaScript核心概念，这些都是2024年各大厂面试的高频考点，也是日常开发中真正实用的硬核知识。搞懂它们，不仅能轻松应对面试，更能让你的代码质量提升一个档次！</p>
</blockquote>
<h2 data-id="heading-0">变量与作用域</h2>
<p>先来看个最常见的面试题：</p>
</div>
<div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// 经典面试题：猜猜输出什么？
for (var i = 0; i < 3; i++) {
setTimeout(() => {
console.log(i); // 输出：3 3 3
}, 100);
}</pre>
</div>
<p>为什么会这样？因为var声明的变量存在变量提升，而且没有块级作用域。换成let就正常了：</p>
</div>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// 使用let的正确写法
for (let i = 0; i < 3; i++) {
setTimeout(() => {
console.log(i); // 输出：0 1 2
}, 100);
}</pre>
</div>
<p>这里涉及到两个关键概念：变量提升和块级作用域。let和const是ES6引入的，它们有块级作用域，不会出现var的那些奇怪问题。</p>
<h2 data-id="heading-1">闭包与内存管理</h2>
<p>闭包可能是最让人头疼的概念了，但其实理解起来并不难：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// 闭包的实际应用：计数器
function createCounter() {
let count = 0; // 这个变量被"封闭"在函数内部
return {
increment: () => ++count,
decrement: () => --count,
getValue: () => count
};
}
const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2</pre>
</div>
<p>闭包就是函数能够记住并访问其词法作用域中的变量，即使函数在其作用域外执行。但要注意内存泄漏问题：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// 潜在的内存泄漏
function createHeavyObject() {
const largeObject = new Array(1000000); // 大对象
return () => {
// 即使外部不再需要，largeObject仍然被引用
console.log('对象还在内存中');
};
}</pre>
</div>
<h2 data-id="heading-2">原型与继承</h2>
<p>JavaScript的继承是基于原型的，这和传统的类继承很不一样：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// 原型链示例
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function() {
console.log(`${this.name} makes a noise.`);
};
function Dog(name) {
Animal.call(this, name); // 调用父类构造函数
}
// 设置原型链
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.speak = function() {
console.log(`${this.name} barks.`);
};
const dog = new Dog('Rex');
dog.speak(); // Rex barks.</pre>
</div>
<p>ES6的class语法让这变得更简单：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a noise.`);
}
}
class Dog extends Animal {
speak() {
console.log(`${this.name} barks.`);
}
}</pre>
</div>
<h2 data-id="heading-3">异步编程演进</h2>
<p>从回调地狱到async/await，异步编程经历了很大变化：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// 1. 回调地狱
function oldWay(callback) {
readFile('file1.txt', (err, data1) => {
if (err) return callback(err);
processData(data1, (err, result1) => {
if (err) return callback(err);
// 更多嵌套...
});
});
}
// 2. Promise链
function promiseWay() {
return readFilePromise('file1.txt')
.then(processDataPromise)
.then(data => {
// 更清晰的流程
})
.catch(error => {
// 统一错误处理
});
}
// 3. async/await（推荐）
async function modernWay() {
try {
const data = await readFilePromise('file1.txt');
const result = await processDataPromise(data);
return result;
} catch (error) {
console.error('处理失败:', error);
}
}</pre>
</div>
<h2 data-id="heading-4">Promise深度解析</h2>
<p>Promise是现代JavaScript异步编程的基石：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// 手写一个简易Promise
class MyPromise {
constructor(executor) {
this.state = 'pending';
this.value = undefined;
this.onFulfilledCallbacks = [];
const resolve = (value) => {
if (this.state === 'pending') {
this.state = 'fulfilled';
this.value = value;
this.onFulfilledCallbacks.forEach(cb => cb(value));
}
};
executor(resolve);
}
then(onFulfilled) {
return new MyPromise((resolve) => {
if (this.state === 'fulfilled') {
const result = onFulfilled(this.value);
resolve(result);
} else {
this.onFulfilledCallbacks.push((value) => {
const result = onFulfilled(value);
resolve(result);
});
}
});
}
}</pre>
</div>
<h2 data-id="heading-5">事件循环机制</h2>
<p>这是JavaScript并发模型的核心：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// 理解事件循环的执行顺序
console.log('1. 同步任务开始');
setTimeout(() => {
console.log('6. 宏任务执行');
}, 0);
Promise.resolve().then(() => {
console.log('4. 微任务执行');
});
console.log('2. 同步任务继续');
Promise.resolve().then(() => {
console.log('5. 另一个微任务');
});
console.log('3. 同步任务结束');
// 输出顺序：1 2 3 4 5 6</pre>
</div>
<h2 data-id="heading-6">ES6+新特性实战</h2>
<p>现代JavaScript提供了很多好用特性：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// 解构赋值
const user = { name: '小明', age: 25, city: '北京' };
const { name, age } = user;
// 扩展运算符
const arr1 = ;
const arr2 = [...arr1, 4, 5]; //
// 可选链操作符
const street = user?.address?.street; // 不会报错
// 空值合并
const displayName = user.nickname ?? '匿名用户'; // 只有null/undefined时使用默认值</pre>
</div>
<h2 data-id="heading-7">函数式编程概念</h2>
<p>JavaScript很适合函数式编程风格：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// 高阶函数
const users = [
{ name: '小明', age: 25 },
{ name: '小红', age: 30 },
{ name: '小刚', age: 28 }
];
// 函数组合
const getAdultNames = users
.filter(user => user.age >= 18)
.map(user => user.name)
.sort();
// 柯里化
const multiply = a => b => a * b;
const double = multiply(2);
console.log(double(5)); // 10</pre>
</div>
<h2 data-id="heading-8">模块化系统</h2>
<p>从IIFE到ES Modules的演进：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// 现代ES Modules
// math.js
export const add = (a, b) => a + b;
export const PI = 3.14159;
// app.js
import { add, PI } from './math.js';
console.log(add(PI, 2)); // 5.14159
// 动态导入
const loadModule = async () => {
const module = await import('./math.js');
console.log(module.add(1, 2));
};</pre>
</div>
<h2 data-id="heading-9">类型系统与TypeScript</h2>
<p>虽然JavaScript是动态类型，但类型检查很重要：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// 类型检查工具函数
const typeCheck = {
isString: value => typeof value === 'string',
isFunction: value => typeof value === 'function',
isObject: value => value !== null && typeof value === 'object'
};
// TypeScript带来的类型安全
interface User {
name: string;
age: number;
email?: string;
}
function createUser(user: User): User {
// TypeScript会在编译时检查类型
return { ...user };
}</pre>
</div>
<h2 data-id="heading-10">性能优化技巧</h2>
<p>写出高性能的JavaScript代码：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// 防抖函数：避免频繁调用
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
// 使用Web Worker处理密集型任务
const worker = new Worker('heavy-task.js');
worker.postMessage({ data: largeData });
worker.onmessage = (event) => {
console.log('计算结果:', event.data);
};</pre>
</div>
<h2 data-id="heading-11">现代开发工具链</h2>
<p>2024年的前端开发离不开这些工具：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// Vite配置示例
// vite.config.js
export default {
plugins: ,
build: {
rollupOptions: {
output: {
manualChunks: {
vendor: ['vue', 'vue-router']
}
}
}
}
};
// 现代测试工具
import { describe, it, expect } from 'vitest';
describe('工具函数测试', () => {
it('应该正确计算加法', () => {
expect(add(1, 2)).toBe(3);
});
});</pre>
</div>
<p>这12个核心概念就像JavaScript的基石，理解它们不仅能让你在面试中游刃有余，更能写出更健壮、更易维护的代码。</p>
<div>
<h3 id="tid-D8HBxE">如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。</h3>
</div>
<p><em><img src="https://img2024.cnblogs.com/blog/2149129/202501/2149129-20250122165814748-630765389.png" alt="" loading="lazy"></em></p><br><br>
来源：https://www.cnblogs.com/smileZAZ/p/19463192
頁:
[1]