手写代码
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 方法