创建10个标签，点击的时候弹出来对应的序号
var a
for(let i=0;i<10;i++){
a=document.createElement('a')
a.innerHTML=i+'<br>'
a.addEventListener('click',function(e){
console.log(this)
e.preventDefault()
alert(i)
})
const d=document.querySelector('div')
d.appendChild(a)
}
判断是否是电话号码
function isPhone(tel) {
var regx = /^1[34578]\d{9}$/;
return regx.test(tel);
}
验证是否是邮箱
function isEmail(email) {
var regx = /^([a-zA-Z0-9_\-])+@([a-zA-Z0-9_\-])+(\.[a-zA-Z0-9_\-])+$/;
return regx.test(email);
}
二叉树深度遍历
class Node {
constructor(element, parent) {
this.parent = parent
this.element = element
this.left = null
this.right = null
}
}
class BST {
constructor(compare) {
this.root = null
this.size = 0
this.compare = compare || this.compare
}
compare(a,b) {
return a - b
}
add(element) {
if(this.root === null) {
this.root = new Node(element, null)
this.size++
return
}
let currentNode = this.root
let compare
let parent = null
while (currentNode) {
compare = this.compare(element, currentNode.element)
parent = currentNode
if(compare > 0) {
currentNode = currentNode.right
} else if(compare < 0) {
currentNode = currentNode.left
} else {
currentNode.element = element
}
}
let newNode = new Node(element, parent)
if(compare > 0) {
parent.right = newNode
} else if(compare < 0) {
parent.left = newNode
}
this.size++
}
preorderTraversal(visitor) {
const traversal = node=>{
if(node === null) return
visitor.visit(node.element)
traversal(node.left)
traversal(node.right)
}
traversal(this.root)
}
inorderTraversal(visitor) {
const traversal = node=>{
if(node === null) return
traversal(node.left)
visitor.visit(node.element)
traversal(node.right)
}
traversal(this.root)
}
posterorderTraversal(visitor) {
const traversal = node=>{
if(node === null) return
traversal(node.left)
traversal(node.right)
visitor.visit(node.element)
}
traversal(this.root)
}
invertTree() {
const traversal = node=>{
if(node === null) return
let temp = node.left
node.left = node.right
node.right = temp
traversal(node.left)
traversal(node.right)
}
traversal(this.root)
return this.root
}
}
先序遍历
二叉树的遍历方式
![图片转存失败，建议将图片保存下来直接上传
var bst = new BST((a,b)=>a.age-b.age)
bst.add({age: 10})
bst.add({age: 8})
bst.add({age:19})
bst.add({age:6})
bst.add({age: 15})
bst.add({age: 22})
bst.add({age: 20})
class Visitor {
constructor() {
this.visit = function (elem) {
elem.age = elem.age*2
}
}
}
console.log(bst.invertTree(),'反转二叉树')
]()```
### 查找字符串中出现最多的字符和个数
> 例: abbcccddddd -> 字符最多的是d，出现了5次
```javascript
let str = "abcabcabcbbccccc";
let num = 0;
let char = '';
str = str.split('').sort().join('');
let re = /(\w)\1+/g;
str.replace(re,($0,$1) => {
if(num < $0.length){
num = $0.length;
char = $1;
}
});
console.log(`字符最多的是${char}，出现了${num}次`);
验证是否是身份证
function isCardNo(number) {
var regx = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
return regx.test(number);
}
实现一个队列
基于链表结构实现队列
const LinkedList = require('./实现一个链表结构')
class Queue {
constructor() {
this.ll = new LinkedList()
}
offer(elem) {
this.ll.add(elem)
}
peek() {
return this.ll.get(0)
}
remove() {
return this.ll.remove(0)
}
}
var queue = new Queue()
queue.offer(1)
queue.offer(2)
queue.offer(3)
var removeVal = queue.remove(3)
console.log(queue.ll,'queue.ll')
console.log(removeVal,'queue.remove')
console.log(queue.peek(),'queue.peek')
实现单例模式
核心要点: 用闭包和
Proxy属性拦截
function proxy(func) {
let instance;
let handler = {
constructor(target, args) {
if(!instance) {
instance = Reflect.constructor(fun, args);
}
return instance;
}
}
return new Proxy(func, handler);
}
实现Vue reactive响应式
class Dep {
static stack = []
static target = null
deps = null
constructor() {
this.deps = new Set()
}
depend() {
if (Dep.target) {
this.deps.add(Dep.target)
}
}
notify() {
this.deps.forEach(w => w.update())
}
static pushTarget(t) {
if (this.target) {
this.stack.push(this.target)
}
this.target = t
}
static popTarget() {
this.target = this.stack.pop()
}
}
function reactive(o) {
if (o && typeof o === 'object') {
Object.keys(o).forEach(k => {
defineReactive(o, k, o[k])
})
}
return o
}
function defineReactive(obj, k, val) {
let dep = new Dep()
Object.defineProperty(obj, k, {
get() {
dep.depend()
return val
},
set(newVal) {
val = newVal
dep.notify()
}
})
if (val && typeof val === 'object') {
reactive(val)
}
}
class Watcher {
constructor(effect) {
this.effect = effect
this.update()
}
update() {
Dep.pushTarget(this)
this.value = this.effect()
Dep.popTarget()
return this.value
}
}
const data = reactive({
msg: 'aaa'
})
new Watcher(() => {
console.log('===> effect', data.msg);
})
setTimeout(() => {
data.msg = 'hello'
}, 1000)
实现有并行限制的 Promise 调度器
题目描述:JS 实现一个带并发限制的异步调度器 Scheduler，保证同时运行的任务最多有两个
addTask(1000,"1");
addTask(500,"2");
addTask(300,"3");
addTask(400,"4");
的输出顺序是：2 3 1 4
整个的完整执行流程：
一开始1、2两个任务开始执行
500ms时，2任务执行完毕，输出2，任务3开始执行
800ms时，3任务执行完毕，输出3，任务4开始执行
1000ms时，1任务执行完毕，输出1，此时只剩下4任务在执行
1200ms时，4任务执行完毕，输出4
实现代码如下:
class Scheduler {
constructor(limit) {
this.queue = [];
this.maxCount = limit;
this.runCounts = 0;
}
add(time, order) {
const promiseCreator = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log(order);
resolve();
}, time);
});
};
this.queue.push(promiseCreator);
}
taskStart() {
for (let i = 0; i < this.maxCount; i++) {
this.request();
}
}
request() {
if (!this.queue || !this.queue.length || this.runCounts >= this.maxCount) {
return;
}
this.runCounts++;
this.queue
.shift()()
.then(() => {
this.runCounts--;
this.request();
});
}
}
const scheduler = new Scheduler(2);
const addTask = (time, order) => {
scheduler.add(time, order);
};
addTask(1000, "1");
addTask(500, "2");
addTask(300, "3");
addTask(400, "4");
scheduler.taskStart();
实现一个双向绑定
defineProperty 版本
const data = {
text: 'default'
};
const input = document.getElementById('input');
const span = document.getElementById('span');
Object.defineProperty(data, 'text', {
set(newVal) {
input.value = newVal;
span.innerHTML = newVal;
}
});
input.addEventListener('keyup', function(e) {
data.text = e.target.value;
});
proxy 版本
const data = {
text: 'default'
};
const input = document.getElementById('input');
const span = document.getElementById('span');
const handler = {
set(target, key, value) {
target[key] = value;
input.value = value;
span.innerHTML = value;
return value;
}
};
const proxy = new Proxy(data, handler);
input.addEventListener('keyup', function(e) {
proxy.text = e.target.value;
});
对象扁平化
function objectFlat(obj = {}) {
const res = {}
function flat(item, preKey = '') {
Object.entries(item).forEach(([key, val]) => {
const newKey = preKey ? `${preKey}.${key}` : key
if (val && typeof val === 'object') {
flat(val, newKey)
} else {
res[newKey] = val
}
})
}
flat(obj)
return res
}
const source = { a: { b: { c: 1, d: 2 }, e: 3 }, f: { g: 2 } }
console.log(objectFlat(source));
实现Ajax
步骤
-
创建
XMLHttpRequest实例 -
发出 HTTP 请求
-
服务器返回 XML 格式的字符串
-
JS 解析 XML，并更新局部页面
-
不过随着历史进程的推进，XML 已经被淘汰，取而代之的是 JSON。
了解了属性和方法之后，根据 AJAX 的步骤，手写最简单的 GET 请求。
树形结构转成列表（处理菜单）
[
{
id: 1,
text: '节点1',
parentId: 0,
children: [
{
id:2,
text: '节点1_1',
parentId:1
}
]
}
]
转成
[
{
id: 1,
text: '节点1',
parentId: 0
},
{
id: 2,
text: '节点1_1',
parentId: 1
}
...
]
实现代码如下:
function treeToList(data) {
let res = [];
const dfs = (tree) => {
tree.forEach((item) => {
if (item.children) {
dfs(item.children);
delete item.children;
}
res.push(item);
});
};
dfs(data);
return res;
}
setTimeout与setInterval实现
setTimeout 模拟实现 setInterval
题目描述: setInterval 用来实现循环定时调用 可能会存在一定的问题 能用 setTimeout 解决吗
实现代码如下:
function mySetInterval(fn, t) {
let timerId = null;
function interval() {
fn();
timerId = setTimeout(interval, t);
}
timerId = setTimeout(interval, t);
return {
cancel:() => {
clearTimeout(timerId)
}
}
}
var a = mySetInterval(()=>{
console.log(111);
},1000)
var b = mySetInterval(() => {
console.log(222)
}, 1000)
a.cancel()
b.cancel()
为什么要用
setTimeout模拟实现setInterval？setInterval的缺陷是什么？
setInterval(fn(), N);
上面这句代码的意思其实是
fn()将会在N秒之后被推入任务队列。在setInterval被推入任务队列时，如果在它前面有很多任务或者某个任务等待时间较长比如网络请求等，那么这个定时器的执行时间和我们预定它执行的时间可能并不一致
let startTime = new Date().getTime();
let count = 0;
setInterval(() => {
let i = 0;
while (i++ < 10000000);
count++;
console.log(
"与原设定的间隔时差了：",
new Date().getTime() - (startTime + count * 1000),
"毫秒"
);
}, 1000)
再次强调 ，定时器指定的时间间隔，表示的是何时将定时器的代码添加到消息队列，而不是何时执行代码。所以真正何时执行代码的时间是不能保证的，取决于何时被主线程的事件循环取到，并执行。
setInterval(function, N)
上图可见，
setInterval每隔100ms往队列中添加一个事件；100ms后，添加T1定时器代码至队列中，主线程中还有任务在执行，所以等待，some event执行结束后执行T1定时器代码；又过了100ms，T2定时器被添加到队列中，主线程还在执行T1代码，所以等待；又过了100ms，理论上又要往队列里推一个定时器代码，但由于此时T2还在队列中，所以T3不会被添加（T3被跳过），结果就是此时被跳过；这里我们可以看到，T1定时器执行结束后马上执行了 T2 代码，所以并没有达到定时器的效果
setInterval有两个缺点
-
使用
setInterval时，某些间隔会被跳过 -
可能多个定时器会连续执行
可以这么理解 ：每个
setTimeout产生的任务会直接push到任务队列中；而setInterval在每次把任务push到任务队列前，都要进行一下判断(看上次的任务是否仍在队列中)。因而我们一般用setTimeout模拟setInterval，来规避掉上面的缺点
setInterval 模拟实现 setTimeout
const mySetTimeout = (fn, t) => {
const timer = setInterval(() => {
clearInterval(timer);
fn();
}, t);
};
实现一个compose函数
组合多个函数，从右到左，比如：
compose(f, g, h)最终得到这个结果(...args) => f(g(h(...args))).
题目描述:实现一个 compose 函数
function fn1(x) {
return x + 1;
}
function fn2(x) {
return x + 2;
}
function fn3(x) {
return x + 3;
}
function fn4(x) {
return x + 4;
}
const a = compose(fn1, fn2, fn3, fn4);
console.log(a(1));
实现代码如下
function compose(...funcs) {
if (!funcs.length) return (v) => v;
if (funcs.length === 1) {
return funcs[0]
}
return funcs.reduce((a, b) => {
return (...args) => a(b(...args)))
}
}
compose创建了一个从右向左执行的数据流。如果要实现从左到右的数据流，可以直接更改compose的部分代码即可实现
-
更换
Api接口：把reduce改为reduceRight -
交互包裹位置：把
a(b(...args))改为b(a(...args))
转化为驼峰命名
var s1 = "get-element-by-id"
var f = function(s) {
return s.replace(/-\w/g, function(x) {
return x.slice(1).toUpperCase();
})
}
字符串查找
请使用最基本的遍历来实现判断字符串 a 是否被包含在字符串 b 中，并返回第一次出现的位置（找不到返回 -1）。
a='34';b='1234567';
a='35';b='1234567';
a='355';b='12354355';
isContain(a,b);
function isContain(a, b) {
for (let i in b) {
if (a[0] === b[i]) {
let tmp = true;
for (let j in a) {
if (a[j] !== b[~~i + ~~j]) {
tmp = false;
}
}
if (tmp) {
return i;
}
}
}
return -1;
}
请实现一个 add 函数，满足以下功能
add(1);
add(1)(2);
add(1)(2)(3)；
add(1)(2, 3);
add(1, 2)(3);
add(1, 2, 3);
function add(...args) {
let fn = function(...newArgs) {
return add.apply(null, args.concat(newArgs))
}
fn.toString = function() {
return args.reduce((total,curr)=> total + curr)
}
return fn
}
考点：
-
使用闭包， 同时要对JavaScript 的作用域链（原型链）有深入的理解
-
重写函数的
toSting()方法
add(1).toString();
add(1)(2).toString();
add(1)(2)(3).toString()；
add(1)(2, 3).toString();
add(1, 2)(3).toString();
add(1, 2, 3).toString();
实现some方法
Array.prototype.mySome=function(callback, context = window){
var len = this.length,
flag=false,
i = 0;
for(;i < len; i++){
if(callback.apply(context, [this[i], i , this])){
flag=true;
break;
}
}
return flag;
}
so
-
结尾依旧：长风破浪会有时，直挂云帆济沧海！
-
在线整理的确实很好，对文章进行了一个汇总整理，在线备战面试、刷题指南，拿走不谢，要学会站在别人的肩膀上提升自己点击这里-->
最后:
如果你现在正在找工作，可以私信“web”或者直接添加小助理进群领取前端面试小册、简历优化修改、大厂内推以及更多阿里、字节大厂面试真题合集，和p8大佬一起交流。
5465
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
