分类整理js数据结构常用的api

点

数组的常用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	–	–	–
项目总结	:–	–	–	–