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);
}