js学习笔记
栗子同学lz
这个作者很懒,什么都没留下…
展开
-
DOM及DOM查找
1.DOM【1】定义:专门操作网页内容的一套对象和函数的总称【2】为什么使用DOM:ES标准中只规定了js语言的核心语法,没有规定如何使用js操作网页的内容。【3】何时:今后,只要想操作网页中的内容,只能用DOM,JQuery和框架都是对DOM的简化【3】DOM标准:国际标准,由W3C负责制定并维护,几乎所有浏览器都兼容2.DOM树【1】定义:一个网页的所有内容是在浏览器内存中以树形结构保存的。【2】为什么:树形结构是能够最直观的展现上下级包含关系的结构。而网页内容中的元素结构,也是上下级包含原创 2021-07-10 15:02:34 · 980 阅读 · 0 评论 -
es6中的class
6.7class【1】问题:旧的js中,构造函数和原型对象是分开定义的,不符合“封装”的概念【2】解决:今后只要在ES6中创建一种新的类型,包含构造函数+原型对象,都可以使用class创建【3】定义:class是程序中专门集中保存一种类型的所有子对象的统一属性结构和方法定义的程序结构。【4】如何定义class:3句话 i:用class{}包裹原构造函数+原型对象方法 ii:原构造函数名升级为整个class的名字,所有构造函数统一更名为"constructor" iii:原型对象中的原创 2021-07-07 20:05:36 · 467 阅读 · 0 评论 -
数组解构、对象解构、参数解构
6.6解构destruct【1】问题:旧js中,要想使用对象中的成员,或数字中的元素,都必须带着"对象名."或"数组名[]"前缀。但是,实际开发中,对象或数组的嵌套结构可能很深。前缀就可能写很长: “对象名.子对象名.子对象名…”,非常麻烦。【2】何时使用:如果遇到复杂的对象或数组时,都可以通过解构的方式,来减少数组或对象的嵌套结构,便于使用【3】如何使用:分为3种i:数组解构 1).功能:从一个复杂的数组中只提取出需要的元素单独使用 2).如何使用:var [变量1,变量2,...原创 2021-07-07 19:57:22 · 1094 阅读 · 0 评论 -
拆散数组和...
6.5.3展开运算符spread【1】原因:数组的拆散之前学习过apply函数,但是apply函数不那么好用,因为apply的本职工作不是拆散数组,而是替换this,是在替换this的同时拆散的数组【2】解决:如果希望单纯的拆散数组,就使用 … 展开运算符【3】如何使用:在调用函数时,函数名(...数组名);【4】原理:…先将数组拆散成多个实参值,再依次分别传给函数的每个形参变量。【5】…的作用: i:定义函数时,形参列表中的…表示收集 ii:调用函数时,实参列表中的…表示拆散【6】原创 2021-07-07 19:35:24 · 131 阅读 · 0 评论 -
ES6的剩余参数rest
6.6剩余参数rest【1】问题:箭头函数不支持arguments,如果箭头函数遇到参数个数不确定的情况,怎么办?【2】解决:只要在ES6箭头函数中遇到参数个数不确定的情况,都可以使用剩余参数语法来代替arguments接收参数的值【3】如何使用 var 函数名=( ...数组名 )=>{ //将来传入函数的所有实参值,都会被...收集起来,保存到...会指定的数组中。 }【4】优点 i:支持箭头函数ii:生成的数组是纯正的数组类型,可以使用数组的所有函原创 2021-07-06 20:09:32 · 129 阅读 · 0 评论 -
ES6的参数增强
6.5参数增强参数默认值default【1】定义:调用函数时,即使不传入实参值,形参变量也有默认值可用,而不会是undefined【2】何时使用:希望即使不传入实参值,形参也有默认值使用【3】如何使用:定义函数时: function 函数名(形参1=默认值1, 形参2=默认值2, ...){ //调用函数时,给形参传了实参值,则首选用户传入的实参值。如果没有给形参传是实参值,则形参默认启用=右边的默认值。 }【4】存在问题:只能连续修改前一个或前几个或全部的值,而不能只原创 2021-07-06 20:08:51 · 85 阅读 · 0 评论 -
ES6的for of循环
6.4 for of循环【1】功能:可以遍历数字下标的数组或类数组对象【2】优点:与es6中的箭头函数,很简化 缺点:无法用于遍历类数组对象【3】使用:只要是遍历数组下标的,都可以for of替换普通for循环和forEach循环【4】原理 for(var 变量 of 索引数组/类数组对象){ //of会依次取出数组或类数组对象中每个属性值 //自动保存of前的变量中 }【5】存在的问题i:无法获得下标位置i,只能获得元素值ii:无法控制遍历的顺序或步调原创 2021-07-06 20:08:02 · 623 阅读 · 0 评论 -
ES6的let声明变量
6.3 let【1】var的两个问题 i:会被声明提前——打乱程序的正常执行顺序 ii:没有块级作用域——代码块内的变量会超出其范围,影响到外部变量【2】块级作用域:指的是对象{}和function的{}之外,其余if else、for、等程序结构的{}范围,在其他语言中称为块级作用域。但是,在js中这些{},都不是作用域。拦不住内部的局部变量声明被提前。【3】使用let的优点 i:不会被声明提前——保证程序顺序执行 ii:拥有块级作用域——作用域内的变量不再影响作用域外的变量原创 2021-07-06 20:06:45 · 232 阅读 · 0 评论 -
ES6中的箭头函数
6.2箭头函数【1】定义:对绝大多数匿名函数的简写【2】为什么:反复写function来定义函数很繁琐【3】何时使用:几乎所有匿名函数都可以用箭头函数简化【4】如何使用:3句话 步骤 i:去掉function,在()和{}之间加=> ii:如果只有一个形参,则可以省略() iii:如果函数体只有一句话,则可以省略{},如果函数体仅剩的一句话还是return,则必须去掉return【5】示例:// function add(a,b){// retur原创 2021-07-06 20:05:50 · 94 阅读 · 0 评论 -
ES6的模板字符串
6.ES66.1模板字符串【1】定义:支持换行、动态拼接内容的特殊字符串格式【2】为什么使用它:旧的js中,旧的js中,拼接字符串使用的+,易于与算数计算的+混淆【3】如何使用:3句话 i:整个字符串用一对反引号``包裹 ii:在反引号中可以写单引号,双引号、换行等 iii:在反引号中凡是动态拼接的变量或js表达式都要放在${}【4】${}中的内容 可以放:变量、算术计算、三目、对象属性、创建对象、调用函数、访问数组元素——有返回值的合法的js表达式 不能放:没有返回原创 2021-07-06 20:04:42 · 71 阅读 · 0 评论 -
es5新增数组函数:过滤和汇总
5.5.5 filter过滤:【1】功能:复制出数组中符合要求的个别元素,放入新数组中返回【2】如何使用: var 新数组=数组.filter( function(当前元素值, 当前下标i, 当前数组){ return 判断当前元素值是否符合要求 } )【3】原理 i:先创建一个新的空数组等待 ii:filter内部自带for循环,会自动遍历原数组中给的每个元素 iii:每遍历一个元素就会自动调用一次回调函数 iv:每次调用回调函数时都会自动传入原创 2021-07-06 20:02:35 · 382 阅读 · 0 评论 -
es5新增数组函数
5.5数组新增函数【1】用于判断:2个5.5.1 every 每个1.功能:专门判断一个数组中是否所有元素都符合要求2.如何使用:var 判断结果=数组.every( function(当前元素值,当前下标i,当前数组){//回调函数 return 检查当前元素值是否符合要求,并返回检查结果 } );3.原理: i. every内自带for循环,自动遍历数组中每个元素 ii. 每遍历一个元素,就自动调用一次回调函数 iii原创 2021-07-05 20:44:16 · 86 阅读 · 0 评论 -
改变this的指向
5.4改变this的指向 如果系统自动指定的this对象不是我们想要的,我们就可以主动更换this指向的对象5.4.1 call 在一次调用函数时,临时替换一次函数中的this为指定对象使用:要调用的函数.call(替换this的对象, 实参值1,...)call做了的3件事: i:立刻调用一次.前的函数 ii:自动将.前的函数中的this替换为指定的新对象 iii:向要调用的函数中传入实参值示例: // call // 有一个公共的计算器函数,计算员工的原创 2021-07-05 20:42:58 · 57 阅读 · 0 评论 -
Object.create()继承
5.3Object.create()【1】定义:基于一个现有父对象,创建一个新的子对象继承父对象【2】何时使用:如果想创建一个子对象继承父对象,但是有没有构造函数就不能使用new,这时使用Object.create()【3】如何使用:var 新子对象=Object.create(父对象, { //给子对象添加自有属性 //必须用defineProperties函数相同的格式: 属性名:{ value:属性值, writable:true,原创 2021-07-05 20:41:17 · 306 阅读 · 0 评论 -
保护对象中的保护结构
5.2.2保护结构 3个级别【1】防扩展 功能:禁止给对象添加新属性 使用:Object.preventExtensions(对象) 问题:只防添加,不防删除【2】密封 功能:既禁止添加新属性,又禁止删除现有属性 使用:Object.seal(对象) 工作:2件事 i:会自动调用preventExtensions(),先禁止添加 ii:会自动遍历对象中每个属性,自动设置每个属性的configurable:false,所有属性禁止删除。注意:如果用了seal(原创 2021-07-05 20:39:10 · 162 阅读 · 0 评论 -
js的保护对象中的保护属性
5.2.1保护属性【1】定义 es5中,对象中中的每个属性,不再只是一个简单的值,还有三个相关的开关。eid:{ value:属性值, writable:true, enumerable:false, configurable:false}writable : true/false 控制当前属性值是否可以修改enumerable : true/false 控制是否可用for in遍历到这个属性configurable : true/false ①控制是否可删除当前属性原创 2021-07-05 20:37:35 · 364 阅读 · 0 评论 -
ES5严格模式下的新规定
5.ES5ESMAScript第5个版本5.1严格模式定义:比旧的js运行机制要求更严格的新的运行机制如何使用:在当前代码段的顶部添加 “use strict”;新规定:4个 禁止给未声明过的变量赋值1.在旧的js中,如果强行给未声明过的变量赋值,不会报错,而是自动在全局创建一个全局变量。——容易造成全局污染2.严格模式下:强行给未声明过的变量赋值,会报错!——减少了因写错变量名造成的全局污染 静默失败升级为错误1.静默失败:程序运行不成功,但也不报错。——极其不利于调试程序原创 2021-07-03 19:55:23 · 72 阅读 · 0 评论 -
自定义继承
4.4自定义继承 【1】只更换一个对象的父对象子对象._ _proto_ _=新父对象 //不推荐 两句话作用完全一样Object.setPrototypeOf(子对象, 新父对象) //推荐 修改 子对象 的 原型对象 为新父对象 【2】批量更换多个子对象的父对象只需要更换构造函数的prototype属性就可以原创 2021-07-03 19:51:58 · 88 阅读 · 0 评论 -
js的多态
4.3多态**定义:**同一个函数,在不同情况下表现出不同的状态包括:2种重载 overload:同一个函数,输入不同的参数,执行不同的逻辑(参考2.4重载)重写 override:推翻、遮挡;构造函数的原型对象的共有方法不好用时,子对象可以定义同名成员用于覆盖父对象中的成员,这样之后调用时,就会优先选择子对象自有的 function Student(name,age){ this.name=name; this.age=age;原创 2021-07-03 19:50:59 · 189 阅读 · 0 评论 -
js的继承
4.2继承**解决:**如果将来发现多个子对象都要使用相同的功能和属性值时,都可以用继承来实现定义:对于父对象中的成员,子对象无需创建就可以直接使用**如何实现:**js中的继承都是通过原型对象实现的4.2.1原型对象prototype _ proto_构造函数 子对象功能:替所有子对象集中保存共有的属性值和方法的特殊父对象**何时使用:**只要发现多个子对象都需要使用相同的功能和属性值时,都可将相同的属性和方法保存在原型对象中。如何: 【原创 2021-07-03 19:50:03 · 75 阅读 · 0 评论 -
浅拷贝与深拷贝
4.1.2浅拷贝和深拷贝浅拷贝:只是将对象的地址赋给了两个不同的变量,归根结底只有一个****对象,并没有拷贝出另外一个对象**深拷贝:**首先创建一个新的空对象用于备用,然后通过for循环进行遍历原对象的所有属性和方法,并对应的将其赋值到新的对象中 var a={ name:"li zi", age:18, class:"1班" } // 克隆,深拷贝与浅拷贝原创 2021-07-01 21:06:15 · 37 阅读 · 0 评论 -
js的面向对象
4.面向对象定义:程序中会将描述一个事物的多个属性和功能集中保存在一个对象机构中,再重新起一个名字。便于大量数据的管理与维护。4.1三大特点面向对象的三大特点:封装、继承、多态4.1.1封装定义:集中保存了一个属性的属性和功能如何创建:【1】用{}创建对象 var 对象名={ 属性名1:属性值1, 属性名:属性值, ...:..., 方法:function(){} }原创 2021-07-01 21:01:11 · 53 阅读 · 0 评论 -
js的作用域与闭包
3.作用域与作用域链3.1作用域 定义:一个变量的可用范围 为什么:避免不同范围之间的变量相互干扰 变量有2种: 【1】.全局作用域 在程序的任何位置都能访问到的范围,在其中定义的变量称为全局变量,一切范围都可以访问全局变量 【2】.函数作用域 在函数{}的范围内能访问的区域,在其中定义的变量称为局部变量,在函数范围内才可以访问局部变量 怎样形成函数作用域: 只有函数的{}才能形成作用域,其余的{}都不是作用域! 怎样形成局部变量: ①在函数原创 2021-07-01 20:32:33 · 66 阅读 · 0 评论 -
JS中的Function对象
2.Function对象2.1定义 函数:程序中用来保存一段可以重复使用的代码段的程序结构或对象,且可以完成一定的功能2.2何时使用 在一段代码可能会被反复使用时,都需要先定义在函数中,然后反复调用来实现2.3如何创建2.3.1函数形式function f(参数列表){ 函数体 //return可有可无,根据需要选择 return 返回值; } 形参:定义函数时的参数 实参:调用函数时传递的参数 return:函数的执行结果2原创 2021-06-30 20:48:20 · 716 阅读 · 0 评论 -
JS中的RegExp对象
JSRegExp对象1).定义:专门在js程序中保存一条正则表达式的对象2).何时:在js中需要用到正则表达式,就需要用RegExp3).创建:2种方式 1.标准方式创建var reg=new RegExp("正则表达式","ig");其中保存一条正则表达式i ignoreg global 2.简写方式创建var reg=/正则表达式/ig; 例子:var str=prompt("请输入内容"); var reg=new RegExp("[我wo卧][cao原创 2021-06-30 19:54:24 · 400 阅读 · 0 评论