1、手写 new 的过程
const myNew = (fn, ...args) => {
const obj = {}
obj.__proto__ = fn.prototype
fn.apply(obj, args)
return obj
}
复制代码
2、instanceof关键字
const instanceOf = (father, child) => {
const fp = father.prototype
var cp = child.__proto__
while (cp) {
if (cp === fp) {
return true
}
cp = cp.__proto__
}
return false
}
复制代码
3、防抖函数
const debounce = (func, wait = 500) => {
let timer = 0
return function(...args) {
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
func.apply(this, args)
}, wait)
}
}
复制代码
4、节流函数
const throttle = (func, wait = 500) => {
let lastTime = 0
return function(...args) {
let now = +new Date()
if (now - lastTime > wait) {
lastTime = now
func.apply(this, args)
}
}
}
setInterval(
throttle(() => {
console.log(1)
}, 3000),
1
)
复制代码
5、手写 call()
Function.prototype.myCall = function(context) {
if (typeof this !== 'function') {
throw new TypeError('Error')
}
context = context || window
// 谁调用call方法,this就指向谁
context.fn = this
// 去掉所有参数中第一参数(指定的对象)
const args = [...arguments].slice(1)
const result = context.fn(...args)
delete context.fn
return result
}
复制代码
6、手写 apply()
Function.prototype.apply = function (context) {
if (typeof this !== 'function') {
throw new TypeError('Error')
}
context = context || window
context.fn = this
let result
// 处理参数和 call 有区别,apply只有两个参数,第一个是对象,第二个是数组
if (arguments[1]) {
result = context.fn(...arguments[1])
} else {
result = context.fn()
}
delete context.fn
return result
}
复制代码
7、手写 bind()
Function.prototype.bind = function(context) {
if (typeof this !== 'function') {
throw new TypeError('Error')
}
const _this = this
const args = [...arguments].slice(1)
// 返回一个函数
return function F() {
// 因为返回了一个函数,我们可以 new F(),所以需要判断
if (this instanceof F) {
// 忽略传入的this
return new _this(...args, ...arguments)
}
// 直接调用,将两边的参数拼接起来
return _this.apply(context, args.concat(...arguments))
}
}
复制代码
8、数组去重
// 第一种:reduce去重
const quchong1 = (arr) => {
const newArr = []
arr.reduce((pre, next) => {
if (!pre[next]) {
pre[next] = 1
newArr.push(next)
}
return pre
}, {})
return newArr
}
// 第二种:Set去重
const quchong2 = (arr) => {
return [...new Set(arr)]
}
复制代码
9、数组对象去重
let arr = [{
key: '01',
value: '西施'
}, {
key: '02',
value: '王昭君'
}, {
key: '03',
value: '杨玉环'
}, {
key: '04',
value: '貂蝉'
}, {
key: '01',
value: '西施'
}, {
key: '01',
value: '西施'
}];
let obj = {};
arr = arr.reduce((item, next) => {
obj[next.key] ? '' : obj[next.key] = true && item.push(next);
return item;
}, []);
console.log(arr); // [{key: "01", value: "西施"},{key: "02", value: "王昭君"},{key: "03", value: "杨玉环"},{key: "04", value: "貂蝉"}]
复制代码
10、简易版深拷贝
/*
* @param x {Object} 对象1
* @param y {Object} 对象2
* @return {Boolean} true 为相等,false 为不等
*/
export const deepEqual = (x, y) => {
// 指向同一内存时
if (x === y) {
return true;
} else if ((typeof x == "object" && x != null) && (typeof y == "object" && y != null)) {
if (Object.keys(x).length !== Object.keys(y).length) {
return false;
}
for (var prop in x) {
if (y.hasOwnProperty(prop)) {
if (!deepEqual(x[prop], y[prop])) return false;
} else {
return false;
}
}
return true;
} else {
return false;
}
}
复制代码
详见: JavaScript 中,如何判断两个对象是否相等?