面试手写第一期

一. 实现call, apply, bind方法

相同点：它们的共同点是都可以修改函数
不同点：this 指向第一个是传参方式不同： call 和 bind 是列表传参，apply是数组或伪数组传参 第二个是执行机制不同：call 和 apply 是立即执行，bind 不会立即执行而是生成一个修改 this之后的新函数

Function.prototype.myCall = function(context) {
  if(typeof this !== 'function') {
    throw new Error('type error')
  }
  let args = [...arguments].slice(1)
  context = context || window
  context.fn = this
  let result = context.fn(...args)
  delete context.fn
  return result
}

Function.prototype.myApply = function(context) {
  if(typeof this !== 'function') {
    throw new Error('type error')
  }
  let arrParams = arguments[1] || []
  context = context || window
  context.fn = this
  let result = context.fn(...arrParams)
  delete context.fn
  return result
}

Function.prototype.myBind = function(context) {
  if(typeof this !== 'function') {
    throw new Error('Error')
  }
  let args = [...arguments].slice(1),
    fn = this
  return function Fn() {
    return fn.apply(this instanceof Fn ? this : context, args.concat(...arguments))
  }
}

二. 防抖节流函数

2.1 概念

防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
节流：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

2.2 使用场景

2.3 实现

// 基础版
function debbounce(fn, delay) {
  let timer
  return function(...args) {
    if(timer) clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(this, args)
    }, delay)
  }
}

// 防抖函数第一次点击直接执行
function debounce(fn, delay, immediate) {
  let timer
  return function(...args) {
    if(timer) clearTimeout(timer)
    if(immediate) {
      let firstRun = !timer
      if(firstRun) {
        fn.apply(this, args)
      }
      timer = setTimeout(() => {
        timer = null
      }, delay)
    } else {
      timer = setTimeout(() => {
        fn.apply(this, args)
      }, delay)
    }
  }
}

// 时间戳写法
function throller(fn, delay) {
  let time
  return function() {
    let now = Date.now()
    if(now - time > delay) {
      fn.call(this, arguments)
      time = now
    }
  }
}

// 定时器写法
function throller(fn, delay) {
  let timer = null
  return function(...args) {
    if(!timer) {
      timer = setTimeout(() => {
        fn.apply(this, args)
        timer = null
      })
    }
  }
}

三. lodash.get的实现

function lodashGet(object, path, defaultValue) {
  let obj = object
  if(typeof path === 'string') {
    const reg = /[^[]""''.]+/g
    path = path.match(reg)
  }
  for(let key of path) {
    if(!obj) {
      return defaultValue
    }
    obj = obj[key]
  }
  return obj
}
const object = { a: [{ b: { c: 3 } }] }
console.log(lodashGet(object, 'a[0]["b"]["c"]'))
//=> 3
console.log(lodashGet(object, "a[0].b.c"))
//=> 3
console.log(lodashGet(object, 'a[0]["b"]["c"]'))
//=> 10086
console.log(lodashGet(object, "a[100].b.c", 10086))

四. 深浅拷贝的实现

4.1 概念

浅拷贝：
浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存(分支)
浅拷贝是按位拷贝对象，它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。
如果属性是基本类型，拷贝的就是基本类型的值；如果属性是内存地址（引用类型），拷贝的就是内存地址 ，因此如果其中一个对象改变了这个地址，就会影响到另一个对象。
深拷贝：
深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象，是“值”而不是“引用”（不是分支）, 拷贝第一层级的对象属性或数组元素,
递归拷贝所有层级的对象属性和数组元素
深拷贝会拷贝所有的属性,并拷贝属性指向的动态分配的内存。当对象和它所引用的对象一起拷贝时即发生深拷贝。深拷贝相比于浅拷贝速度较慢并且花销较大。

4.2 实现方法

浅拷贝的实现方法：

• Object.assign
• 扩展运算符
• Array.prototype.slice
• Array.prototype.concat
• lodash的clone方法
• 手写实现

深拷贝的实现方法：

• JSON.parse(JSON.stringfy())
• lodash实现
• 手写实现

4.3 手写实现

浅拷贝：

function shallowClone(source) {
  let target = {};
  for(let i in source) {
    if (source.hasOwnProperty(i)) {
      target[i] = source[i];
    }
  }
  return target;
}

深拷贝：

const obj = {
  re: /hello/,
  f() {},
  date: new Date(),
  map: new Map(),
  list: [1, 2, 3],
  a: 3,
  b: 4,
};

function deepClone(source, cache = new WeakMap()) {
  if(typeof source !== 'object') {
    return source
  }
  if(cache.has(source)) {
    return cache.get(source)
  }
  let res = new source.constructor()
  cache.set(source, res)

  if(source instanceof Array) {
    source.forEach((v) => {
      res.push(deepClone(v, cache))
    })
  } else if (source instanceof Map) {
    for(const [k, v] of source) {
      res.set(k, deepClone(v, cache))
    }
  } else if (source instanceof Set) {
    for(const v of source) {
      res.add(deepClone(v, cache))
    }
  } else if (Object.prototype.toString.call(source) == '[object Object]') {
    for(const key in source) {
      res[key] = deepClone(source[key], cache)
    }
  } else {
    res = new source.constructor(source)
  }
  return res
}
const newObj = deepClone(obj);
console.log(newObj);

五. flat拍平实现

function flatten(arr, depth) {
  if(!depth) return arr
  let res = []
  for(let i = 0; i < arr.length; i++) {
    if(Array.isArray(arr[i])) {
      res = res.concat(flatten(arr[i], --depth))
    } else {
      res.push(arr[i])
    }
  }
  return res
}

console.log(flatten([1, 2, 3, [4, [5, 6]]], 1));

function flatten(arr, depth) {
  while(arr.some(item => Array.isArray(item) && depth)) {
    arr = [].concat(...arr)
    depth--
  }
  return arr
}
console.log(flatten([1, 2, 3, [4, [5, 6]]], 1));

function flatten(arr, depth = 1) {
  if (depth === 0) return arr;
  return arr.reduce(
    (a, b) => a.concat(Array.isArray(b) ? flatten(b, depth - 1) : b),
    [],
  );
}
console.log(flatten([1, 2, 3, [4, [5, 6]]], 1));

function flatten(arr) {
  return arr.toString().split(',').map(item => parseInt(item))
}
console.log(flatten([1, 2, 3, [4, [5, 6]]]));

六. 手写实现LRU算法

class LRUCache {
  constructor(capacity) {
    this.capacity = capacity;
    this.cache = new Map();
  }
  get(key) {
    if (!this.cache.has(key)) {
      return -1;
    }
    const temp = this.cache.get(key);
    this.cache.delete(key);
    this.cache.set(key, temp);
    return temp;
  }
  put(key, value) {
    if (this.cache.has(key)) {
      this.cache.delete(key);
    } else if (this.cache.size >= this.capacity) {
      this.cache.delete(this.cache.keys().next().value);
    }
    this.cache.set(key, value);
  }
}

七. 实现once方法，只执行一次

function once(f) {
  let result;
  let revoked = false;
  return (...args) => {
    if (revoked) return result;
    const r = f(...args);
    revoked = true;
    result = r;
    return r;
  };
}

八. 对字符串进行压缩编码

//=> a4b3c2
encode("aaaabbbcc");
 
//=> a4b3a4
encode("aaaabbbaaaa");
 
//=> a2b2c2
encode("aabbcc");

function encode(str) {
  let count = 1
  prev = ''
  res = ''
  for(const v of str) {
    if(v == prev) {
      count++
    } else {
      res += `${count}${prev}`
      count = 1
    }
    prev = v
  }
  res +=`${count}${prev}`
  return res
}

console.log(encode('aaabbc'));

代码007普通

打赏 收藏 海报 链接