面试
文章平均质量分 50
zhengzhengwang
这个作者很懒,什么都没留下…
展开
-
nodejs多行输入输出规范示例
nodejs 多行输入输出规范示例原创 2023-02-27 16:29:21 · 683 阅读 · 0 评论 -
浏览器内核、渲染引擎和js引擎的关系
浏览器内核又可以分成两部分:渲染引擎(layout engineer或者RenderingEngine)和JS引擎。渲染引擎功能作用渲染引擎,负责对网页语法的解释(如HTML、JavaScript)并渲染网页。所以,通常所谓的浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同,这也是网页编写者需要在不同内核的浏览器中测试网页显示效果...转载 2021-09-03 14:52:12 · 616 阅读 · 0 评论 -
js 自己实现字符串的数学运算
const nums = []let input = '3+20*1/4*2-2'const operate1 = ['*', '/']const operate2 = ['+', '-']const calc1 = (str) => { let result = 0 let n = 0 for (let i = 0; i < str.length; i++) { const element = str[i]; if (oper..原创 2021-09-02 14:57:28 · 1553 阅读 · 1 评论 -
VO、AO、执行环境和作用域链
1、变量对象(variable object)原文:Every execution context has associated with it a variable object. Variables and functions declared in the source text are added as properties of the variable object. For function code, parameters are added as properties of the转载 2021-09-01 21:24:08 · 774 阅读 · 0 评论 -
js 判断对象是否通过new创建
//方式1function Person(n,a){ this.name = n; this.age = a; if(this instanceof Person){ alert('new调用'); }else{ alert('函数调用'); }}var p = new Person('jack',30); // --> new调用Person(); // --> 函数调用//方式2function P.原创 2021-08-30 21:13:48 · 820 阅读 · 0 评论 -
JS 实现函数链式调用
let index = 0 let stack = [] function next(){ let fn = stack[index] index++ if(typeof fn === 'function') { fn() } } function T(name) { stack.push(function() { console.log('Hi! This is' + name) next() }) .转载 2021-08-30 18:17:20 · 930 阅读 · 0 评论 -
js 实现sleep函数
async function test() { for (var i = 0; i < 10; i++) { await sleep(1000); console.log(i); }} function sleep(delay) { return new Promise((resolve, reject) => { setTimeout(() => { try { .转载 2021-08-30 18:12:02 · 335 阅读 · 0 评论 -
js 深拷贝函数
// 定义一个深拷贝函数 接收目标target参数function deepClone(target) { // 定义一个变量 let result; // 如果当前需要深拷贝的是一个对象的话 if (typeof target === 'object') { // 如果是一个数组的话 if (Array.isArray(target)) { result = []; // 将result赋值为一个数组,并且执行遍历 .转载 2021-08-25 15:33:07 · 726 阅读 · 0 评论 -
js 箭头函数和普通函数的区别
箭头函数和普通函数的区别一.外形不同:箭头函数使用箭头定义,普通函数中没有代码实例如下:// 普通函数function func(){ // code}// 箭头函数let func=()=>{ // code}二.箭头函数都是匿名函数普通函数可以有匿名函数,也可以有具体名函数,但是箭头函数都是匿名函数。代码实例如下:// 具名函数function func(){ // code}// 匿名函数let func=function(){ // co...转载 2021-08-25 15:20:16 · 428 阅读 · 0 评论 -
js实现二叉树的先序、中序、后序遍历,递归和非递归方法
//递归实现function TreeNode(x){ this.val=val; this.left=null; this.right=null;}// 递归方法function threeOrders(root){ let preArray=[],middleArray=[],lastArray=[]; //先序遍历:根、左、右 function preOrder(root){ if(root){ preA.转载 2021-08-24 23:14:01 · 331 阅读 · 0 评论 -
js 求二叉树的深度
const root = { val: 4, left: { val: 2, left: { val: 1 }, right: { val: 3 } }, right: { val: 5, right: { val: 6, right: {.转载 2021-08-24 21:59:28 · 301 阅读 · 0 评论 -
js 四种继承方式
继承说到继承,最容易想到的是ES6的extends,当然如果只回答这个肯定不合格,我们要从函数和原型链的角度上实现继承,下面我们一步步地、递进地实现一个合格的继承实现一个方法可以从而实现对父类的属性和方法的继承,解决代码冗余重复的问题一. 原型链继承原型链继承的原理很简单,直接让子类的原型对象指向父类实例,Child.prototype=new Parent()1当子类实例找不到对应的属性和方法时,就会往它的原型对象,也就是父类实例上找,从而实现对父类的属性和方法的继承原型继转载 2021-08-23 15:56:13 · 131 阅读 · 0 评论 -
js正则匹配方法:match和exec
match是字符串方法,写法为:str.match(reg) exec是正则表达式方法,写法为:reg.exec(str) match和exec在匹配成功时返回的都是数组,在没有匹配上时返回的都是null,故在没有深入了解两者的使用规则前,会误以为两者的使用效果是一样的,下面在几种情况中对match和exec进行区分。1、全局匹配: 当不使用全局匹配时,两者的匹配效果是一样的,仅返回第一次匹配成功的结果:var s = "aaa bbb ccc";var reg = /\b转载 2021-08-22 15:35:04 · 1761 阅读 · 0 评论 -
JavaScript 实现多叉树的遍历
/** * 用于演示的 JSON 树形数据结构 */var root = { name:'D盘', children:[ { name:'学习', children:[ { name:'电子书', children:[ { name:'文学', children:[ { .转载 2021-08-22 15:20:43 · 583 阅读 · 0 评论 -
React16版本新增生命周期getDerivedStateFromProps替代componentWillReceiveProps的原因
一直使用componentWillReceiveProps来进行当props发生变化时更新state,重新渲染。但是使用react16.3及以上版本时,提示componentWillReceiveProps将在17版本时被废弃。可以使用getDerivedStateFromProps来进行替代。于是研究了一下如何用getDerivedStateFromProps替代componentWillReceiveProps。1 含义getDerivedStateFromProps生命周期的意思就是从props转载 2021-08-20 18:06:37 · 871 阅读 · 0 评论 -
react中super()的理解
es6 class(类) 方法创建组件1 // 构造函数 会 默认生成 一个原型对象2 function Person(name,) {3 this.name = name;4 }5 console.log(Person); // 构造函数本身6 console.log(Person.prototype) // 指向原型对象7 console.log(Pers转载 2021-08-20 17:41:04 · 1136 阅读 · 0 评论 -
js 暂时性死区的理解
当程序的控制流程在新的作用域(module function 或 block作用域)进行实例化时,在此作用域中用let/const声明的变量会先在作用域中被创建出来,但因此时还未进行词法绑定,所以是不能被访问的,如果访问就会抛出错误。因此,在这运行流程进入作用域创建变量,到变量可以被访问之间的这一段时间,就称之为暂时死区。TDZ(暂时性死区)是一个很重要的概念,在很多的面试环节都有可能问到该概念,其影响let、const、import、class、typeof等关键字的可用性,不容忽视;因此大家.原创 2021-08-20 17:20:02 · 285 阅读 · 0 评论 -
JS 语法有效性的判断
给定一个只包括 '(',')','{','}','[',']'的字符串,判断字符串是否有效。有效字符串需满足:左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。注意空字符串可被认为是有效字符串。/** * @param {string} s * @return {boolean} */var isValid = function(s) { if(s==" "||s==""){ return true; } let stac.转载 2021-08-19 16:41:57 · 831 阅读 · 0 评论 -
一维数组变成树结构
let dataArr = [ { id:1, name:'爷爷', pid:0 }, { id:2, name:'爸爸', pid:1 }, { id:3, name:'伯伯', pid:1 }, { id:4, name:'辉', pid:2 }, { id:5, name:'军', pid:3 }, ]var toTree = function(tarArray){.转载 2021-08-18 18:16:25 · 285 阅读 · 0 评论 -
js 自己实现Promise
function Promise(exector) { var _this = this this.status = 'pending' this.value = undefined this.resolveList = [] this.rejectList = [] try { exector(resolve, reject) }catch(e) { reject(e) } function resolve(value) { if(_thi.转载 2021-05-21 18:29:16 · 122 阅读 · 0 评论 -
ES6 模块与 CommonJS 模块的差异
它们有三个重大差异。CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。 CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。 CommonJS 模块的require()是同步加载模块,ES6 模块的import命令是异步加载,有一个独立的模块依赖的解析阶段。第二个差异是因为 CommonJS 加载的是一个对象(即module.exports属性),该对象只有在脚本运行完才会生成。而 ES6 模块不是对象,它的对外接口只是一种静态定义,在代码静态解析阶段就会生成转载 2021-04-14 19:40:29 · 83 阅读 · 0 评论 -
js 累计积分技术分享算法
前端团队的技术分享2周一次,一次2人为了确定下一次是谁来分享,团队中引入了分享积分制,具体规则为:每个人都有一个积分,初始值是0。每次分享后所有人摇一轮骰子,点数作为积分累加到各自的积分中,骰子范围是1-12。积分最高的2个人将作为下一次的分享人。为了避免连续分享,某个人分享后他的积分会被清零且跳过本次的摇骰子环节。如果积分最高的人数超过2人,则相同分数的人继续摇骰子,直到决出2个积分最高的人。需要注意的是,这期间摇骰子的积分也同样累积。请你编写代码模拟这个过程,数据结构和函数组织自由发挥..原创 2021-04-14 15:27:55 · 740 阅读 · 0 评论 -
js中事件循环和Nodejs中事件循环对比
1.JavaScript中事件循环可以参考《JavaScript忍者秘籍第二版》第十三章,讲解的很好。JavaScript中事件循环,主要就在理解宏任务和微任务这两种异步任务。宏任务(macrotask): setTimeOut 、 setInterval 、 setImmediate 、 I/O 、 各种callback、 UI渲染 、messageChannel等优先级:主代码块 > setImmediate > postMessage > setTimeOut/set...转载 2021-04-13 15:13:41 · 648 阅读 · 0 评论 -
js 自由变量的取值
函数在定义的时候(不是调用的时候),就已经确定了函数体内部自由变量的作用域在函数中this到底取何值,是在函数真正被调用执行的时候确定的,函数定义的时候确定不了。因为this的取值是执行上下文环境的一部分,每次调用函数,都会产生一个新的执行上下文环境。自由变量的取值是要到创建这个函数的那个作用域中取值,而不是到父作用域中取值 var a=10; function fn(){ console.log(a); } function fn2(fn){.原创 2021-04-13 11:09:21 · 585 阅读 · 0 评论 -
js 原型循环引用
Object instanceof Function //trueFunction instanceof Function //trueFunction instanceof Object //true// 原型循环引用Object.__proto__ == Function.prototype //trueFunction.prototype==Function.__proto__ //trueFunction.__proto__==Object.__proto__ //trueObje.原创 2021-04-13 11:03:20 · 202 阅读 · 0 评论 -
js 实现JSON.stringify 转化加格式化
//输入:var data = { a: 1, b: [2, 3, { c: 4 }], d: { e: 5, f: { g: '6' }, }}//输出:"{ "a": 1, "b": [ 2, 3, { "c": 4 } ], "d": { "e": 5, "f": { "g": "6" }.原创 2021-04-12 15:03:23 · 1502 阅读 · 0 评论 -
js 继承到多个对象
functionMyClass(){SuperClass.call(this);OtherSuperClass.call(this);}//继承一个类MyClass.prototype=Object.create(SuperClass.prototype);//混合其它Object.assign(MyClass.prototype,OtherSuperClass.prototype);//重新指定constructorMyClass.prot...原创 2021-04-12 11:03:38 · 189 阅读 · 0 评论 -
十大经典排序算法
0、算法概述0.1 算法分类十种常见排序算法可以分为两大类:比较类排序:通过比较来决定元素间的相对次序,由于其时间复杂度不能突破O(nlogn),因此也称为非线性时间比较类排序。 非比较类排序:不通过比较来决定元素间的相对次序,它可以突破基于比较排序的时间下界,以线性时间运行,因此也称为线性时间非比较类排序。0.2 算法复杂度0.3 相关概念稳定:如果a原本在b前面,而a=b,排序之后a仍然在b的前面。 不稳定:如果a原本在b的前面,而a=b,排序之后 a 可能会出现在 .转载 2021-04-09 14:20:52 · 78 阅读 · 0 评论 -
Vue和react 列表项中key作用
其实不只是vue、react中在执行列表渲染时也会要求给每个组件添加上key这个属性。要解释key的作用,不得不先介绍一下虚拟DOM的Diff算法了。我们知道,vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。vue和react的虚拟DOM的Diff算法大致相同,其核心是基于两个简单的假设:1. 两个相同的组件产生类似的DOM结构,不同的组件产生不同的DOM结构。2. 同一层级的一组节点,他们可以通...转载 2021-04-09 11:45:03 · 95 阅读 · 0 评论 -
http 协商缓存和强缓存
1、浏览器缓存缓存这东西,第一次必须获取到资源后,然后根据返回的信息来告诉如何缓存资源,可能采用的是强缓存,也可能告诉客户端浏览器是协商缓存,这都需要根据响应的header内容来决定的。下面用两幅图来描述浏览器的缓存是怎么玩的,让大家有个大概的认知。浏览器第一次请求时:浏览器后续在进行请求时:从上图可以知道,浏览器缓存包含两种类型,即强缓存(也叫本地缓存)和协商缓存,浏览器在第一次请求发生后,再次请求时:浏览器在请求某一资源时,会先获取该资源缓存的header信息,判断是..转载 2021-04-08 14:54:28 · 113 阅读 · 0 评论 -
canvas 性能优化
Canvas 最常见的用途是渲染动画。渲染动画的基本原理,无非是反复地擦除和重绘。为了动画的流畅,留给我渲染一帧的时间,只有短短的 16ms。在这 16ms 中,我不仅需要处理一些游戏逻辑,计算每个对象的位置、状态,还需要把它们都画出来。如果消耗的时间稍稍多了一些,用户就会感受到「卡顿」。所以,在编写动画(和游戏)的时候,我无时无刻不担忧着动画的性能,唯恐对某个 API 的调用过于频繁,导致渲染的耗时延长。计算与渲染把动画的一帧渲染出来,需要经过以下步骤:计算:处理游戏逻辑,计算每个对象的状态,转载 2021-04-12 15:05:43 · 821 阅读 · 0 评论 -
js 垃圾回收机制
js中的内存回收在js中,垃圾回收器每隔一段时间就会找出那些不再使用的数据,并释放其所占用的内存空间。以全局变量和局部变量来说,函数中的局部变量在函数执行结束后这些变量已经不再被需要,所以垃圾回收器会识别并释放它们。而对于全局变量,垃圾回收器很难判断这些变量什么时候才不被需要,所以尽量少使用全局变量。2.垃圾回收的两种模式那么垃圾回收器是如何检测变量是否需要的呢,大体上分为两种检测手段,引用计数与标记清除。引用计数引用计数的判断原理很简单,就是看一份数据是否还有指向它的引用,如果没有转载 2021-04-04 23:44:43 · 194 阅读 · 0 评论 -
JS变量的内存分配
JavaScript支持的数据类型可分为两大类:基本数据类型和复杂数据类型。其中基本数据类型包含了数字(number)类型、字符串(string)类型、布尔(boolean)类型、未定义(undefined)类型、空(null)类型;复杂类型包含了对象(object)类型,在JavaScript中数组、函数都属于对象类型。除了基本数据类型以外的数据类型全都是对象类型。在JavaScript中,基本数据类型变量分配在栈内存中,其中存放了变量的值,对其是按值访问的;而对象类型的变量则同时会分配栈内存和堆内存,其转载 2021-04-04 23:39:23 · 314 阅读 · 0 评论 -
图形学渲染管线 opengl
图形渲染管线是实时渲染的核心组件。渲染管线的功能是通过给定虚拟相机、3D场景物体以及光源等场景要素来产生或者渲染一副2D的图像。如上图所示,场景中的3D物体通过管线转变为屏幕上的2D图像。渲染管线是实时渲染的重要工具,实时渲染离不开渲染管线。图形渲染管线主要包括两个功能:一是将物体3D坐标转变为屏幕空间2D坐标,二是为屏幕每个像素点进行着色。渲染管线的一般流程如下图所示。分别是:顶点数据的输入、顶点着色器、曲面细分过程、几何着色器、图元组装、裁剪剔除、光栅化、片段着色器以及混合测试。我们会在后文对管线的各个转载 2021-04-04 17:18:11 · 220 阅读 · 0 评论 -
WEBGL - 七种基本图形的绘制
通过gl.drawArrays(mode, girst,count)方法,可以绘制七种基本图形,如下表所示基本图形 参数 描述 点 gl.POINTS 一系列的点,绘制在v0 ,v1,v2.... 线段 gl.LINES 一系列单独的线段,绘制在(v0, v1),(v2,v3)...,若点个数使奇数,则最后一个点被忽略 线条 gl.LINE_STRIP 一系列连接的线段,绘制在(v0,v1),(v1,v2)...最后一个点使一条线段的终点 .转载 2021-04-04 17:08:52 · 713 阅读 · 0 评论 -
WebGL,OpenGL和OpenGL ES的关系
一、OpenGL ES简介在上一章中,我们介绍了OpenGL,知道了它是用于计算机图形绘制的编程接口标准,支持不同平台上的图形绘制,在计算机上发挥了重要作用。后来,随着手机等移动设备性能的快速提高,人们已经不满足于将移动设备的应用止于通讯应用、记事等传统平面应用。而越来越注重移动设备功能的多样化、娱乐化,手机3D游戏、GPS导航系统等代表了未来移动设备发展的方向。基于这种情况,Khronos组织于2003年7月发布了专门针对于嵌入式设备图形开发的标准OpenGL ES(Op...转载 2021-04-04 13:35:02 · 294 阅读 · 0 评论 -
WebGL着色器使用
1、着色器webgl绘图必须依赖于着色器,这是一种新的绘图机制,它可以灵活而且强大的绘制二维和三维图形。首先,需要了解以下什么是着色器着色器代码写在javaScript中,以字符串的形式存在。webgl需要两种着色器代码:顶点着色器 片元着色器1.1 顶点着色器首先来看一下代码// 顶点着色器var vertex_shader_source = 'void main() {' + ' gl_Position = vec4(0.0, 0.0, 0.0,.转载 2021-04-04 13:05:49 · 327 阅读 · 0 评论 -
taro 多个平台打包的原理
编译工作流与抽象语法树(AST)Taro 的核心部分就是将代码编译成其他端(H5、小程序、React Native等)代码。一般来说,将一种结构化语言的代码编译成另一种类似的结构化语言的代码包括以下几个步骤:首先是 parse,将代码 解析(Parse)成 抽象语法树(Abstract Syntex Tree),然后对 AST 进行 遍历(traverse)和 替换(replace)(这对于前端来说其实并不陌生,可以类比 DOM 树的操作),最后是 生成(generate),根据新的 AST原创 2021-04-02 11:17:51 · 750 阅读 · 0 评论 -
Babel 模块理解
Babel 是一个通用的多功能的 JavaScript 编译器,更确切地说是源码到源码的编译器,通常也叫做 转换编译器(transpiler)。 意思是说你为 Babel 提供一些 JavaScript 代码,Babel 更改这些代码,然后返回给你新生成的代码。此外它还拥有众多模块可用于不同形式的 静态分析。静态分析是在不需要执行代码的前提下对代码进行分析的处理过程 (执行代码的同时进行代码分析即是动态分析)。 静态分析的目的是多种多样的, 它可用于语法检查,编译,代码高亮,代码转换,优化,压缩等等场景原创 2021-04-02 10:09:47 · 350 阅读 · 1 评论 -
vue 组件 实例 自动提示的搜索框
<template> <div class="wrapper"> <el-autocomplete size="small" v-model="msg" :fetch-suggestions="querySearchAsync" placeholder="请输入内容..." @select="hand...转载 2021-03-31 16:26:29 · 866 阅读 · 0 评论