JavaScript 核心概念及代码示例的梳理

JavaScript 体系​

一、语言基础​

  1. ​数据类型​

    • ​原始类型​ ​:numberstringbooleannullundefinedsymbolbigint

      ini 复制代码
      let age = 25;                      // number
      let name = "Alice";                // string
      let isStudent = true;              // boolean
      let empty = null;                  // null → typeof 返回 'object'(历史遗留)
      let notDefined;                    // undefined
      let id = Symbol("id");             // symbol
      let bigNum = 100n;                 // bigint 
    • ​对象类型​ ​:object(含数组、函数等)

      vbnet 复制代码
      let person = { name: "Bob" };      // object
      let nums = [1, 2, 3];              // object (数组是特殊对象)
      function greet() { }               // function → typeof 返回 'function' 
  2. ​变量声明​

    • var:函数作用域(存在变量提升)

    • let/const:块级作用域(const 声明常量)

      javascript 复制代码
      if (true) {
        var x = 10;    // 函数作用域,外部可访问
        let y = 20;    // 块级作用域,外部不可访问
      }
      console.log(x);  // 10
      console.log(y);  // ReferenceError 

​二、函数系统​

  1. ​定义与作用域​

    • ​函数声明​​:存在提升(可在定义前调用)

    • ​箭头函数​ ​:无自己的 this,继承父级作用域

      javascript 复制代码
      // 函数表达式
      const multiply = (a, b) => a * b;
      
      // 闭包示例
      function counter() {
        let count = 0;
        return () => ++count;   // 闭包保留对 count 的引用
      }
      const myCounter = counter();
      myCounter(); // 1 
  2. ​高阶函数​

    • 接收函数作为参数或返回函数:

      dart 复制代码
      // map 高阶函数
      const doubled = [1, 2, 3].map(num => num * 2); // [2, 4, 6] 

​三、面向对象​

  1. ​原型继承​

    • 通过原型链实现属性共享:

      javascript 复制代码
      function Animal(name) {
        this.name = name;
      }
      Animal.prototype.speak = function() { 
        console.log(`${this.name} makes a noise`);
      };
      const dog = new Animal("Rex");
      dog.speak(); // Rex makes a noise [1,5](@ref)
  2. ​ES6 类语法​

    • 更接近传统面向对象:

      less 复制代码
      class Person {
        #privateField;  // 私有字段
        constructor(name) { 
          this.name = name; 
        }
        static createAnonymous() { 
          return new Person("Anonymous"); // 静态方法
        }
      }
      const user = Person.createAnonymous(); [1,6](@ref)

​四、异步编程​

  1. ​事件循环模型​

    • ​宏任务​ ​(setTimeout)、​​微任务​ ​(Promise.then):

      javascript 复制代码
      console.log("Start");
      setTimeout(() => console.log("Timeout"), 0);
      Promise.resolve().then(() => console.log("Promise"));
      console.log("End");
      // 输出: Start → End → Promise → Timeout 
  2. ​Async/Await​

    • 用同步写法处理异步:

      javascript 复制代码
      async function fetchData() {
        try {
          const res = await fetch("https://api.example.com/data");
          return res.json();
        } catch (err) {
          console.error("Fetch failed:", err);
        }
      } 

​五、现代 ES6+ 特性​

  1. ​解构与扩展运算符​

    arduino 复制代码
    javascript
    运行
    复制
    // 对象解构
    const { name, age } = person;  
    // 数组展开
    const newArr = [...oldArr, "newItem"]; 
  2. ​可选链与空值合并​

    ini 复制代码
    const email = user?.profile?.email ?? "default@email.com"; 
  3. ​2025 新特性​

    • ​管道操作符​ ​(提案):value |> fn1 |> fn2

    • ​顶层 Await​ ​:模块中直接使用 await

      javascript 复制代码
      复制
      // 动态导入 + 顶层 await
      const data = await import("./api.js"); 

​六、错误处理与调试​

  1. ​Try/Catch​

    less 复制代码
    javascript
    运行
    复制
    try {
      JSON.parse("invalid json");
    } catch (e) {
      console.error("Parsing error:", e.message);
    } [2](@ref)
  2. ​自定义错误​

    scala 复制代码
    class AuthError extends Error {
      constructor(message) {
        super(message);
        this.name = "AuthError";
      }
    } 

​七、模块化​

  1. ​ES Modules​

    javascript 复制代码
    // math.js
    export const add = (a, b) => a + b;
    
    // main.js
    import { add } from "./math.js";
    console.log(add(2, 3)); // 5 

​八、2025 前沿概念​

  1. ​Temporal API​

    • 替代 Date 对象的日期处理方案:

      ini 复制代码
      const now = Temporal.Now.instant(); // 精确时间戳 
  2. ​Records & Tuples​​(提案)

    • 不可变数据结构:

      rust 复制代码
      const point = #[x: 1, y: 2]; // Record
      const coords = #[1, 2, 3];   // Tuple 
相关推荐
当牛作馬31 分钟前
React——ant-design组件库使用问题记录
前端·react.js·前端框架
0wioiw044 分钟前
Flutter基础(前端教程⑨-图片)
前端·flutter
一只一只妖1 小时前
uniapp小程序无感刷新token
前端·小程序·uni-app
绅士玖1 小时前
📝 深入浅出 JavaScript 拷贝:从浅拷贝到深拷贝 🚀
前端
中微子1 小时前
闭包面试宝典:高频考点与实战解析
前端·javascript
brzhang1 小时前
前端死在了 Python 朋友的嘴里?他用 Python 写了个交互式数据看板,着实秀了我一把,没碰一行 JavaScript
前端·后端·架构
G等你下课2 小时前
告别刷新就丢数据!localStorage 全面指南
前端·javascript
该用户已不存在2 小时前
不知道这些工具,难怪的你的Python开发那么慢丨Python 开发必备的6大工具
前端·后端·python
爱编程的喵2 小时前
JavaScript闭包实战:从类封装到防抖函数的深度解析
前端·javascript