js所学精简版

js 所学总览

目录

js 所学总览

"use strict" 设置严格模式

js 的数据类型

数据类型的转换

转义字符及运算符

方法及运算

语句

基本元素类型

构造函数

事件

元素的尺寸、偏移量、边框

event 事件(e)

事件监听(观察者模式)

事件的兼容性

标签绑定事件

类名操作

预解析

作用域

计时器和延时器

Math（内置对象）

栈和堆

new 关键字

属性

数组 API

Date()时间 API

String 字符串 API

对象 Object

浏览器相关信息 window

history 历史记录

var,let 和 const

DOM 文档对象模型 操作 获取

元素属性操作

dom 的操作

元素的增删改

节点类型 nodeType

节点（node） 元素（element）

子节点和子元素

父节点和父元素

兄弟元素节点

特殊的标签获取 其所有

获取非行间样式

防抖和节流(学会手写)

闭包(closure)

正则元字符(具有特殊含义的字符)

正则限定符(限定字符出现的次数)

正则边界符号(某某为边界)

正则特殊符号

正则的相关方法

解构（ES6）

原型和原型链

1.every 用于检测数组所用元素是否都符合指定条件

2.=>箭头函数

思维方式 数据驱动，数据优先

gitee 仓库改动

习惯

了解

---

"use strict" 设置严格模式

• 局部 this 严格模式调用是 undefined

js 的数据类型

• 基本数据类型和复杂数据类型

  • 基本数据类型 String Number Bollean Null Undefine Symbol(ES6) BigInt(ES10)

  • 复杂数据类型 Object 类型及其子类，如 Array、Date、Class 等[引用数据类型]

• 这些数据类型的存储差别是什么？

  • 原始数据直接存储在栈(stack)中 简单数据段、占据空间小、大小固定，属于频繁使用数据所以放在栈中存储

  • 引用数据类型存储在堆中的对象，占据空间大，大小不固定

• 判断数据类型

  • typeof xx 判断基础类型

  • a instanceof b a 是否属于 b

  • xx.isArray 是否数组

  • Object.prototype.tostring 对象原型查看

  • xx.constructor 构造函数查看

数据类型的转换

• 转化字符串

  • 变量.toString()

  • String(变量)

  • '+'

• 数字类型转换

  • parseInt(string)

  • parseFloat(string)

  • Number(string)

  • -*/

• 转化为布尔值

  • Boolean()

  • !!

转义字符及运算符

• 常见转义字符

    \n      \t      \\      \'      \"

• 运算符的优先级

• 基本输入输出

  • alert 警告框

  • console.log 控制台

  • prompt 输入框

  • docunment.write 输出至网页

  • console.dir 深层次处理 深度打印

方法及运算

• 冒泡排序

• 递归函数

• 模板字符串``

  • 可以接收三元运算符[三目运算符]

  • 解析变量${}

• 展开运算符...

  • 展开数组对象

  • 对象不能直接展开运算符输出

• 查找 API

  • 输出数据类型,点击下拉箭头查看所有预定方法

语句

• 判断

  • if

  • switch

  • 三元

• 循环

  • for

  • while

  • for in

    • for(k in 对象) 使用 k 作每次使用较多

  • str.repeat(6); 相当于把 str 循环输出 6 次

基本元素类型

• 数组[] (array)

• 函数 function()

  • arguments

  • 函数的相互调用

• 对象{} (boject)

  • 创建方式 构造函数

构造函数

• 总与 new 运算符一起使用在创建对象语句，可以理解构造函数为创建变量的一种方法

事件

• BOM DOM event

• 鼠标事件

  • .onclick 鼠标左键单击

  • .ondblclick 双击鼠标左键

  • .onwheel 滚轮滚动

  • .oncontextmenu 鼠标右键单击

    • e.preventDefault(); 阻止默认事件

  • .onmouseover/.onmouseout 鼠标移入移出(子元素)

  • .onmouseenter/.onmouseleave 鼠标移入移出

  • .onmousedown 左键 按下

  • .onmouseup 左键 抬起

  • .onmousemove 鼠标移动

• 键盘类事件

  • onkeyup 键盘抬起

  • onkeydown 键盘按下

  • onkeypress 键盘按下抬起(不是所有功能键都会触发)

  • e.key 按下哪个键，e.key 就等于哪个值

  • e.altKey / e.shiftKey / e.ctrlKey 默认 false 按下后变 true 组合键

• 表单类事件

  • onchange 内容改变 且失去焦点 触发

  • oninput 改变的时候 触发

  • onblur 失去焦点 触发

  • onfocus 获得焦点

• 浏览器事件

  • onload 等待 dom 和资源加载完毕执行

  • onresize 浏览器大小改变时触发

  • onscroll 页面滚动时触发

    • 兼容 被卷去的高度 文档声明<!DOCTYPE>

    • scrollTop 可以设置高度

    • document.documentElment.scrollTop 有声明

    • document.body.scrollTop 没有文档声明

• 事件里的内置对象(重要的事件对象) e

  • offsetX 和 offsetY 相对于自身的 x 和 y

  • clientX 和 clientY 相对于浏览器的 x 和 y 坐标

  • pageX 和 pageY 相对于页面的 x 和 y

  • x 和 y 都是和事件对象有关 left 和 top 等都是和元素有关

• 其他事件

  • .ontransitionend 过渡结束的时候触发

  • .onmanimationend 动画结束的时候触发

• 移动端事件

  • .ontouchstart 触摸开始的时候触发

  • .ontouchmove 移动的时候触发

  • .ontouchend 触摸结束时触发

元素的尺寸、偏移量、边框

• 尺寸

• .offset：自身、padding、border

• offsetWidth 获取元素的宽

• offsetHeight 获取元素的高

• .client: 自身+padding

• clientWidth clientHeight

• 偏移量（即子元素到父元素的距离）

• offsetLeft offsetTop

• 边框（元素边框的宽度）

• clientLeft clientTop

• 窗口的宽高（包含滚动条宽高）

• innerWidth innerHeight

  • 不包含滚动条页面宽

  • document.documentElement.clientWidth

event 事件(e)

• event 1.事件源 2.事件类型 3.事件函数 4.修饰符

• 使用事件里的内置对象

  • box.οnclick=function(e){ console.long(e.offsetX) }

事件监听(观察者模式)

• .addEventListener('事件函数',函数)

  • onclick 就是 click 无 on

  • ie8 及以下 attchEvent()注意 加 on

• 默认是冒泡机制: 和 addEventListener 第三个参数有关系

  • 默认 false 冒泡机制; true 捕获触发事件

• 阻止事件冒泡

  • 1.e.cancelBubble = true;

  • 2.e.stopPropagation(); [推荐使用]

• 获取点击目标

  • e.target

  • IE8 以下使用 e.srcElement

• 阻止默认事件（优先执行默认事件，所以阻止）

  • e.preventDefault() 任何位置[常用]

  • 兼容(IE8 下) e.return

事件的兼容性

• 内置对象的兼容性

  • var e= e || window.event

• 事件监听兼容性

  • 如果是 ie8 及以下的浏览器 attchEvent() :注意需要加 on

标签绑定事件

• 直接通过 id 名绑定[不推荐]

  • id 名.事件名

类名操作

• 1.可设置和获取会覆盖之前类名

  • 元素.className

• 2.添加类名

  • 元素.classList.add('类名')

• 3.移除某个类名

  • 元素.classList.remove('类名')

• 4.判断类名(是否存在)

  • 元素.classList.contains('类名')

预解析

• var 定义变量自动提升，只提升定义不提升赋值

• function 自定义函数自动提升，不是匿名函数(匿名相当于赋值)，先提升 var,提升在 var 下面

作用域

• 全局作用域、函数作用域和局部作用域(ES6)

• 多个作用域组合在一起像链条一样，于是就叫作用域链【由里至外】

• var 全局作用 除定义在函数内

• let 块级作用生效 不能重新定义

• const 块级作用 不能重新赋值，必须初始化

计时器和延时器

• setInterval(函数,时间); 开启计时器

• clearInterval(计时器名); 关闭计时器

• 计时器累加效果的解决

• setTimeout(函数,时间) 打开延时器

• clearTimeout(延时器名) 关闭延时器

• 异步

Math（内置对象）

• Math.PI 圆周率

• Math.max(-1,2) 最大值

  • Math.max(...[2,8,-1]) 转换数组需要加...

  • ...展开运算符

  • 不可转换返回 NaN,会做隐式类型转换

• Math.min 最小值(与最大值一样)

• Math.floor 取整(向下)

• Math.ceil 取整(向上)

• Math.abs 绝对值

• Math.around 四舍五入

• Math.random 0-1 的随机值

栈和堆

new 关键字

属性

• .style.left=(left 值) 改变元素的 left 值

• .offsetLeft 盒子左边的距离

• .innerText 获取标签或改变标签的值(Value)

• .innerHTML 替换超文本内容(包含标签)

数组 API

• push(参数 1,参数 2...) 末尾添加 n 个参数 并返回新的长度

• unshift(参数...) 开头添加 n 个参数 并返回新长度

• concat() 连接两个数组

  • array.concat(arr2);

• pop() 删除数组最后一个元素 返回删除的元素的值

• shift() 删除数组第一个元素 返回第一个元素值

• splice 修改[更多用作替换]

  • splice(修改位置[索引],删除的数据个数,添加的内容,添加的内容)

• slice() 截取从某某下标开始到某某下标结束，返回新数组(可为负数)

  • array.slice(start, end)

• 数组 排序

• reverse() 反转数组 改变原数组

• sort() 对数组排序【超出两位排序的问题】

• indexOf('数组元素') 获取数组下标(从前往后,没有返-1)

• lastIndexOf('数组元素') 获取元素下标(从后,没有返-1)

• includes('数组元素') 有返回 true,没有返回 false

• toString() 数组转换字符串(以逗号分割)

• join('分割符') 数组转字符串

  • 以'分隔符'分割，常用''输出字符串，无分割

Date()时间 API

• var date=new Date()

• 数字 逗号隔开 2022,3,8,10,30,20

• 字符串 中间空格 '2022-3-8 10:30:20'

• 月份、星期从 0 开始

• 格式化日期

  • getFullYear() 获取当年

  • getMonth() 获取当月(0-11)

  • getDate() 为当月第几天

  • getDay() 星期

  • getHours() 小时

  • getMinutes() 分钟

  • getSeconds() 秒

  • getTime() 返回自1970年1月1日来的毫秒数

• 获取毫秒数【毫秒数固定的,从 1970 年】

  • +new Date()

  • var date =+new Date() 获取 1970 毫秒

  • Date.no w()

String 字符串 API

• 字符串的所有方法都不会修改字符串本身

• .length 字符串长度方法

• .indexOf('要查找的字符',开始的位置) 从前往后

  • 返回字符返回的索引值，找不到返回-1

• .lastIndexOf 从后往前查找

• .charAt(index) 返回指定位置的字符

• .charCodeAt(index) 获取指定位置处字符的 ASCII 码

• .str[index] 获取指定位置的字符

• .substr(index,lenth)[重点] 获取字符串中的值

  • 从 index(索引)开始,length 获取个数,index 可设负值;负值从后往前截取

• .concat(str1,str2...) 拼接字符

  • 凭借两个或多个字符,相当于+号(没+好用)

• .substring(start,end) 截取数组

  • 从 start 开始,截取 end 位置,设负值从后往前截取

• .replace(被替换的数据,要替换的数据) 替换数组

  • 用来替换不文明语句为*等

• .split(分割条件) 字符串转数组(通过条件转)

• 字符串大小写 元素.toLowerCase 小写 元素.toUpperCase 大写

• str.repeat(6); 相当于把 str 循环输出 6

对象 Object

• 对象名中括号与点的区别

  • 中括号[]里面可以是字符串或变量

  • .后面只能使用字符串

浏览器相关信息 window

• BOM 就是 window 全局对象 DOM 就是 document 是 window 的一部分

• window.innerWidth 窗口宽度

• window.innnerHeight 窗口高度

• window.navigator 浏览器相关信息

• window.open("网址") 打开页面

• window.close() 关闭页面

• location.href 获取设置当前页面地址

• location.reload() 重载当前页面

• location.hash 获取设置 hash 值 #

• location.search 获取[接收]地址栏传参 ? (使用&连接)

history 历史记录

• 浏览器历史记录，前提是必须有历史记录

• history.back() 回退到上一个历史记录

• history.forward() 前进下一个历史记录

• history.go(num) 0 当前页面 1 下一个 2 下两个 -1 上一个 依此类推

var,let 和 const

• var 预解析 可重复定义 可重复赋值

• let 不进行预解析 不可重复定义 可重复赋值

• const 不会预解析 不可重复定义 不可重复赋值

DOM 文档对象模型 操作 获取

• document 全局文档对象

• 直接通过 ID 操作(野路子，不建议) console.log(id)

• document.getElementById("") id 名获取元素

• document.getELementByClassName("") 类名获取元素

• document.getElementByTagName("") 标签名获取元素

• document.querySelector(". # div") 获取第一个[id 类 标签名]

• document.querySelectorAll(. div) 获取多个

元素属性操作

• 变量.getAttribute("属性名") 获取元素属性值

• .setAttribute("属性名","属性值")

• .removeAttribute("属性名")

dom 的操作

• 基础删改

• innerHTML 操作内部超文本

• innerText 操作内部文本

元素的增删改

• 增

• document.createElement('标签名')

• 增加其位置

• 父元素.appendChild 追加到子元素最后位置

• 父级.insertBefore("要添加的新元素","添加到哪个元素前")

• 修改

• .replaceChild()

• 删除

• 元素.remove() 常用

• 父级.removeChild(要移除的子元素)

• 克隆节点

• cloneNode()

  • 默认 false 只克隆最外层标签

  • 设为 true 克隆自身所用节点(自身和子元素内容)

节点类型 nodeType

• 1.元素节点（1）

• .nodeType=1 .nodeName=大写标签名 .nodeValue=null

• 2.文本节点（3）空格换行也是文本节点的一种

• .nodeType=3 .nodeName:text .nodeValue=文本内容

• 3.注释节点（8）【HTML 注释不要乱删】

• .nodeType=8 .nodeName=comment .nodeValue=注释内容

• 4.属性节点（2）

• .nodeType=2 .ndeName=属性名 .nodeValue=属性值

节点（node） 元素（element）

子节点和子元素

• document 有节点构成 节点包含 元素标签 空格换行..

• 1.元素.childNodes 子节点

• 子节点包括换行(当作文本节点),元素节点

• 2.元素.children 获取所有子元素

• 3.firstElementChild 获取第一个子元素

• 4.firstChild 获取第一个子节点

• 5.lastElementChild 获取最后一个子元素

• 6.lastChild 获取最后一个子节点

父节点和父元素

• .parentNode 父节点

• .parentElement 父元素

• 父节点和父元素找到容器一样，应为文本节点不能包含

兄弟元素节点

• 1.previousElementSibling 上一个兄弟元素

• 2.previousSibling 上一个兄弟节点

• 3.nextElementSibling 下一个兄弟元素

• 4.nextSibling 下一个兄弟节点

特殊的标签获取 其所有

• document.documentElement 获取 html 标签

• document.head 获取 head 标签

• document.title 获取 title 的文本内容

• document.body 获取 body 标签

• document.getElementsByName('') 通过 name 获取

获取非行间样式

• 获取行间样式 元素.style.样式属性名=

  • ele.style.background='blue';

• 获取非行间样式

• getComputedStyle(获取样式的元素,伪类样式)[属性名称]

  • getComputedStyle(box2Ele)['background-color']

• 兼容 IE8 以下

• 元素.currentStyle[styleName] IE8 以下兼容

防抖和节流(学会手写)

• 防抖(debounce)

• n 秒后执行事件，在 n 秒内重新触发，则重新计时

• 分前置防抖和后置防抖

• 节流，类似技能的 cd

闭包(closure)

• 函数被外部环境引用，就不会被摧毁；这种变量不会被摧毁就叫做闭包

• 通过某些规则查找字符串是否存在某些字符

• 平时用不到，但有时会帮你解决些头疼的问题

• 创建

  • 字面量创建

  • var reg=/ab/ 是否有 ab

  • 内置构造函数创建

  • var reg = new RegExp(mayname); mayname 为变量

• 区别

  • 内置构造函数可以存储变量

  • 字面量不可存储变量

• 验证

  • 正则对象.test(需验证字符串)

  • reg.test(str)

• 通过内置构造函数来写正则 所用\都要转义

  • \s -->\s

正则元字符(具有特殊含义的字符)

• 1.点(.)：在正则里匹配非换行任意字符

• 2.\转义字符(匹配除自身的所有字符)

• 3.匹配空格 \s

• 4.匹配非空格 \S(大写 S)

• 5.匹配数字 \d

• 6.匹配非数字 \D

• 7.匹配 数字、字母、下划线 \w

• 8.匹配非数字、字母、下划线 \W

正则限定符(限定字符出现的次数)

• 指上一个字符出现的次数

• 1.*：字符出现 0 次到多次

• 2.?: 字符出现 0 到 1 次

• 3.+：字符出现一次或多次

• 4.可以指定出现次数 {数量}

  • var reg = /ab{2}c/

  • 就是指必须包含 abbc [b 出现两次的意思]

• 5.指定范围：{最少出现次数,最多出现的次数}

• 6.指定次数 至无限次 {最少出现次数,}

正则边界符号(某某为边界)

• 1.某某作为开头 ^

• 2.某某作为结尾 $

正则特殊符号

• 分组

• 1.() 正则里的是分组

• 2.RegExp.$1...$n

  • 获取分组里的内容 $1 第一个分组

• 正则里的或(|) 和 且(&)

• 正则里的集合[]

• 1.自带或者关系 [abc]

• 2.可以设置区间 [a-z]

  • 连续的大小写字母

  • 连续的 Assci 码

  • 连续的数字[0-9]

    • [0-25] 表 0-2 或 5

  • 匹配中文[\u4e00-\u9fa5]

• 3.集合里^是非的意思

正则的相关方法

• 默认是惰性匹配(只匹配一个)

• 全局匹配，可执行多个匹配

• 正则相关方法

  • 1.正则方法

  • 2.字符串方法

• 1.reg.test(str) 匹配字符串是否匹配正则规则

• 2.reg.exec(str) 捕获符合匹配字符的规则

• 修饰符(可练写，例 gi)

• 1.全局匹配 g 背后加 g

• 2.i 忽略正则大小写

• 字符串正则方法

• 1.字符串.split(正则) 匹配 true 和 false

• 2.字符串.search(正则) 返还符合规则的索引值[0 开始]

• 3.字符串.replace(正则,'要替换的字符')

• match 方法 获取正则匹配的字符 区分 全局和非全局

  • 字符串.match(正则)

解构（ES6）

• 一种更方便提取数据的模式

• 数组的解构

• 对象的解构

  • const { name, age } = { name: '张三', age: 21 }

原型和原型链

• 概念：

  1. 在js中，对象如果在自己的这里找不到对应的属性或者方法，就会查看构造函数的原型对象，如果上面有这个属性或方法，就会返回属性值或调用方法

• 原型对象【原型】

  • 在js中，每一个函数类型的数据，都有一个叫做prototype的属性，这个属性指向的是一个对象，就是所谓的原型对象

  • 最主要的作用就是用来存放实例对象的公有属性和公有方法

• 构造函数

  • 对于原型对象来说，它有个constructor属性，指向它的构造函数

• 显示原型和隐式原型

  • 显示原型：利用prototype属性查找原型，只是这个是函数类型数据的属性

  • 隐式原型：利用proto属性查找原型，这个属性指向当前对象的构造函数的原型对象，这个属性是对象类型数据的属性，所以可以在实例对象上面使用

• 原型链【原型链】

  • 就是原型对象也是一个对象，对应的也有其原型对象就是Object.prototype

    • 不过其原型对象后就没有上一层原型对象，为null

  • 顺着proto属性,一步一步往上查找，形成链条一样的结构就是原型链

• 总结

  1. 构造函数是使用了new关键字的函数，用来创建对象，所有函数都是Function()的实例

  2. 原型对象是用来存放实例对象的公有属性和公有方法的一个公共对象，所有原型对象都是Object()的实例

  3. 原型链又叫隐式原型链，是由proto属性串联起来，原型链的尽头是Object.prototype

1.every 用于检测数组所用元素是否都符合指定条件

所用元素满足返回True
有一个不满足就返回False
注意:不对空数组进行检测
    不会改变原有数组

2.=>箭头函数

(x, y) => x * x + y * y
相当于
function (x,y) {
    return x * x+y * y;
}

箭头函数是ES6新推出的一种写法;

(1)箭头函数没有prototype为undefind

(2)箭头函数没有自己的this指向，它的this指向外层

(3)没有外层函数使用argument会报错,有则继承外层

思维方式 数据驱动，数据优先

gitee 仓库改动

• 1.git add . 2. git commit -m '注释' 3.git push

习惯

• 养成习惯使用服务器打开代码

• 有得注释是功能性的注释 JS 的注释没关系 HTML 注释是可以拿到些功能的 到公司不要随便删掉注释

• 属性(名词)没有括号 方法(动词)需要括号

了解

• ES6: ECMA 2015 , 标准 js 版本

• ECMA: 欧洲的计算机协会

• hositing(声明前置和预解析)