JavaScript学习

1、JS常用的8种数据类型

String（字符串）、Number（数值）、Boolean（布尔值）、Null（空值）、Undefined（未定义）、Object（对象）、symbal（Es6新增）、bigInt

2、DOM

DOM：是文本对象模型，操作网页内容，开发网页内容特效和实现用户交互

DOM对象：浏览器根据html标签生成的JS对象，核心是把内容当做对象来处理，所有的标签属性都可以找到和修改

3、获取DOM对象

document.querySelect（' '）:选择一个元素，可以直接修改

document.querySelectAll（' '）：选择匹配的对象合集，得到的是一个伪数组，即有长度有索引号，但是没有pop、push方法，通过遍历（for）的方式得到每个对象，进行查询和修改

4、操作元素内容：修改元素文本内容

对象.innerText：纯文本，不解析标签

对象.innerHTML：会解析标签

5、操作元素属性

操作常用属性：对象.属性 = 值

操作样式属性：对象.style.样式属性 = 值；元素.className = '类名'（通过类名修改，但会覆盖以前的类）；元素.classList.add（' 类名 '） （追加和删除不改变以前的类）

操作表单元素属性：表单.value = ’’；表单.type = ‘ ’

自定义属性：定义：data-id = ‘’；使用：对象.dataset.id

6、定时器

开启：let 变量名 = setInterval（函数，间隔时间）

关闭：clearInterval（变量名）

7、事件

• 事件监听（绑定）：元素对象.addEventListener（'事件类型’，要执行的函数）
• 事件类型：鼠标事件：click 鼠标点击；mouseenter 鼠标经过；mouseleave 鼠标离开

焦点事件：focus 获得焦点；blur 失去焦点

键盘事件：Keydown 键盘按下触发；Keyup 键盘抬起触发

文本事件：input 用户输入事件

• 环境对象：this（谁调用，谁就是this）
• 回调函数：函数A作为参数传递给函数B，则A为回调函数

8、事件流两个阶段：事件捕获：从父到子 ；事件冒泡：从子到父

• DOM.addEventListener（事件类型，事件处理函数，是否使用捕获）第三个参数传入true为捕获，false为冒泡（默认）
• 阻止冒泡：对象.stopPropagation（）
• 阻止默认行为：对象.preventDefault（）
• 鼠标经过事件，mouseover和mouseout会冒泡、mouseenter 和 mouseleave 则没有

9、绑定事件

• on事件方法：事件.onclick = function () { }; 解绑：事件.onclick = null
• addEventListener方法：绑定直接绑，解绑 removeEventListener（' ', fn）

10、事件委托

• 利用事件冒泡，把子元素的事件绑定到父元素上。

11、页面加载事件

• load：window.addEventListener（'load', function(){})，监听整个页面，给window加，等待页面所有资源加载完毕
• DOMContentLoaded：给document加，无需等所有资源加载完

12、页面滚动事件 scroll

• scrollTop / scrollLeft :被卷去头部/左侧的距离 （可读写）
• offsetTop / offsetLeft：元素距离自己父元素上、左的距离 （只可读）
• document.documentElement.scrollTop ：检测头部被卷去的距离

13、页面尺寸事件 resize

• clientWidth / clientHeight :元素的宽高
• document.documentElement.clientWidth ：检测屏幕宽度

14、日期对象

• const data = new Data（）：实例化，获得指定时间
• getFullYear（）：获得年份
• getMonth（）：获得月份
• getData（）：获得天
• getDay（）：获得星期
• getHours / Minutes / Seconds （）：时分秒
• 时间戳：获取当前时间 data.getTime() (要先实例化）/ +new Data() / Data,now()

15、节点操作

• 查找父节点：子元素.parentNode （返回最近一级父节点）
• 查找子节点：父元素.childNodes（返回所有的子节点，包括文本、换行、注释节点等）；父元素.children （仅返回所有元素节点，返回的是伪数组）
• 下一个兄弟节点：nextElementSibling
• 上一个兄弟节点：previousElementSibling
• 创建节点：document. createElement（' 标签名'）
• 追加节点：父元素. appendChild（）（插入到父元素最后）；父元素. insertBefore（要插入的元素，在哪个子元素前）（插入到某个子元素之前）
• 克隆一个已有的节点：元素. cloneNode（true / false）；true包含后代一起克隆，false则不包括（默认）
• 删除节点：父元素. removeChild（）

16、DOM 和 BOM

• Dom’文档 对象模型‘，JS处理网页内容的方法和接口，作用是将网页转换为一个JS对象，从而可以用脚本进行各种操作；
• BOM’浏览器对象模型，与浏览器交互的方法和接口，

17、location

• location. href: 获取完整的URL地址，用于地址的转换
• location. search: 获取地址中携带的参数，符号 ？ 后面的部分
• location. hash: 获取地址中的哈希值， 符号 # 后面部分
• location. relaod: 用来刷新页面，传入tru e时表示强制刷新

18、navigator的数据类型是对象，该对象记录浏览器自身的相关信息

history的数据类型也是对象，主管历史记录，forward（）前进、back（）后退、go（参数）1则前进1个，-1则后退1个

19、cookie、sessionStorage、localStorage

• 存储的时间有效期不同：cookie有效期是可以设置的，默认情况下关闭浏览器后消失；sessionStroage的有效期仅保留在当前页面，关闭当前会话或者浏览器后会失效；localStroage的有效期是在不进行手动删除的情况下一直有效。
• 存储的大小不同：cookie存储4kb左右，存储量小，一般存储20条左右；localStroage和sessionStroage存储量为5Mb；
• 与服务器的通信：cookie会参与到与服务器的通信中，一般会携带在http请求的头部（例如关键密匙验证）；sessionStroage和localStroage单纯前端存储，不参与服务器通信；
• 浏览器的支持：cookie出现早，目前的浏览器都支持；后两种版本低的不支持（如IE8以下的）

20、localStorage

• localStorage.setItem(): 存储
• localStorage.getItem(): 获取
• localStorage. removeItem()：删除
• 存储复杂数据类型：需要将复杂数据类型转换成 JSON 字符串，存储在本地。 JSON. stringify(复杂数据类型)
• 因为存的是字符串，所以取的时候要将字符串转为复杂数据类型（如对象） JSON. parse(JSON字符串)

21、foreach 和 map 遍历数组 arry

• arr. foreach（function（item，index，arr）{ }）：用来遍历数组的每一项 item，索引号 index ,原数组 arr，返回 undefined，不影响原数组
• arr. map（function（item，index，arr）{ }）： 返回已包含转换元素的新数组，支持return，相当于克隆了一份，也不改变原数组，不检测空数组
• arr. filter( function( value, index, arr ){ })：对数组进行过滤，在新数组中返回符合条件的所有元素，不改变原数组，不检测空数组
• arr. some（function（item，index，arr）{ }）:查找数组中是否有满足条件的数，返回true\false
• find：遍历数组，找到第一个符合条件的项，并返回该项；

22、for...of 和 for...in

• for...of ：支持数组、数组，但是没有索引 for（let item of arr）{ }
• for...in：遍历对象，有索引 for（let item in arr）{ }

23、正则表达式：用于匹配字符串中的字符组合模式 /^str$/

• 匹配：表单验证 test（）匹配返回true
• 替换：过滤敏感词 exec（） 匹配成功返回一个数组，否则null
• 提取：提取需要的部分

元字符

边界符: /^ $/

量词：*n 、 +n、 ？（重复0或1次）、{n}、{n，}、{n，m}

字符类：[a-z]

修饰符：i 不区分大小写，g匹配所有结果，replace（/ /，'替换的文本'）替换

24、面向对象poo （面向过程pop），创建类和生成实例

• 通过class关键字创建类，类里面有个constructor 函数，可以接收传递过来的参数，同时返回实例对象 ；
• 只要 new 生成实例，就会自动调用 constructor 函数；
• 生成实例 new不能省略
• 创建类，类名后面不需要加小括号，类里面的函数省略 function。，多个函数之间不需要加‘，’

26、原型是什么？原型链

• 一个对象，我们成prototype为原型对象，原型的作用是共享方法。
• 一般情况下，公共属性定义到构造函数里，公共的方法放到原型对象上
• ES6之前我们面向对象通过构造函数实现，方法放在构造函数里面，当我们实例化一个对象时，会单独开辟一个空间存放函数，比较浪费内存，ES6将构造函数的方法定义到构造方法的原型对象上，实现方法的共享，所有的实例可以使用这个方法。
• 访问一个对象的某个属性，会先在这个对象自身属性上找，没找到就回去隐式原型上找（即它的构造函数的prototype），如果还没找到就会在构造函数的隐式原型上找，这样一层一层形成一个链式结构。

在构造函数中的 this 指向实例对象，在原型对象中的 this 指向实例对象

27、call （）方法 、 apply（）、bind（）

call（）：可以调用函数： fn. call()

改变this指向：fn. call( thisArg, 参数，参数 ) thisArg 为this 指向，可以改变

可用于子构造函数调用父构造函数

apply（）：用法同call ，但是参数必须是数组形式的；

可以用apply求数组的最大值: Math. max. apply (null, arr )

bind（）：可以改变函数内部的this指向，但不能调用原函数，返回的是原函数改变this后的新函数

常用，有函数不需要立即调用，但又想改变这个函数内部的 this 指向，用bind

25、类 （ES6引入）

• 类的本质还是一个原型对象，类是构造函数的另一种写法
• 子类可以继承 extend 父类中的方法和函数
• super（）调用父类中的构造函数；
• 把元素追加到对应的父元素里（比如追加新的行）：this. ul. insertAdjacentHTML('beforeend', li)

（替代了之前的：动态创建元素 createElement，innerHTML赋值，再appendChild追加到父元素中）

26、trim（）去除字符串两边的空格，不能去中间

在一个对象上定义新属性：

Object. defineProperty( obj, '属性名', {

value: ' ', 属性值

writable: false, 为false则不允许修改，默认

enumberable: false, 为false 不允许遍历 默认

configurable: false 为false 不允许删除或修改特性，默认

}

27、浅拷贝和深拷贝

浅拷贝：只是拷贝一层，更深层次的对象级别只拷贝引用，原对象修改，新对象里的数据也改变；

Object. assign ( 新对象， 原对象）

深拷贝：拷贝多层，每一级别的数据都会拷贝，将堆中的数据重新复制一份，原数据改变，不会影响新对象。

function deepCope (

28、flat、flatmap

flat：简单的二维数组，扁平化处理

flatmap：复杂的二维数组，扁平化处理

29、symbol 的特点

symbol 的值是唯一的，用来解决命名冲突的问题；

不能与其他数据类型进行计算；

不能使用for……in循环遍历，但是可以使用 reflect. ownKeys 来获取对象的所有键名。

30、iterator 迭代器

用来遍历，Symbol. iterator是遍历器的接口，let iter= arr[Symbol. iterator] ()返回的是遍历器对象，相当于一个指针，可用 iter. next（）访问数组里的下一个；

满足iterator 接口的可以将对象s1转为数组 […s1]

31、set（）

数组去重：set ([ 1, 2, 3, 1, 2]) 生成的是数组对象，可以用 […s1]、Array. from( s1) 转换回数组；

s1. size 数组长度

s1. add（）添加

s1. delete（）删除

s1. clear（）清空

32、map

let m1 = new Map([

["属性名", "属性值"],

])

set（）：加

get（）：取

has（）：判有无，有为true

delete（）删除

clear（）清空

33、Proxy 代理，属性拦截

ES5用：Object. defineProperty( obj, "data", { get() { }, set () { } }) 拦截属性信息

Proxy 作用是在对象和对象的属性之间设置一个代理，获取该对象的值或者设置该对象的值等操作，都会被拦截，我们可以经过这一层统一处理。

优点：可以一次拦截多个属性可以不改变原对象操作，也可以改变原对象。

34、Reflect对象

用于获取目标对象的行为，与Object类似，但是更易读，为操作对象提供了一种更优雅的方式，与 Proxy 对应。

作用：

代替Object 的某些写法，

修改Object 的某些方法返回结果（判断异步错误，直接判断true和false）

命令式改为函数行为

配合 Proxy：属性获取 Reflect. get (target, key) ; 属性设置 Reflect. set (target, key)

35、Promise 生成器函数

异步编程的一种解决方案，比传统的回调函数更好。ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。

使回调函数方式更灵活易懂，解决了异步回调地狱问题。

let pro = new Promise( function( resolve, reject) {

setTimeout( () =>{

resolve(100) //对应 then

}，1000)

pro. then( ()=>{

console. log("奖金"， res)

})

pro. catch( ()=>{

console. log("没有"，err)

})

Promise 三种状态：

异步操作未完成 （pending）

异步操作成功 （fulfilled）

异步操作失败 （rejected）

状态的变化途径只有两种：从未完成到成功；从未完成到失败

一旦状态变化就凝固了，不会再发生改变，即实例变化只会发生一次，谁在前面发生谁。

Promise. all( [pro1, pro2, pro3] ). then( res =>{ }).catch (err =>{ }) 接收所有Promise对象的数组，当所有Promise实现了，才调用。

36、模块化 Module

异步加载：之前（defer、async）；模块化后 type = "module"

私密不漏：导出 export default a1；导入 import a1 from ‘ ’

重名不怕

依赖不乱