![](https://img-blog.csdnimg.cn/eccce600bb4743fe9e0e643b53803de5.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
JavaScript
文章平均质量分 75
JavaScript细节记录
名之以父
阿里云专家博主,华为云云享专家。学过Java,Python,最终发现自己喜欢前端,热爱前端,乐于分享前端知识,无论是基础知识的总结还是刷题,框架等等都会涉及
来自EPI软件实验室
展开
-
【JavaScript】45_间接修改css样式
除了直接修改样式外,也可以通过修改class属性来间接的修改样式。原创 2023-04-01 20:31:59 · 651 阅读 · 2 评论 -
【JavaScript】44_DOM编程:节点的复制,直接修改+读取css样式
使用 cloneNode() 方法对节点进行复制时,它会复制节点的所有特点包括各种属性这个方法默认只会复制当前节点,而不会复制节点的子节点可以传递一个true作为参数,这样该方法也会将元素的子节点一起复制在本案例中,像li是一个节点,里面的“孙悟空”是一个子节点,需要使用true来一块复制上原创 2023-03-30 13:15:04 · 534 阅读 · 1 评论 -
【JavaScript】43_DOM编程:DOM修改与demo
用于给一个节点添加子节点list.appendChild(li)可以向元素的任意位置添加元素1.要添加的位置 2.要添加的元素beforeend 标签的最后 afterbegin 标签的开始beforebegin 在元素的前边插入元素(兄弟元素) afterend 在元素的后边插入元素(兄弟元素)list.insertAdjacentElement(“afterend”, li)通过点击按钮,往页面中添加内容,修改内容,删除内容11、练习可以在表格中插入数据,删除数据容易被插入攻击的写法:区别于al原创 2023-03-28 14:42:29 · 287 阅读 · 1 评论 -
【JavaScript】42_DOM:事件与文档的加载
事件(event)事件就是用户和页面之间发生的交互行为比如:点击按钮、鼠标移动、双击按钮、敲击键盘、松开按键…可以通过为事件绑定响应函数(回调函数),来完成和用户之间的交互。原创 2023-03-18 10:12:05 · 361 阅读 · 0 评论 -
【JavaScript】41_DOM编程:属性节点
属性节点(Attr)在DOM也是一个对象,通常不需要获取对象而是直接通过元素即可完成对其的各种操作如何操作属性节点?原创 2023-03-17 10:32:26 · 302 阅读 · 0 评论 -
【JavaScript】40_DOM编程:文本节点
在DOM中,网页中所有的文本内容都是文本节点对象, 可以通过元素来获取其中的文本节点对象,但是我们通常不会这么做我们可以直接通过元素去修改其中的文本 修改文本的三个属性。原创 2023-03-16 12:07:26 · 257 阅读 · 0 评论 -
【JavaScript】39_DOM编程:div的原型链
element.previousElementSibling 获取当前元素的前一个兄弟元素。element.nextElementSibling 获取当前元素的下一个兄弟元素。element.childNodes 获取当前元素的子节点(会包含空白的子节点)element.firstElementChild 获取当前元素的第一个子元素。element.lastElementChild 获取当前元素的最后一个子元素。element.children 获取当前元素的子元素。通过元素节点对象获取其他节点的方法。原创 2023-03-15 17:42:10 · 242 阅读 · 0 评论 -
【JavaScript】38_DOM编程初步
要使用DOM来操作网页,我们需要浏览器至少得先给我一个对象才能去完成各种操作所以浏览器已经为我们提供了一个document对象,它是一个全局变量可以直接使用document代表的是整个的网页。原创 2023-03-14 10:19:00 · 74 阅读 · 0 评论 -
【JavaScript】37_字符串
## split()- 可以根据正则表达式来对一个字符串进行拆分## search()- 可以去搜索符合正则表达式的内容第一次在字符串中出现的位置## replace()- 根据正则表达式替换字符串中的指定内容## match()- 根据正则表达式去匹配字符串中符合要求的内容## matchAll()- 根据正则表达式去匹配字符串中符合要求的内容(必须设置g 全局匹配)- 它返回的是一个迭代器原创 2023-03-13 17:09:53 · 58 阅读 · 0 评论 -
【JavaScript】36_正则表达式
或者将字符串中符合规则的内容提取出来所以要使用正则表达式,需要先创建正则表达式的对象new RegExp() 可以接收两个参数(字符串) 1.正则表达式 2.匹配模式letnewRegExp'a''i'//通过一个构造函数来创建一个正则表达式的对象//使用字面量来创建正则表达式:/正则/匹配模式ai\wnewRegExp'\w'lognewRegExp'a'// /a/表示,检查一个字符串中是否有a// 通过正则表达式检查一个字符串是否符合规则let"a"lettest。原创 2023-03-11 10:48:28 · 274 阅读 · 0 评论 -
【JavaScript】35_包装类与垃圾回收机制
在JS中,除了直接创建原始值外,也可以创建原始值的对象通过 new String() 可以创建String类型的对象通过 new Number() 可以创建Number类型的对象通过 new Boolean() 可以创建Boolean类型的对象。原创 2023-02-12 09:48:31 · 416 阅读 · 0 评论 -
【JavaScript】34_Date对象 ,日期的格式化
Date在JS中所有的和时间相关的数据都由Date对象来表示对象的方法:getFullYear() 获取4位年份getMonth() 返当前日期的月份(0-11)getDate() 返回当前是几日getDay() 返回当前日期是周几(0-6) 0表示周日。原创 2023-02-11 12:01:01 · 636 阅读 · 0 评论 -
【JavaScript】33_对象的序列化----JSON
对象的序列化。- JS中的对象使用时都是存在于计算机的内存中的 - 序列化指将对象转换为一个可以存储的格式 **在JS中对象的序列化通常是一个对象转换为字符串(JSON字符串)** - 序列化的用途(对象转换为字符串有什么用): - 对象转换为字符串后,可以将字符串在不同的语言之间进行传递 甚至人可以直接对字符串进行读写操作,使得JS对象可以不同的语言之间传递 - 用途: 1. 作为数据交换的格式 2. 用来编写配置文字原创 2023-01-22 10:09:23 · 1748 阅读 · 1 评论 -
【JavaScript】32_解构对象与对象的解构
数组中可以存储任意类型的数据,也可以存数组,如果一个数组中的元素还是数组,则这个数组我们就称为是二维数组解构对象,方便两数交换数值;可以反向赋值对象,数组可以在解构的同时,进行声明const"孙悟空""猪八戒""沙和尚"let;;//解构赋值let'唐僧''白骨精''蜘蛛精''玉兔精'//声明同时解构//;//;;43123//直接这样的话,会显得g未定义loglet...4567// 解构数组时,可以使用...来设置多余的元素functionfnreturn。原创 2023-01-11 20:41:23 · 484 阅读 · 0 评论 -
【JavaScript】31_bind函数
也无法通过call apply 和 bind修改它的this。箭头函数没有自身的this,它的this由外层作用域决定,bind() 是函数的方法,可以用来创建一个新的函数。//此处的this代指下面的obj。箭头函数中没有arguments。"fn执行了~~~~"原创 2023-01-01 18:52:01 · 594 阅读 · 2 评论 -
【JavaScript】30_可变参数
arguments是函数中又一个隐含参数arguments是一个类数组对象(伪数组)和数组相似,,也可以通过for循环变量,但是它不是一个数组对象,不能调用数组的方法arguments用来存储函数的实参,无论用户是否定义形参,实参都会存储到arguments对象中可以通过该对象直接访问实参原创 2022-12-31 10:12:26 · 964 阅读 · 1 评论 -
【JavaScript】29_数组的方法
sort用来对数组进行排序(会对改变原数组)sort默认会将数组升序排列注意:sort默认会按照Unicode编码进行排序,所以如果直接通过sort对数字进行排序可能会得到一个不正确的结果参数:可以传递一个回调函数作为参数,通过回调函数来指定排序规则(a, b) => a - b 升序排列(a, b) => b - a 降序排列。原创 2022-12-30 21:04:31 · 716 阅读 · 0 评论 -
【JavaScript】28_递归
递归调用自身的函数称为递归函数递归的作用和循环是基本一直递归的核心思想就是将一个大的问题拆分为一个一个小的问题,小的问题解决了,大的问题也就解决了编写递归函数,原创 2022-12-30 09:49:37 · 475 阅读 · 0 评论 -
【JavaScript】27_函数闭包
创建一个函数,第一次调用时打印1,第二次调用打印2,以此类推可以利用函数,来隐藏不希望被外部访问到的变量。原创 2022-12-29 19:04:26 · 523 阅读 · 0 评论 -
【JavaScript】26_高阶函数(回调函数)
目前我们的函数只能过滤出数组中age属性小于18的对象,我们希望过滤更加灵活:比如:过滤数组中age大于18的对象age大于60的对象age大于n的对象过滤数组中name为xxx的对象过滤数组中的偶数…如果将函数作为参数传递,那么我们就称这个函数为(callback)原创 2022-12-29 10:12:22 · 329 阅读 · 1 评论 -
【JavaScript】25_冒泡排序及优化 与 选择排序
/使用优化后的冒泡排序-----内层循环条件变为length-1-j;第一次排序:1, 3, 2, 8, 0, 5, 7, 6, 4, 9。第二次排序:1, 2, 3, 0, 5, 7, 6, 4, 8, 9。第三次排序:1, 2, 0, 3, 5, 6, 4, 7, 8, 9。倒数第二次 0, 1, 2, 3, 4, 5, 6, 7, 8, 9。// arr[i] 前边的元素 arr[i+1] 后边元素。// 大数在前,小数在后,需要交换两个元素的位置。// 将arr[i+1]的值赋给arr[i]原创 2022-12-28 21:49:57 · 337 阅读 · 0 评论 -
【JavaScript】24_数组去重
改变原数组原创 2022-12-28 10:03:31 · 374 阅读 · 0 评论 -
【JavaScript】23_浅拷贝和深拷贝 + 对象的复制 + 数组的常用方法
/ result = arr.splice(1,1,'牛魔王'`,'铁扇公主','红孩儿')// result = arr.splice(1,0,'牛魔王','铁扇公主','红孩儿')// const arr3 = ['唐僧',...arr,'白骨精']Object.assign(目标对象, 被复制的对象)将被复制对象中的属性复制到目标对象里,并将目标对象返回。也可以使用展开运算符对对象进行复制。可以删除、插入、替换数组中的元素。//专门用来深拷贝的方法。//返回被删除的元素名字。原创 2022-12-27 22:10:18 · 537 阅读 · 0 评论 -
【JavaScript】22_数组的方法,对象的复制与数组的复制
当调用slice时,会产生一个新的数组对象,从而完成对数组的复制。//4,起始位置从位置3开始的(下标为2),所以最后找到的是下标为4的。//相当于是合并了arr和arr2两个数组,顺便添加了两个值。// const arr2 = arr // 不是复制。//2,倒着找的,最后一次出现的位置为下标为2的地方。//到倒数第一个为止,所以只能取到倒数第二个沙和尚那。//负数是从-1开始的,就是倒数第二个。//完全连接在一起了,没有逗号啥的。// arr2[0] = "唐僧"找到了则返回元素的索引,原创 2022-12-27 10:03:17 · 705 阅读 · 0 评论 -
【JavaScript】21_数组初步
数组(Array)数组也是一种复合数据类型,在数组可以存储多个不同类型的数据数组中存储的是有序的数据,数组中的每个数据都有一个唯一的索引可以通过索引来操作获取数据数组中存储的数据叫做元素索引(index)是一组大于0的整数创建数组通过Array()来创建数组,也可以通过[]来创建数组向数组中添加元素语法:数组[索引] = 元素读取数组中的元素语法:数组[索引]- 如果读取了一个不存在的元素,不好报错而是返回undefinedlength原创 2022-12-26 22:16:16 · 750 阅读 · 0 评论 -
【JavaScript】20_旧类与new运算符
面向对象本质就是,编写代码时所有的操作都是通过对象来进行的。面向对象的编程的步骤:1. 找对象2. 搞对象学习对象:1. 明确这个对象代表什么,有什么用2. 如何获取到这个对象3. 如何使用这个对象(对象中的属性和方法)对象的分类:内建对象- 由ES标准所定义的对象- 比如 Object Function String Number … 宿主对象 - 由浏览器提供的对象 自定义对象。原创 2022-12-26 13:02:21 · 716 阅读 · 0 评论 -
【JavaScript】19_对象的结构,原型对象与修改原型
对象中存储属性的区域实际有两个:对象自身原型对象(prototype)原创 2022-12-25 17:54:54 · 850 阅读 · 0 评论 -
【JavaScript】18_面向对象的三大特性
面向对象的特点:封装、继承和多态1.封装对象就是一个用来存储不同属性的容器对象不仅存储属性,还要负责数据的安全直接添加到对象中的属性,并不安全,因为它们可以被任意的修改如何确保数据的安全:1.私有化数据封装主要用来保证数据的安全实现封装的方式:1.2.通过getter和setter方法来操作属性get 属性名(){return this.#属性} set 属性名(参数){ this.#属性 = 参数 }原创 2022-12-25 10:26:51 · 1258 阅读 · 0 评论 -
【JavaScript】17_面向对象中的方法和构造函数
classPerson{="孙悟空"// } // 添加方法的一种方式sayHello(){.log('大家好,我是'+this.)}// 添加方法(实例方法) 实例方法中this就是当前实例statictest(){.log("我是静态方法",this)}// 静态方法(类方法) 通过类来调用 静态方法中this指向的是当前类}const=newPerson().test().sayHello()原创 2022-12-24 18:51:38 · 922 阅读 · 0 评论 -
【JavaScript】16_面向对象,类与属性
面向对象编程(OOP)一个事物通常由两部分组成:数据和功能一个对象由两部分组成:属性和方法事物的数据到了对象中,体现为属性事物的功能到了对象中,体现为方法原创 2022-12-24 09:37:19 · 1008 阅读 · 0 评论 -
【JavaScript】15_debug,立即执行函数 与 严格模式
//debugger // 在代码中打了一个断点.log()// 2var=1.log()// 1functiona(){alert(2)}.log()// 1var=3.log()// 3vara=function(){alert(4)}.log()// 4var.log()// 4原创 2022-12-23 12:00:07 · 908 阅读 · 0 评论 -
【JavaScript】14_window对象与JS提升
Window对象var 用来声明变量,作用和let相同,但是var不具有块作用域原创 2022-12-22 20:43:03 · 1162 阅读 · 0 评论 -
【JavaScript】13_函数的返回值 + 箭头函数的返回值 + 作用域 +作用域链
在函数中,可以通过return关键字来指定函数的返回值返回值就是函数的执行结果,函数调用完毕返回值便会作为结果返回任何值都可以作为返回值使用(包括对象和函数之类)如果return后不跟任何值,则相当于返回undefined如果不写return,那么函数的返回值依然是undefinedreturn一执行函数立即结束原创 2022-12-22 09:11:43 · 996 阅读 · 0 评论 -
【JavaScript】12_函数1:函数的参数,箭头函数的参数
函数(Function)函数的参数,箭头函数的参数函数也是一个对象它具有其他对象所有的功能函数中可以存储代码,且可以在需要时调用这些代码原创 2022-12-21 09:48:21 · 507 阅读 · 0 评论 -
【JavaScript】11_枚举属性+可变类型+修改对象和属性与方法
枚举属性,指将对象中的所有的属性全部获取for-in语句- 语法:for(let propName in 对象){ 语句…}- for-in的循环体会执行多次,有几个属性就会执行几次,每次执行时,都会将一个属性名赋值给我们所定义的变量- 注意:并不是所有的属性都可以枚举,比如 使用符号添加的属性原创 2022-12-20 10:55:41 · 565 阅读 · 0 评论 -
【JavaScript】10_对象初步:数据类型,属性与对象字面量
原始值 1.数值 Number 2.大整数 BigInt 3.字符串 String 4.布尔值 Boolean 5.空值 Null 6.未定义 Undefined 7.符号 Symbol 对象 它相当于一个容器,在对象中可以存储各种不同类型数据。原创 2022-12-19 10:14:52 · 169 阅读 · 0 评论 -
【JavaScript】9_while循环和do-while与for循环
语法:while(条件表达式){语句…}执行流程:while语句在执行时,会先对条件表达式进行判断,如果结果为true,则执行循环体,执行完毕,继续判断如果为true,则再次执行循环体,执行完毕,继续判断,如此重复知道条件表达式结果为false时,循环结束 通常编写一个循环,要有三个要件 1. 初始化表达式(初始化变量) 2. 条件表达式(设置循环运行的条件) 3. 更新表单式(修改初始化变量)原创 2022-12-18 09:42:44 · 307 阅读 · 0 评论 -
【JavaScript】8_switch语句
switch语句在执行时,会依次将switch后的表达式和case后的表达式进行全等比较。switch语句和if语句的功能是重复,switch能做的事if也能做,反之亦然。如果比较结果为false,则继续比较其他case后的表达式,直到找到true为止。如果所有的比较都是false,则执行default后的语句。这就意味着只要是当前case后的代码,都会执行。// break可以用来结束switch语句。// alert("壹")// alert("贰")// alert("叁")原创 2022-12-17 21:37:38 · 599 阅读 · 0 评论 -
【JavaScript】7_代码块 + if-else语句
使用 {} 来创建代码块,代码块可以用来对代码进行分组,同一个代码中的代码,就是同一组代码,一个代码块中的代码要么都执行要么都不执行let 和 var- 在JS中,使用let声明的变量具有块作用域 在代码块中声明的变量无法在代码块的外部访问- 使用var声明的变量,不具有块作用域。+ if语句和if-else语句原创 2022-12-16 10:38:01 · 272 阅读 · 0 评论 -
【JavaScript】6_相等运算符,条件运算符及JS中特殊运算符
9、条件运算符 条件运算符 - 执行顺序: 条件运算符在执行时,会先对条件表达式进行求值判断, 如果结果为true,则执行表达式1 如果结果为false,则执行表达式210、运算符的优先级和数学一样,JS中的运算符也有优先级,比如先乘除和加减。可以通过优先级的表格来查询运算符的优先级https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referen原创 2022-12-15 09:33:20 · 282 阅读 · 0 评论