完整的 Javascript - 基础到高级-js教程-PHP中文网

首页

web前端

js教程

完整的 Javascript - 基础到高级

Susan Sarandon

Dec 25, 2024 am 02:41 AM

Complete Javascript - Basic to Advanced

变量和数据类型：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()

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

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

记忆化：这是一种通过缓存昂贵的函数调用的结果并在相同的输入再次出现时重用这些结果来优化函数的技术。这有助于避免冗余计算，从而提高使用相同参数重复调用函数的情况下的性能。
去抖动：限制调用函数的速率。有助于避免频繁触发的事件（例如击键或调整大小事件）的多个函数调用。
限制：确保在给定时间段内最多调用一次函数，无论事件触发的频率如何。
柯里化：原因：柯里化将采用多个参数的函数转换为一系列每个采用一个参数的函数。这对于部分应用参数很有用。
使用地点：函数式编程，重用具有固定参数的函数。
setTimeout()、setInterval() 和clearTimeout() :
一个。 setTimeout() ：在指定的延迟（以毫秒为单位）后执行函数。
b. setInterval() ：以指定的时间间隔（以毫秒为单位）重复执行函数。
c. clearTimeout()：取消先前安排的 setTimeout() 操作。
模板文字：模板文字，也称为模板字符串，是 JavaScript 中的一项功能，可以更轻松地进行字符串插值和多行字符串。它们用反引号 (`) 表示，而不是单引号或双引号。
本地存储和会话存储：

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

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

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

JavaScript 中的类

JavaScript 中的类和对象

如何在 ES6 中创建 JavaScript 类

此关键字 JavaScript

JavaScript 中的新关键字

JavaScript 中的对象构造函数

JavaScript 中的继承

JavaScript 中的封装

JavaScript 中的静态方法

JavaScript 中的 OOP

JavaScript 中的 Getter 和 Setter

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

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

参数和参数：

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

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

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

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

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

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

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

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

主要特征：

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

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

词法作用域如何工作：

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

数组方法：

push()、pop()、shift()、unshift()
concat()、slice()、splice()
map()、filter()、reduce()、forEach()
find(), findIndex()
排序()、反向()
连接()、分割()
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 继承模型的关键。
使用地点：构建对象层次结构、向构造函数添加方法。
Cookie：在 JavaScript 中存储和检索 cookie
高级数组方法

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

错误处理：

try...catch...finally：处理同步代码中的错误
自定义错误：创建自定义错误类
Throwing Errors：手动抛出错误的 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 中的生成器是一种特殊类型的函数，允许您暂停和恢复其执行。
函数*、yield、next()、return()、throw()。
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）：拦截属性定义。

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

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

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

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

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

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

按值调用与按引用调用：

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

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

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 中的每个值执行一次提供的函数。

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]对数组的迭代器对象。

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

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

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

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

关键概念：

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

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