1，函数防抖和函数节流

防抖和节流都是处理处理频繁调用的函数时的一个优化

函数防抖

在规定是一段时间内，只执行最后一次的函数调用，前面的不生效
场景：在搜索框发请求时，避免用户打字幅度较快而发送太多没有必要的请求

function debounce(func, wait) {var timer = nullreturn function () {var ctx = thisvar args = argumentsif (timer) clearTimeout(timer)timer = setTimeout(function () {func.apply(ctx, args)}, wait)}}document.getElementsByTagName('button')[0].onclick = debounce(function () { console.log('btn'); }, 1000)

函数节流

函数节流始在规定时间内，只处理第一次调用的函数，后面的函数调用都不处理
场景：在游戏的普通攻击按钮中，无论电机的多快，普通攻击总是在一个规定时间里只触发一次

function throttle(func, wait) {var pre = new Date()return function () {var cur = new Date()var ctx = thisvar args = argumentsif (cur - pre > wait) {func.apply(ctx, args)pre = cur}}}document.onscroll = throttle(function () { console.log('srcoll事件'); }, 1000)

2，函数柯里化

函数柯里化是将一个可以接受多个参数的函数转变为接受单一参数的函数，并且返回一个函数，这个函数用来接受剩下的参数，并且对这些参数进行处理并返回结果的一个技术

  function sum(...args1) {var res1 = args1.reduce((pre, cur) => { return pre + cur }, 0)return function (...args2) {if (args2.length === 0) return res1var res2 = args2.reduce((pre, cur) => { return pre + cur }, 0)return sum(res1, res2)}} console.log(sum(1, 2)(3)(4, 5)());

3，使用setTimeOut实现SetIterval

具体就是在setTimeOut里调用完函数之后（函数的this指向需要改变，函数的this 要跟最外层函数this一样）再调用setTimeOut，从而实现setInterval

function my_setInterval(func, time) {var ctx = thissetTimeout(function () {func.call(ctx)my_setInterval(func, time)}, time)}my_setInterval(function () {console.log('hahahaha');}, 500)

4,实现instanceof

instanceof 用来检测一个构造函数的prototype是否出现在一个对象的原型链上

function my_instanceof(obj, con) {let left = obj.__proto__, right = con.prototypewhile (true) {if (left === null) return falseif (left === right) return trueleft = left.__proto__}}function add() {return 0}console.log(my_instanceof(add, Function))  //trueconsole.log(my_instanceof(add, Array))     //false

5,实现new

new的过程：创建一个空对象obj,将obj的__ proto__指向构造函数的prototype，调用构造函数（this改变为obj）将结果给res,返回结果（如果res是对象，返回res,否则返回obj）

  function my_new(func, ...args) {var obj = {}obj.__proto__ = func.prototypevar res = func.apply(obj, args)return res instanceof Object ? res : obj}function Person(name) {this.name = name}Person.prototype = {age: 18}var me = my_new(Person, 'kangyi')console.log(me.name);   //kangyi

6,实现call,apply,bind

call 、bind 、apply三个都是用来改变函数的this对象的指向，
第一个参数都是this要指向的对象，也就是想指定的上下文。call和apply是立即调用函数，
而bind是返回一个函数，需要调用的时候再执行

  //方法或函数.call(obj, 参数1，参数2，...)Function.prototype.mycall = function (ctx, ...args) {ctx = ctx || windowctx.func = this    //这里的this是调用call的那个函数，这一句就把这个函数挂载在了ctx上了let res = ctx.func(...args)delete ctx.funcreturn res}//方法或函数.apply(obj,  [参数1，参数2，...])Function.prototype.my_apply = function (ctx, args = []) {if (!args instanceof Array) thow('只接受数组')ctx = ctx || windowctx.func = thisvar res = ctx.func(...args)delete ctx.funcreturn res}//方法或函数.bind(obj)Function.prototype.mybind = function (ctx, ...args1) {return (args2) => {ctx.func = thisvar res = ctx.func(...args1.concat(args1))delete ctx.funcreturn res}}// 测试var obj = {name: 'yiyiyi',show: function () {console.log(this.name);console.log(arguments);}}var person = { name: 'kang' }// obj.show.mycall(person, 1, 2, 3)// obj.show.my_apply(person, [1, 2, 3, 4])obj.show.mybind(person, 1, 2, 3)(4, 5, 6)

7,深浅拷贝

// -------------------------------浅拷贝// （1）for···in只循环第一层// 只复制第一层的浅拷贝// function simpleCopy(obj1) {//    var obj2 = Array.isArray(obj1) ? [] : {};//    for (let i in obj1) {//    obj2[i] = obj1[i];//   }//    return obj2;// }// var obj1 = {//    a: 1,//    b: 2,//    c: {//          d: 3//       }// }// var obj2 = simpleCopy(obj1);// obj2.a = 3;// obj2.c.d = 4;// alert(obj1.a); // 1// alert(obj2.a); // 3// alert(obj1.c.d); // 4// alert(obj2.c.d); // 4// // （2）Object.assign方法 // // Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。// var obj = {//     a: 1,//     b: 2// }// var obj1 = Object.assign(obj);// obj1.a = 3;// console.log(obj.a) // 3// // （3）直接用=赋值// let a=[0,1,2,3,4],//     b=a;// console.log(a===b);// a[0]=1;// console.log(a,b);// --------------------------深拷贝// 深拷贝方法一：对属性中所有引用类型的值，遍历到是基本类型的值为止。// typeof是无法判断array的,它会返回objectfunction deepClone(obj) {var res = obj instanceof Array ? [] : {}for (var key in obj) {if (obj.hasOwnProperty(key)) {if (typeof obj[key] === 'object') res[key] = deepClone(obj[key])else res[key] = obj[key]}}return res}//深拷贝方法二： 通过js的内置对象JSON来进行数组对象的深拷贝function deepClone(obj) {var _obj = JSON.stringify(obj),objClone = JSON.parse(_obj);return objClone;}// 测试var obj = {a: [1, 2, 3],b: 1233444,c: {ccc: 111,cbb: [2, 3, 4],ddd: {jj: 'hjkl'}}}var cloneRes = deepClone(obj)obj = {}console.log(cloneRes);console.log(Object.prototype.toString(cloneRes));

8，数组扁平化

 // 1,使用join函数和split函数，// join 如果数组中的元素是数组，会将里面的数组也调用join()，将数组转化为字符串// function flatten(arr) {//     return arr.join().split(',')// }//2, 递归 遍历数组，如果是数组，继续遍历function flatten(arr) {var res = []for (var i = 0; i < arr.length; i++) {if (arr[i] instanceof Array) {res = res.concat(flatten(arr[i]))} else {res.push(arr[i])}}return res}var arr = [0, 1, 2, [3, 4, 5], 6, [7, [8, 9]]]var res = flatten(arr)console.log(res);

9,数组去重

 // 1,es6新增方法set  function unique(arr) {return [...(new Set(arr))]}// 2,使用filter过滤和indexOffunction unique(arr) {return arr.filter((item, index) => {return arr.indexOf(item) === index})}//3,使用indexOffunction unique(arr) {var res = []for (var i = 0; i < arr.length; i++) {if (res.indexOf(arr[i]) === -1) {res.push(arr[i])}}return res}// 4,使用splice 如果后面有与i相等的数，就删除这个数function unique(arr) {for (var i = 0; i < arr.length - 1; i++) {for (var j = i + 1; j < arr.length; j++) {if (arr[i] === arr[j]) {arr.splice(j, 1)j--}}}return arr}var arr = [1, 1, 2, 2, 3, 3, 4, 5, 6, 6, 6, 7]console.log(unique(arr));

10，实现Promise

 // Promise是一个构造函数，可以封装异步的任务，并且对结果进行处理// promise支持链式调用，可以用来解决回调地狱的问题，在指定回调和错误处理方面更加灵活function my_Promise(executor) {this.promiseStatus = 'pending'this.promiseResult = null// 如果给一个promise对象指定多个回调函数，当状态改变时，这些回调都会生效this.callbacks = []// 因为执行resolve/reject的时候函数的this指向window而不是实例对象，所以需要保存这里的thisconst self = thisfunction resolve(data) {if (self.promiseStatus !== 'pending') returnself.promiseStatus = 'resolved'self.promiseResult = dataself.callbacks.forEach(item => {item.onResolved(data)});}function reject(data) {if (self.promiseStatus !== 'pending') returnself.promiseStatus = 'rejected'self.promiseResult = dataself.callbacks.forEach(item => {item.onReject(data)});}try {executor(resolve, reject)} catch (error) {reject(error)}}my_Promise.prototype.then = function (onResolved, onReject) {if (this.promiseStatus === 'resolved') onResolved(this.promiseResult)if (this.promiseStatus === 'rejected') onReject(this.promiseResult)if (this.promiseStatus === 'pending')this.callbacks.push({ onResolved, onReject })}// 测试// var p = new my_Promise((resolve, reject) => {//     setTimeout(() => {//         resolve('okkkkkk')//     }, 2000);// })// p.then(value => {//     console.log(value);// }, reason => {//     console.warn(reason);// })// p.then(value => {//     alert(value);// }, reason => {//     console.warn(reason);// })// Promise.all方法：可以将多个Promise实例包装成一个新的Promise实例。// 同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。my_Promise.all = function (promises) {return new my_Promise((resolve, reject) => {var arr = []promises.forEach((item, index) => {item.then(value => {arr[index] = valueif (arr.length === promises.length) {resolve(arr)}}, reason => {reject(reason)})})})}// // 测试// var p1 = new my_Promise((resolve, reject) => {//     resolve('okk')// })// var p2 = new my_Promise((resolve, reject) => {//     resolve('hello')// })// var p3 = new my_Promise((resolve, reject) => {//     reject('kang')// })// var pros = [p1, p2, p3]// console.log(my_Promise.all(pros));// Promise.race方法：Promse.race就是赛跑的意思，意思就是说，Promise.race([p1, p2, p3])// 里面哪个结果获得的快，就返回那个结果my_Promise.race = function (promises) {return new my_Promise((resolve, reject) => {for (var i = 0; i < promises.length; i++) {promises[i].then(value => {resolve(value)}, reason => {reject(reason)})}})}let p1 = new Promise((resolve, reject) => {setTimeout(() => {resolve('success')}, 1000)})let p2 = new Promise((resolve, reject) => {setTimeout(() => {reject('failed')}, 5000)})// 测试my_Promise.race([p1, p2]).then((result) => {console.log(result)}, reason => {console.log(reason);})

11，排序算法

 // 快排function quickSort(arr) {if (arr.length < 1)return arrvar index = Math.floor(arr.length / 2)var center = arr.splice(index, 1)[0]var left = [], right = []arr.forEach((item) => {if (item < center) {left.push(item)} else {right.push(item)}})return ([...quickSort(left), center, ...quickSort(right)])}var arr = [2, 4, 2, 1, 46, 2, 3, 56, 8, 5, 4, 0]var res = quickSort(arr)console.log(res);// 选择排序function selectSort(arr) {for (let i = 0; i < arr.length; i++) {var minIndex = ifor (let j = i + 1; j < arr.length; j++) {if (arr[j] < arr[minIndex]) {minIndex = j}}var t = arr[i]arr[i] = arr[minIndex]arr[minIndex] = t}return arr}var arr = [2, 4, 2, 1, 46, 2, 3, 56, 8, 5, 4, 0]var res = selectSort(arr)console.log(res);// 冒泡排序function bubbleSort(arr) {for (var i = 0; i < arr.length - 1; i++) {for (var j = 0; j < arr.length - i; j++) {if (arr[j] > arr[j + 1]) {var t = arr[j]arr[j] = arr[j + 1]arr[j + 1] = t}}}return arr}var arr = [2, 4, 2, 1, 46, 2, 3, 56, 8, 5, 4, 0]var res = bubbleSort(arr)console.log(res);

12,二分查找

    var arr = [1, 2, 3, 5, 6, 7, 8, 9]function binarySearch(arr, left, right, findVal) {if (left > right) { return -1 }var center = Math.floor((left + right) / 2)var val = arr[center]if (findVal > val) {return binarySearch(arr, center + 1, right, findVal)} else if (findVal < val) {return binarySearch(arr, left, center - 1, findVal)} else return center}console.log(binarySearch(arr, 0, arr.length, 7));  //5console.log(binarySearch(arr, 0, arr.length, 4));  //-1

13，对象混合

 function mix(obj, bemix) {for (var p in bemix) {if (!obj.hasOwnProperty(p) && bemix.hasOwnProperty(p)) {obj[p] = bemix[p]}}}var obj1 = {a: 111,b: 222}var obj2 = {c: 333,d: 444}mix(obj1, obj2)console.log(obj1);