admin管理员组文章数量:1588254
0726
1、js三大模块
核心语法--ECMAScript---es5 es6
文档对象模型--DOM---document Object Module---js 操作HTML界面结构、样式、内容
浏览器对象模型--BOM---Browser Object Module---js操作浏览器 打开新页面-页面地址切换-前进后退-弹框-调试器输出
2、JS引入样式
行内:在标签属性里执行
页内 : js代码直接写在script标签里面,script标签可以放在任何地方,但不建议放在head标签里面!因为script的src会下载js代码并执行,会阻塞界面html、css的渲染展示
页外: script标签的src引入.js文件()引入外部文件的script标签里面不能再写js代码,不会执行的
3、JS的输出
①弹框输出
alert(“信息提示警告弹框”);//普通弹框输出
confirm(“确定?”);//有确认取消按钮的弹框输出
prompt(“输入关键词”);//含输入框的弹框输出
(取消返回值为null,不输入值确定返回空字符串)
②页面输出
document.write(“内容”);//在页面上放上“内容”
.innerHTML = “ 内容”;//将内容放在选定标签内
③调试器输出,在控制台上输出
console.log(“内容”);//打印日志信息
console.warn(“警告”);
console.error(“错误”);
console.dir(“内容”);//打印复杂信息(各种细节:方法、属性)
4、标识符的命名规则
①可由数字、字母、下划线、$符
②不能由数字开头
③不能是关键字和保留字 (系统保留字name尽量不用,系统对它强制规定为字符串类型;)
④不能和系统拥有的名字冲突
规范:见名知意;小驼峰命名法;大驼峰命名法
5、var关键字
声明变量(任何类型)的关键字 有变量提升 ;严格模式下没有变量提升
严格模式:“use strict” 运行到未声明变量时执行报错
6、浏览器js引擎执行js代码的过程
0 语法检查
①产生全局window对象
②预编译 var function
(var开头的变量提升,提升定义到前面,值为undefined;function函数提升,提升整个函数,值为函数体)
③执行非var,非function的语句
7、delete 删除可以对象的属性;不能删除通过var声明的变量
8、数据类型
基础数据类型(直接存放数据):Number string boolean null undefined
引用数据类型(引用存放数据的地址堆): 对象 数组 函数
9、typeof 关键字
①检验数据类型,有:number string boolean object function
②typeof的输出都是string
③优先级高于计算
④typeof null == object
⑤判断 没有定义的变量时 不会报错,返回undefined
10、null 和 undefined 区别
①定义:null 是空值 , undefined 是定义未赋值
② 出现情况:undefined (变量定义未赋值; 函数调动但没返回值 ;访问对象没有的属性 ;数组中的空位置),null (手动赋值为null时)
③ 特点:typeof null ==object ;typeof undefined ==undefined。
④ 联系:null == undefined ;null 和 undefined 不全等。
0727
11、boolean类型
①Boolean(其他类型)= boolean类型 // !! 其他数据类型 = boolean类型
②非空字符串,非零数值,所有对象都为真;其他都为假
12、number类型
①0-八进制开头 ;0x-十六进制开头 ; 科学技术法 1.2e5
②特殊的数值:NaN(跟任何值都不相等,包括本身),Infinity
③解决小数问题:方法一,转成整数,运算完再转回去;方法二,保留小数位 tofixed(保留位数),toFixed()会将数值转换成字符串;方法三,四舍五入 Math.round()/ 取整 Math.floor(向下取整)、Math. ceil(向上取整)
补充:Math.random(随机数)
④方法:isNaN(其他类型 隐式转换为 数值),isFinite()
⑤其它数据类型 转换 number类型
⑥转number类型的方法
Number():转换规则
布尔 | true 转为 1,false 转为 0 |
数字值 | 传入什么返回什么 |
字符串 | 纯数值(能够识别的数值格式)的字符串,否则为NaN |
null | 0 |
引用类型 | 优先调用数据的valueof 方法,在调用toString |
undefined | NaN |
parseInt( ,指定进制):从前往后取数字字符,碰到非数字字符就停止;没有取到数字就为NaN(能自动识别二、十六进制,不能识别科学计数法)
parseFloat():从前往后取数字字符,碰到非数字字符 或 第二个小数点就停止;没有取到数字就为NaN(不能识别十六进制,可以识别科学计数法)
- * / :隐式将其他非数字类型的值转换为数字(隐式转换使用的是number()转换规则)
+ : 当两边都没有字符串时作加号; 只要一边为字符串,+作连接符
13、字符串String
①由双引号 / 单引号 / 反引号 包裹;双引号和单引号不允许换行,反引号允许换行 并且允许使用模板字符串${} 取变量值。
②其他类型 转换 为 string
.toString() :除null ,undefined 其他的能使用
String() :所有类型都能使用
+ “ ” :所有类型都能使用
③String的属性 和 方法:字符串调用截取,查找,转换的方法不改变原数据,是产生新的数据
.length : 取字符串长度
.indexOf(value,start):从前往后查找字符串value第一次出现的位置下标,start可以指定开始查找的位置 ;第二次出现的位置 .indexOf( value,.indexOf(value)+1);找不到则返回-1。
.lastIndexOf(value,start):返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。;找不到则返回-1。
.subString(start,end):取start到end之间的字符,[ start ,end ) ;若无end参数则直接截取到最后;当start > end 时,自动交换位置。
.subStr(start,length):截取从start开始的length长度的字符串
.slice(start,end): 截取 [ start ,end ),允许负数,start和end不会自动调转
(indexOf ,lastindexOf , subString , subStr ,slice 的第二个参数都可以省略,此时默认取到最后)
.trim() :删除 字符串 前后空格
.toLocaleUpperCase():全部小写字母转大写 ,不改变原数据
.toLocaleLowerCase():全部大写字母转小写,不改变原数据
.charAt():查找对应下标的字符
.charCodeAt():查找对应下标的字符的ASCII码
encodeURI()用于前端向后端请求http 请求时,编码为Unicode
decodeURI()后端接受到后,解码
0728
15、包装对象:String Number Boolean (构造函数)
① 包装对象:new 构造函数
② 临时包装对象:只要引用字符串属性,JavaScript自动通过调用new String(), 让不是对象 的基本类型变量 (new 它)暂时成为对象,本行执行完后该对象立即销毁;
null 和 undefined 两种基本类型没有包装对象 ,访问他们的属性时造成报错。
16、原始和引用类型
① 基础数据类型 调用方法属性修改数据 都是产生新的值,不会改变原始数据;
引用类型(数组,对象,函数) 调用方法和属性 是在通常是在 原始数据上修改的。
② 原始类型只用判断值相等与否, 引用类型判断引用空间的地址是否相同
③原始数据直接存放在栈内,引用类型存放的是地址栈堆(注意 修改值 和 重新创建赋值数据堆栈 之间的区别)
17、作用域
(司老师讲的)
① 全局作用域
② 局部作用域,函数作用域:
只有在调用时 才会执行,执行完后 空间立即销毁;
函数内部优先访问自己的变量,自己没有才去访问全局的;
函数内部给没有声明的变量赋值,会直接在全局上创建并赋值。
(蒋老师讲的)
js的作用域 难点!
(变量或函数起作用的区域)一个标识符代表变量或是函数的引用;
函数运行时 产生一个作用域
① 先把内部变量和形参声明了,值为undefined
②形参赋值
③ 然后把函数隐式提升,(函数提升脚本也会一起提升)
④ 然后按照函数体内部的代码逻辑执行代码
⑤ 函数被调用时 是在声明的地方 作用域?
18、表达式
① 直接量
100,“字符串”, true, { },[ ] ,
② 变量
③ 函数调用表达式
④运算
0729
19、块级作用域
① 没有变量提升 内部的var ,function声明的会在全局预编译阶段提升为undefined (将函数体锁在块里面,开始执行块级里面的代码时立即释放函数体)
② 不允许var ,function重复声明相同变量
20、操作符
① 一元操作符:递加++ , 递减 --
② 一元加,减: 即正负号,结果全部转为数值类型
③ 逻辑非:!,结果只能是布尔类型
④ 逻辑与:&& ,结果可以是任何类型;短路规则 ,遇假返回,否则返回最后一个值
⑤ 逻辑或:|| , 遇到真值返回(可用做简单的判断语句)
21、双目运算符
① 乘性运算符 * % /
取余 轮播图常用 取余 操作
(补充:定时器 setInterval( ()=> { },1000))
②加性运算符 + - (将操作数 转换成 数值 比较)
③ 关系运算符
a 比较 < > <= >= : 结果只能是Boolean类型;(实现业务中,比较字符串时,统一转换成大写或小写 ,再去比较)(将操作数 转换成 ASCII 码比较)
b 相等判断 == === :比较值有隐式转换,结果只能是Boolean类型,null 和 undefined 没有隐式转换
④ in运算符 :检测 右侧对象 是否具有 左侧属性
⑤instanceof : 检测 左侧对象 是不是由 右侧函数 创建的
⑥ 三目运算符 a ? b : c : a为真,得到结果 b;a为假 , 得到结果c 。
(补充:三种设置默认值的方法 [ a = a || “默认” ] 、 [ a = a ? a : "默认" ] [ if ( !a ){ a = "默认"] } )
⑦ 赋值运算符 = += -= *= /= %=(常用数组轮播) :
⑧ 逗号运算符
从前往后扫描每一个值,取最后一项
⑨eval 执行运算 :将 字符串里的内容 做 js代码执行
真实使用情景:前端向后端传递需要帮忙执行的代码
0730
22、内置构造函数 Date()
- getFullYear()
- getMonth()// 返回0~11
- getDate()
- getHour()
- getMinutes()
- getSeconds()
- getDay()
23、循环 判断语句
①if语句
② switch语句 :(可设默认值default ; case 判断全等 ===)
③ for语句
③ while语句
④ do{ }while()
⑤ for ..in : 取对象的可枚举属性
for...of :取数组每一项值
⑥break :结束整个循环
continue:结束本次循环,直接开始下一次循环
0802补充:⑦label标签,标识语句块
⑧ return 只能返回一个值
⑨ throw 抛出异常
⑩ try-catch-finallly 语句 :异常处理机制
with 语句 :临时扩展作用域
0802
14、object
①对象的增加、删除(delete)、修改、查找(. 语法和 [ ] 语法)
a 补充:对象属性的访问. 语法和 [ ] 语法;使用 [ ] 语法 时,里面的属性名为字符串要加引号,为变量则不用加引号。
b 两者区别: . 语法一般作为静态对象使用时来存取属性;[ ] 语法一般在作为动态对象使用时来存取
c 获取对象所有属性用for in 去遍历。
24、对象
(0)序列化对象
JSON 字符串 :与对象格式一样的的字符串 ,不同的是 属性要用 “ ” 包裹起来
序列化对象 : 将对象 转成 字符串 ,(转成的字符串就是 JSON 字符串)
① 对象 转 字符串 : JSON. stringify()
② JSON字符串 转 对象 :JSON. parse()
(1)对象方法
①toString()
② valueOf()
(2)对象属性
① getter 和 setter 存取器属性 :对 对象已有属性的操作!
形式是 代替 function关键字 定义函数, 并且去除键 值 之间的 :
影响是 设置get后的属性 不能再用普通的方法修改 属性值 ,只能通过set 方法修改
② 访问 . 语法 和 [ ] 语法
③ delete 删除对象属性
④ in 检测 某个属性 是否属于 某个对象
⑤ hasOwnProperty() 检查 一个属性 是否属于 某个对象 ,不包括继承的
⑥ for 。。in 循环获取对象属性
⑦对象属性 具有唯一性
(3)对象创建
①字面量创建
②构造函数创建
③函数创建(工厂模式创建)
④ Object. create()( ?)
var animal = { }
var cat = Object.create(animal);// animal 对象 作为 cat对象 的 原型
cat. __proto__ = animal
⑤new 创建
25、new关键字 使用时的隐式操作
① 隐式创建一个this = { __proto__} 对象
②执行代码
③隐式返回this 对象
(注:当有显示返回时 ,为基本数据类型 不生效,还是返回this对象 ; 为引用数据类型时 ,返回显示数据 代替this隐式返回。
里面的 this 指向实例化对象)
26、this 指向问题
① 全局 下的this 指向window
② 构造函数 里面的 this 指向实例化对象
③ 普通函数 谁调用 指向谁 ;找不到的时候 this 指向 window
④ 立即执行函数 中的this 指向 window
⑥ call() ,apply() ,bind(),中的this指向传入的 第一个参数对象参数
⑦ 内置构造函数里面的 this 指向 window
0803
27、原型对象
(1)定义:
① 原型 是构造函数 默认创建的一个属性 [[ prototype ]]
② 原型 是一个对象, 自带属性 __proto__ 和 constructor ,constructor的值就是该函数
③ 原型 的所有属性 和方法 都能被该函数 实例化出来的对象 所继承 ,对象通过 __proto__ 访问原型
(2)特点
① 实例化对象 里面的 __proto__ 和 构造函数里面的 [[ prototype ]] 属性 指向一致
② 所有对象里面 都有 __proto__ 属性
③ 在讨论 prototype 时 ,是通过 函数 访问原型 ; 讨论 __proto__ 时 , 是通过 实例化对象 访问原型 的。
(3)使用
①提取 实例化对象 的共有 属性和方法
② 在内置构造函数 中 追加 实例化对象 的共有 属性和方法
(4)实现继承的方式
①修改 构造函数原型 的指向 构造函数实现继承
②通过 call ,apply 方法调用其他构造函数 , 传递 this 指向
28、原型链
① 原型链 相连原理:
a . 所有 原型对象 都是 由 Object 构造函数 构造的,所以他们的__proto__ 都会指向 Object构造函数 原型对象,而 Object构造函数 原型对象的__proto__ 指向 null;
b . 所有 构造函数 都是 Function 构造函数 的实例化对象 ,所以 构造函数里面的__proto__ 都指向 Function 构造函数 的prototype ;
c . 所有 对象都包含 __proto__ 属性,函数也是特殊的对象
② 规则:对象访问属性 ,优先访问自己的属性;自己没有就访问原型上的 。直到 Object. prototype 没有则返回 undefined , 不会访问到 null 。
③ 使用情形: 通过 实例化函数 构造原型链 实现继承
通过 构造函数 的prototype 形成原型链 实现继承
29、数组
(1)数组创建方式
① 字面量创建
② 构造函数创建 new Array()
(当参数为一个数字时, 意思是 创建一个长度为这么多的 undefined 数组)
(2)数组增删改查
① [ ] 语法 获取
② arr[ x ] = "abcd" 改
③ delete arr[ x ] (只删除值 定义位置还在 ,长度不变 ; arr. length = 0 删除数组所有的值 ,直接修改长度 ,达到删除效果)
④ arr[ arr.length] = "新增"
(3)数组的复制(对象同 )
① 浅拷贝 :把 数据堆 地址 直接赋值 (还可以用Object.assign ( ) 浅复制)
② 深拷贝 :遍历数组 把元素一个一个地赋值 给目的数组(可以用 扩展运算符 实现深复制)
(4)数组方法
① pop() :删除数组 尾部元素 ,
② shift():删除数组 头部元素 ,
(pop ,shift 返回值为被删除的值 ,数组为空时 返回undefined ;都是在原数组上修改 ; 一次删除一个元素)
③ push():在数组尾部 新增元素 ,
④ unshift():在数组头部 新增元素 ,
(push , unshift 返回值为 增加函数后 数组的长度 ; 改变原数组 ; 一次可增加多个元素)
( 0804补充)
⑤ indexOf() : 查找参数在数组中 第一次出现的 下标,没有则返回 -1
lastIndexOf():查找 参数 在数组中 最后一次出现的下标 ,没有返回-1
⑥ slice():截取[ start , end ) 为新数组
⑦ concat():合并 多个数组 ,产生新数组
⑧toSting():数组 转 字符串,逗号隔开
join():按照指定 符号 连接 ,将数组 转为 字符串 ;默认字符为逗号
split():按照指定分隔符 将字符串分离 成 数组
⑨splice( start , length , 替换元素或数组):增删元素 ,会改变原数组,返回值为删除的值
a . 第三的参数 没赋值时 , 为删除功能 。从start 开始删除 length 个元素
b . 替换 。从start 开始删除 length 个元素 ,再把 替换元素 放在start 位置
c . length 为 0 时 ,为新增功能 。 在start 位置 新增 参数三之后的元素
⑩ reverse() : 逆序 ,将数组中元素顺序翻转 。 改变原数组 , 返回 原数组
sort() :按指定方法排序 。默认 升序排列 , 改变原数组 。return b-a ,降序 ;return a-b ,升序。(返回值的正负性 决定顺序;字母排序规则 比较ASCII码 )
①① forEach() :遍历执行传参函数 。 获取到对应 item值,index下标,arr原数组 。不产生新数组,也不改变原数组 ,没有返回值 (没有迭代条件)
every() :遍历执行函数判断 。 获取到对应 item值,index下标,arr原数组 。不产生新数组,也不改变原数组 ,有返回值 为Boolean 类型 是所遍历每一项返回的 逻辑与 (每一个都要符合条件 为真 ;迭代条件:为真)
some() : 遍历执行函数判断 。 获取到对应 item值,index下标,arr原数组 。不产生新数组,也不改变原数组 ,有返回值 为Boolean 类型 是所遍历每一项返回的 逻辑或 (至少有一个符合条件 为真 ;迭代条件 : 直到有一个为真)
①② filter() :遍历筛选 。 获取到对应 item值,index下标,arr原数组 。 返回值为一个新数组 ,不改变原数组 。 传参为一个返回值为 Boolean 值 的函数 。 本身没有返回值 。(根据函数返回值的真假 决定 是否将这一项 加入新数组)
map() :遍历映射 。 获取到对应 item值,index下标,arr原数组 。 返回值为一个新数组 ,不改变原数组 。 (将函数返回值 直接映射返回到 新数组 )
①③ reduce( function (pre,item){ return } , 初始值(可选) ) :累加 。
①④ Array . isArray(arr) :返回值boolean值 , 判断是否为数组
(5)类数组对象 多维数组
多维数组应用 :可以用来绘制游戏地图
(6)数组扁平化 flat
0805
30、函数
(1)函数的创建/定义
① 函数声明 :有函数提升
② 函数表达式 :var fun = function(){} ,函数不会提升
③ 函数方法 :作为对象的一个属性值
(2)函数的调用
① 函数调用 / 直接()调用
② 方法调用
③ 构造函数调用 (new )
④ 立即调用 (自调用函数 / 立即执行函数 , 立即执行 完后 即刻销毁)
形式a . ( function foo(){ } )();
形式b . ( function (){ } ());
形式c . var f1 = function foo(){ } ();
形式d . + function (){ } () ;(+ - ! 都可以将函数强转成表达式)
(3)函数方法
① call(绑定this,参数,参数)
② apply(绑定this, [ 参数,参数 ]):可以用作把数组 以一个一个的数字 形式传参给Math. max()函数
③ bind(绑定this)事先绑定,预定优先
①②③特点:①②方法 都是绑定this ,传参 然后调用函数 ;bind(),只是事先绑定this指向,不会调用函数, 产生一个新的对象函数 。必须 调用新函数 才有绑定效果 。
①②③作用 方法劫持:把A对象的方法让B方法调用,A方法执行内部的this指向改变
(4)函数关键字
① argument :实参数组 ,接收传入函数的所有参数
(5)定时器
① setInterval(function(){} , 毫秒):每毫秒 执行一次函数 ,清除clearInterval()
② setTimeOut(function(){} , 毫秒):毫秒后执行代码 , 清除clearTimeOut()
(6)作用域
作用域定义 :
代码的执行空间 , 变量起作用的范围
函数预编译:
① 形参 提升 并赋值 ,形成作用域AO1
② 执行函数体 ,形成作用域AO2 ,变量提升
③ 函数提升(函数体一起提升)
④ 执行逻辑代码
作用域链:
① 函数一创建,就继承当前作用域空间的 作用域链
② 函数一调用,就产生新的作用空间对象AO 放在作用域链头部
③ 函数一调用完毕, 对应作用域空间被立即销毁
(7)闭包
定义:闭包函数 能够访问上一级 已经关闭的函数局部作用域中的 变量
优点:模块化开发
缺点:占用内存空间 ,容易造成内存泄漏
闭包 高阶函数 回调函数
0809
31、正则表达式
regular expression ,匹配查找字符串
(1)创建
① 直接量
var reg = /abc/
② new RegExp(" "," 属性 ") 创建
(2)方法
① test( ),是否存在 返回值为 boolean
② match( ), 查找 第一次出现 下标
③ replace( ), 找到目标字符串 , 替换 ,产生新字符串
④ split( ),通过分隔符 ,将数组 转换成 数组
(3)属性
i ---ignoreCase // 忽略大小写 ,执行大小写不敏感的匹配
g ---global // 执行全局匹配
m ---multiline // 执行多行匹配
(4)规则
① / ^ a/ 查找行首字符 ; / a$ / 查找行尾字符
② / [ ^ ] / : ^ 在中括号里面 表示 非 ,一个中括号代表一位字符 ,里面的表达式为判断条件 ;
/ ( | ) / :小括号里面是 取值范围 ,| 代表 取或 ;可以获取到小括号里面的字符
③ 量词 :{ }大括号代表 量词个数
{ num }------n位
{ num ,}------n到无穷
{ num1 , num2 } -------n1~n2
+ --------1~无穷
* --------0~无穷
?--------0 或 1
④ 元字符
\ s : 匹配空白字符 ,
\ w : 匹配 数字 字母 _
\ d : 匹配数字
⑤ 反斜杠 \ : 会被识别成 特殊字符 ,需要通过反斜杠 \ 转义一下
⑥ 反向引用 \ (第几个小括号)
⑦ 限定符 ?= ?! ^ $
0810es6
32、补充bom 浏览器对象模型
(1)方法
open():打开新页面 。第二个参数:" _blank "默认新建窗口打开 ;" _self" 当前窗口打开
(2)location对象
属性:href (可以用来打开新页面 ,对历史页面有返回 ,可以返回历史页面) (赋值页面地址后 ,直接在当前页面打开)
方法:replace() (可以用来打开新页面 , 直接替换打开 ,历史页面缓存清除 , 不能返回历史页面)
(3)history 对象
方法:go()(可以传正负值 表示前进后退 缓存中的历史页面)
方法:back()(只能后退一步,不接收参数)
(4)navigator 浏览器信息对象 -----解决浏览器兼容性问题
包含当前浏览器的信息
0811
es6: 变量声明语句 解构赋值 数据类型(Symbol bigInt class Promise Genrator Map Set async/await) 运算符( ... ) 箭头函数
33、let 变量声明
特点:
① 没有变量提升
② 暂时性死区:不能在变量声明之前访问
③ 不允许重复声明同一个变量
④ let 支持 块级区域,在 if , for , while 等大括号中的 块级区域
( 对于 let 声明的变量 :let 会锁住块级区域 每一次声明都是一个新的块级作用域block )
⑤ 在 window 上没有克隆 (let const class 声明的全局变量 不属于window 属性)
34、const 声明变量
特点:
① 声明 和 赋值必须同时执行,不能分开写
② 声明定义只读常量 (const 声明的对象里的属性值 可读写)
35、解构赋值
(1)字符串的解构赋值
① 字符串 对数组 和对象 解构赋值 时 , 现将字符串 转换成 对应的包装对象 再赋值
(2)数组的解构赋值
一一对应
(3)对象的解构赋值
不用一一对应
(4)函数参数 的解构赋值
(5)解构赋值出现情况
① 完全解构 左 = 右
② 不完全解构 左 < 右
③ 解构失败 左 > 右
36、新增数据类型
(1)Symbol (表示独一无二的值)
① 通过Symbol()方法创建生成,每次返回值 都是唯一的
② 作用: 避免 对象属性名 重名被覆盖
(2)bigInt
① 数值后面用 n 标识
② 不能和其他数据类型 进行运算
③ 精度与 普通数值(Number存储精度有限) 相比 精度更高
37、箭头函数
语法:
① let fn1 = val => val
② let fn2 = val => { // 代码块 }
③ let fn3 = ()=>{ //代码块 }
④ let fn4 = ()=> { a: 1 }
⑤ let fn5 => ()=> 对象
let functionName = ( )=> { }
---()只有一个参数时, 可省略 小括号
---{ } 直接为一条语句时, 默认返回 这条语句结果
---{ } 多条语句不能省略 大括号
---返回值为对象时 ,不能省略大括号 和 return (或者加上小括号 强转为 表达式)
特点:
① 箭头函数里面的 this 与 创建环境一致 (指向 箭头函数 定义 时 距离最近的外层函数 的this)
(this指向 箭头函数定义时 所处环境的 this)与执行时的 任何this 都无关 也不能用call apply等函数改变 this 指向
② 箭头函数 没有 arguments
③ 箭头函数 不能使用 new 关键字, 不能做构造函数
④
38、运算符( . . . )
① 剩余 运算符 (把溢出的变量 或 参数 或 值 归纳存放在一个数组里面 )
(对象 溢出赋值时 ,是把 属性和值一起 归纳存放在 对象里面)
(放在 等号 左边 接收值)
② 扩展 运算符 (将 数组 扩展开 后再赋值 )
(放在等号右边 做赋值)
(可做深复制)
39、class 类
定义:构造函数 和 原型的 语法糖
包含 :constructor 函数(指向该构造函数),
其他的方法 都在 原型上
继承:extends
① 子类 必须在constructor 的最前面 通过super()调用 父类constructor
② 子类 可以继承 父类所有 方法和属性
③ 子类只能有一个父类 ,父类可以有 多个子类
④ 子类访问方法和属性 时 ,自己有 就优先访问自己的 ,没有才去访问父类
40、Map()和 Set()
(1)Set()去重 (集合思想)
① 通过new 调用 , 返回一个 对象
② 不能去重 两个空对象
(2)Map()对象 保存 键值对
① set( 键 , 值 )存值
② get( 键 )取值
③ 键名可以是任意数据类型
let map = new Map();
map.set("name" , "yyqx");
let prod = {
production: "拖孩",
price: 15
}
map.set(prod,100)
console.log(map);
console.log(map.get(prod));//100
console.log(map.get("name"));//"yyqx"
41、promise 对象
// 使顺序执行
console.log(1);
setTimeout(() => {
console.log(2);
}, 3000);
setTimeout(() => {
console.log(3);
}, 1000);
console.log(4);
// 回调地狱
console.log(1);
set1()
function set1() {
setTimeout(() => {
console.log(2);
set2()
}, 3000);
function set2() {
setTimeout(() => {
console.log(3);
fn3()
}, 1000);
function fn3() {
console.log(4);
}
}
}
① 作用:解决异步问题 ,回调地狱
new Promise((res, rej) => {
console.log(1);
setTimeout(() => {
console.log(2);
res()
}, 3000);
}).then(() => {
new Promise((res) => {
setTimeout(() => {
console.log(3);
res()
}, 3000);
}).then(() => {
console.log(4);
})
})
② 创建:通过new Promise ()创建 ,传入参数 为一个函数 ,该函数参数 也为两个函数 resolve ,reject ;
③ resolve作用:将 promise对象 的状态改为 已完成 fulfilled
reject作用:将 promise对象 的状态改为 以失败 rejected
没有使用resolve 或 reject :此时 promise对象 的状态为 正在执行 padding
④ promise 对象 有两个方法 then(),catch()
()
then():promise对象状态 为 成功时 ,调用该方法 。then接收一个函数参数,这个函数的参数从new Promise ()中 调用 resolve ()时传入的参数 拿到。
catch():promise对象状态 为 失败时 ,调用该方法 。catch接收一个函数参数,这个函数的参数从new Promise ()中 调用 reject ()时传入的参数 拿到。
0901 es6补充
1、promise 对象
① all ():对多个promise对象 一起处理 ,参数是一个对象数组;
所有状态都为fullfiled 时 , 状态才能转为成功 。
② race ():处理多个promise对象 ,参数为 对象数组;
最先获取的状态 ,决定最终的状态 。
2、同步异步
① js解释器是单线程的!
② 同步:一次只能执行一条代码
③ 异步:通常是在提醒后在执行代码 ;或是等到相应的时间或条件 再触发。
④ 同步代码:一条一条的普通语句 、打印 、函数调用 、 声明变量
⑤ 异步代码:setTimeout / setInterval ,注册的回调函数 , I/O ,UI (宏任务);
promise.then(微任务)。
⑥ 定时器是同步代码 ,它注册的回调函数时 异步代码 !
⑦ 执行顺序:同步代码 ---> 微任务 ---> UI ---> 下一次循环 ---> 宏任务 ---> 重复以上
⑧ 队列方式 预先存储 宏任务和微任务 , 先进先出 !
3、JS 事件循环机制
① microtaskc分为Macro Task(宏任务)和 Micro Task(微任务)
执行顺序:同步代码 ---> 微任务 ---> UI ---> 下一次循环 ---> 宏任务 ---> 重复以上
执行完主线程任务后 判断 是否有微任务。
4、Generator 函数
① function* 后面加*标记为Generator 函数
② 函数内部有 yield 关键字表达式
③ 执行机制:Generator函数 的调用和普通函数一样的 , 但执行不同 ;而是返回一个指向内部状态对象的指针,所以要调用遍历器对象Iterator 的 next 方法,指针就会从函数头部或者上一次停下来的地方开始执行。
function* func(){
console.log("one");
yield '1';
console.log("two");
yield '2';
console.log("three");
return '3';
}
func.next();
// one
// {value: "1", done: false}
func.next();
// two
// {value: "2", done: false}
func.next();
// three
// {value: "3", done: true}
func.next();
// {value: undefined, done: true}
5、async 函数
① async 标记函数为async函数
② 关键字 await 后面放上 promise对象 ,执行异步操作 ,等待执行结束后 再执行后面的代码
③ 没有异步操作时,(没有await )就是一个普通函数
④ 返回一个promise对象 , 对象状态:等待所有await执行完成后 状态为fullfiled;有await报错时 , 状态为 rejected ;(返回值作为promise对象的回调函数的参数)
//es6 解决回调地狱 方法二 async
function fn1() {
return new Promise(res => {
setTimeout(() => {
console.log(2);
res()
}, 3000);
})
}
function fn2() {
return new Promise(res => {
setTimeout(() => {
console.log(3);
res()
}, 1000);
})
}
async function fn() {
console.log(1);
await fn1();
await fn2();
console.log(4);
}
fn();
6、模块化开发 导入 导出
导入 :① 语法 :import 变量 from "文件" (默认导入)
import { 变量 } from " 文件 " (普通导入)
② 特点 :必须在顶层作用域 引入
模块外 不能使用 模块内 的数据和方法
<!-- 模块化开发 -->
<script type="module">
// import-导入 export-导出
// (1)引入 必须放在作用域的顶层去使用
import myNameTimes from "./module.js";
myNameTimes();
myNameTimes();
// 普通引入
import {n} from "./module.js";
console.log(n.no1,n.no2);
</script>
<script>
// 不能使用模块内部的数据和方法
// myNameTimes(); 报错
</script>
导出: ① 语法 :export default 变量;(默认导出 , 只能用一次)
export let 变量= 值 ;(普通导出 , 必须导出声明语句)
let times = function(){
let n = 0;
return function times(){
n++;
console.log(n);
}
}()
export default times;//默认导出 只能默认一次
// 普通导出
export let n = {
no1 : "红烧狮子头",
no2 : "把炒猪肝"
};
0819 DOM document object model
42、浏览器解析HTML 文件
① 解析HTML文件 , 创建一个DOM 树
② 解析css文件 创建css规则树
③ DOM 树 和 css 树结合 创建渲染树
④ 重绘和重排
43、DOM
会将 html 文档解析成 document 对象 (标签也会被解析成对象),在document 对象里面提供了很对方法 和属性 来操作页面
44、节点之间的关系
① 嵌套关系:父结点 子结点
② 同级之间的结点: 兄弟结点
③ 除了document 结点 , 每一个结点都有父结点
④ document是根结点
⑤ 一个节点可以拥有任意数量的子结点
⑥ 兄弟结点 拥有相同父结点
⑦ 有12中数据被解析成结点: 元素节点 、 文本节点、 注释节点···
⑧ 结点 和 元素节点 区别:
45、获取节点的方法
① 通过id获取元素节点 :document.getElementById()(返回值是个元素节点对象 ,找不到就返回null )
② 通过类名获取元素节点 :document. getElementsByClassName() (返回值是一个类数组,找不到返回一个空类数组)
③ 通过name属性获取元素节点:document.getElementsByName()
④ 通过标签名获取元素节点:document.getElementsByTagName()
⑤ 通过选择器元素节点:document.querySelector()(返回 第一个 符合条件的元素节点);
document.querySelectorAll()(返回 所有 符合条件的元素节点)
⑥ 通过元素节点关系(属性) 获取:
----- parentElement 获取父元素节点 (返回一个元素节点对象)
----- parentNode 获取父节点(返回一个元素节点对象)
------children 获取子元素结点 (返回一个类数组)
----- childNodes 获取子结点(返回一个类数组)
------nextElementSibling 获取下一个兄弟元素节点
------nextSibling 获取下一个兄弟结点
------previousElementSibling 获取上一个 兄弟元素结点
------previousSibling 获取上一个 兄弟结点
------firstElementChild 获取第一个子元素节点
------firstChild 获取第一个子节点
------lastElementChild 获取最后一个子元素节点
------lastChild 获取最后一个子节点
⑦ 通过属性元素节点:
例如 , document.body 获取body;
document.forms 获取表单们 ;
document.anchor 获取锚点们( 有name属性的a标签 );
document.links 获取链接们( 有href 属性的 a标签);
document.images 获取图片们 ;
document.URL 获取当前文档的网址
46、事件三要素
事件源 . 事件 = 事件处理函数
47、元素节点常用属性
① onclick 点击事件
② innerHTML 获取元素内部所有结点 ; 也可以赋值给 innerHTML 将原本的内容替换掉 ,是可以识别字符串中的标签的
③ innerText 获取元素内部所有文本内容,包括子元素节点的文本内容 ;赋值给 innerText 将原本的内容替换掉 ,不能识别字符串中的标签的
48、document 的方法
① createElement()创建元素节点 (创建出来的元素节点 只存在于内存中 ,不存在于文档树中 , 所以不会显示到页面上)
② appendChild()添加元素节点到文档树中
③ remove() ; removeChild()
④ cloneNode()克隆 也不存在于文档树
---false :只克隆本身 ,不包括后代 ,默认值;
---true :克隆全部
// document的方法
// 获取元素节点 ,除了通过id 和 querySelector 获取,返回值为一个元素对象
// 其他的都是返回 类数组
let box1 = document.getElementById("#box1") //速率最好
let box2 = document.getElementsByClassName("box2")
let box3 = document.getElementsByTagName("box3")
let box4 = document.getElementsByName("box4")
let box5 = document.querySelector(".box5") // 兼容性问题
let box6 = document.querySelectorAll(".box6") // 兼容性问题
// 创建元素节点
let box7 = document.createElement("div")
// document 的属性
let body = document.body
let myform = document.forms
let anchor = document.anchors //设有name属性的a标签
let link = document.links // 设有href 属性的 a标签
let img = document.images
let url = document.URL
// 元素节点 的方法
// 添加子元素
box1.appendChild(box7)
// 删除子元素 从文档树中删除 任然存在于内存
box1.remove(box7) // 删除自身
box1.removeChild(box7) // 删除子结点
// 克隆元素节点
let cl = box1.cloneNode()// 参数true 克隆全部后代; 参数false 仅克隆自己 默认值。
// 元素节点属性
// 类名
box1.className = "box1"
// 1、获取元素节点 所有内容 包括标签 ; 赋值时 innerHTML 可以识别 标签
box1.innerHTML = ""
// 2、获取元素节点 所有文本内容 不包括标签 ; 赋值时 innerText 不能识别 标签
box2.innerText = ""
// 返回父元素节点
box1.parentElement
box1.parentNode
// 返回子结点类数组
box1.children
box1.childNodes
// 返回下一个兄弟节点对象
box1.nextElementSibling
box1.nextSibling
// 返回上一个兄弟节点对象
box1.previousElementSibling
box1.previousSibling
// 返回第一个 子节点对象
box1.firstElementChild
box1.firstChild
// 返回最后一个字节点对象
box1.lastElementChild
box1.lastChild
0820
49、回流与重绘
重绘:render渲染树 中 一个元素 的样式 发生改变 引起重绘 ;
回流:render渲染树 中 一个元素 的布局结构发生改变 引起回流 ;
回流一定会引起重绘 , 重绘不一定引起回流。
常见回流 重绘 的操作:
① 添加或删除元素
② 隐藏元素
③ 移动元素
④ 用户手动更改浏览器窗口大小
50、事件
① 定义 :时间就是函数在某种状态下被调用 , js 捕捉到发生在网页上的行为 。 官方称为事件句柄 , 是交互体验的核心功能
② 事件三要素:事件源 事件类型 事件处理函数
③ 事件绑定方式:
❶行内式
❷属性式
❸高级绑定 ,添加一个事件监听器
element . addEventListener( " 事件类型" , 事件处理函数 , )--适用于谷歌 和 高版本IE浏览器
特点:同一事件 可绑定 多个事件监听器 ; 可以决定事件在哪个阶段 触发
element . attachEvent( " on事件类型", 事件处理函数)--只适用于低版本IE浏览器
- 高版本事件监听器的移除 :removeEventListener ( "事件类型" ,事件处理函数名)
- 低版本事件监听器的移除 :detachEvent( "on"+type , 事件处理函数名)
51、操作样式
① 使用 .style 设置或访问的样式 都是行内样式
② window . getComputedStyle( ele )返回的是 最后渲染出的 元素样式 对象,属性仅可读
52、浏览器窗口操作方法和属性
① window 的方法
------window . scrollTo(0,0)//页面滚动到 指定位置
------window . scrollBy(0,0)//页面滚动 指定距离
window 的属性
------window . pageXOffset // 获取 页面x轴 滚动的距离
------window . pageYOffset // 获取 页面Y轴 滚动的距离
------window . innerHeight // 获取 浏览器可视区域高度
------window . innerWidth // 获取 浏览器可视区域宽度
② 元素节点 方法
------element . getBoundingClientRect () // 获取元素节点的 几何尺寸(含有 left top right bottom width height x y 属性的对象 )
------element . scrollIntoView () // 滚动到指定位置 参数true 元素节点置顶 ;参数false 元素节点置底
元素节点 的属性
------element . scrollLeft // 获取元素节点 滚动距离
------element . scrollTop // 获取元素节点 滚动距离
------element . offsetParent // 获取 与 有定位属性的祖先元素节点 的距离 ,找不到返回body (body.offsetParent == null)
------ element.offsetLeft // 获取 与 相对有定位的祖先元素左边 的距离
------ element.offsetTop // 获取 与 相对有定位的祖先元素上边 的距离
// 获取可见宽度 、 高度(设置的宽度 + 内边距 + 边框)
------ element.offsetWidth
------ element.offsetHeight
// 获取自身宽度 、 高度(设置的宽度 + 内边距)
------ element.ClientWidth
------ element.ClientHeight
------ element.ClientLeft//获取左侧 边框宽度
------ element.ClientTop
------ element.scrollWidth // 获取 设置设置的宽度 + 内边距
------ element.scrollHeight
0821
1、事件对象
含义:事件在某种状态下触发时 , 会把触发时的信息打包到一个对象里面(事件对象),再传给事件处理函数。
特点:① 属性式 和 事件监听 创建的事件 有事件对象 ; 行内式创建的事件 没有事件对象
② 低版本浏览器 只能通过 window.event 获取事件对象
③ 考虑 浏览器的兼容性
2、事件对象里面的this指向
① 行内式 :里面的this 看谁调用指向谁
② 属性式 :指向 目标元素结点的 事件对象
③ 事件监听 : 指向 目标元素节点的 事件对象
3、表单操作
input ---- radio 属性 :设置单选框 ;默认选中设置 checked = true 。
input---- select 属性 :设置下拉框 ;option 设置选项 ; disable 设置禁选 ; 默认选中设置 selected = true 。
form ----onsubmit 事件 :表单被提交时触发 ;
4、事件响应链
5、事件三要素
6、事件代理
7、事件类型
0823
8、键盘事件
① onkeydown 键盘按下事件 (只能给可以获取焦点的元素设置 ; 任何键都能触发 ;onkeydown比 onkeypress 先触发 )
tip:元素节点属性 contenteditable=“true” 将标签 设为可编辑状态
② onkeyup 键盘弹起事件
③ onkeypress 键盘按下事件 (字母键才能触发)
① ② ③ 都有 alert 时 onkeyup 里面的alert 不会执行
查看键盘值 的属性 :keyCode
9、输入框input事件
① oninput 文本发生变化触发
② onfocus 聚焦触发
③ onblur 失焦触发
④ onchange 输入框文本改变 并 失去焦点 触发
10、滚动 事件
① onscroll 滚动条 滚动时触发
② onwheel 鼠标滚动滚轮时 触发
11、其他事件
① onload :等待网页资源 (dom树 缓存 ) 加载完毕后 触发事件
12、懒加载 :延迟数据加载 data-src 自定义属性
13、BOM browser object model
① window对象: 浏览器窗口 ,网页的全局对象
② navigator对象 :浏览器的信息 , 通过该对象来识别不同的浏览器
③ location对象 : 浏览器地址栏 的信息 , 通过该对象获取浏览器地址栏的信息或操作页面跳转
④ history对象 : 浏览器的历史记录
----back(),返回前一个页面
----forward() , 返回后一个页面
----go(),
⑤ screen对象 : 浏览器的历史记录
14、jQuery
$( )调用 , 这个函数接收 css选择器作为参数 , 返回包含页面中对应元素的jQuery对象
① 获取元素 $( " " )
② 获取元素节点 父节点 $( " " ). parent( );
获取元素节点 所有祖先节点 $( " " ). parents( );
获取元素节点 所有祖先节点 $( " " ). parentsUntil( "body " ), 直到body ,不包括body
③ 获取元素节点 所有子节点 $( " " ). children( );
获取元素节点 第num个子节点 $( " " ). children( ). eq(num)
④ 获取元素节点 所有兄弟节点 $( " " ). sibling( );
获取元素节点 下一个兄弟节点 $( " " ). next( );
获取元素节点 后面所有兄弟节点 $( " " ). nextAll( );
获取元素节点 后面所有兄弟节点 $( " " ). nextUntil( " p"),直到p为止
⑤ css样式
设置样式 : $( "div " ). css({ // 样式 })
获取样式:$( "div " ). css(" width")选择满足选择器条件的第一个元素的样式
⑥事件绑定
--- $( "button " ). click( function(){ })普通注册
--- $( "button " ). on( "click", function(){ }) on简单注册
--- $( "body " ). on( "click", "button " , function(){ })委托注册
--- $( "button " ). click( function(){ }). mousemove() 多事件绑定
⑦ 事件解绑
--- $( "button " ).off(" click" )
版权声明:本文标题:学习js笔记 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1728025699a1142647.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论