js知识点汇总
节流防抖
## 防抖的意思就是短时间内大量触发同一事件，只执行一次
## 防抖示例代码
function debounce(fn, delay) {
let timer = null; //借助闭包，可以保存变量
return function() {
if(timer) {
clearTimeOut(timer);
}
timer = setTimeOut(fn, delay)
}
}
## 节流的意思就是短时间内大量触发同一事件，在函数执行一次之后，该函数在指定时间期限之内不再工作，直至过了这段时间才重新生效
## 节流示例代码
function throttle(fn, delay) {
let valid = true;
return function() {
if(!valid) return false;
valid = false;
setTimeOut(() => {
fn();
valid = true;
}, delay);
}
}js数据类型
基本数据类型：Undefined, Null, Number, String, Boolean
引用数据类型：对象，数组和函数
两者的区别是存储位置不同：基本数据类型存放在栈中，引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始位置。js有哪些内置对象
1. 值属性：Infinity, NaN, undefined, null字面量
2. 函数属性：eval(), parseFloat(), parseInt()...
3. 基本对象：Object, Function, Boolean, Error...
4. 数字和日期对象：Number, Math, Date
5. 字符串：String, RegExp
6. 可索引的集合对象：Array
7. 使用键的集合对象：Map, Set, WeakMap, WeakSet
...
js三大对象：本地对象，内置对象，宿主对象
本地对象：需要通过new来创建所需的实例对象（Object, Array, Date, RegExp, Function, Boolean等）
内置对象：无需实例化，内置对象是本地对象的子集（Global, Math, JSON）
宿主对象：所有的DOM和BOM对象都属于宿主对象（Window, Document）
Object类型
属性：constructor, prototype
实例方法：toString(), toLocaleString(), valueOf()
静态方法：
Object.assign(target, ...sources)
把一个或多个原对象可枚举，自有属性值复制到目标对象中，返回值为目标对象。
Object.create(proto [,propertiesObject])
创建一个对象，其原型为prototype，同时可添加多个属性。
Object.defineProperty(obj, prop, descriptor)
在一个对象上定义一个新属性或修改一个现有属性，并返回该对象。
Object.defineProperties(obj, props)
Object.seal(obj)/Object.isSealed(obj)
密封对象，防止其修改现有属性的配置特性
Object.freeze(obj)/Object.isFrozen(obj)
完全冻结对象，在seal的基础上，属性值也不可以修改
getOwnPropertyDescriptor(obj, prop)
获取目标对象上某自有属性的配置特性
Object.getOwnPropertyNames(obj)
获取目标对象上的全部自有属性名组成的数组
Object.getPrototypeOf(obj)
获取指定对象的原型
Object.setPrototypeOf(obj, proto)
设置目标对象的原型为另一个对象或null，返回该目标对象
Object.keys(obj)
获取目标对象上所有可枚举属性组成的数组
Object.preventExtensions(obj)/Object.isExtensible(obj)
使某一对象不可扩展，也就是不能为其添加新属性
Array
Array对象属性
1. length
2. constructor
3. prototype
Array对象方法
1. concat() 用于连接两个或多个数组，不改变现有的数组
2. join() 把数组中所有元素放入一个字符串，元素通过制定分隔符进行分割
3. push() 向数组的末尾添加一个或多个元素，并返回新的数组长度
4. pop() 删除数组的最后一个元素，并返回被删除的这个元素
5. shift() 把数组的第一个元素从其中删除，并返回被移除的这个元素
6. unshift() 向数组的开头添加一个或更多的元素，并返回新的数组长度
7. reverse() 用于颠倒数组中元素的顺序
8. sort() 排序
9. slice(start, [,end]) 截取
10. splice(index,howmany [,item1,item2...] 删除从index开始的hownamy个元素，并用可选参数列表中声明的一个或多个值来替换那些被删除的元素。
map()
filter()
some()
every()
forEach()
reduce()
Date类型
FullYear, Month, Date, Day, Hours, Minutes, Seconds, Milliseconds，每个日期分量都有一个get和set方法
RegExp类型
对象属性：global(g), ignoreCase(i), lastIndex(规定下次匹配的起始位置)
对象方法：
compile() 用于在脚本执行过程中的正则表达式的匹配
exec() 用于检索字符串中的正则表达式的匹配
test() 用于检测一个字符串是否匹配某个模式
正则表达式的String对象的方法有：search(), match(), replace()和split()
Function类型
对象属性
1. arguments
arguments.length: 获取函数实参的个数
arguments.callee: 获取函数对象本身的引用
arguments.callee.length: 获取函数形参的个数
对象方法 toString() 将函数体转换成对应的字符串
Boolean类型
常用方法： toString(), valueOf()
Number类型
常用方法：toString(), toLocaleString(), valueOf()
String类型
对象属性：length
对象方法：
charAt() 返回指定位置的字符
charCodeAt() 返回在指定的位置的字符的Unicode编码
indexOf 检索字符串，返回指定字符串在字符串中首次出现的位置
lastIndexOf() 从后向前索引字符串，返回指定字符串在字符串中首次出现的位置
match() 返回指定位置的字符
replace()
search()
toLowerCase()&toUpperCase()
concat()
split()
slice() 参数1，截取的起始位置，必选；参数2，截取的结束位置，可选
substr() 参数1，截取的起始位置，必选；参数2，截取的字符串长度，可选
substring() 参数1，截取的起始位置，必选；参数2，截取的结束位置，可选；与slice和substr的不同之处是substring()不接受负的参数
Global对象（全局对象）
属性：Infinity, NaN, Undefined,
方法：
encodeURI & encodeURIComponent 后者编码的字符范围大
decodeURI & decodeURIComponent
parseInt(string, radix)
parseFloat()
isFinite(number)
isNaN(number)
Number(object) 把对象的值转换成数字
String(object) 把对象的值转换成字符串
Math对象
常用方法：
Math.abs() 取绝对值
Math.ceil() 向上取整
Math.floor() 向下取整
Math.round() 四舍五入取整
Math.random() 生成0-1之间的随机数
Math.max(x,y) 取x,y中较大的那个
Math.min(x,y)
JSON对象
对象方法：
JSON.parse() 将字符串反序列化成对象
JSON.stringify() 将一个对象解析成JSON字符串数组操作
新建数组
数组内可以存放任意类型的数据
1. let arr = new Array(); //先创建数组对象再赋值
2. let arr = new Array(123, "string", true); //直接实例化创建
3. let arr = [123, "string", true]; //推荐增删改查
栈方法 push & pop 增删数组元素(从尾部)
let push1 = arr.push(456, "hi"); //返回更新后的数组长度
let pop1 = arr.pop(); //弹出尾部元素，并返回弹出的元素队列 shift & unshift 方法增删数组元素(从头部)
let unshift1 = arr.unshift(111, "abc"); //返回更新后的数组长度
let shift1 = arr.shift(); //返回弹出元素splice 增删数组元素
splice(arg1, arg2, arg3, …)第一个参数定义了新添加元素的位置，第二个参数定义应删除多少元素，其余参数定义要添加的元素，并返回一个包含已删除项的数组concat 合并数组
let concat1 = temp1.concat(temp2, temp3);
slice 裁剪数组
slice(arg1, arg2) 返回一个新数组，第一个参数为元素选取开始位置，第二个参数为元素选取结束位置查找定位
查数组中的最大值和最小值
Math.max.apply(null, arr) 来获取数组中的最大值。
Math.min.apply(null, arr) 来获取数组中的最小值。查找索引
indexOf(arg1, arg2)方法在数组中搜索元素值并返回其位置。arg1 为搜索元素，arg2 可选从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到结尾。
lastIndexOf(arg1,arg2) 与 indexOf() 类似，但是从数组结尾开始搜索。arg2 可选从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到开头。
findIndex() 方法返回通过测试函数的第一个数组元素的索引。
let temp = [1,2,3,4,5,4,3,2];
let pos1 = temp.indexOf(4); //第一次出现4的位置
console.log(pos1); //3
let pos2 = temp.lastIndexOf(4); //最后一次出现4的位置
console.log(pos2); //5
let temp = [1,35,67,8];
//返回第一个大于10的元素索引
let findIndex1 = temp.findIndex(function(value){
return value > 10;
});
console.log(findIndex1); //1查找值
find(function(arg1,arg2,arg3)) 方法返回通过测试函数的第一个数组元素的值。arg1 为数组元素值， arg2 为数组元素索引，arg3 为数组本身。
let temp = [1,35,67,8];
// 返回第一个大于10的值
let find1 = temp.find(function(value){
return value > 10;
});
console.log(find1);//35数组转换
toString 数组转字符串（toString()方法把每个元素转换为字符串，然后以逗号连接输出显示）
let toString1 = arr.toString();
join 数组转字符串 (可以指定分隔符，默认使用逗号作为分隔符)
let join = arr.join('*');
split 字符串转数组(split(arg1,arg2),第一个参数为分隔符，指定从哪儿进行分隔的标记；第二个参数指定要返回数组的长度)
let split =temp.split("-", 2);
对象转数组
let obj = {key1: "value1", key2: "value2"}
// 对象的键组成数组
let trans1 = Object.keys(temp); //["key1", "key2"]
// 对象的值组成数组
let trans2 = Object.values(temp); //["value1", "value2"]
// 键值对组成的数组
let trans3 = Object.entries(temp); //[["key1", "value1"], ["key2", "value2"]]数组转对象
let temp = ["a","b"];
let trans1 = {...temp}; //{0: "a", 1: "b"}
let trans2 = Object.assign({}, temp); //{0: "a", 1: "b"}数组排序
//字符串可以直接进行排序
arr.sort();
//数字排序
// sort比值函数修正：降序
let temp = [40, 100, 1, 5, 25, 10];
temp.sort(function(a, b){
return b-a
});
// sort比值函数修正：升序
let temp = [40, 100, 1, 5, 25, 10];
temp.sort(function(a, b){
return a-b;
});reverse 数组反转
temp.reverse();
数组迭代
temp.forEach(function(value, index, array){});
temp.map(function(value, index, array){});
filter(function(arg1,arg2,arg3){})方法创建一个包含通过指定条件的数组元素的新数组, arg1 为数组元素值， arg2 为数组元素索引，arg3 为数组本身，不会更改源数组。
every(function(arg1,arg2,arg3){})方法测试数组的所有元素是否通过了置顶条件。arg1 为数组元素值， arg2 为数组元素索引，arg3 为数组本身。不会更改源数组。
some(function(arg1,arg2,arg3){})方法测试数组中是否有元素通过了指定条件的测试。不会更改源数组。
reduce(function(arg1,arg2,arg3,arg4){})接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。arg1 上一次调用回调返回的值，或者是提供的初始值（initialValue）,arg2 为数组元素值， arg3 为数组元素索引，arg4 为数组本身。不会更改源数组。
//普遍for循环
for(let i=0,len=temp.length;i<len;i++) {}
for(let i in temp){}
for(let i of temp){}检测类型
1. temp1 instanceof Array
2. Array.isArray(temp1)
3 .Object.prototype.toString.call(temp1)洗牌算法
let temp = [1,3,5,6,7,2,4];
temp.sort(() => {
return Math.random() - 0.5;
})数组去重
// es6的set方法
let unique1 = Array.from(new Set(temp));
// 遍历数组
for(let i=0; i<temp.length;i++){
if(newArr.indexOf(temp[i]) === -1){
newArr.push(temp[i]);
}
}数组扁平化
对于[1, [1,2], [1,2,3]]这样多层嵌套的数组，我们如何将其扁平化为[1, 1, 2, 1, 2, 3]这样的一维数组呢：
1.ES6的flat()
const arr = [1, [1,2], [1,2,3]]
arr.flat(Infinity) // [1, 1, 2, 1, 2, 3]
2.序列化后正则
const arr = [1, [1,2], [1,2,3]]
const string = `[${JSON.stringify(arr).replace(/\[|\]/g, '')}]`
JSON.parse(string)
3.递归
const arr = [1, [1,2], [1,2,3]]
function flat(arr){
let result = [];
for(const item of arr){
item instanceof Array ? result = result.concat(flat(item)) : result.push(item)
}
return result;
}
flat(arr);
4.reduce()递归
function flat(arr) {
return arr.reduce((prev, cur) => {
return prev.concat(cur instanceof Array ? flat(cur) : cur)
}, [])
}
flat(arr)
5.迭代+展开运算符
let arr = [1, [1,2], [1,2,3]]
while (arr.some(Array.isArray)) {
arr = [].concat(...arr);
}
console.log(arr) // [1, 1, 2, 1, 2, 3]