## 防抖函数(debounce)
连续不断操作，只执行最后一次操作，称之为防抖，具体示例如下:
```
function debounce(callback){
	var timer = null;
	return function(event){
		if(timer){
			clearTimeout(timer);
				timer = setTimeout(function(){
				callback(event);
				clearTimeout(timer);
			},200);
		}else{
			timer = setTimeout(function(){
				callback(event);
				clearTimeout(timer);
			},200);
		}
	}
}
```
如上述代码，假如每次操作间隔都是在200毫秒以内，则会清楚原有的定时器，重新开启一个200毫秒的定时执行，直到有两次操作的间隔大于200毫秒才会执行回调方法。

**典型应用场景：input输入框搜索查询功能，可以使用该方法减少请求次数**

## 节流函数(throttle)
在一定时间间隔内，连续性操作只执行一次，称之为节流，具体示例如下:
```
function throttle(callback){
    var timer = null;
    return function(e){
        if(timer){
            return;
        }
        timer = setTimeout(function(){
            callback(e);
            clearTimeout(timer);
            timer = null;
        },300)

    }
}
```
如上述代码所示，当执行连续性操作的时间间隔小于300毫秒时，并不会都执行，只有在上一个定时器执行回调完成以后，才能开启下一个定时任务，实现函数节流；

**典型应用场景：监听页面scroll事件的时候，可以用该方法减少scroll过程中的各种计算**

**上述的代码只是最为简单的案例，小伙伴可根据自己项目的实际情况去扩展！**

















JS防抖和节流

```

var a = [55,22,2,3,29,3,11,23,68,557,44,33,788,45];

//冒泡排序
// for(let i = 0;i<a.length;i++){
//     for(let j = 0;j<a.length-i;j++){
//         if(a[j]>a[j+1]){
//             var t = a[j];
//             a[j]=a[j+1];
//             a[j+1] = t;
//         }
//     }
// }

//选择排序
// for(let i = 0;i<a.length;i++){
//     let MinIndex = i;
//     let t = a[i];

//     for(let j = i;j<a.length;j++){
//         if(a[MinIndex]>a[j]){
//             MinIndex = j;
//         }
//     }
    
//     a[i] = a[MinIndex];
//     a[MinIndex] = t;
// }

//插入排序
var b = [];
b[0] = a[0];
for(let i = 1;i<a.length;i++){
    let length = b.length;
    while(length>0){
        if(a[i]<b[length-1]){
            b[length]=b[length-1];
            length--
            if(length===0){
                b[0]=a[i];
            }
        }else{
            b[length] = a[i];
            break;
        }
    }
}

console.log(b);

//快速排序，找一个基准数，比他小的放左边，比他大的放右边，一直递归到1
function quickSort(arr){
    if(arr.length<=1) return arr;
    var baseIndex = Math.floor(arr.length/2);
    var baseNum = arr.splice(baseIndex,1)[0];
    var left = [];
    var right = [];
    arr.forEach((num)=>{
        if(num<baseNum){
            left.push(num) 
        }else{
            right.push(num) 
        }
    });

    return [...quickSort(left),baseNum,...quickSort(right)]
}

console.log(quickSort(a))

//归并排序
function guibinSort(arr){
    if(arr.length<=1) return arr;

    var middleIndex = Math.ceil(arr.length/2);
    var left = arr.splice(0,middleIndex);
    var right = arr;
    
    return mergeSort(guibinSort(left),guibinSort(right));
}

function mergeSort(left,right){
    var result = [];
    var leftIndex = 0;
    var rightIndex = 0;
    
    while(leftIndex<left.length||rightIndex<right.length){
        if(leftIndex<left.length&&rightIndex<right.length){
            
            if(left[leftIndex]<right[rightIndex]){
                result.push(left[leftIndex]);
                leftIndex++;
            }else{
                result.push(right[rightIndex]);
                rightIndex++; 
            }
        }else if(leftIndex<left.length){
            result.push(left[leftIndex]);
            leftIndex++;
        }else if(rightIndex<right.length){
            result.push(right[rightIndex]);
            rightIndex++; 
        }
    }
    return result;
}

console.log(guibinSort(a));
```

简单算法

## 什么情况下会出现循环引用？
我个人的理解是，如果一个对象的值等于父级(祖父级，曾祖父级....),则说明是循环引用了。来看下面一个例子：

![](https://chenze-bloc.oss-cn-hangzhou.aliyuncs.com/articleImage/123123123123_1567408715748.png)

用上面代码来解释我定义的循环引用：`a.info`的值是`a`,而`a`恰好是`a.info`的父级，所以这里就是循环引用了。

## 如何处理循环引用对象呢？
首先，循环引用对象本来没有什么问题，序列化的时候才会发生问题，比如调用`JSON.stringify()`对该类对象进行序列化，就会报错: `Converting circular structure to JSON.`,而序列化需求很常见，比如发起一个ajax请求提交一个对象就需要对对象进行序列化。
针对上面这样的问题，可以通过`JSON`扩展包的`var c = JSON.decycle(a)`和`var a = JSON.retrocycle(c)`来处理。这里就不做过多的解释了。
#### 重点来了
手动写一个方法来判断对象是否存在循环引用,来看下边一段代码：
```
function cycle(obj, parent) {
    //表示调用的父级数组
    var parentArr = parent || [obj];
    for (var i in obj) {
        if (typeof obj[i] === "object") {
            //判断是否有循环引用
            parentArr.forEach((pObj) => {
                if (pObj === obj[i]) {
                    obj[i] = "[cycle]"
                }
            });
            cycle(obj[i], [...parentArr, obj[i]])
        }
    }
    return obj;
}
```
上面函数中，`parentArr`为取值的所有父级的一个集合;
循环对象，如果对象是一个`object`类型的，先循环数组`parentArr`,判断该值是否是`parentArr`中的引用,如果是,则存在循环引用,并把循环引用值设置成特殊标识`"[cycle]"`,接着再进行递归调用，并且把对应取值链上的父级集合传递下去。

测试：
```
var a = {
    b:{
        c:{}
    }
};

a.b.c.d = a;

console.log(cycle(a));
```
结果如下:
![](https://chenze-bloc.oss-cn-hangzhou.aliyuncs.com/articleImage/2222222222222_1567414255736.png)
可以看到，a.b.c.d原本是一个循环引用的a值，经过处理以后，变成了循环引用的标识；
#### 改进：假如说对象中存在数组的时候，如何处理呢？
对于这个问题，只要在原有的基础上再加一层数组判断就可以了，代码如下：
```
if(Array.isArray(obj[i])){
	obj[i].forEach((item,index)=>{
		//判断是否有循环引用
		parentArr.forEach((pObj) => {
			if (pObj === item) {
				item = "[cycle]"
			}
		});
		obj[i][index] = cycle(item, [...parentArr, item])
	});
}
```
加上这段代码后完整的代码就变成了如下代码：
```
function cycle(obj, parent) {
    //表示调用的父级数组
    var parentArr = parent || [obj];
    for (var i in obj) {
        if(Array.isArray(obj[i])){
            obj[i].forEach((item,index)=>{
                //判断是否有循环引用
                parentArr.forEach((pObj) => {
                    if (pObj === item) {
                        item = "[cycle]"
                    }
                });
                obj[i][index] = cycle(item, [...parentArr, item])
            });
        }else if (typeof obj[i] === "object") {

            //判断是否有循环引用
            parentArr.forEach((pObj) => {
                if (pObj === obj[i]) {
                    obj[i] = "[cycle]"
                }
            });
            cycle(obj[i], [...parentArr, obj[i]])
        }
    }
    return obj;
}
```
**测试：**
```
var a = {
    name:"西瓜"
};

a.f = [{
    t:a
},"a","b",a]
```
**结果如下：**

![](https://chenze-bloc.oss-cn-hangzhou.aliyuncs.com/articleImage/111_1575528912007.png)

可以看到，数组中引用的a都变成了循环引用的标记；

内容就这么多，有错误希望大佬可以多多指点，交流才能进步！




如何判断JS对象中是否存在循环引用

### 为什么要用深拷贝？
小伙伴们都知道，js中的对象属于引用类型，单纯的用等号赋值，其实复制的是引用地址，真正指向的还是堆内存中同一个值，当一个值的内部属性变化时，另一个值由于指向的是堆内存中的同一个值，所以也会发生变化。这往往是我们不想要的结果，我也在项目中因为这个吃过大亏，所以一起来讨论讨论吧！

### 如何手动实现一个深拷贝？
#### 方法1：JSON.stringify ，JSON.parse
通过`JSON.stringify`,`JSON.parse`可以实现深拷贝，但是有个坑得注意下，在序列化JavaScript对象时，所有函数和原型成员会被有意忽略。看下面这个案例：
```
var a = {
    name:"西瓜",
    run:function(){
        console.log(123)
    }
}
console.log(JSON.parse(JSON.stringify(a)));
```
![](https://chenze-bloc.oss-cn-hangzhou.aliyuncs.com/articleImage/11111_1565247204960.png)

可以看出，在拷贝的过程中,对象中的`run`方法不见了。

#### 方法2：递归
话不多说，直接上代码：
```
//主入口函数
function deepCopy(obj){
    if(typeof obj === "object"){
        //是一个数组
        if(Array.isArray(obj)){
            return copyArray(obj);
        }else{
            //是一个对象
            return copyObj(obj);
        }
    }
}

//如果是对象类型的，执行该函数
function copyObj(obj){
    var newObj = {};
    for(let key in obj){
        if(typeof obj[key] === "object"){
			//obj[key]还是属于object类型的话，递归执行deepCopy
            newObj[key] = deepCopy(obj[key]);
        }else{
            newObj[key] = obj[key];
        }
    }
    return newObj;
}

//如果是数组类型类型的，执行该函数
function copyArray(array){
    var newArr = [];
    array.forEach((item,index)=>{
		//item还是属于object类型的话，递归执行deepCopy
        if(typeof item === "object"){
            newArr.push(deepCopy(item));
        }else{
            newArr.push(item);
        }
    });
    return newArr;
}
//测试
var testObj = [{
        name:"西瓜",
        info:{
            age:10,
            adress:"杭州"
        }
    },
    "哈哈哈哈哈",
    {
        run:function(){
            console.log(123)
        }
    }
];

var deepObj = deepCopy(testObj);

testObj[1] = "我改变了数组里面的一个值";

console.log(testObj);

console.log(deepObj);
```
运行结果如下：

![](https://chenze-bloc.oss-cn-hangzhou.aliyuncs.com/articleImage/22222_1565247847868.png)

结果中看到，`deepObj`是使用深拷贝函数后得到的结果，在这之后去修改`testObj`的值,`deepObj`的值并没有发生改变。说明深拷贝成功啦！
###总结
在实现深拷贝的过程中，也可以复习一下递归的知识，还是挺好的！小伙伴们也去试试吧！







手动实现一个深拷贝

### call的作用
一句话：改变调用方法的this指向，示例如下：
```
function a(){
	console.log(this);
}
a();
a.call({name:"西瓜"});
```
![](https://chenze-bloc.oss-cn-hangzhou.aliyuncs.com/articleImage/222_1564055142780.png)

可以看到，第一次`this`指向了`window`，第二次`this`指向了传入的对象；

### 那么在执行call方法的时候，内部做了什么处理呢？
先来看一个东西，或许就能明白
```
var a = {
	name:"西瓜",
	run:function(){
		console.log(this);
		console.log(this.name);
	}
}
a.run();
```
![](https://chenze-bloc.oss-cn-hangzhou.aliyuncs.com/articleImage/11111333_1564055577073.png)

上面这段代码，相信小伙伴都能看懂，其实，call执行的时候，也是做了这样的处理；。

### 手动来实现一个call
```
Function.prototype.MyCall = function(obj){
	var newObj = obj || window;
	newObj.fn = this;
	var params = [...arguments].slice(1);
	var result = newObj.fn(...params);
	delete newObj.fn;
	return result;
}
```
就上面的这段代码，就实现了一个call的功能，来看下这段代码都做了哪些事情

1. 定义一个新的对象，若传入的`obj`存在，则新对象等于`obj`,若`obj`不存在，则等于`window`；
2. 把this挂在到当前定义的新对象上(this即为调用的函数)；
3. 第4行代码处理了函数的传参；
4. 然后执行创建的新对象的`fn`函数(即为要调用的函数)；
5. 最后在执行了以后，把这个挂载的`fn`删除；

来验证一下是否正确
```
function test(){
	console.log(this);
}
test();
test.MyCall({name:"西瓜"});
```
结果如下图

![](https://chenze-bloc.oss-cn-hangzhou.aliyuncs.com/articleImage/11111_1564110870082.png)
可以看到，结果和使用call的时候输出的一致。这样就自己手动实现了一个call方法；

#### 接下来，讲一个我在学习call的时候，网上经常讲到的一个案例，我们一起来看一下：
```
function f1(a){
	console.log(1);
	console.log(this);
}
function f2(){
	console.log(2);
	console.log(this);
}

f1.call(f2);
f1.call.call(f2);
```
想一下，这段代码打印出来的会是一个什么结果呢？
![](https://chenze-bloc.oss-cn-hangzhou.aliyuncs.com/articleImage/2222_1564111291153.png)
`f1.call(f2)`的打印结果，相信大家都能理解，这里就不解释了；重点来讲一下`f1.call.call(f2)`;
首先，我们用刚刚自己实现的call方法来试试，会不会出现同样的结果；
```
f1.MyCall(f2);
f1.MyCall.MyCall(f2);
```
结果当然是一样的啦!如下：
![](https://chenze-bloc.oss-cn-hangzhou.aliyuncs.com/articleImage/2222_1564111291153.png)
为什么会这样呢，来谈谈我对这个结果的理解吧（可能其他小伙伴有更好的理解）！
把上面自己实现的call方法复制下来
```
Function.prototype.MyCall = function(obj){
	var newObj = obj || window;
	newObj.fn = this;
	var params = [...arguments].slice(1);
	var result = newObj.fn(...params);
	delete newObj.fn;
	return result;
}
```
当我们执行`f1.MyCall.MyCall(f2)`的时候，上面这个`MyCall`方法中的`this`和`newObj`指的分别是什么？
我的理解是`this`为`f1.MyCall`，即为`Function.prototype.MyCall`，`newObj`为`f2`方法；
所当`f1.MyCall.MyCall(f2)`执行的时候，结果就变了以下结果：
```
var newObj = f2;
f2.fn = Function.prototype.MyCall;
```
接下来`MyCall`的第5句是不是会执行`newObj.fn`？
其实就是执行`f2.MyCall()`这个结果大家应该都知道了吧；

如果说上面这个理解了，可以想想下面几个会打印出什么内容：
```
f1.call.call.call(f2)
f1.call.call.call.call(f2)
f1.call.call.call.call.call(f2)
```
其实都是一样的哈！

### 结尾
除了`call`，还有两个类似的方法`apply,bind`,这里就不做过多的解释了，相信小伙伴一定也能跟着这样的思路去手写出来。有什么问题就给我留言吧！


JS防抖和节流

简单算法

如何判断JS对象中是否存在循环引用

手动实现一个深拷贝

javascript call方法的用处及原理