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 ‘ ’
重名不怕
依赖不乱