call,apply,bind源码,防抖 节流, reduce

1.call

Function.prototype.myCall = function(context){
  if(typeof this !== 'function'){
   throw() 
 }
 context = context || window
 const args = [...arguments].slice(1)
 content.fn = this
 const result = content.fn(...args)
  delete content.fn
return result 
}
var obj = {
  name: 'zs',
  objAge: this.age,
  myFun: function(fm,t){
    console.log(this.name+this.age+fm+t)
  }
}
var db= {
  name: 'ls',
  age: 99
}
obj.myFun.myCall(db,'aaa','ss')

2.apply

Function.prototype.myApply = function(context){
  if(typeof this !== 'function'){
   throw() 
 }
context = context || window
let result
if(arguments[1]{
  result = context.fn(...arguments[1])
} else {
  result = context.fn()
}
  delete content.fn
  return result 
}
var obj = {
  name: 'zs',
  objAge: this.age,
  myFun: function(fm,t){
    console.log(this.name+this.age+fm+t)
  }
}
var db= {
  name: 'ls',
  age: 99
}
obj.myFun.myApply(db,'aaa','ss')

3.bind()

Function.prototype.myBind = function(context){
  if(typeof this !== 'function'){
    throw new Error
  }
  const _this = this
  const args = [...arguments].slice(1)
  return function F(){
    if(this instanceof F){
      return new _this(...args,...arguments)
    }
    return _this.apply(context,args.concat(...arguments))
  }
}
var obj = {
  name: 'zs',
  objAge: this.age,
  myFun: function(fm,t){
    console.log(this.name+this.age+fm+t)
  }
}
var db= {
  name: 'ls',
  age: 99
}
obj.myFun.myBind(db,'aaa','ss')('huj')

4. instanceof

function myInstanceof (left, right){
  const protoType = right.protoType
  let left = left.__proto__
  while(true){
    if(left===null||left===undefined)
      return false
    if(left === protoType)
      return true
    left = left.__proto__
  }
}

4.map

Array.prototype.myMap = function(callback){
  if (typeof callback !== 'function') {
    throw new Error(`${callback} is not a function`)
  }
  let newArr = []
  for(let i = 0;i<=this.length;i++){
    newArr.push(callback(this[i],i,this))
  }
  return newArr
}

5.reduce

Array.prototype.myReduce = function(fn,pre){
  if(!Array.isArray(this) || this.length===0 || typeof fn !== 'function'){
    return []
  }
  var value = pre?pre:this[0]
  for(var i =pre?0:1;i<this.length;i++){
    value = fn(value,this[i],i,this)
  }
  return value
}
// 加法
var arr = [1,2,3,4]
var result = arr.reduce((pre,cur)=>{
  return pre+cur
})
// 去重
var arr1 = [1,2,3,4,3,2]
var result1 = arr1.myReduce((pre,cur)=>{
  if(pre.indexOf(cur)===-1){
    pre.push(cur)
  }
  return pre
},[])
console.log(result1)
// 数组的去重
let ary = [12,32,45,34,2,34,32,12];
let arr = [...new Set(ary)];
let arr = Array.from(new Set(ary));
console.log(arr)

// map from用法
const mapper = new Map([['1', 'a'], ['2', 'b']]);
//Map { '1' => 'a', '2' => 'b' }
// const mapper = new Map([[1, 2], [2, 4], [4, 8]]);
console.log(mapper,Array.from(mapper))
// [ [ '1', 'a' ], [ '2', 'b' ] ]

// 扁平化
var arr2 = [1,[2,3,[4,6]]]

var arrFun = function(arr){
  return arr.myReduce((pre,cur)=>{
   return pre.concat(Array.isArray(cur)?arrFun(cur):cur)
  },[])
}
arr2.flat(Infinity)
// 数组扁平化的N种实现方案
// 1.es6 flat
// 2.转换为字符串 toString
// 3.转换为JSON格式字符串 Stringfy 去掉'[]'
// 4.基于数组some方法
// 统计次数
var arr4 = [1,3,4,6,8,3,4]
var result4 = arr4.reduce((pre,cur)=>{
  if(cur in pre) {
    pre[cur]++
  } else {
    pre[cur]=1
  }
  return pre
},{})
console.log(result4)

6.防抖 节流

// 所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
function debounce(fn,timer){
  var t = null;
  return function(){
    clearTimeout(t)
    t = setTimeout(()=>{
      fn.apply(this,arguments)
    },timer)
  }
}
btn.addEventListener('click',debounce(submit,2000),false)
function submit(as){
  console.log(1,as)
}
// 所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。
function throttle(delay,callback){
  var timer
  return function(){
    timer=setTimeout(function(){
      if(!timer) {
        callback()
        timer = null
      }
    },delay)
  }
}

7. 浅拷贝

function shallwCopy(obj){
  var targetObj = {}
  for(var i in obj){
    targetObj[i]= obj[i]
  }
  return targetObj
}
var person = {
  name: 'zs',
  hobby: [1,2,35,5]
}
var person1 = shallwCopy(person)
person1.name='ls'
person1.hobby[0]='fff'
console.log(person)
console.log(person1)

8. 深拷贝

function deepCopy(obj){
  var result = {};
  for(var k in obj){
      if(typeof obj[k] == "object"){
          //要将这个属性再进行一次拷贝
          var temp = {};
          for(var j in obj[k]){
              temp[j] = obj[k][j]
          }
          result[k] = temp;
      }else{
          //值类型的数据直接复制即可
          result[k] = obj[k];
      }
  }
return result;
}
function deepClone(obj){
  var cloneObj = {}
  if(obj===null) return obj
  if(typeof obj !== 'object') return obj
  for(var i in obj){
    if(obj.hasOwnProperty(i)){
      cloneObj[i] = deepClone(obj[i])
    }
  }
  return cloneObj
}
var person = {
  name: 'zs',
  hobby: [1,[467,5465],2,35,5]
}
var person1 = deepClone(person)
person1.name='ls'
person1.hobby[0]='fff'
console.log(person)
console.log(person1)