面试必备！20个超实用的JavaScript概念🚀

说到JavaScript面试，雇主也非常重视实际操作能力，而不仅仅看重理论知识。这里有20个核心JavaScript概念的清单，每个概念都附有简洁的例子，让你面试准备就绪！🎉

“…”

（待提供具体内容后进行翻译）1. 封 🔒

闭包是指一个函数，即使外部函数执行完毕，它也能记住外部作用域中的变量。

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}

const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2
// 定义一个外部函数 outer，返回一个内部函数 inner，每次调用 inner 时计数加一

切换到全屏，切换回正常模式

2. 吊 🎣

在 JavaScript 中，这意味着变量和函数的声明会被“提到”它们的作用域顶端。

    console.log(greet()); // Hello!

    function greet() {
      return "Hello!";
    }

    console.log(num); // undefined
    var num = 5;

点击进入全屏 点击退出全屏

3. 事件循环和回调🔄

JavaScript是单线程，事件循环通过回调支持异步操作。

console.log("开始");
// 下面的代码演示了异步操作的顺序
setTimeout(() => console.log("异步任务"), 1000);
console.log("结束");

// 输出结果: 开始, 结束, 异步任务

进入全屏 退出全屏

4. 诺言 🤞

承诺处理异步操作的，其状态为：pending、fulfilled和rejected。

    let fetchData = new Promise((resolve, reject) => {
      setTimeout(() => resolve("数据已获取"), 1000);
    });

    fetchData.then(data => console.log(data));

切换到全屏 退出全屏

5. 异步 ⏳

async/await 让 Promise 的处理变得更简单。

    async function 获取数据() {
      let data = await new Promise(resolve => setTimeout(() => resolve("数据"), 1000));
      console.log(data);
    }

    获取数据(); // 

进入全屏，退出全屏

6. 箭函数 ➡️

➡️

箭函数提供了一种简洁的语法，并且没有自己的 this。

    // 定义一个函数add，用来加两个数
    const add = (a, b) => a + b;
    console.log(add(2, 3)); // 5
    // 输出结果为5

进入全屏模式 点击退出全屏

7. 拆解 🛠️

你可以通过解构从数组中提取值或从对象中提取属性。

// 以下是一段JavaScript代码示例，展示了如何定义并使用对象来存储和获取信息。
const person = { name: "Alice", age: 25 };
const { name, age } = person;

console.log(name); // 输出Alice的名字
console.log(age); // 输出Alice的年龄

// 这段代码定义了一个名为Alice的人，并输出她的名字和年龄。

全屏 退出全屏

8. 展开与解构操作符 ✨

Spread ... 展开元素，而 Rest 则将它们收集到数组里。

    const arr1 = [1, 2, 3];
    const arr2 = [...arr1, 4, 5]; // 解构操作

    function sum(...nums) { // 剩余参数
      return nums.reduce((a, b) => a + b);
    }
    console.log(sum(1, 2, 3, 4)); // 10

全屏 退出全屏

9. 原型设计 🧬

对象可以通过原型来继承属性及方法。

    function Car(name) {
      this.name = name;
    }

    Car.prototype.getName = function() {
      return this.name;
    };

    const myCar = new Car("Tesla");
    console.log(myCar.getName()); // Tesla

进入全屏，退出全屏

10这个关键字 👈

这指的是在调用函数时的上下文。

    const person = {
      name: "John",
      sayName() {
        console.log("控制台输出 this.name 的值");
      },
    };

    person.sayName(); // 输出 John

全屏模式（点击此处进入/退出）

关注我 GitHub

个人简介图片。访问我的GitHub页面:

👨‍💻 全栈开发者 | 🤖 机器学习开发者 | 🤝 开发者关系专员 – 找工作 | 💼 可供雇佣 - Jagroop2001

github.com

11. 课程 📚 课表来了

ES6 类语法提供了更简洁的面向对象编程语法

    class Animal {
      constructor(name) {
        this.name = name;
      }
      speak() {
        return `${this.name} 叫。`;
      }
    }

    const 狗 = new Animal("Dog");
    console.log(狗.speak()); // Dog 叫。

点击这里进入全屏模式 点击这里退出全屏模式

12. 模块包📦

模块可以让你把代码拆分到不同文件里。

// 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 是数组方法，用来变换和筛选数组的。

    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 函数将数组里的值合计。

    const numbers = [1, 2, 3, 4];
    const sum = numbers.reduce((acc, n) => acc + n, 0);
    console.log(sum); // 结果是10

进入全屏 退出全屏

15. setTimeout 和 setInterval ⏱️

setTimeout 用来延迟执行时间，而 setInterval 则是重复执行某个操作。

    setTimeout(() => console.log('1秒后执行'), 1000);

    let count = 0;
    const intervalId = setInterval(() => {
      console.log('计数:', ++count);
      if (count === 3) clearInterval(intervalId); // 当计数达到3时停止定时器
    }, 1000);

全屏模式，退出全屏

16. 模板字面量 💬

模板字面量支持多行字符串，还可以进行插值。

    const name = "World";
    console.log(`你好，${name}！`); // 你好，世界！

全屏模式 全屏/退出全屏

17. 类型转换（强制转换） 🔄

JavaScript可以自动转换数据类型，有时候会很突然。

    console.log("5" + 5); // 结果是 55 (字符串类型)
    console.log("5" - 2); // 结果是 3 (数值)

全屏 退出全屏

18. 真值和假值判断 ✅❌

像 0、""、null、undefined 和 NaN 这样的值都是假值（falsy）。

    if ("") {
      console.log("这不会执行");
    } else {
      console.log("假值");
    }

进入全屏模式，退出全屏模式

19. 防抖和节流 ⏳

防抖动和限流是两种控制函数执行频率的方法，通常用于应对事件。

防抖（防快速重复）：

    // 防抖函数，防止频繁调用
    function 防抖(func, delay) {
      let timeout;
      return function (...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), delay);
      };
    }

    // 传递任意数量的参数
    window.addEventListener("resize", 防抖(() => 控制台打印("已调整大小！"), 500));

进入全屏 退出全屏

限流（限制执行）:

    function throttle(func, limit) {
      // 节流函数，限制函数执行频率
      let inThrottle;
      return function (...args) {
        if (!inThrottle) {
          func.apply(this, args);
          inThrottle = true;
          setTimeout(() => (inThrottle = false), limit);
        }
      };
    }

    // 滚动事件节流，每200毫秒只执行一次
    window.addEventListener("scroll", throttle(() => console.log("正在滚动..."), 200));

切换到全屏, 切换回正常模式

20. 函数式编程中的柯里化 🧑‍🍳

柯里化就是把一个需要多个参数的函数，拆分成一系列只需要一个参数的函数。

这是一个用来演示乘法功能的代码示例。

function multiply(a) {
  return function (b) {
    return a * b;
  };
}

const double = multiply(2);
console.log(double(5)); // 结果是10

全屏 退出全屏

🎉 结束啦

掌握这些概念为在面试中解决JavaScript问题奠定了坚实的基础。通过编写自己的示例来加深理解，以提高对每个概念的熟悉度。通过自己动手写代码来加深理解。