参考博客
开始之前，理解递归
手写 浅拷贝
function shallow(target){
if(target instanceof Array){
return [...resObj]
}else{
return Object.assign({},target);
}
}
手写深拷贝
const _sampleDeepClone = target => {
// 补全代码
return JSON.parse(JSON.stringify(target))
}
无法处理处理循环引用的问题
完整写法
function DeepCopy(target, map = new Map()) {
//对于普通类型 直接返回即可
if(typeof target!=='object' || target===null){return target}
//主要处理的是引用类型
let result = Array.isArray(target)?[]:{};
if (map.has(target)) {
result = map.get(target);
} else {
map.set(target, result);
for (let key in target) {
if (target.hasOwnProperty(key)) {
if (typeof target[key] === "object") {
result[key] = DeepCopy(target[key], map);
} else {
result[key] = target[key];
}
}
}
}
return result;
}
手写new
当你使用 new Person() 来调用构造函数 Person 时，它会创建一个新的对象，并将该对象的原型设置为 Person.prototype。这个新对象可以通过 this 关键字在构造函数内部访问和设置属性。
function Person(name, age){
this.name=name;
this.age=age;
return{
abc:'abc'
}
//mynew中最后的判断就是为了防止这种情况：构造函数会返回值，而不会创建新的实例
}
function myNew(func, ...args) {
//接受不确定长度的参数放到args数组中
if (typeof func !== "function") {
return new TypeError("fn must be a function");
}
//把新对象的__proto__指向func.prototype
let obj = Object.create(func.prototype);
//构造函数内部的 this 值指向新创建的对象，从而在构造函数中正确地初始化新对象的属性和方法。
//apply会立即执行
//result接受执行结果
let result = func.apply(obj, args);
//如果构造函数有返回值，则返回这个返回值，没有的话返回新创建的对象
if (result && (typeof result === "object" || typeof result === "function")) {
return result;
} else {
return obj;
}
}
// const f1=new Person("xiaoming",22)
const f2= myNew(Person,"xiaoming",22)
console.log(f2);
手写instanceof
function myInstanceof(obj,target){
//obj是被判断的对象
//target是一个构造函数
if(typeof obj!=='object'|| typeof target !== 'function'){
return new TypeError("inputs must be object type!")
}
let objProto = obj.__proto__
while(objProto!==null){
//注意这里用的是 构造函数.prototype
if(objProto===target.prototype) return true
objProto = obj.__proto__
}
return false
}
console.log(myInstanceof([1,2],Array));
Object.create
Object.create(proto)返回一个新对象，新对象的原型是proto
【可以不看】proto应该填入一个对象，而不是一个构造函数。
如果你使用 Object.create(Person)，而不是 Object.create(Person.prototype)
person 对象的原型将直接设置为 Person 构造函数本身，而不是 Person 构造函数的原型。这意味着 person 对象将无法继承 Person.prototype 上的属性和方法。
这意味着 person 对象将继承 Function.prototype 上的属性和方法，而不是 Person.prototype 上的属性和方法。
function myOBJcreate(proto){
function f(){}
f.prototype = proto
return new f()
}
const obj1={
name:'alice',
age:11
}
const f1 = Object.create(obj1)
const f2 = myOBJcreate(obj1)
//不需要比较，因为f1 f2是两个不同的对象
手写 防抖
主要思路：定时器控制1s后触发，并且保证只有一个定时器会被触发（timer的作用）
其实就是用定时器，来控制，这个函数只能1s后触发。
let Inp = document.querySelector("input");
function getValue() {
console.log(`获取${Inp.value}`);
}
Inp.addEventListener("keyup", debounce(getValue, 1000));
//业务代码
function debounce(func, time) {
let timer = null;
return function () {
if (!timer) {
timer = setTimeout(() => {
func.apply(this, arguments);
timer = null;
}, time);
}
};
}
如果你想传参：
let Inp = document.querySelector("input");
function getValue(name) {
console.log(`${name}获取${Inp.value}`);
}
newfunc = debounce(getValue, 1000);
Inp.addEventListener("keyup", ()=>{
newfunc("xiaoming")
});
function debounce(func, time) {
let timer = null;
return function () {
if (!timer) {
timer = setTimeout(() => {
func.apply(this, arguments);
timer = null;
}, time);
}
};
}
节流防抖巧记！
下面是业务代码，只有一行不同。
可以先把防抖的写出来（防抖的更容易理解），然后吧func.apply移出timer即可。
即节流第一次触发就要执行。
function debounce(func, delay) {
let timer = null;
return function () {
if (!timer) {
timer = setTimeout(() => {
func.apply(this, arguments);
timer = null;
}, delay);
}
};
}
const throttle = (func, delay) => {
let timer;
return function () {
if (!timer) {
func.apply(this, arguments);
timer = setTimeout(() => {
timer = null;
}, delay);
}
};
};
手写 节流（另一种方式，了解）
主要思路：判断上次触发的时间和这次的时间
使用方法是这样的：
const throttledFunction = throttle(myFunction, 1000); // 设置节流时间为1秒
throttledFunction就是一个具有节流功能的函数。你可以调用它来代替原始的myFunction函数。
const throttle = (func, delay) => {
let timer;
return function () {
if (!timer) {
func.apply(this, arguments);
timer = setTimeout(() => {
timer = null;
}, delay);
}
};
};
function test(name){
this.name = name;
console.log(`name is ${name}`);
}
let newfunc = throttle(test,5000)
newfunc('xiaoming') //只会运行1个
newfunc('xiaoming')
手写call
函数科里化的实现
前置：reduce方法：
arr.reduce((accumulator, currentValue, currentIndex, array)=>{},初始值)
实现add函数：
function add(...args){
const sum = args.reduce((total,num)=>total+num,0);
//用curry判断还有没有剩余参数
function curry(...nextArgs){
//闭包，递归的终止条件
//如果没有剩余参数，输出结果
if(nextArgs.length===0){return sum;}
//如果有，则继续加
return add(sum,...nextArgs);
}
return curry;
}
console.log(add(1)(2)(3)()); // 输出: 6
console.log(add(1, 2, 3)(4)()); // 输出: 10
console.log(add(1)(2)(3)(4)(5)()); // 输出: 15
promise.all
要点：
- promise里面不需要return，而是需要resolve和reject
- 如果在Promise.all中的Promise数组中有一个或多个Promise被拒绝（即失败），Promise.all返回的新的Promise会立即被拒绝，并且会传递第一个被拒绝的Promise的错误原因。
思路：for循环遍历所有的promises数组，所有的都成功则resolve，有一个失败则立即reject
function myPromiseAll(promises) {
return new Promise((resolve, reject) => {
if (!Array.isArray(promises)) {
reject(new TypeError("参数必须是一个数组"));
}
let results = [];
if (promises.length === 0) {
resolve(results);
}
for (let promise of promises) {
promise
.then((res) => {
results[results.length] = res;
if (results.length === promises.length) {
return resolve(results);
}
})
.catch((error) => {
reject(error);
});
}
});
}
Promise.race
要点：
如果在 Promise.race 中的第一个 Promise 对象被拒绝（rejected），则整个 Promise.race 会立即拒绝（reject）并返回该拒绝的原因。后续的 Promise 对象不会再被执行。
function myPromiseRace(promises) {
return new Promise((resolve, reject) => {
if (!Array.isArray(promises)) {
reject(new TypeError("argus must be a array"));
}
for (let promise of promises) {
promise
.then((result) => {
resolve(result);
})
.catch((error) => {
reject(error);
});
}
});
}
数组扁平化
方法1：展开数组，层层剥开【推荐】
let arr = [1, [2, [3, 4, 5]]]
function flatten2(arr){
while(arr.some((item)=>Array.isArray(item))){
arr = [].concat(...arr)
}
return arr;
}
console.log(flatten2(arr));
方法2：判断当前项是否为数组 如果是数组递归调用 不是就push到新数组
function flatten(arr) {
let newArr=[];
for(let item of arr){
if(Array.isArray(item)){
newArr = newArr.concat(flatten(item))
}else{
newArr.push(item)
}
}
return newArr;
}
数组去重
两种方法
function only1(arr){
return arr.filter((value,index)=>{return arr.indexOf(value)===index})
}
其中，indexOf 方法会返回指定元素在数组中第一次出现的索引
function only(arr){
return [...new Set(arr)]
}
实现reduce
array.reduce(callbackfn: (previousValue，currentValue, currentIndex， array), initialValue )
Array.prototype.myReduce = function(callback, initialValue){
//判断参数是否正确
if(typeof callback !=='function'){return new TypeError("callback must be a function")}
let accumulator;
//检查有没有设置初始值
if(!initialValue){
if(this.length===0){return new TypeError("can't reduce a empty array")}
accumulator = this[0]
}else{
accumulator = initialValue
}
//循环调用callback
for(let i = initialValue?0:1;i<this.length;i++){
accumulator = callback(accumulator,this[i],i,this)
}
//返回结果值
return accumulator;
}
console.log([1,2,3].myReduce((pre,cur)=>{return pre+cur},0));
实现push
Array.prototype.myPush = function(){
for(let i=0;i<arguments.length;i++){
this[this.length]=arguments[i]
}
return this.length;
}
数组转树
测试数据：
let source = [
{
id: 1,
pid: 0,
name: 'body',
},
{
id: 2,
pid: 1,
name: 'title',
},
{
id: 3,
pid: 2,
name: 'div',
},
{
id: 4,
pid: 0,
name: 'html',
},
{
id: 5,
pid: 4,
name: 'div',
},
{
id: 6,
pid: 5,
name: 'span',
},
{
id: 7,
pid: 5,
name: 'img',
},
][
// 转为
({
id: 1,
pid: 0,
name: 'body',
children: [
{
id: 2,
pid: 1,
name: 'title',
children: [{ id: 3, pid: 2, name: 'div' }],
},
],
},
{
id: 4,
pid: 0,
name: 'html',
children: [
{
id: 5,
pid: 4,
name: 'div',
children: [{ id: 7, pid: 5, name: 'img' }],
},
],
})
]
普通版本：
function buildTree(arr, parentId) {
let result = [];
for (const item of arr) {
if (item.pid === parentId) {
item.children = buildTree(arr, item.id);
result.push(item);
}
}
return result;
}
可以防止循环引用的版本：
function buildTree(arr, pid = 0) {
const nodeMap = new Map();
const result = [];
arr.forEach((item) => nodeMap.set(item.id, { ...item, children: [] }));
for (const item of arr) {
if (item.pid === pid) {
const children = buildTree(arr, item.id);
nodeMap.get(item.id).children = children;
result.push(nodeMap.get(item.id));
}
}
return result;
}
树转数组
function TreeToArray(arr){
let result = []
for(let item of arr){
if(item.children){
result = result.concat(TreeToArray(item.children))
delete item.children
result.push(item)
}else{
result.push(item)
}
}
return result;
}
斐波那契数列的迭代和递归实现
function fiber(n) {
if (n >= 0) {
if (n == 0) return 0;
if (n == 1) return 1;
return fiber(n - 1) + fiber(n - 2);
}
}
function fiber2(n){
let F=[]
F[0]=0;
F[1]=1;
for(let i=2;i<=n;i++){
F[i]=F[i-1]+F[i-2]
}
console.log(F);
return F[n]
}
实现每隔一秒打印 1,2,3,4
注意那个时间一定要写对！！1000*i
for(let i=1;i<5;i++){
setTimeout(()=>{
console.log(i)
},1000*i)
}
使用 setTimeout 实现 setInterval
视频bilibili
这个问题的背景：
setInterval有时会失效，比如下面这个例子：
这样的话，每次调用这个回调之间的间隔就会超过1s，因为后面一个回调需要等待前面一个回调完成。
运行：
正常情况下：
不正常情况下：
//基础版
function newInterval(fn, delay) {
function inside(){
fn()
setTimeout(inside,delay);
}
inside();
}
上面的代码有个缺点就是第一个 inside();执行的fn不会被放入任务队列，而是放入了执行栈，这与setinerval的行为不符，为了更加模拟，可以这样修改：
function newInterval(func, delay){
function inside(){
func()
setTimeout(inside,delay)
}
setTimeout(inside,delay);
}
完整版：加上取消定时器的功能：
function newInterval(func,delay){
let timer;
function inside(){
func();
timer = setTimeout(inside,delay)
}
timer = setTimeout(inside,delay)
return{
cancel:function(){
clearTimeout(timer);
}
}
}
