完整的 Javascript - 从基础到高级

# Web 开发# JavaScript# 编程# React

**变量和数据类型**：var、let、const。

**原始类型**：字符串、数字、布尔值、空值、未定义、符号。

**Null 与 Undefined**（关键）：

a. **null**：明确分配给一个变量，表示它是故意为空或没有值。

  • 类型：它是对象类型。（这是 JavaScript 中的一个历史怪癖。）
  • 用法：通常用于当你想故意给变量或对象分配一个空值时，表示故意缺少某些东西。

    • b. **undefined**：表示变量已被声明但尚未赋值，或者函数没有返回任何内容。

    类型：它是其自身类型，未定义。

  • 用法：这是未初始化变量或未传递的函数参数的默认值。它还表示函数未返回任何内容。

    • **引用类型**：对象、数组、函数。

    **控制结构**：if、else、switch

    **循环**：for、while、do-while、for…of、for…in

    **功能**：

    a. 函数声明与表达式

    b.箭头函数

    立即调用函数表达式（IIFE）

    d. 高阶函数（以其他函数作为参数或返回其他函数的函数）

    e.回调函数

    **Promises** ：它是一种处理异步操作的方法。

    a. Promise.all()

    b. Promise.resolve()

    c. Promise.then()

    d. Promise.any()

    Promise.race()

    f. Promise.reject()

    g.Promise.allSettled()

  • Async/await：允许您以更同步的方式编写异步代码。
  • 回调函数：回调是作为参数传递给另一个函数并在该主函数完成后执行的函数。
  • 闭包：JavaScript 中的闭包是一个函数，即使父函数已经返回，它仍然可以访问其父作用域中的变量。
  • 范围：a. 全局与局部范围 b. 函数范围、块范围（使用 let 和 const）
  • 提升：a. 变量提升 b. 函数提升
  • 事件循环和任务队列（微任务和宏任务）
  • 执行上下文：执行上下文是代码执行的环境。

    • 全局执行上下文（GEC）

    b. 函数执行上下文

  • 作用域链和执行上下文：

    • 作用域链是一个关键概念，它决定了在执行函数或代码块时如何在不同的上下文中查找变量

    执行上下文是一个抽象概念，表示 JavaScript 代码在其中求值和执行的环境。每次调用函数或运行代码块时，都会创建一个新的执行上下文。

  • 记忆化：这是一种优化函数的技术，通过缓存昂贵的函数调用结果并在再次出现相同输入时重复使用这些结果。这有助于避免冗余计算，从而在使用相同参数重复调用函数的情况下提高性能。
  • 防抖动：限制函数调用的频率。有助于避免频繁触发事件（例如按键或调整大小事件）的多次函数调用。
  • 节流：确保在给定的时间段内最多调用一次函数，无论事件触发的频率如何。
  • 柯里化：原因：柯里化将一个接受多个参数的函数转换为一系列每个接受一个参数的函数。这对于部分应用参数很有用。使用位置：函数式编程，重用具有固定参数的函数。
  • setTimeout()、setInterval() 和 clearTimeout()：

    • a. setTimeout() ：在指定的延迟（以毫秒为单位）后执行一个函数。

    b. setInterval() ：以指定的间隔（以毫秒为单位）重复执行某个函数。

    c. clearTimeout()：取消之前安排的 setTimeout() 操作。

  • 模板字面量：模板字面量，也称为模板字符串，是 JavaScript 中的一项功能，可更轻松地进行字符串插值和多行字符串。它们用反引号 (`) 表示，而不是单引号或双引号。
  • 本地存储与会话存储：

    • localStorage：以在浏览器会话期间持久存储数据而闻名，即使浏览器关闭后仍然可用。

    sessionStorage：仅在单个浏览器会话期间存储数据，在选项卡或浏览器关闭时清除。

  • 正则表达式 (RegExp)：正则表达式 (RegEx 或 RegExp) 是定义搜索模式的字符序列。RegEx 主要用于字符串搜索和操作，允许您搜索、匹配和替换文本中的模式。
  • this 关键字：this 关键字指代函数执行的上下文。这是一个特殊的关键字，根据函数的调用方式，其行为会有所不同。
  • 在全局执行上下文中（任何函数之外），this 指的是全局对象（浏览器中的 window，Node.js 中的 global）。
  • 在常规函数中（不是严格模式），this 指的是全局对象（浏览器中的窗口）。
  • 当一个函数作为某个对象的方法被调用时，this 指的是调用该方法的对象。
  • JavaScript 中的 OOP：

    • JavaScript 中的类

    JavaScript 中的类和对象

    如何在 ES6 中创建 JavaScript 类

    this 关键字 JavaScript

    JavaScript 中的新关键字

    JavaScript 中的对象构造函数

    JavaScript 中的继承

    JavaScript 中的封装

    JavaScript 中的静态方法

    JavaScript 中的 OOP

    JavaScript 中的 Getter 和 Setter

  • 运算符：a. 算术运算符：+、-、*、/、% b. 比较运算符：==、===、!=、!==、>、<、>=、<= c. 逻辑运算符：&&、||、! d. 赋值运算符：=、+=、-=、*=、/= e. 一元运算符：++、--、typeof、delete f. 三元运算符 (imp) : 条件 ? expr1 : expr2
  • 中断并继续

    • break（退出循环）

    继续（跳至下一次迭代）

  • 参数和参数：

    • 参数是在函数声明（或函数签名）中定义的变量，用于指定函数在被调用时期望接收什么样的值。

    参数是调用函数时传递给函数的实际值。

  • 解构：解构是 JavaScript 中的一种语法，它允许您将数组中的值或对象的属性解包到不同的变量中。它简化了从对象或数组中提取多个属性或元素的过程，使您的代码更简洁、更易读。

    • 数组解构

    b. 对象解构

  • 剩余和扩展运算符：在 JavaScript 中，剩余和扩展运算符均用 ... 表示，但根据使用方式的不同，它们的用途也不同。

    • Rest 运算符用于收集多个元素并将它们打包成单个数组或对象。它主要用于函数参数中以收集参数，或在解构中以收集剩余属性。

    Spread 运算符用于将数组或对象的元素解包为单个元素或属性。它允许您将可迭代对象（数组或对象）展开或“展开”为单个元素或属性。

    31.事件委托：使用父元素上的事件监听器来处理子元素事件

  • 高阶函数：高阶函数是将一个或多个函数作为参数或返回一个函数作为其结果的函数。
  • 匿名函数：匿名函数是没有名称的函数。这些函数通常以内联方式定义，可以分配给变量、作为参数传递或在需要函数的其他地方使用。

    • 主要特点：

    无名称：函数定义时没有名称。

    通常用于内联：通常用作回调函数或作为参数传递给高阶函数。

    可以分配给变量：可以像任何其他值一样分配给变量或属性。

  • 词法作用域：运行时确定变量或函数作用域的过程称为词法作用域。

    • 词法作用域的工作原理：

    当定义一个函数时，它可以访问其范围内的变量（即函数内部声明的变量和外部函数的变量，包括全局范围）。

    如果一个函数嵌套在另一个函数中，则内部函数可以访问外部函数的变量（这称为闭包）。

  • 数组方法：

    • push()、pop()、shift()、unshift()

    连接 ()、切片 ()、拼接 ()

    map()、filter()、reduce()、forEach()

    查找（），查找索引（）

    排序（），反转（）

    连接（），拆分（）

    indexOf()、includes()、lastIndexOf()

  • 对象方法：

    • Object.assign()、Object.create()、Object.keys()、Object.values()、Object.entries()、Object.hasOwn()、Object.freeze()、Object.seal()

  • 原型：

    • 原型链：

    使用原型继承

  • 课程

    • 类语法、构造函数、方法

    使用 extends 进行继承

    super() 和 super() 构造函数

  • call()、apply() 和 bind() ：用于控制 this 的上下文
  • 事件冒泡和捕获：

    • 事件冒泡是指在元素上触发事件，然后事件从目标元素“冒泡”到 DOM 树中的祖先元素。在大多数情况下，除非你特别阻止，否则事件默认会冒泡

    事件捕获与事件冒泡相反。事件首先被根元素捕获，然后滴流到目标元素。

  • 生成器和迭代器：为什么：生成器允许惰性求值，这意味着它们会按需产生值，而不是一次性产生所有值。适用于大型数据集或无限序列。使用位置：实现自定义迭代器、序列的惰性求值。
  • WeakMap 和 WeakSet：原因：帮助 JavaScript 进行内存管理。当不再有对键或值的引用时，WeakMap 和 WeakSet 允许对键或值进行垃圾回收。使用场景：管理对对象的引用而不阻止垃圾回收。例如，在您不想产生内存泄漏的地方缓存 DOM 节点。
  • Polyfill：原因：通过提供模仿现代功能的代码，添加对旧版浏览器本身不可用的功能的支持。使用位置：确保与旧版浏览器（例如旧版 Internet Explorer）兼容，以便使用 Promise、fetch 等新 JavaScript 功能。
  • 原型继承：原因：JavaScript 使用原型进行继承，而不是传统的面向对象继承。了解原型链的工作原理是理解 JavaScript 继承模型的关键。使用位置：构建对象层次结构，向构造函数添加方法。
  • Cookies：在 JavaScript 中存储和检索 cookies
  • 高级数组方法

    • Array.prototype.find() ：查找数组中符合条件的第一个元素

    Array.prototype.filter()：根据条件过滤元素

    Array.prototype.reduce()：将数组简化为单个值

    Array.prototype.map()：通过将函数应用于每个元素来创建新数组

    Array.prototype.sort()：使用自定义排序函数对数组进行排序

  • 设计模式：

    • 模块模式：将代码封装到模块中

    单例模式：确保一个类只有一个实例

    观察者模式：当一个对象的状态改变时通知多个对象。

    工厂模式：提供一种实例化对象的方法，同时将创建逻辑与应用程序的其余部分分开。

    策略模式：允许您为特定操作定义策略（算法）并在运行时更改它。

    装饰器模式：动态地向对象添加行为而不影响其结构。

  • 延迟加载：延迟加载内容直到需要它为止。
  • 使用 JSON：

    • JSON 基础知识

    JSON 语法，使用 JSON.parse() 进行解析，使用 JSON.stringify() 进行字符串化

    使用 API

    使用 fetch() 从 API 获取数据

    使用 Promises 或 Async/Await 处理 API 响应

  • DOM操作：

    • DOM 选择

    文档.getElementById()、文档.querySelector()、文档.querySelectorAll()

    事件处理

    事件监听器：addEventListener()、removeEventListener()

    事件.target，事件.preventDefault()，事件.stopPropagation()

    修改 DOM 元素

    更改文本、HTML、属性、样式

    动态添加/删除元素（createElement（）、appendChild（）、removeChild（））

    DOM 遍历

    父节点，子节点，下一个兄弟节点，上一个兄弟节点

  • 错误处理：

    • try...catch...finally：处理同步代码中的错误

    自定义错误：创建自定义错误类

    抛出错误：使用 throw 关键字手动抛出错误

  • 字符串方法：charAt()、charCodeAt()、concat()、includes()、indexOf()、lastIndexOf()、slice()、split()、toLowerCase()、toUpperCase()、trim()、replace()、search()、match()、repeat()、startsWith()、endsWith()、padStart()、padEnd()、localeCompare()、fromCharCode()。
  • 日期方法：Date.now()、Date.parse()、Date.UTC()、getDate()、getDay()、getFullYear()、getHours()、getMilliseconds()、getMinutes()、getMonth()、getSeconds()、getTime()、getTimezoneOffset()、setDate()、setFullYear()、setHours()、setMilliseconds()、setMinutes()、setMonth()、setSeconds()、setTime()、toDateString()、toISOString()、toLocaleDateString()、toLocaleTimeString()、toString()。
  • 生成器：JavaScript 中的生成器是一种特殊类型的函数，允许您暂停和恢复其执行。function*、yield、next()、return()、throw()。
  • JavaScript 代理：JavaScript 中的代理是一种特殊对象，它允许您拦截和自定义对象上的操作，例如属性访问、赋值、函数调用等。它充当另一个对象的包装器，并可以重新定义该对象上的基本操作（如 get、set、deleteProperty 等）。

    • 常用的陷阱（方法）：

    get(target, prop,receiver)：拦截属性访问。

    set(target, prop, value,receiver)：拦截属性分配。

    has(target, prop)：拦截 in 运算符。

    deleteProperty(target, prop)：拦截属性删除。

    apply(target, thisArg,argumentsList): 拦截函数调用。

    constrain(target, args)：拦截新运算符。

    defineProperty(target, prop, descriptor)：拦截属性定义。

  • Javascript 数组和对象克隆：浅还是深？

    • 对象或数组的浅克隆会创建一个新实例，但只会复制顶级属性或元素。如果原始对象或数组包含对其他对象（嵌套对象或数组）的引用，则不会复制这些内部对象。相反，浅克隆将引用相同的对象。

    深度克隆会创建原始对象或数组的完全独立副本。它会以递归方式复制所有属性或元素，包括嵌套对象或数组。这意味着深度克隆可确保原始对象和克隆对象之间不会共享对嵌套对象的引用。

  • 松散相等（==）和严格相等（===）：

    • 松散相等性在执行类型强制转换后比较两个值是否相等。这意味着在进行比较之前，将值转换为通用类型（如果它们是不同类型的）。

    使用 == 时，JavaScript 会尝试将操作数转换为相同类型，然后再进行比较。

    严格相等比较两个值而不执行任何类型转换。它检查操作数的值和类型。

    对于 === ，操作数必须是相同的类型和值才被视为相等。

  • 按值调用 VS 按引用调用：

    • 按值调用：当参数按值传递给函数时，将传递实际值的副本。对函数内部参数所做的任何更改都不会影响函数外部的原始变量。

    发生时间：当将原始类型（如数字、字符串、布尔值、null、未定义和符号）传递给函数时，就会发生这种情况。

    通过引用调用：当通过引用传递参数时，实际对象的引用（或内存地址）将传递给函数。这意味着对函数内部参数所做的任何更改都将直接修改函数外部的原始对象。

    发生时间：当非原始类型（如对象、数组和函数）传递给函数时，就会发生这种情况。

  • JavaScript 集合：JavaScript 中的集合是一个内置集合对象，允许您存储任何类型的唯一值，无论是原始类型还是对象引用。

    • 集合的主要特征：

    唯一元素：集合会自动确保其包含的每个值都是唯一的。如果您尝试添加重复的值，它将被忽略。

    有序：集合中的元素是有序的，这意味着值按添加的顺序存储。但是，集合不允许重复条目。

    可迭代：集合是可迭代的，因此您可以使用 for...of 或 .forEach() 之类的方法循环遍历集合中的元素。

    无索引：与数组不同，集合元素不能通过索引访问。它们按插入顺序存储，但不能通过数字引用它们。

    集合的基本方法：

    add(value)：向 Set 添加一个值。如果该值已经存在，则不执行任何操作（无重复）。

    has(value)：检查 Set 是否包含指定值。返回 true 或 false。

    delete(value)：从集合中删除指定的值。

    clear()：从集合中删除所有元素。

    size：返回 Set 中的元素数量。

    forEach(callback)：对 Set 中的每个值执行一次提供的函数。

  • JavaScript Map：JavaScript 中的 Map 是存储键值对的内置对象。与常规 JavaScript 对象不同，Map 允许使用任何数据类型（包括对象、函数和字符串和数字等原始类型）的键。Map 还保持其键的插入顺序，这使其在顺序很重要的场景中非常有用。

    • 地图的基本方法：

    set(key, value)：在 Map 中添加或更新具有指定键和值的元素。

    get(key)：检索与指定键关联的值。

    has(key)：检查 Map 是否包含某个键。

    delete(key)：删除与指定键关联的元素。

    clear()：从 Map 中删除所有元素。

    size：返回Map中键值对的数量。

    forEach(callback)：对 Map 中的每个键值对执行一次提供的函数。

    keys()：返回一个包含 Map 中所有键的迭代器对象。

    values()：返回一个包含Map中所有值的迭代器对象。

    entry()：返回一个包含 [键，值] 对的数组的迭代器对象。

  • Fetch API：Fetch API 允许我们从浏览器向 Web 服务器发出异步请求。每次发出请求时，它都会返回一个承诺，然后进一步用于检索请求的响应。
  • 進口/出口：

    • 模块：在 JavaScript 中，模块是一个包含要重复使用的代码的文件。您可以将代码拆分为多个单独的文件，然后导入所需的代码，而不是将所有内容都放在一个文件中。这样可以使代码保持整洁、有序且易于维护。

    导入：这是将其他模块的功能引入当前文件的方式。

    导出：这是使一个模块中的变量、函数、类或对象可供其他模块使用的方式。

  • 纯函数、副作用、状态变异和事件传播：
  • 递归：递归是一种基本的编程概念，即函数调用自身来解决问题。当问题可以分解为较小的类似子问题时，通常会使用递归。在 JavaScript 中，递归对于遍历树、解决谜题等任务很有用。

    • 关键概念：

    基本情况：停止递归的条件。如果没有基本情况，递归可能会导致无限的函数调用，从而导致堆栈溢出错误。

    递归情况：递归的一部分，其中函数使用问题的较小或更简单的版本调用自身。

  • apply、call 和 bind 方法：
  • 窗口方法：alert()、confirm()、prompt()、setTimeout()、setInterval()、clearTimeout()、clearInterval()、open()、close()、requestAnimationFrame()。
  • 鼠标事件：click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、contextmenu。
  • 键盘事件：keydown、keypress、keyup。
  • 表单事件：提交、更改、焦点、模糊、输入、重置、选择、按键、键盘按下、键盘弹起。
  • 调试：
  • 跨域资源共享（CORS）：
  • Web Workers：一种在后台线程中运行脚本的机制，允许 JavaScript 执行计算量大的任务而不会阻塞主线程。
  • 服务工作者：在浏览器后台运行的脚本，启用推送通知、后台同步和离线功能缓存等功能。
  • 延迟加载或无限滚动）：

    • 延迟加载和无限滚动是两种常用于增强 Web 应用程序性能和用户体验的技术，尤其是在处理大量数据或媒体（如图像、列表或文章）时。

    延迟加载是 Web 开发中的一种设计模式，其中资源（例如图像、脚本、视频甚至内容）仅在需要时才加载。

    延迟加载的主要目标是通过减少初始加载的资源数量来改善网页的初始加载时间。

    无限滚动是一种在用户向下滚动页面时自动加载更多内容的技术，通常无需分页。该技术广泛用于社交媒体平台、新闻网站以及任何需要显示大型数据集的 Web 应用程序（例如 Instagram、Twitter、Facebook）。

    76：**渐进式 Web 应用程序 (PWA)**：构建可离线工作、提供推送通知并具有类似原生性能的 Web 应用程序（通过服务工作线程和其他浏览器 API）。

  • 服务器发送事件：服务器发送事件 (SSE) 是一种简单而有效的技术，可通过单个 HTTP 连接实现从服务器到客户端的实时更新。

    • 78.**严格模式**：严格模式是 JavaScript 中的一项功能，可确保您避免错误和有问题的功能。

  • 安全性：（不是 JavaScript 概念，但了解它很重要）

    • 跨站点脚本 (XSS)

    跨站请求伪造 (CSRF)

    内容安全策略 (CSP)

    CORS（跨域资源共享）

    JWT（JSON Web 令牌）

  • 暂时死区 (TDZ)：该术语指的是变量在执行上下文中创建和初始化之间的时间段。在此期间，变量存在但无法访问 - 尝试访问将导致 ReferenceError。

    • TDZ 发生在使用 let 和 const 声明的变量中，但不发生在 var 中，因为 var 声明被提升并用 undefined 初始化。