流月
  • CSS
  • JavaScript
  • Web API
  • TypeScript
  • 框架

    • React
    • Vue
  • 其他

    • 小程序
    • 工程化
    • 性能优化
    • 测试
    • 其他
  • nodejs
  • deno
  • express
  • nginx
  • docker
  • 其他
  • 安全基础
  • 正则表达式
  • 网络基础
  • 设计模式
  • 数据结构与算法
  • LeetCode
  • CodeWars
  • 手写代码
  • Git
  • devops
  • 编码原则
  • 防御编程
  • Chrome
  • Edge
  • Flutter
  • Linux
  • 库
  • 网站
  • 面试
  • 摘抄
  • 方法论
  • 语法
  • 王小波
  • Elon Musk
  • CSS
  • JavaScript
  • Web API
  • TypeScript
  • 框架

    • React
    • Vue
  • 其他

    • 小程序
    • 工程化
    • 性能优化
    • 测试
    • 其他
  • nodejs
  • deno
  • express
  • nginx
  • docker
  • 其他
  • 安全基础
  • 正则表达式
  • 网络基础
  • 设计模式
  • 数据结构与算法
  • LeetCode
  • CodeWars
  • 手写代码
  • Git
  • devops
  • 编码原则
  • 防御编程
  • Chrome
  • Edge
  • Flutter
  • Linux
  • 库
  • 网站
  • 面试
  • 摘抄
  • 方法论
  • 语法
  • 王小波
  • Elon Musk
  • 手写代码

手写代码

Function

cloneDeep

call

apply

bind

promise

pipe

curry

debounce

function debonce(fn, wait) {
  var timer
  return function() {
    clearTimeout(timer)
    timer = setTimeOut(fn, wait)
  }
}

throttle 节流

function throttle(fn, delay) {
  let lastTime = Date.now()
  let timerId
  return function(...args) {
    const now = Date.now()
    const context = this
    if (now - lastTime > delay) {
      lastTime = now
      fn.apply(context, args)
    } else {
      clearTimeout(timerId)
      timerId = setTimeout(function() {
        fn.apply(context, args)
      }, delay)
    }
  }
}

jsonStringify

jsonParse

instanceOf

flattenDeep

omit

pick

Promise

Array

数组去重

方法比较多

  • 通过 new Set + ...
  • filter + indexOf
  • 双层循环
  • 使用 hashMap
// Set
Array.prototype.unique = function() {
  // return [...new Set(this)]
  return Array.from(new Set(this))
}

var a = [1,2,3,1]
a.unique()

// filter + indexOf
function unique(arr) {
  if (!Array.isArray(arr)) throw new Error('must be array')
  return arr.filter((value, index, self) => self.indexOf(value) === index)
}

unique([1,2,1])

生成数组

生成二维数组

flatten

DOM

DOM 树遍历 DFS + BFS

Math

判断两个矩形是否重叠

范围内的随机数

Object

new 操作符

  • 创建一个空对象,
  • 调用构造函数,将构造函数的 this 指向该实例对象
  • 属性和方法被加入到 this 引用的对象中
  • 返回该对象(如果函数没有返回 对象 或者 函数) Array, Date, RegExg, Error

Object.create(proto) 方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__

function newOp(ctor, ...args) {
  if (typeof ctor !== 'function') {
    throw 'params must be function'
  }
  const newObj = Object.create(ctor.prototype)
  const result = crot.apply(newObj, args)
  
  const isObject = typeof result === 'object' && result !== null
  const isFunction = typeof result === 'function'
  if (isObject || isFunction) return result
  return newObj
}

继承

class Parent {
  constructor(name) {
    this.name = name
  }
  myName() {
    console.log(this.name)
  }
}

class Son extends Parent{
  constructor(name, age) {
    super(name)
    this.age = age
  }

  myAge() {
    console.log(this.age)
  }
}

function Parent(name) {
  this.name = name
}

Parent.prototype.myName = function() {
  console.log(this.name)
}

function Son(name, age) {
  Parent.apply(this, arguments)
  this.age = age
}

// Son.prototype = Object.create(Parent.prototype)
Son.prototype = new Parent()
Son.prototype.constructor = Son

Son.prototype.myAge = function() {
  console.log(this.age)
}

String

解析 URL Params

let url = 'http://www.domain.com/?user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&enabled';
parseParam(url)
/* 结果
{ user: 'anonymous',
  id: [ 123, 456 ], // 重复出现的 key 要组装成数组,能被转成数字的就转成数字类型
  city: '北京', // 中文需解码
  enabled: true, // 未指定值得 key 约定为 true
}
*/

let url = 'http://www.domain.com/?user=anonymous&id=123.22&id=456&city=%E5%8C%97%E4%BA%AC&enabled';

function parseParam(url) {
  var paramStr = url.split('?')[1].split('&')
  var result = {}
  paramStr.forEach((param) => {
    if (/=/.test(param)) {
      var v = decodeURIComponent(param.split('=')[1])
      v = /^\d+/.test(v) ? +v : v
      var k = param.split('=')[0]
      if (result[k]) {
        result[k] = [].concat(result[k], v)
      } else {
        result[k] = v
      }
    } else {
      result[param] = true
    }
  })
  return result
}

parseParam(url)


Utils

EventEmitter

数据绑定实现

VNode 渲染

数字转换成中文

MVVM

扁平对象转树形对象

编程题

  • 携程&蘑菇街&bilibili:手写数组去重、扁平化函数
  • 百度:模版渲染
  • 百度:什么是浅拷贝和深拷贝?有什么区别?如何实现 Object 的深拷贝
  • 阿里&字节:手写 async/await 的实现
  • 编程题:用最简洁代码实现 indexOf 方法
  • 阿里编程题:实现一个方法,拆解URL参数中queryString
  • 字节:输出以下代码运行结果,为什么?如果希望每隔 1s 输出一个结果,应该如何改造?注意不可改动 square 方法
Last Updated: 7/21/20, 12:45 PM
Contributors: wangqi