js代码题

1.防抖

<button id="debounce">防抖</button>
    <script>
        function pay() {
            console.log("点击")
        }
        function debounce (func,delay) {
            let timer;
            return function () {
                let contest = this;
                clearTimeout(timer);
                timer = setTimeout(() => {
                    // 需要防抖的操作...
                    func().call(contest);
                    console.log("防抖成功！");
                }, delay);
            }
        }
        var btn1 = document.getElementById('debounce');
        btn1.addEventListener("click", debounce(pay,5000));
    </script>

2.节流

<button id="debounce">节流</button>
<script>
    function pay() {
        console.log("节流")
    }
    function debounce (func,delay) {
        let flag = true;
        return function () {
            if (!flag) return false;
            flag = false;
            setTimeout(() => {
                func.apply(this, arguments);
                flag = true;
            }, delay)
        }}
    var btn1 = document.getElementById('debounce');
    btn1.addEventListener("click", debounce(pay,1000));
</script>

3.手写

function myNew(fn,...arg){
	//在内存中创建一个新对象
	let obj = {};
	//使新对象的__proto__指向原函数的原型对象
	obj.__proto__ = fn.prototype;
	//改变this指向（指向新的obj）并执行该函数，执行结果保存起来作为result
	let result = fn.call(obj,args)
	//判断执行函数的结果是不是null或Undefined，如果是则返回之前的新对象，如果不是则返回result
	return result instanceof Object ? result : obj
}

4.手写call

Function.prototype.myCall = function (context) {
      // 先判断调用myCall是不是一个函数
      // 这里的this就是调用myCall的
      if (typeof this !== 'function') {
        throw new TypeError("Not a Function")
      }
      // 不传参数默认为window
      context = context || window
      // 保存this
      context.fn = this
      // 保存参数
      let args = Array.from(arguments).slice(1)   //Array.from 把伪数组对象转为数组
      // 调用函数
      let result = context.fn(...args)
      delete context.fn
      return result
      }

5.手写apply

Function.prototype.myApply = function (context) {
      // 判断this是不是函数
      if (typeof this !== "function") {
        throw new TypeError("Not a Function")
      }
      let result
      // 默认是window
      context = context || window
      // 保存this
      context.fn = this
      // 是否传参
      if (arguments[1]) {
        result = context.fn(...arguments[1])
      } else {
        result = context.fn()
      }
      delete context.fn
      retun result
    }

6.手写bind

Function.prototype.myBind = function(context){
      // 判断是否是一个函数
      if(typeof this !== "function") {
        throw new TypeError("Not a Function")
      }
      // 保存调用bind的函数
      const _this = this 
      // 保存参数
      const args = Array.prototype.slice.call(arguments,1)
      // 返回一个函数
      return function F () {
        // 判断是不是new出来的
        if(this instanceof F) {
          // 如果是new出来的
          // 返回一个空对象，且使创建出来的实例的__proto__指向_this的prototype，且完成函数柯里化
          return new _this(...args,...arguments)
        }else{
          // 如果不是new出来的改变this指向，且完成函数柯里化
          return _this.apply(context,args.concat(...arguments))
        }
      } 
    }

8.深拷贝

9.浅拷贝实现

let obj2 = {}
for (let i in obj){
    if(!obj.hasOwnProperty(i)) break;  // 这里使用continue也可以
    obj2[i] = obj[i]
}

10.数组去重

（1）简单方法

var arr = ['abc','abcd','sss','2','d','t','2','ss','f','22','d'];
//定义一个新的数组
var s = [];
//遍历数组
for(var i = 0;i<arr.length;i++){
    if(s.indexOf(arr[i]) == -1){  //判断在s数组中是否存在，不存在则push到s数组中
        s.push(arr[i]);
    }
}
console.log(s);
//输出结果：["abc", "abcd", "sss", "2", "d", "t", "ss", "f", "22"]

（2）Set方法

let newArr1 = new Set(arr)
console.log([...newArr1]);

（3）基于对象去重

let arr3 = [1, 2, 1, 1, 1, 2, 3, 3, 3, 2]
    let obj = {}
    for (let i = 0; i < arr3.length; i++) {
      let item = arr3[i]
      if (obj[item]) {
//把数组最后一个元素取出并删除
        arr3[i] = arr3[arr3.length - 1]
        arr3.length--；
        i--；
        continue;
      }
      obj[item] = item
    }
    console.log(arr3);
	console.log(obj);
}