1、字符串的方法 **
字符串的方法
charAt( ) 方法从一个字符串中返回某个下标上的字符
concat( ) 方法将一个或多个字符串与原字符串连接合并,形成一个新的字符串并返回。
search( ) 获取某个字符或者字符串片段首次出现的位置
match( ) 检索字符串或者正则表达式
replace( ) 替换
replace(参数 1,参数 2); 参数 1:替换谁 参数 2:替换值
split( 参数 1,参数 2 ) 字符串切割,切割后返回数组
slice( ) 和 substring( ) ( 开始位置,结束位置 ) 获取两个索引值之间的字符串片段 从下标 2 开始截取,到下标 4 结束,但不包含 4
substr ( 开始位置,截取的长度 ) 获取两个索引值之间的字符串片段
indexOf( ) 获取某个字符或者字符串首次出现的位置,找到则返回索引值,找不到则返回-1
lastIndexOf( ) 获取某个字符或者字符串最后出现的位置,找到则返回索引值,找不到则返回-1
2、this, call, apply, bind *
跟 this 指向的答案背一样就行
1.浏览器里,在全局范围内的 this 指向 window 对象; 2.在函数中,this 永远指向最后调用他的那个对象; 3.构造函数中,this 指向 new 出来的那个新的对象;
4.Call、apply、bind 中的 this 被强绑定在指定的那个对象上; 5.箭头函数中 this 比较特殊,箭头函数 this 为父作用域的 this,不是调用时的 this.要知道前四种方式,都是调用时确定,也就是动态的,而箭头函数的 this 指向是静态的,声明的时候就确定了下来;
6.apply、call、bind 都是 js 给函数内置的一些 API,调用他们可以为函数指定 this 的执行,同时也可以传参。
3、数组排序 ****
- 冒泡排序法
将数组中的相邻两个元素进行比较,将比较大(较小)的数通过两两比较移动到数组末尾(开始),执行一遍内层循环,确定一个最大(最小)的数,外层循环从数组末尾(开始)遍历到开始(末尾) - 插入排序法(插队排序)
将要排序的数组分成两部分,每次从后面的部分取出索引最小的元素插入到前一部分的适当位置
·从第一个元素开始,该元素可以认为已经被排序;
·取出下一个元素,在已经排序的元素序列中从后向前扫描;
·如果该元素(已排序)大于新元素,将该元素移到下一位置;
·重复步骤 3,直到找到已排序的元素小于或者等于新元素的位置;
·将新元素插入到该位置后;
·重复步骤 2~5。 - 快速排序法
实现思路是,将一个数组的排序问题看成是两个小数组的排序问题,以一个数为基准(中间的数),比基准小的放到左边,比基准大的放到右边,而每个小的数组又可以继续看成更小的两个数组,一直递归下去,直到数组长度大小最大为 2。
4、数组扁平化***
数组扁平化就是将一个多维数组转换为一个一维数组,比如
[[1,2,3],3,[2,3]] =>[1,2,3,3,2,3]
实现基本方式
1、对数组的每一项进行遍历。
2、判断该项是否是数组。
3、如果该项不是数组则将其直接放进新数组。
4、是数组则回到 1,继续迭代。
5、当数组遍历完成,返回这个新数组。
5、垃圾回收和内存机制
垃圾回收:
浏览器的 js 具有自动垃圾回收机制,垃圾收集器会定期的找出那些不在继续使用的变量,然后释放内存。垃圾回收器会按照固定的时间间隔周期性的执行。
js 中最常用的垃圾回收方式就是标记清除。例如,在函数中声明一个变量,就将这个变量标记为“进入环境”。而当变量离开环境时,则将其标记为“离开环境”。
引用计数的含义是跟踪记录每个值被引用的次数。当这个值的引用次数变成 0 时,则说明没有办法再访问这个值了,就把它回收掉。
内存泄漏:
- 循环引用
一个很简单的例子:一个 DOM 对象被同一个多个 Javascript 对象引用,这个 DOM 对象可能会引发内存泄露。要想破坏循环引用,需要赋值为 null。 - 闭包
在闭包中引入闭包外部的变量时,当闭包结束时此对象无法被垃圾回收(GC)。 - DOM 泄露
当原有的 DOM 被移除时,子节点引用没有被移除则无法回收 - Times 计时器泄露
6. 原生 Ajax 的创建过程 ***
1.创建 xhr 核心对象
var xhr=new XMLHttpRequest();
2.调用 open 准备发送
(参数一:请求方式
参数二: 请求地址
参数三:true 异步,false 同步
xhr.open('post','http://www.baidu.com/api/search',true)
)
3.如果是 post 请求,必须设置请求头。
4.调用 send 发送请求 (有参数就写在括号里,)
xhr.send()
- 可以用 onload 事件 触发请求成功的操作
或者也可以用
(监听异步回调 onreadystatechange
判断 readyState 为 4 表示请求完成
判断 status 状态码 为 200 表示接口请求成功
responeseText 为相应数据。字符串类型。)
备注:如果是 post 请求,想要传 json 格式参数。
设置请求头的时候设置为 json 格式
1.xhr.setRequestHeader('Content-Type', 'application/json')
open 发送数据
2.xhr.open({_id:xxx,user:xxxx,age:xxxx})
7.Jsonp 的原理 ****
JSONP 原理:
ajax 请求受同源策略影响,不允许进行请求,我们利用 script 标签的 src 属性不受同源策略的约束,利用这个特性 jsonp 需要以下步骤:
- 动态创建<script></script>(document.createElement('script'))
- 设置 src 属性,(src 中要包含参数 callback=fn)进行跨域请求
- 将 <script></script>添加到页面中执行 (body.appendChild('script'))
- 页面要提前定义好 callback。
- 后端会返回回调函数执行并包裹参数 callback(data)
备注:
服务端不再返回 JSON 格式的数据,而是返回回调函数包裹数据(fn({name:'tom',age:18}),在 src 中进行了调用,这样实现了跨域。
8.存储 *
本地存储分为 cookie、localStorage、sessionStorage,
Cookie
Cookie 设计初衷是用来和服务器通讯,而不是本地存储,他只是被‘借用’到本地存储。
Cookie 有一些缺点:存储空间小,最大 4k、用的时候比较麻烦
localStorage、sessionStorage
在 HTML5 中,新加入了一个 localStorage/sessionStorage 特性,这个特性主要是用来作为本地存储来使用的,解决了 cookie 存储空间不足的问题(cookie 中每条 cookie 的存储空间为 4k),localStorage 中一般浏览器支持的是 5M 大小。
优点:HTML5 专门为存储而设计,最大可存 5M、API 简单易用 setItem getItem、不会随着 http 请求被发送出去
localStorage、sessionStorage.cookie 不同点:
Cookie 可以设置过期时间 存储容量比较小 用起来没有方便的方法
localStorage 数据会永久存储,除非代码或手动删除
sessionStroage 数据只存在于当前会话,浏览器关闭则清空
一般用 localStorage 会更多一些
注意:localStorage 只支持 string 类型的存储。
9.宏任务和微任务 ( 也是同步异步的答案)
js 中的一个机制,就是遇到宏任务,先执行宏任务,将宏任务放入 eventqueue,然后在执行微任务。
宏任务和微任务都包含一些事件
宏任务:setTimeout,setInterval,Ajax,DOM 事件
微任务:Promise async/await
js 是单线程的,只能做一件事情,如果碰到异步任务就会把异步任务放在任务队列里等待执行,等到同步任务执行完成了,而且异步任务准备好了就会被放进主线程等待依次执行。异步的特点不会阻塞后面代码的执行。也就是请求处理过程中,你不能闲着,会产生异步的请求。回头再处理,然后继续执行下面的请求。
异步和单线程是相辅相成的,js 是一门单线程脚本语言,所以需要异步来辅助
10.dom 操作 (不必要全背 挑几个背)
DOM 是网页中用来表示文档中对象的标准模型,他是由节点和对象组成的结构集合。在浏览器解析 HTML 标签时,会构建一个 DOM 树结构。
由此呢 js 也提供了一些 dom 的操作
一、dom 元素获取
1.document.getElementById(id 的值) 通过 id 来获取元素的对象,返回值是一个对象
2.document.getElementsByName(name) 通过 name 属性来获取对象的,返回值是一个数组,与 getElementById()方法类似,但他是查询的 name 元素,而不是 id 属性
3.document.getElementsByTagName() 通过标签来获取元素的对象, 返回值是一个数组
4.document.getElementsByClassName() 通过 class 类名来获取的对象,返回值是一个数组
5.document.querySelector() css 选择器,返回与该模式匹配的第一个元素,结果为一个元素;如果没找到匹配的元素,则返回 null
6.document.querySelectorAll() css 选择器,返回与该模式匹配的所有元素,结果为一个类数组二、dom 创建
二、dom 操作
- 创建:新的标签(元素节点) = document.createElement("标签名")
- 删除:父节点.removeChild(子节点);
- 插入:insertBefore(新插入的节点,参照物节点) 往某个节点的前面插入一个新的节点
- 追加:appendChild(新的节点的名) 当前对象追加一个子节点