基本上面试的时候,经常会遇到手撕XXX之类的问题,这次准备梳理总结一遍,巩固我们原生JS基础的同时,下次想复习面试手撕题的时候,找起来方便,也节省时间。
代码在这里????GitHub
梳理的顺序是随机的,不按照难度高低程度。
事件委托这里就不阐述了,比如给li绑定点击事件
看错误版,(容易过的,看「面试官水平了」)????
ul.addEventListener('click', function (e) {
console.log(e,e.target)
if (e.target.tagName.toLowerCase() === 'li') {
console.log('打印') // 模拟fn
}
})
「有个小bug,如果用户点击的是 li 里面的 span,就没法触发 fn,这显然不对」????
下面的内容是子元素1
- li内容>>> 这是span内容123
下面的内容是子元素2
- li内容>>> 这是span内容123
下面的内容是子元素3
- li内容>>> 这是span内容123
这样子的场景就是不对的,那我们看看高级版本????
function delegate(element, eventType, selector, fn) {
element.addEventListener(eventType, e => {
let el = e.target
while (!el.matches(selector)) {
if (element === el) {
el = null
break
}
el = el.parentNode
}
el && fn.call(el, e, el)
},true)
return element
}
这个题目看起来简单,你可以试一试30分钟能不能完成,直接贴出代码吧????
var dragging = false
var position = null
xxx.addEventListener('mousedown',function(e){
dragging = true
position = [e.clientX, e.clientY]
})
document.addEventListener('mousemove', function(e){
if(dragging === false) return null
const x = e.clientX
const y = e.clientY
const deltaX = x - position[0]
const deltaY = y - position[1]
const left = parseInt(xxx.style.left || 0)
const top = parseInt(xxx.style.top || 0)
xxx.style.left = left + deltaX + 'px'
xxx.style.top = top + deltaY + 'px'
position = [x, y]
})
document.addEventListener('mouseup', function(e){
dragging = false
})
「节流throttle」,规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。场景????
scroll滚动事件,每隔特定描述执行回调函数
input输入框,每个特定时间发送请求或是展开下拉列表,(防抖也可以)
节流重在加锁「flag = false」
function throttle(fn, delay) {
let flag = true,
timer = null
return function(...args) {
let context = this
if(!flag) return
flag = false
clearTimeout(timer)
timer = setTimeout(function() {
fn.apply(context,args)
flag = true
},delay)
}
}
「防抖debounce」,在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。场景????
浏览器窗口大小resize避免次数过于频繁
登录,发短信等按钮避免发送多次请求
文本编辑器实时保存
防抖重在清零「clearTimeout(timer)」
function debounce(fn, delay) {
let timer = null
return function(...args) {
let context = this
if(timer) clearTimeout(timer)
timer = setTimeout(function(){
fn.apply(context,args)
},delay)
}
}
这个是Array数组测试用例????
var array = [1, 1, '1', '1', null, null,
undefined, undefined,
new String('1'), new String('1'),
/a/, /a/,
NaN, NaN
];
如何通过一个数组去重,给面试官留下深印象呢????
使用Set
let unique_1 = arr => [...new Set(arr)];
使用filter
function unique_2(array) {
var res = array.filter(function (item, index, array) {
return array.indexOf(item) === index;
})
return res;
}
使用reduce
let unique_3 = arr => arr.reduce((pre, cur) => pre.includes(cur) ? pre : [...pre, cur], []);
使用Object 键值对????????,这个也是去重最好的效果????
function unique_3(array) {
var obj = {};
return array.filter(function (item, index, array) {
return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
})
}
使用obj[typeof item + item] = true
,原因就在于对象的键值只能是字符串
,所以使用typeof item + item
代替
柯里化就是把接受「多个参数」的函数变换成接受一个「单一参数」的函数,并且返回接受「余下参数」返回结果的一种应用。
思路:
判断传递的参数是否达到执行函数的fn个数
没有达到的话,继续返回新的函数,并且返回curry函数传递剩余参数
let currying = (fn, ...args) =>
fn.length > args.length ?
(...arguments) => currying(fn, ...args, ...arguments) :
fn(...args)
测试用例????
let addSum = (a, b, c) => a+b+c
let add = curry(addSum)
console.log(add(1)(2)(3))
console.log(add(1, 2)(3))
console.log(add(1,2,3))
「将多维度的数组降为一维数组」
Array.prototype.flat(num)
// num表示的是维度
// 指定要提取嵌套数组的结构深度,默认值为 1
使用 Infinity,可展开任意深度的嵌套数组
写这个给面试官看的话,嗯嗯,应该会被打死,写一个比较容易的????
let flatDeep = (arr) => {
return arr.reduce((res, cur) => {
if(Array.isArray(cur)){
return [...res, ...flatDep(cur)]
}else{
return [...res, cur]
}
},[])
}
「你想给面试官留下一个深刻印象的话」,可以这么写,????
function flatDeep(arr, d = 1) {
return d > 0 ? arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatDeep(val, d - 1) : val),
[]) :
arr.slice();
};
// var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
// flatDeep(arr1, Infinity);
可以传递一个参数,数组扁平化几维,简单明了,看起来逼格满满????????????
深拷贝解决的就是「共用内存地址所导致的数据错乱问题」
思路:
递归
判断类型
检查环(也叫循环引用)
需要忽略原型
function deepClone(obj, map = new WeakMap()) {
if (obj instanceof RegExp) return new RegExp(obj);
if (obj instanceof Date) return new Date(obj);
if (obj == null || typeof obj != 'object') return obj;
if (map.has(obj)) {
return map.get(obj);
}
let t = new obj.constructor();
map.set(obj, t);
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
t[key] = deepClone(obj[key], map);
}
}
return t;
}
//测试用例
let obj = {
a: 1,
b: {
c: 2,
d: 3
},
d: new RegExp(/^\s+|\s$/g)
}
let clone_obj = deepClone(obj)
obj.d = /^\s|[0-9]+$/g
console.log(clone_obj)
console.log(obj)
核心:Object.prototype.toString
let isType = (type) => (obj) => Object.prototype.toString.call(obj) === `[object ${type}]`
// let isArray = isType('Array')
// let isFunction = isType('Function')
// console.log(isArray([1,2,3]),isFunction(Map))
isType函数????,也属于「偏函数」的范畴,偏函数实际上是返回了一个包含「预处理参数」的新函数。
改变this指向,唯一区别就是传递参数不同????
// 实现call
Function.prototype.mycall = function () {
let [thisArg, ...args] = [...arguments]
thisArg = Object(thisArg) || window
let fn = Symbol()
thisArg[fn] = this
let result = thisArg[fn](...args)
delete thisArg[fn]
return result
}
// 实现apply
Function.prototype.myapply = function () {
let [thisArg, args] = [...arguments];
thisArg = Object(thisArg)
let fn = Symbol()
thisArg[fn] = this;
let result = thisArg[fn](...args);
delete thisArg.fn;
return result;
}
//测试用例
let cc = {
a: 1
}
function demo(x1, x2) {
console.log(typeof this, this.a, this)
console.log(x1, x2)
}
demo.apply(cc, [2, 3])
demo.myapply(cc, [2, 3])
demo.call(cc,33,44)
demo.mycall(cc,33,44)
bind它并不是立马执行函数,而是有一个延迟执行的操作,就是生成了一个新的函数,需要你去执行它????
// 实现bind
Function.prototype.mybind = function(context, ...args){
return (...newArgs) => {
return this.call(context,...args, ...newArgs)
}
}
// 测试用例
let cc = {
name : 'TianTian'
}
function say(something,other){
console.log(`I want to tell ${this.name} ${something}`);
console.log('This is some'+other)
}
let tmp = say.mybind(cc,'happy','you are kute')
let tmp1 = say.bind(cc,'happy','you are kute')
tmp()
tmp1()
核心要点????
创建一个新对象,这个对象的__proto__
要指向构造函数的原型对象
执行构造函数
返回值为object类型则作为new方法的返回值返回,否则返回上述全新对象
代码如下????
function _new() {
let obj = {};
let [constructor, ...args] = [...arguments];
obj.__proto__ = constructor.prototype;
let result = constructor.apply(obj, args);
if (result && typeof result === 'function' || typeof result === 'object') {
return result;
}
return obj;
}
「instanceof」 「运算符」用于检测构造函数的 prototype
属性是否出现在某个实例对象的原型链上。
语法????
object instanceof constructor
object 某个实例对象
construtor 某个构造函数
原型链的向上找,找到原型的最顶端,也就是Object.prototype,代码????
function my_instance_of(leftVaule, rightVaule) {
if(typeof leftVaule !== 'object' || leftVaule === null) return false;
let rightProto = rightVaule.prototype,
leftProto = leftVaule.__proto__;
while (true) {
if (leftProto === null) {
return false;
}
if (leftProto === rightProto) {
return true;
}
leftProto = leftProto.__proto__
}
}
某个时间后就去执行某个函数,使用Promise封装????
function sleep(fn, time) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(fn);
}, time);
});
}
let saySomething = (name) => console.log(`hello,${name}`)
async function autoPlay() {
let demo = await sleep(saySomething('TianTian'),1000)
let demo2 = await sleep(saySomething('李磊'),1000)
let demo3 = await sleep(saySomething('掘金的好友们'),1000)
}
autoPlay()
更多的手写实现数组方法,看我之前这篇???? 「数组方法」从详细操作js数组到浅析v8中array.js
直接给出简易版????
Array.prototype.myreduce = function(fn, initVal) {
let result = initVal,
i = 0;
if(typeof initVal === 'undefined'){
result = this[i]
i++;
}
while( i < this.length ){
result = fn(result, this[i])
}
return result
}
不清楚两者用法的话,异步MDN????Promise.race() Promise.all()
// 实现Promise.all 以及 race
Promise.myall = function (arr) {
return new Promise((resolve, reject) => {
if (arr.length === 0) {
return resolve([])
} else {
let res = [],
count = 0
for (let i = 0; i < arr.length; i++) {
// 同时也能处理arr数组中非Promise对象
if (!(arr[i] instanceof Promise)) {
res[i] = arr[i]
if (++count === arr.length)
resolve(res)
} else {
arr[i].then(data => {
res[i] = data
if (++count === arr.length)
resolve(res)
}, err => {
reject(err)
})
}
}
}
})
}
Promise.myrace = function (arr) {
return new Promise((resolve, reject) => {
for (let i = 0; i < arr.length; i++) {
// 同时也能处理arr数组中非Promise对象
if (!(arr[i] instanceof Promise)) {
Promise.resolve(arr[i]).then(resolve, reject)
} else {
arr[i].then(resolve, reject)
}
}
})
}
测试用例????
// 测试用例
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(11)
}, 2000);
});
let p2 = new Promise((resolve, reject) => {
reject('asfs')
});
let p3 = new Promise((resolve) => {
setTimeout(() => {
resolve(33);
}, 4);
});
Promise.myall([p3, p1, 3, 4]).then(data => {
// 按传入数组的顺序打印
console.log(data); // [3, 1, 2]
}, err => {
console.log(err)
});
Promise.myrace([p1, p2, p3]).then(data => {
// 谁快就是谁
console.log(data); // 2
}, err => {
console.log('失败跑的最快')
})
继承有很多方式,这里不过多追溯了,可以看看这篇 JS原型链与继承别再被问倒了
主要梳理的是 寄生组合式继承 和Class继承怎么使用
「寄生组合式继承」
function inheritPrototype(subType, superType) {
// 创建对象,创建父类原型的一个副本
var prototype = Object.create(superType.prototype);
// 增强对象,弥补因重写原型而失去的默认的constructor 属性
prototype.constructor = subType;
// 指定对象,将新创建的对象赋值给子类的原型
subType.prototype = prototype;
}
测试用例????
// 父类初始化实例属性和原型属性
function Father(name) {
this.name = name;
this.colors = ["red", "blue", "green"];
}
Father.prototype.sayName = function () {
alert(this.name);
};
// 借用构造函数传递增强子类实例属性(支持传参和避免篡改)
function Son(name, age) {
Father.call(this, name);
this.age = age;
}
// 将父类原型指向子类
inheritPrototype(Son, Father);
// 新增子类原型属性
Son.prototype.sayAge = function () {
alert(this.age);
}
var demo1 = new Son("TianTian", 21);
var demo2 = new Son("TianTianUp", 20);
demo1.colors.push("2"); // ["red", "blue", "green", "2"]
demo2.colors.push("3"); // ["red", "blue", "green", "3"]
Class实现继承????
class Rectangle {
// constructor
constructor(height, width) {
this.height = height;
this.width = width;
}
// Getter
get area() {
return this.calcArea()
}
// Method
calcArea() {
return this.height * this.width;
}
}
const rectangle = new Rectangle(40, 20);
console.log(rectangle.area);
// 输出 800
// 继承
class Square extends Rectangle {
constructor(len) {
// 子类没有this,必须先调用super
super(len, len);
// 如果子类中存在构造函数,则需要在使用“this”之前首先调用 super()。
this.name = 'SquareIng';
}
get area() {
return this.height * this.width;
}
}
const square = new Square(20);
console.log(square.area);
// 输出 400
extends
继承的核心代码如下,其实和上述的寄生组合式继承方式一样????
function _inherits(subType, superType) {
// 创建对象,创建父类原型的一个副本
// 增强对象,弥补因重写原型而失去的默认的constructor 属性
// 指定对象,将新创建的对象赋值给子类的原型
subType.prototype = Object.create(superType && superType.prototype, {
constructor: {
value: subType,
enumerable: false,
writable: true,
configurable: true
}
});
if (superType) {
Object.setPrototypeOf
? Object.setPrototypeOf(subType, superType)
: subType.__proto__ = superType;
}
}
把实现原理跟面试官扯一扯,这小子基础还行。
写的初略版的,详细版的就不梳理了,面试的时候,跟面试官好好探讨一下吧????????????
var request = new XMLHttpRequest()
request.open('GET', 'index/a/b/c?name=TianTian', true);
request.onreadystatechange = function () {
if(request.readyState === 4 && request.status === 200) {
console.log(request.responseText);
}};
request.send();
去掉首位多余的空格????
String.prototype.trim = function(){
return this.replace(/^\s+|\s+$/g, '')
}
//或者
function trim(string){
return string.replace(/^\s+|\s+$/g, '')
}
//实现Object.create方法
function create(proto) {
function Fn() {};
Fn.prototype = proto;
Fn.prototype.constructor = Fn;
return new Fn();
}
let demo = {
c : '123'
}
let cc = Object.create(demo)
使用Promise封装,给你一个数组,数组的每一项是一个Promise对象
function limitRunTask(tasks, n) {
return new Promise((resolve, reject) => {
let index = 0, finish = 0, start = 0, res = [];
function run() {
if (finish == tasks.length) {
resolve(res);
return;
}
while (start < n && index < tasks.length) {
// 每一阶段的任务数量++
start++;
let cur = index;
tasks[index++]().then(v => {
start--;
finish++;
res[cur] = v;
run();
});
}
}
run();
})
// 大概解释一下:首先如何限制最大数量n
// while 循环start < n,然后就是then的回调
}
给定10进制数,转换成[2~16]进制区间数,就是简单模拟一下。
function Conver(number, base = 2) {
let rem, res = '', digits = '0123456789ABCDEF', stack = [];
while (number) {
rem = number % base;
stack.push(rem);
number = Math.floor(number / base);
}
while (stack.length) {
res += digits[stack.pop()].toString();
}
return res;
}
写出这个就很逼格满满????????????
function thousandth(str) {
return str.replace(/\d(?=(?:\d{3})+(?:\.\d+|$))/g, '$&,');
}
如果你觉得这篇内容对你挺有启发,我想邀请你帮我三个小忙:
点个「在看」,让更多的人也能看到这篇内容(喜欢不点在看,都是耍流氓 -_-)
欢迎加我微信「qianyu443033099」拉你进技术群,长期交流学习...
关注公众号「前端下午茶」,持续为你推送精选好文,也可以加我为好友,随时聊骚。
点个在看支持我吧,转发就更好了