点
数组的常用api
数组遍历api | 入参 | 出参 | 对原数组的影响 | 注意的点 |
---|---|---|---|---|
forEach | 1、 2 、 3、 4、 | 返回undefined; | 不影响 | 使用break不能中断循环; 使用return也不能返回到最外层 ![]() |
map | – | 返回一个新数组,新数组中的值为原数组调用函数处理之后的值; | 不影响 | 使用break报错,使用return不能跳出循环![]() 可以同fliter、reduce链式操作 |
filter | – | – | – | – |
some | – | boolean值 | – | return true时跳出循环 没写return trued的情况 ![]() |
every | – | boolean值 | – | return false时跳出循环![]() every不写return true时情况 ![]() |
reduce | 1、func 1>、total「初始值/计算结束后的返回值」 2>、current 3>、currentIdx「可选」 4>、arr「可选」 2、初始值 | total | – | 对数组正序操作 |
reduceRight | – | – | – | 对数组逆序操作 |
for in | – | – | – | 会输出原型中「prototype」可枚举的属性和方法,不想输入的话,可用hasOwnProperty过滤 1.index索引为字符串型数字,不能直接进行几何运算 2.遍历顺序有可能不是按照实际数组的内部顺序 |
for of | – | – | – | for in遍历的是数组的索引(即key), 而for of遍历的是数组元素值 |
for | – | – | – | – |
find | – | 返回的是第一个符合条件的值 | – | – |
findIndex | – | 返回的是第一个返回条件的值的索引值 | – | – |
map,reduce,filter链式使用的例子
// 获取type=cat「filter出指定类型」的age「map」,*7求和
function getAges(data) {
let sum = 0;
for (var i = 0; i < data.length; i++){
if (data[i].type === 'cat'){
let tempAge = data[i].age;
sum += (tempAge * 7);
}
}
return sum;
}
// getAges(data) = 84
// map.reduce,reduce链式调用
let ages = data
.filter((animal) => {
return animal.type === 'cat';
}).map((animal) => {
return animal.age * 7
}).reduce((sum, animal) => {
return sum + animal.age;
});
// ages = 84
// 方式2 纯函数????
let isDog = (animal) => {
return animal.type === 'cat';
}
let dogYears = (animal) => {
return animal.age * 7;
}
let sum = (sum, animal) => {
return sum + animal.age;
}
let ages = data
.filter(isDog)
.map(dogYears)
.reduce(sum);
// ages = 84
数组和字符串的转换 | 入参 | 出参 | 对原数组的影响 | 注意的点 |
---|---|---|---|---|
join() | :– | – | – | – |
toString() | :– | – | – | – |
toLocalString() | :– | – | – | – |
数组的尾部操作 | 入参 | 出参 | 对原数组的影响 | 注意的点 |
---|---|---|---|---|
push() | :– | – | :– | – |
pop() | :– | – | :– | – |
数组的首部操作 | 入参 | 出参 | 对原数组的影响 | 注意的点 |
---|---|---|---|---|
shift() | :– | – | :– | 翻译:是搬动 |
unshift() | :– | – | :– | – |
数组的重排序 | 入参 | 出参 | 对原数组的影响 | 注意的点 |
---|---|---|---|---|
reverse() | :– | – | :– | |
sort() | :– | – | :– | 如果返回值为正数,则交换两个参数的位置。 |
数组的连接 | 入参 | 出参 | 对原数组的影响 | 注意的点 |
---|---|---|---|---|
concat() | :– | 返回拼接好的数组 | 不影响 | – |
数组截取 | 入参 | 出参 | 对原数组的影响 | 注意的点 |
---|---|---|---|---|
slice() | :– | 返回截取的数组 | 不影响 | – |
数组插入 | 入参 | 出参 | 对原数组的影响 | 注意的点 |
---|---|---|---|---|
splice | 1、第几个位置开始 2、删除几个「可选,未指定的话,默认删除所有元素」 3、添加的数组「可选」 | – | 原数组为操作后的新数组 | – |
Array.from() | 1、类数组对象/可迭代对象 2、可选,数组中每个元素要调用的函数。 3、可选,映射函数(mapFunction)中的 this 对象。 | – | – |
数组索引 | 入参 | 出参 | 对原数组的影响 | 注意的点 |
---|---|---|---|---|
indexOf | :– | – | :– | – |
lastIndexOf | :– | – | :– | – |
find | :– | – | – | – |
findIndex | :– | – | – | – |
数组迭代 | 入参 | 出参 | 对原数组的影响 | 注意的点 |
---|---|---|---|---|
forEach | :– | – | :– | – |
map | :– | – | :– | – |
filter | :– | – | :– | – |
every | :– | – | :– | – |
some | :– | – | :– | – |
数组归并 | 入参 | 出参 | 对原数组的影响 | 注意的点 |
---|---|---|---|---|
reduce() | :– | – | :– | – |
reduceRight() | :– | – | :– | – |
数组的迭代器 | 入参 | 出参 | 对原数组的影响 | 注意的点 |
---|---|---|---|---|
arr.entries() | :– | – | – | – |
arr.keys() | :– | – | – | – |
arr.values() | :– | – | – | – |
数组的扩展运算符的应用 | 入参 | 出参 | 对原数组的影响 | 注意的点 |
---|---|---|---|---|
将数组转换为参数序列 | :– | – | :– | – |
复制数组 | :– | – | :– | – |
合并数组 | :– | – | :– | – |
扩展运算符与解构赋值结合起来,用于生成数组 | :– | – | :– | 如果将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错 |
使用Math函数获取数组中特定的值 | :– | – | :– | Math.min(…arr) |
将任何 Iterator 接口的对象转换为数组 | :– | – | :– | – |
es5 Array.prototype.slice.call(arguments) | ||||
es6 const args = […arguments]; |
调用 Iterator 接口的场合 | ||||
---|---|---|---|---|
对数组/set结构赋值 | let set = new Set().add(‘a’).add(‘b’).add(‘c’); let [x,y] = set; | |||
扩展运算符 | 只要某个数据结构部署了 Iterator 接口,就可以对它使用扩展运算符,将其转为数组。 | |||
yield* | 后面跟的是一个可遍历的结构 |
for…in循环读取键名「key」,
for…of循环读取键值「value」。数组的遍历器接口只返回具有数字索引的属性。
如果要通过for…of循环,获取数组的索引「键名」,可以借助数组实例的entries方法和keys方法
set的方法 | map的方法 | WeakMap | 返回值 | |
---|---|---|---|---|
1 | set.add() | map.set() | 其键必须是对象( null 除外),原始数据类型不能作为key值; 而且 WeakMap 的键名所指向的对象,不计入垃圾回收机制。 | ,然后返回整个Map结构;可链式调用 |
2 | map.get() | 对应的键值,如果找不到key,返回undefined | ||
3 | set.has() | map.has() | – | boolean |
4 | set.delete() | map.delete() | – | boolean |
5 | set.clear() | map.clear() | 通过创建一个空的WeakMap并替换原对象来实现清除 | 没有返回值 |
6 | set.size |
for…of间接操作对象 | ||||
---|---|---|---|---|
for (var key of Object.keys(someObject)) { console.log(key + ': ’ + someObject[key]); } | – | – | ||
function* entries(obj) { for (let key of Object.keys(obj)) { yield [key, obj[key]]; } } | entries(obj) | – | – |
类数组对象转为数组 | |
---|---|
Array.prototype.join.call(arrayLike, ‘&’); 「间接」 | name&age&sex |
Array.prototype.slice.call(arrayLike) | [“name”, “age”, “sex”] |
Array.prototype.map.call(arrayLike, function(item){ return item; }); | [“name”, “age”, “sex”] |
Array.prototype.splice.call(arrayLike, 0); | [“name”, “age”, “sex”] |
Array.from(arrayLike); | [“name”, “age”, “sex”] |
Array.prototype.concat.apply([], arrayLike) | [“name”, “age”, “sex”] |
解构 | [“name”, “age”, “sex”] |
非严格模式:
传入参数时,实参和 arguments 的值会共享,
当没有传入时,实参与 arguments 值不会共享
应用:
1、jQuery的extend
2、函数柯里化
3、递归
场景:
1、参数不定长
2、函数柯里化
3、递归调用
4、函数重载
字符串的方法
字符串的方法 | 入参 | 出参 | 对原数组的影响 | 描述 |
---|---|---|---|---|
parseInt( ’ ', ‘2’ ) | 1、要解析的字符串 2、基数;可选,未指定的话,根据1判断,'0x’开头,解析为16进制;’0’开头,解析为8进制/16进制;1-9开头,解析为10进制 | 返回的整数 | – | – |
存在性判定 | 入参 | 出参 | 对原数组的影响 | 描述 |
---|---|---|---|---|
indexOf() | :– | – | – | |
includes() | :– | 返回一个布尔值来告诉你是否存在 | – | – |
startsWith() | :– | 返回一个布尔值来告诉你是否存在 | – | – |
endsWith() | :– | 返回一个布尔值来告诉你是否存在 | – | – |
判断一个字符/字符串是否在某字符串中时 |
自动重复/自动补全 | 入参 | 出参 | 对原数组的影响 | 描述 |
---|---|---|---|---|
repeat() | 重复n次 1、(-1, ]小数,近0取整 2、负数/Infinity,报错 3、NaN等同0 4、字符串先转换为数字 | 新字符串 | – | – |
padStart() | 1、字符串最大长度 2、(可选)默认用空格,用来补全的字符串 | – | 如果源字符串长度>=参数1,则返回源字符串 | |
padEnd() | :– | – | 场景1、为数值补全指定位数, 2、提示字符串格式 |
正则方法 | 入参 | 出参 | 对原数组的影响 | 描述 |
---|---|---|---|---|
str.search() | 查找的字符串/正则 | 与查找匹配的起始位置 | – | 检索匹配到的子串,未找到,返回-1; 正则写法: 1、忽略大小写 /blue/i 2、全局查找**/blue/g** |
str.replace() | 1、子串/正则模式 2、新的子串或function 1」捕捉到的匹配内容, 2」捕捉到是组匹配(有多少个组匹配,就有多少个对应的参数), 3」捕捉到的内容在整个字符串中的位置 4」原字符串。 | 返回替换后的字符串 | – | 检索匹配到的子串,替换正则匹配到的子串 |
str.match() | 正则,其他类型会通过RegExp构造函数转换为正则 | ![]() | – | 检索执行的正则,如果不是正则,转换为正则;匹配不到返回null |
str.matchAll() | :– | – | – | – |
字符串截取 | 入参 | 出参 | 对原数组的影响 | 描述 |
---|---|---|---|---|
str.split() | :– | – | – | – |
str.slice() | 1from:如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取 2、to「可选」如果该参数为负数, 则它表示在原数组中的倒数第几个元素结束抽取 | – | – | 截取[from, to-1]范围的子串; |
str.substr() | 1、from 2、「可选」如果是负数,那么该参数声明从字符串的尾部开始算起的位置 | – | – | 因此它可以替代 substring() 和 slice() 来使用。 |
str.substring() | 1、from 2、to「可选」若省略,则默认截取到字符串的结尾 | – | 截取[from, to-1]范围的子串; | |
str.trim() | :– | – | – | – |
str.trimStart() | 无入参;别名trimLeft | 返回新字符串 | – | 消除字符串头/尾空格, tab 键、换行符 |
str.trimEnd() | 无入参;别名trimRight | – | – | – |
字符串连接 | 入参 | 出参 | 对原数组的影响 | 描述 |
---|---|---|---|---|
str.concat() | :– | – | – | – |
Number的方法
Number的方法 | 入参 | 出参 | 对原数组的影响 | 描述 |
---|---|---|---|---|
xx.toString() | :– | – | – | 把数字转换为字符串 |
对象的方法
对象的方法 | 入参 | 出参 | 对原数组的影响 | 描述 |
---|
dom的方法
dom节点的获取 | 入参 | 出参 | 对原数组的影响 | 描述 |
---|---|---|---|---|
document,getElementByID() | :– | – | – | – |
document,getElementsByTagName() | :– | – | – | 标签的集合 |
document,getElementsByClassName() | :– | – | – | class对应的标签的集合 |
document.querySelectorAll() | :– | – | – | – |
dom节点的创建 | 入参 | 出参 | 对原数组的影响 | 描述 |
---|---|---|---|---|
document.createElement() | – | – | – |
dom节点的删除 | 入参 | 出参 | 对原数组的影响 | 描述 |
---|---|---|---|---|
xx.removeChild() | :– | – | – | – |
修改DOM元素 | 入参 | 出参 | 对原数组的影响 | 描述 |
---|---|---|---|---|
xx.insertBefore() | :– | – | – | – |
正则相关方法
正则的方法 | 入参 | 出参 | 对原数组的影响 | 描述 |
---|
常见的正则表达式
setTimeout异步打印
for (var i = 1; i <= 5; i++) {
setTimeout(function timer() { //
console.log(i) // setTimeout异步,执行的时候,i已变为5
}, i * 1000)
}
for (var i = 1; i <= 5; i++) {
(function(j) {
setTimeout(function timer() {
console.log(j)
}, j * 1000) })(i) // 立即执行函数,
}
for (var i = 1; i <= 5; i++) {
setTimeout(function timer(j) {
console.log(j)
},i * 1000,i) // setTimeout第三个参数,这个参数会被当成 timer 函数的参数传
}
for (let i = 1; i <= 5; i++) { // let在循环中比较适合绑定块级作用域,这样就可以把声明的计数器变量限制在循环内部。
setTimeout(function timer() {
console.log(i)
}, i * 1000)
}
判断一个对象属某个类 | ||||
---|---|---|---|---|
obj instanceof Obj | :– | – | – | – |
obj.constructor === Obj的构造函数 | :– | – | – | – |
Object.prototype.totring.call() | 打印对象的[[Class]] 属性来进行判断 | – | – | – |
URL元字符 | ||||
---|---|---|---|---|
; | :– | – | – | – |
, | :– | – | – | – |
/ | :– | – | – | – |
? | :– | – | – | – |
: | :– | – | – | – |
@ | :– | – | – | – |
& | :– | – | – | – |
= | :– | – | – | – |
+ | :– | – | – | – |
$ | :– | – | – | – |
# | :– | – | – | – |
URL语义字符 | ||||
---|---|---|---|---|
a-z | :– | – | – | – |
A-Z | :– | – | – | – |
0-9 | :– | – | – | – |
- | 连词号 | – | – | – |
_ | :– | – | – | – |
. | :– | – | – | – |
! | :– | – | – | – |
~ | :– | – | – | – |
* | :– | – | – | – |
’ | 单引号 | – | – | – |
() | :– | – | – | – |
encodeURI不会对URL 元字符以及语义字符进行转码 | ||||
encodeURIComponent只用于转码URL组成部分,如URL中?后的一串 | ||||
元字符也会被转码 |
js脚本延迟加载方法 | ||||
---|---|---|---|---|
defer属性 | :– | – | – | – |
async属性 | :– | – | – | – |
动态创建dom方式 | 对文档的加载事件进行监听,当文档加载完成后再动态的创建 script 标签来引入 js 脚本。 | – | – | – |
使用setTimeout延迟js脚本 | :– | – | – | – |
js脚本放在文档底部 | :– | – | – | – |
延迟加载就是等页面加载完成之后再加载 JavaScript 文件。 js 延迟加载有助于提高页面加载速度。 |
var,let,const | var | let | const | |
---|---|---|---|---|
是否有块级作用域 | :– | – | – | – |
是否存在变量提升 | :– | – | – | – |
是否添加全局属性 | :– | – | – | – |
能否重复声明变量 | :– | – | – | – |
是否存在暂时性死区 | :– | – | – | – |
是否必须设置初始值 | :– | – | – | – |
能否改变指针指向 | :– | – | – | – |
HTTP 1.0 | HTTp 1.1 | HTTp 2.0 | HTTp 3.0 | |
---|---|---|---|---|
连接方面 | 非持久连接 | 持久连接 | 「多个http请求复用一个TCP,避免连接建立时延」 | |
资源请求方面 | :– | request hedaer增加range,返回请求资源的部分,状态码206 | – | – |
缓存方面 | If-Modified-Since、Expires | Etag、If-Unmodified-Since、If-Match、If-None-Match | – | – |
1.1新增了host字段 | :– | – | – | 在一台物理服务器上可以存在多个虚拟主机,并且它们共享一个IP地址;这样就可以将请求发往到同一台服务器上的不同网站。 |
新请求方法 | :– | PUT、HEAD、OPTIONS | – | – |
二进制协议 | 报文的头信息必须是文本 | 头信息/数据体都是二进制 | – | |
多路复用 | :– | – | 一个连接里,客户端和服务器都可以同时发送多个请求或回应 | – |
数据流 | :– | – | 无序导致需要标记数据流 ID | – |
头信息压缩 | :– | – | 头信息压缩机制 | – |
服务器推送 | :– | – | – | – |
HTTP | HTTPS |
---|---|
:– | 都是一种网络传输协议 |
需要CA证书,成本高 | |
超文本明文传输 | SSL协议加密传输 |
80端口号 | 443 |
无状态连接,简单 | 加密传输/身份认证 |
强缓存 | 协商缓存 |
---|---|
Expires、Cache-Control | Etag、If-None-Match Last-Modified、If-Modified-Since |
状态码 | 含义 | |
---|---|---|
1xx | :– | 接受的请求正在处理 |
2xx | :– | 请求处理完成 |
204 | No Content | 服务器无需向客户端发送信息 |
206 | Partial Content | 客户端进行了范围请求,而服务器端执行了这部分的 GET 请求。 |
3xx- | :– | 重定向,需要浏览器进行附加操作 |
301 | Moved Permanently | :– |
302 | Found | 临时重定向,搜索引擎和保存页签不会更新为新的URI 场景1、当我们在做活动时,登录到首页自动重定向,进入活动页面。 2、未登陆的用户访问用户中心重定向到登录页面。 3、访问404页面重新定向到首页 |
303 | See Other | :– |
304 | Not Modified | :– |
307 | Temporary Redirect | :– |
4xx | :– | 客户端错误状态码 |
:– | :– | :– |
400 | Bad Request | 请求的报文预发错误 |
401 | Unauthorized | :– |
403 | Forbidden | :– |
404 | Not Found | :– |
405 | Method Not Allowed | 客户端请求的方法虽然能被服务器识别,但是服务器禁止使用该方法 |
5xx- | Internal Server Error | 服务器错误状态码 |
:– | :– | :– |
500 | :– | 服务器端在执行请求时发生了错误 |
502 | :– | :– |
503 | :– | :– |
504 | :– | :– |
Map | Object | |
---|---|---|
:– | 默认不包含属性 | 原型链上的属性 |
:– | 可以是任意值,包括函数、对象或任意基本类型 | String 或是Symbol |
:–key 是有序的 | key 无序 | |
:– | size 属性获取键值对个数 | 手动计算 |
:– | Map 是 iterable 的以某种方式获取它的键然后才能迭代。 | |
:– | :– | :– |
对象继承方式
对象继承方式 | 缺点 | |
---|---|---|
原型链继承 | ![]() | |
借用构造函数继承 | ![]() | |
组合继承 | ![]() | 原型链实现对原型属性和方法的继承;借用构造函数实现对实例属性的继承 |
原型式继承 | ![]() | |
空对象但是有原型 | ||
寄生式继承 | ![]() | |
寄生组合式式继承 | ![]() | |
原型式继承 |
含义 | 用法 | 场景 | |
---|---|---|---|
防抖 | 事件被触发 n 秒后再执行回调,如果在这 n 秒内事件又被触发,则重新计时 | :– | 点击请求的事件「带着新数据重新请求」;超过指定间隔才会执行一次 |
节流 | 是指规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行, | 在 scroll 函数的事件监听上「不能停顿」;指定间隔只会执行一次 |
知识点类型 | 数量 | |||
---|---|---|---|---|
html | 20 | – | – | – |
css | 20 | – | – | – |
javascript | 90 | – | – | – |
react | 60 | – | – | – |
计算机网络 | 53 | – | – | – |
浏览器原理 | 54 | – | – | – |
性能优化 | 22 | – | – | – |
手写代码 | 51 | – | – | – |
输出结果 | 63 | – | – | – |
total | 413 | – | – | – |
leetcode简单 | 2573 | – | – | – |
leetcode中等 | 1368 | – | – | – |
项目总结 | :– | – | – | – |