DOM常⻅的操作
DOM常⻅的操作 ⽂档对象模型 (DOM) 是 HTML 和 XML ⽂档的编程接⼝ 创建节点 createElement创建新元素,接受⼀个参数,即要创建元素的标签名 createTextNode创建⼀个⽂本节点 createDocumentFragment⽤来创建⼀个⽂档碎⽚,它表⽰⼀种轻量级的⽂档,主要是⽤来存储临时节点,然后把⽂档碎⽚的内 容⼀次性添加到 DOM 中 createAttribute创建属性节点,可以是⾃定义属性 12const dataAttribute = document.createAttribute('custom'); consle.log(dataAttribute); 查询节点 返回⼀个包含节点⼦树内所有与之相匹配的 Element 节点列表,如果没有相匹配的,则返回⼀个空 1234567891 document.getElementById('id属性值');返回拥有指定id的对象的引⽤2...
async与await
async与awaitasync 是异步的意思, await 则可以理解为 async wait 。所以可以理解 async 就是⽤来声 明⼀个异步⽅法,⽽ await 是⽤来等待异步⽅法执⾏ 21.3.1. async async 函数返回⼀个 promise 对象,下⾯两种⽅法是等效的 123456789101112131 function f() {2 return Promise.resolve('TEST');3 }4 *// asyncF is equivalent to f!*5 async function asyncF() {6 return 'TEST';7 } 21.3.2. await正常情况下, await 命令后⾯是⼀个 Promise 对象,返回该对象的结果。如果不是 Promise 对 象,就直接返回对应的值 12345678910111 async function f(){2 *//* *等同于*3 *// return 123*4 return...
ajax原理
ajax原理AJAX 全称(Async Javascript and XML) 即异步的 JavaScript 和 XML ,是⼀种创建交互式⽹⻚应⽤的⽹⻚开发技术,可以在不重新加载整 个⽹⻚的情况下,与服务器交换数据,并且更新部分⽹⻚ Ajax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发异步请求,从服务器获得数据,然 后⽤ JavaScript 来操作 DOM ⽽更新⻚⾯ 实现 Ajax 异步交互需要服务器逻辑进⾏配合,需要完成以下步骤: • 创建 Ajax 的核⼼对象 XMLHttpRequest 对象 • 通过 XMLHttpRequest 对象的 open() ⽅法与服务端建⽴连接 • 构建请求所需的数据内容,并通过 XMLHttpRequest 对象的 send() ⽅法发送给服务器端 • 通过 XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器端你的通信状 • 态接受并处理服务端向客⼾端响应的数据结果 • 将处理结果更新到 HTML ⻚⾯中
数组的常⽤⽅法
数组的常⽤⽅法下⾯前三种是对原数组产⽣影响的增添⽅法,第四种则不会对原数组产⽣影响 push()push() ⽅法接收任意数量的参数,并将它们添加到数组末尾,返回数组的最新⻓度 unshift()unshift()在数组开头添加任意多个值,然后返回新的数组⻓度 splice()传⼊三个参数,分别是开始位置、0(要删除的元素数量)、插⼊的元素,返回空数组 concat()创建⼀个当前数组的副本,然后再把它的参数添加到副本末尾,最后返回这个新构建的数组, 不会影响原始数组 下⾯三种删除都会影响原数组,最后⼀项不影响原数组: pop()⽅法⽤于删除数组的最后⼀项,同时减少数组的 length 值,返回被删除的项 shift()⽅法⽤于删除数组的第⼀项,同时减少数组的 length 值,返回被删除的项 splice()传⼊两个参数,分别是开始位置,删除元素的数量,返回包含删除元素的数组 slice() 转换⽅法join() ⽅法接收⼀个参数,即字符串分隔符,返回包含所有项的字符串 123let colors = ["red", "green",...
作用域链
作用域链(Scope Chain)在 JavaScript 中,作用域链(Scope Chain) 是当前执行上下文的作用域与所有外层嵌套作用域的有序集合,核心作用是解析变量 / 函数的访问权限—— 当代码需要访问一个变量时,JS 引擎会沿着作用域链从 “当前作用域” 到 “外层作用域” 依次查找,直到找到变量或到达全局作用域为止。 一、作用域链的核心基础要理解作用域链,需先明确两个前提: 作用域的类型 : 全局作用域:代码最外层,全局有效,浏览器中挂载到 window; 函数作用域:函数内部声明的变量仅函数内有效(var 声明); 块级作用域:{} 包裹的区域(let/const 声明); 作用域的嵌套:JS 支持作用域嵌套(如函数内嵌套函数),内层作用域可访问外层作用域的变量,反之不行; 执行上下文:每个函数调用 / 全局代码执行时,会创建一个 “执行上下文”,包含当前作用域、作用域链、this 等信息,作用域链是执行上下文的核心属性。 二、作用域链的构成与查找规则1....
原型与继承
原型与继承,什么是原型链?,如何实现继承?一、原型(Prototype):JS 继承的核心基石JavaScript 是基于原型(Prototype-Based) 的面向对象语言(而非类基),核心逻辑是:每个对象都有一个「原型对象」,对象可继承原型上的属性 / 方法。 1. 原型的核心概念 关键属性 / 方法 作用 [[Prototype]] 对象的隐式原型(内部属性),指向其原型对象(浏览器中可通过 __proto__ 访问) prototype 函数特有的属性,指向「原型对象」(只有函数有,普通对象无) constructor 原型对象上的属性,指向创建该原型的构造函数(如 Person.prototype.constructor === Person) 2. 核心规则 **所有对象(除 Object.create(null))都有 [[Prototype]]**:包括普通对象、数组、函数、实例; 函数的 prototype 是原型对象:构造函数通过 prototype 定义 “共享属性 / 方法”,实例通过...
事件循环
在 JavaScript 中,事件循环(Event Loop) 是 JS 引擎实现异步编程的核心机制 —— 由于 JS 是单线程语言(同一时间只能执行一个任务),事件循环通过 “任务队列” 调度同步 / 异步任务的执行顺序,让 JS 既能保持单线程的简单性,又能处理异步操作(如网络请求、定时器、DOM 事件)。 一、核心前提:JS 的单线程与任务分类1. 单线程的本质JS 设计为单线程(避免多线程操作 DOM 导致冲突),但单线程的问题是:若所有任务同步执行,耗时操作(如网络请求)会阻塞后续代码,导致页面卡死。因此 JS 将任务分为两类: 2. 任务分类(关键) 任务类型 执行时机 包含典型操作 同步任务 立即执行,进入 “执行栈” 变量声明、函数调用、基本运算等同步代码 异步任务 不立即执行,进入...
词法作用域
词法作用域在 JavaScript 中,词法作用域(Lexical Scope)(也叫静态作用域)是指:变量 / 函数的作用域由代码编写时的嵌套结构(词法位置)决定,而非运行时的调用位置。简单来说:作用域在 “写代码时” 就确定了,不是 “执行代码时” 才确定。 这是 JS 作用域的核心规则,也是作用域链、闭包等特性的底层基础。 一、词法作用域 vs 动态作用域(对比理解)为了更清晰,先对比 “动态作用域”(JS 不支持,但很多语言如 Bash、Perl 支持): 特性 词法作用域(JS) 动态作用域 作用域确定时机 代码编写 / 编译阶段(静态) 代码执行阶段(动态) 查找变量的依据 代码的嵌套结构(定义位置) 函数的调用栈(调用位置) 核心示例 变量找 “定义时的外层作用域” 变量找 “调用时的外层作用域” 直观示例:词法作用域的核心表现1234567891011121314151617181920// 全局作用域var x = "全局变量";function outer() { // outer...
事件委托
事件委托一、事件委托(Event Delegation)的核心定义事件委托(也叫事件代理)是 JavaScript 中利用事件冒泡机制实现的一种事件处理优化方案:将原本需要绑定在多个子元素上的事件,统一绑定到它们的共同父元素上;当子元素触发事件时,事件会冒泡到父元素,父元素再通过 event.target 判断触发事件的具体子元素,从而执行对应的逻辑。 核心原理:事件冒泡DOM 事件流分为「捕获阶段 → 目标阶段 → 冒泡阶段」,事件委托依赖冒泡阶段:事件从触发的子元素(目标)向上传播到其所有祖先元素,父元素能捕获到这个冒泡的事件。 二、事件委托的核心价值 减少事件绑定数量:无需给每个子元素绑定事件,仅绑定一次父元素,降低内存占用; 支持动态新增元素:新增的子元素无需重新绑定事件,父元素的委托逻辑自动生效; 简化代码维护:事件处理逻辑集中在父元素,无需分散到多个子元素的绑定逻辑中。 三、代码示例:基础用法场景:列表项点击事件(传统写法 vs 事件委托)12345<ul id="list"> <li>项1</li> ...
深浅拷贝区别
深浅拷贝区别一、深浅拷贝的核心区别深浅拷贝的本质差异在于:是否复制对象的 “嵌套引用类型属性”(如对象、数组、函数等),核心对比如下: 特性 浅拷贝(Shallow Copy) 深拷贝(Deep Copy) 拷贝层级 仅拷贝 “第一层” 属性,嵌套引用类型只复制引用(地址) 递归拷贝所有层级,嵌套引用类型会创建新的独立对象 内存指向 嵌套对象 / 数组与原对象共享同一块内存 所有层级的对象 / 数组都有独立内存,互不影响 修改影响 修改拷贝后的嵌套属性,会同步影响原对象 修改拷贝后的任意属性,都不会影响原对象 实现复杂度 简单(无需递归) 复杂(需递归处理所有嵌套层级,处理特殊类型) 性能 效率高,占用内存少 效率低,占用内存多(递归创建新对象) 二、直观示例:理解深浅拷贝的差异基础场景:嵌套对象的拷贝1234567// 原对象(包含嵌套引用类型)const original = { name: "张三", age: 18, hobbies: ["读书",...



