完整的 Javascript - 基础到高级

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

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

空与未定义（小鬼）：

a. null：显式分配给变量以指示它故意为空或没有值。

• 类型：它是对象类型。 （这是 JavaScript 中的一个历史怪癖。）
• 用法：通常在您想要故意为变量或对象分配空值时使用，表明故意缺少某些内容。

b. 未定义：表示变量已被声明但尚未赋值，或者函数没有返回任何内容。
类型：它是它自己的类型，未定义。

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

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

控制结构：if、else、switch

循环：for、while、do-while、for...of、for...in

功能：
一个。函数声明与表达式
b.箭头函数
c.立即调用函数表达式 (IIFE)
d.高阶函数（将其他函数作为参数或返回它们的函数）
e.回调函数
Promises ：这是一种处理异步操作的方法。
一个。 Promise.all()
b. Promise.resolve()
c. Promise.then()
d. Promise.any()
e. Promise.race()
f. Promise.reject()
g.Promise.allSettled()

1. Async/await：允许您以更加同步的方式编写异步代码。

2. 回调函数：回调是作为参数传递给另一个函数并在该主函数完成后执行的函数。

3. 闭包：JavaScript 中的闭包是一个可以访问其父作用域中的变量的函数，即使在父函数返回后也是如此。

4. 范围：
   一个。全局范围与局部范围
   b.函数作用域、块作用域（使用 let 和 const）

5. 吊装：
   一个。变量提升
   b.函数提升

6. 事件循环和任务队列（微任务和宏任务）

7. 执行上下文：执行上下文是代码执行的环境。
   一个。全局执行上下文 (GEC)
   b.函数执行上下文

8. 作用域链和执行上下文：

作用域链是一个至关重要的概念，它决定了执行函数或代码块时如何在不同上下文中查找变量
执行上下文是一个抽象概念，表示 JavaScript 代码评估和执行的环境。每次调用函数或运行代码块时，都会创建一个新的执行上下文。

1. 记忆化：这是一种通过缓存昂贵的函数调用的结果并在相同的输入再次出现时重用这些结果来优化函数的技术。这有助于避免冗余计算，从而提高使用相同参数重复调用函数的情况下的性能。

2. 去抖动：限制调用函数的速率。有助于避免频繁触发的事件（例如击键或调整大小事件）的多个函数调用。

3. 限制：确保在给定时间段内最多调用一次函数，无论事件触发的频率如何。

4. 柯里化：原因：柯里化将采用多个参数的函数转换为一系列每个采用一个参数的函数。这对于部分应用参数很有用。
   使用地点：函数式编程，重用具有固定参数的函数。

5. setTimeout()、setInterval() 和clearTimeout() :
   一个。 setTimeout() ：在指定的延迟（以毫秒为单位）后执行函数。
   b. setInterval() ：以指定的时间间隔（以毫秒为单位）重复执行函数。
   c. clearTimeout()：取消先前安排的 setTimeout() 操作。

6. 模板文字：模板文字，也称为模板字符串，是 JavaScript 中的一项功能，可以更轻松地进行字符串插值和多行字符串。它们用反引号 (`) 表示，而不是单引号或双引号。

7. 本地存储和会话存储：

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

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

1. 正则表达式 (RegExp)：正则表达式（RegEx 或 RegExp）是定义搜索模式的字符序列。 RegEx 主要用于字符串搜索和操作，允许您搜索、匹配和替换文本中的模式。

2. this 关键字：this 关键字指的是函数执行的上下文。它是一个特殊的关键字，根据函数的调用方式，其行为会有所不同。

3. 在全局执行上下文中（在任何函数之外），this 指的是全局对象（浏览器中的窗口，Node.js 中的全局）。

4. 在常规函数中（非严格模式），this 指的是全局对象（浏览器中的窗口）。

5. 当函数作为对象的方法被调用时，this 指的是调用该方法的对象。

6. JavaScript 中的 OOP：

JavaScript 中的类

JavaScript 中的类和对象

如何在 ES6 中创建 JavaScript 类

此关键字 JavaScript

JavaScript 中的新关键字

JavaScript 中的对象构造函数

JavaScript 中的继承

JavaScript 中的封装

JavaScript 中的静态方法

JavaScript 中的 OOP

JavaScript 中的 Getter 和 Setter

1. 运营商：
   一个。算术运算符：, -, *, /, %
   b.比较运算符：==、===、!=、!==、>、=、 c.逻辑运算符：&&、||、!
   d.赋值运算符：=、=、-=、*=、/=
   e.一元运算符：、--、typeof、delete
   f.三元运算符（imp）：条件？ expr1 : expr2

2. 中断并继续

break（退出循环）
继续（跳到下一次迭代）

1. 参数和参数：

参数是在函数声明（或函数签名）中定义的变量，用于指定函数在调用时期望接收的值类型。
参数是调用函数时传递给函数的实际值。

1. 解构：解构是 JavaScript 中的一种语法，允许您将数组中的值或对象中的属性解压缩为不同的变量。它简化了从对象或数组中提取多个属性或元素的过程，使您的代码更干净、更具可读性。

a.数组解构
b.对象解构

1. Rest 和 Spread 运算符：Rest 和 Spread 运算符在 JavaScript 中都用 ... 表示，但根据使用方式不同，它们的用途也不同。

Rest 运算符用于收集多个元素并将它们捆绑到单个数组或对象中。它主要用于函数参数中收集参数，或用于解构中收集剩余属性。

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

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

1. 高阶函数：高阶函数是一种接受一个或多个函数作为参数或返回一个函数作为结果的函数。

2. 匿名函数：匿名函数是没有名称的函数。这些函数通常是内联定义的，可以分配给变量、作为参数传递或在需要函数的其他地方使用。

主要特征：

无名称：函数定义时没有名称。
经常使用内联：通常用作回调函数或作为参数传递给高阶函数。
可以分配给变量：可以像任何其他值一样分配给变量或属性。

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

词法作用域如何工作：

定义函数时，它可以访问其作用域内的变量（即函数内部声明的变量和外部函数的变量，包括全局作用域）。
如果一个函数嵌套在另一个函数中，则内部函数可以访问外部函数的变量（这称为闭包）。

1. 数组方法：

push()、pop()、shift()、unshift()
concat()、slice()、splice()
map()、filter()、reduce()、forEach()
find(), findIndex()
排序()、反向()
连接()、分割()
indexOf()、includes()、lastIndexOf()

1. 对象方法：

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

1. 原型：

原型链：
使用原型继承

1. 课程

类语法、构造函数、方法
使用extends
进行继承 super() 和 super() 构造函数

1. call()、apply() 和 bind() ：用于控制 this

的上下文

2. 事件冒泡和捕获：

事件冒泡是在元素上触发事件时发生的，然后事件从目标元素“冒泡”到 DOM 树中的祖先元素。在大多数情况下，事件默认会冒泡，除非您专门阻止它

事件捕获与事件冒泡相反。该事件首先被根元素捕获，然后向下渗透到目标元素。

1. 生成器和迭代器：
   原因：生成器允许惰性求值，这意味着它们按需生成值，而不是一次性生成所有值。对于大型数据集或无限序列很有用。
   使用地点：实现自定义迭代器、序列的惰性求值。

2. WeakMap 和 WeakSet :
   原因：有助于 JavaScript 中的内存管理。 WeakMap 和 WeakSet 允许在没有更多引用时对键或值进行垃圾回收。
   使用地点：管理对对象的引用而不阻止垃圾收集。例如，在您不想造成内存泄漏的地方缓存 DOM 节点。

3. Polyfill :
   原因：通过提供模仿现代功能的代码，添加对旧版浏览器中本机不可用的功能的支持。
   使用地点：确保与旧版浏览器（例如旧版 Internet Explorer）兼容，以实现 Promise、fetch 等新 JavaScript 功能。

4. 原型继承：
   原因：JavaScript 使用原型进行继承，而不是经典的面向对象继承。了解原型链的工作原理是理解 JavaScript 继承模型的关键。
   使用地点：构建对象层次结构、向构造函数添加方法。

5. Cookie：在 JavaScript 中存储和检索 cookie

6. 高级数组方法

Array.prototype.find() ：查找数组中符合条件的第一个元素
Array.prototype.filter()：根据条件过滤元素
Array.prototype.reduce()：将数组缩减为单个值
Array.prototype.map()：通过对每个元素应用函数来创建新数组
Array.prototype.sort()：使用自定义排序函数对数组进行排序

1. 设计模式：

模块模式：将代码封装到模块中
单例模式：确保一个类只有一个实例
观察者模式：当一个对象的状态发生变化时通知多个对象。
工厂模式：提供一种实例化对象的方法，同时将创建逻辑与应用程序的其余部分分开。
策略模式：允许您为特定操作定义策略（算法）并在运行时更改它。
装饰器模式：动态地向对象添加行为而不影响其结构。

1. 延迟加载：延迟加载内容直到需要时。

2. 使用 JSON :

JSON 基础知识
JSON 语法，使用 JSON.parse() 进行解析，使用 JSON.stringify() 进行字符串化
使用 API
使用 fetch() 从 API 获取数据
使用 Promises 或 Async/Await 处理 API 响应

1. DOM 操作：

DOM 选择
document.getElementById()、document.querySelector()、document.querySelectorAll()
事件处理
事件监听器：addEventListener()、removeEventListener()
event.target、event.preventDefault()、event.stopPropagation()
修改 DOM 元素
更改文本、HTML、属性、样式
动态添加/删除元素（createElement()、appendChild()、removeChild()）
DOM 遍历
父节点、子节点、下一个兄弟节点、上一个兄弟节点

1. 错误处理：

try...catch...finally：处理同步代码中的错误
自定义错误：创建自定义错误类
Throwing Errors：手动抛出错误的 throw 关键字

1. 字符串方法：
   charAt()、charCodeAt()、concat()、includes()、indexOf()、lastIndexOf()、slice()、split()、toLowerCase()、toUpperCase()、trim()、replace()、search( )、match()、repeat()、startsWith()、endsWith()、padStart()、padEnd()、localeCompare()、fromCharCode()。

2. 日期方法：
   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()。

3. 生成器：JavaScript 中的生成器是一种特殊类型的函数，允许您暂停和恢复其执行。
   函数*、yield、next()、return()、throw()。

4. JavaScript 代理：JavaScript 中的代理是一种特殊的对象，它允许您拦截和自定义对对象的操作，例如属性访问、赋值、函数调用等。它充当另一个对象的包装器，并且可以重新定义该对象的基本操作（如 get、set、deleteProperty 等）。

常用陷阱（方法）：

get(target, prop, receive)：拦截属性访问。
set(target, prop, value, receive): 拦截属性赋值。
has(target, prop)：拦截 in 运算符。
deleteProperty(target, prop)：拦截属性删除。
apply(target, thisArg,argumentsList)：拦截函数调用。
Construction(target, args): 拦截 new 操作符。
DefineProperty（target，prop，descriptor）：拦截属性定义。

1. Javascript 数组和对象克隆：浅层还是深层？

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

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

1. 松散相等 (==) 和严格相等 (===) :

松散相等在执行类型强制后比较两个值的相等性。这意味着在进行比较之前，这些值会被转换为通用类型（如果它们属于不同类型）。
使用 == 时，JavaScript 会在比较操作数之前尝试将它们转换为相同类型。

严格相等比较两个值而不执行任何类型转换。它检查操作数的值和类型。
对于 ===，操作数必须具有相同的类型和值才能被视为相等。

1. 按值调用与按引用调用：

按值调用：当参数按值传递给函数时，会传递实际值的副本。对函数内部参数所做的任何更改都不会影响函数外部的原始变量。
何时发生：当原始类型（如数字、字符串、布尔值、null、未定义和符号）传递给函数时，就会发生这种情况。

按引用调用：当按引用传递参数时，实际对象的引用（或内存地址）将传递给函数。这意味着对函数内部参数所做的任何更改都将直接修改函数外部的原始对象。
何时发生：当非基本类型（如对象、数组和函数）传递给函数时，就会发生这种情况。

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

集合的主要特征：

唯一元素：集合会自动确保它包含的每个值都是唯一的。如果您尝试添加重复值，它将被忽略。
有序：集合中的元素是有序的，这意味着值按照添加的顺序存储。但是，集合不允许重复条目。
可迭代：集合是可迭代的，因此您可以使用 for...of 或 .forEach() 等方法循环集合中的元素。
无索引：与数组不同，Set 元素不通过索引访问。它们按插入顺序存储，但您不能通过编号引用它们。
集合的基本方法：

add(value)：向 Set 添加一个值。如果该值已经存在，则不会执行任何操作（不重复）。
has(value)：检查 Set 是否包含指定值。返回 true 或 false。
delete(value)：从 Set 中删除指定的值。
clear()：从 Set 中删除所有元素。
size：返回Set中元素的数量。
forEach(callback)：对 Set 中的每个值执行一次提供的函数。

1. JavaScript Map：JavaScript 中的 Map 是一个存储键值对的内置对象。与常规 JavaScript 对象不同，Map 允许使用任何数据类型（包括对象、函数以及字符串和数字等基本类型）的键。 地图还维护其键的插入顺序，这使得它们在顺序很重要的场景中非常有用。

地图的基本方法：

set(key, value)：在 Map 中添加或更新指定键和值的元素。
get(key)：检索与指定键关联的值。
has(key)：检查 Map 是否包含键。
delete(key)：删除与指定键关联的元素。
clear()：从 Map 中删除所有元素。
size：返回Map中键值对的数量。
forEach(callback)：为 Map 中的每个键值对执行一次提供的函数。
keys()：返回一个包含Map中所有键的迭代器对象。
value()：返回一个包含Map中所有值的迭代器对象。
items()：返回一个包含[key, value]对数组的迭代器对象。

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

2. 导入/导出：

模块：在 JavaScript 中，模块是包含要重用的代码的文件。您可以将代码拆分为单独的文件，然后导入所需的内容，而不是将所有内容都放在一个文件中。这使代码保持干净、有组织且可维护。

导入：这是您将其他模块的功能引入当前文件的方式。
导出：这是使一个模块中的变量、函数、类或对象可供其他模块使用的方式。

1. 纯函数、副作用、状态突变和事件传播：

2. 递归：
   递归是一个基本的编程概念，函数调用自身来解决问题。当问题可以分解为更小、相似的子问题时，通常会使用递归。在 JavaScript 中，递归对于遍历树、解决谜题等任务很有用。

关键概念：

基本情况：停止递归的条件。如果没有基本情况，递归可能会导致无限函数调用，从而导致堆栈溢出错误。
递归情况：递归的一部分，函数通过更小或更简单的问题版本调用自身。

1. apply、call、bind 方法：

2. 窗口方法：
   Alert()、confirm()、prompt()、setTimeout()、setInterval()、clearTimeout()、clearInterval()、open()、close()、requestAnimationFrame()。

3. 鼠标事件：
   单击、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、上下文菜单。

4. 键盘事件：
   按键、按键、按键。

5. 表单事件：
   提交、更改、聚焦、模糊、输入、重置、选择、按键、按键、按键。

6. 调试：

7. 跨源资源共享（CORS）：

8. Web Workers：一种在后台线程中运行脚本的机制，允许 JavaScript 执行计算量大的任务而不阻塞主线程。

9. Service Workers：在浏览器后台运行的脚本，支持推送通知、后台同步和离线功能缓存等功能。

10. 延迟加载或无限滚动）：

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

延迟加载是 Web 开发中的一种设计模式，其中资源（例如图像、脚本、视频甚至内容）仅在需要时才加载。
延迟加载的主要目标是通过减少初始加载的资源数量来缩短网页的初始加载时间。

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

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

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

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

1. 安全性：（不是 JavaScript 概念，但了解这一点很重要）

跨站脚本（XSS）
跨站请求伪造 (CSRF)
内容安全策略 (CSP)
CORS（跨源资源共享）
JWT（JSON Web 令牌）

1. 临时死区（TDZ）：这个术语指的是执行上下文中变量的创建和初始化之间的时间段。在此期间，变量存在但无法访问 - 尝试这样做将导致引用错误。

TDZ 发生在使用 let 和 const 声明的变量上，但不会发生在 var 上，因为 var 声明是用 undefined 提升和初始化的。

就是这样。

学习 JavaScript 或任何编程语言，一开始可能会让人感到不知所措。如果您第一次不理解某个主题，那完全没关系！没有人能在一夜之间成为专家。关键是一致性、实践和坚持。

请记住，每个开发人员都是从基础开始的。花点时间彻底理解每个主题，尤其是如果您是初学者。不要急于求成，也不要因需要掌握的概念数量而气馁。继续练习，渐渐地，事情就会开始顺利。

保持耐心，保持好奇心，最重要的是，继续编码！

感谢您花时间阅读我的博客！我希望您发现它有帮助且内容丰富。如果我错过了任何重要的主题或概念，我真诚地道歉。如果您有任何问题或建议，请随时发表评论或联系我们。我们始终感谢您的反馈！

如果您发现这有帮助，请不要忘记鼓掌！ ？

以上是完整的 Javascript - 基础到高级的详细内容。更多信息请关注PHP中文网其他相关文章！