本文为翻译，原文地址：dev.to/jagroop2001…
阅前请注意：我在翻译的过程中发现本文介绍了 JavaScript 中重要的概念，但是都是简单介绍 都没有深入，大家选择性阅读
面试时，理论知识和实际项目经验具有差不多的权重。所以，这里列出了 20 个 JavaScript 中重要的概念，并以简洁的例子做解释，助力你为面试做好准备！🎉
1、闭包(Closure) 🔒
在闭包函数中，可以缓存外部变量，即使外部函数已经执行完毕
function outer() {
let count = 0;
return function inner() {
count++;
return count;
};
}
const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2
2、提升(Hoisting) 🎣
在 JavaScript 中，变量和函数的声明将会被提升到其作用域最顶层
console.log(greet()); // Hello!
function greet() {
return "Hello!";
}
console.log(num); // undefined
var num = 5;
注意：
- 提升只是提升变量的声明，但是变量的赋值不会，所以这里打印 num 是 undefined (没有打印出 5)
- 使用 let 定义的变量不会提升
3、事件循环(Event Loop)和回调函数(Callbacks) 🔄
JavaScript 是单线程(single-threaded)语言，其中的事件循环允许异步操作使用回调函数
console.log("Start");
setTimeout(() => console.log("Async operation"), 1000);
console.log("End");
// Output: Start, End, Async operation
4、Promise 🤞
在 ES6 Promise 可以处理异步操作，有三种状态：pending, fulfilled, 和 rejected。
大家注意：Promise 的状态不可逆
let fetchData = new Promise((resolve, reject) => {
setTimeout(() => resolve("Data received!"), 1000);
});
fetchData.then(data => console.log(data)); // Data received!
5、Async/Await ⏳
Async/Await 简化了 Pormise 的操作，是一组语法糖
async function fetchData() {
let data = await new Promise(resolve => setTimeout(() => resolve("Data"), 1000));
console.log(data);
}
fetchData(); // Data
6、箭头函数(Arrow Functions) ➡️
箭头函数提供了一种简洁的语法来定义函数，使用箭头函数不会改变 this 的指向
const add = (a, b) => a + b;
console.log(add(2, 3)); // 5
7、解构赋值 🛠️
const person = { name: "Alice", age: 25 };
const { name, age } = person;
console.log(name); // Alice
console.log(age); // 25
8、扩展运算符(Spread)和剩余参数(Rest) ✨
扩展运算符可以展开数组和对象(可以实现浅拷贝)，剩余参数可以将函数的参数包装为数组
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // Spread -> [1, 2, 3, 4, 5]
function sum(...nums) { // Rest
return nums.reduce((a, b) => a + b);
}
console.log(sum(1, 2, 3, 4)); // 10
9、原型(Prototype) 🧬
在 JavaScript 中可以使用原型实现对象的继承
function Car(name) {
this.name = name;
}
Car.prototype.getName = function() {
return this.name;
};
const myCar = new Car("Tesla");
console.log(myCar.getName()); // Tesla
10、This 关键字 👈
This 指向函数调用者的上下文
const person = {
name: "John",
sayName() {
console.log(this.name);
},
};
person.sayName(); // John
11、类(Class) 📚
ES6 出现的类为 JavaScript 面向对象(object-oriented)编程提供了简洁的语法
class Animal {
constructor(name) {
this.name = name;
}
speak() {
return `${this.name} makes a sound.`;
}
}
const dog = new Animal("Dog");
console.log(dog.speak()); // Dog makes a sound.
12、模块(Modules) 📦
Modules 有利于代码分割
// add.js
export const add = (a, b) => a + b;
// main.js
import { add } from "./add.js";
console.log(add(2, 3)); // 5
13、Map 和 Filter 函数 📊
数组方法 map 和 filter 可以转换和过滤数组
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(n => n * 2); // [2, 4, 6, 8]
const evens = numbers.filter(n => n % 2 === 0); // [2, 4]
14、Reduce ➖
reduce 可以累加数组值
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, n) => acc + n, 0);
console.log(sum); // 10
15、SetTimeout and SetInterval ⏱️
setTimeout 可以延迟代码执行, setInterval 可以重复执行代码
setTimeout(() => console.log("After 1 second"), 1000);
let count = 0;
const intervalId = setInterval(() => {
console.log("Count:", ++count);
if (count === 3) clearInterval(intervalId);
}, 1000);
16、模板字符串(Template Literals) 💬
模板字符串可以允许多行文本并且可以插值
const name = "World";
console.log(`Hello, ${name}!`); // Hello, World!
17、强制类型转换(Type Coercion) 🔄
在 JavaScript 中可以隐式转换类型，但是会引起一些不可预见的事情
console.log("5" + 5); // 55 (string)
console.log("5" - 2); // 3 (number)
18、真值和假值(Truthy and Falsy Values) ✅❌
像 0, "", null, undefined, NaN 在 JavaScript 中都是 false
if ("") {
console.log("This won't run");
} else {
console.log("Falsy value");
}
19、防抖和节流(Debouncing & Throttling) ⏳
防抖和节流可以控制函数的执行次数，以及对事件的响应次数
这个大家都懂
Debounce 防抖：延迟执行
function debounce(func, delay) {
let timeout;
return function (...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), delay);
};
}
window.addEventListener("resize", debounce(() => console.log("Resized!"), 500));
Throttle 节流：限制执行次数
function throttle(func, limit) {
let inThrottle;
return function (...args) {
if (!inThrottle) {
func.apply(this, args);
inThrottle = true;
setTimeout(() => (inThrottle = false), limit);
}
};
}
window.addEventListener("scroll", throttle(() => console.log("Scrolling!"), 200));
20、柯里化(Currying) 🍳
柯里化将具有多个参数的函数转换为具有单个参数的一系列函数
function multiply(a) {
return function (b) {
return a * b;
};
}
const double = multiply(2);
console.log(double(5)); // 10
结束语 🎉
这些概念可以为面试打下坚实的基础，试着自己写一些示例去熟练的掌握这些内容！
happy coding
声明🤣🤣
- 本文英文原文地址：dev.to/jagroop2001… 由我随缘翻译
- 翻译使用自己十几年英语功底，保证不保证准确
- 大家天天开心
