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://www.elefans.com/dianzi/1728025699a1142647.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论