JS
文章平均质量分 81
前端瓶子君
每日一更,契而不舍。追求卓绝,放飞梦想!
展开
-
前端进阶算法1:如何分析、统计算法的执行效率和资源消耗?
简介前端还要学算法?必须学,而且必须狠狠地学。现在去大厂面试,数据结构与算法已经是标配,要是不会的话,那基本与大厂无缘了。作为一名前端,虽然在平常开发中很少写算法,但当我们需要深入前端框架、开发语言、开源库时,懂算法将大大提高我们看源码的能力。例如 react 的 diff 算法、webpack 中利用 tree-shaking 优化、v8 中的调用栈、消息队列等,这些就大量使用了算法,看懂了就能更好的了解它们的性能,更高效的解决问题,进阶到更高 Level,赚更多钱。现在市面上的算法资料很多,但针对原创 2020-05-14 09:33:31 · 336 阅读 · 0 评论 -
JS 基础之异步(五):Generator
接着上一部分继续了解JS 基础之异步(四):Generator(生成器、迭代器源码实现)Generator函数function *会定义一个生成器函数,并返回一个Generator(生成器)对象,其内部可以通过 yield 暂停代码,通过调用 next 恢复执行。调用一个生成器对象并不会马上执行里面的代码语句,而是返回一个这个生成器的迭代器(iterator)对象。当这个迭代器对象的next...原创 2019-02-01 17:33:07 · 530 阅读 · 0 评论 -
Set、WeakSet、Map及WeakMap
Set 和 Map 主要的应用场景在于 数据重组 和 数据储存Set 是一种叫做集合的数据结构,Map 是一种叫做字典的数据结构1. 集合(Set)ES6 新增的一种新的数据结构,类似于数组,但成员是唯一且无序的,没有重复的值。Set 本身是一种构造函数,用来生成 Set 数据结构。new Set([iterable])举个例子:const s = new Set()[1, 2,...原创 2019-02-03 22:53:10 · 897 阅读 · 0 评论 -
深度优先遍历与广度优先遍历
图图是一种复杂的非线性结构,它由边(边Edge)和点(顶点Vertex)组成。一条边连接的两个点称为相邻顶点。G = (V, E)图分为:有向图无向图本文探讨的是无向图图的表示图的表示一般有以下两种:邻接矩阵:使用二维数组来表示点与点之间是否有边,如 arr[i][j] = 1表示节点 i 与节点 j 之间有边,arr[i][j] = 0表示节点 i 与节点 j 之间没有...原创 2019-02-05 19:14:33 · 393 阅读 · 0 评论 -
深入 setState 机制
React 是通过管理状态来实现对组件的管理,即使用 this.state 获取 state,通过 this.setState() 来更新 state,当使用 this.setState() 时,React 会调用 render 方法来重新渲染 UI。首先看一个例子:class Example extends React.Component { constructor() { su...原创 2019-02-11 14:23:06 · 1605 阅读 · 0 评论 -
JS 基础之异步(六):co 函数库
co 函数库是 TJ 大神基于ES6 generator 的异步解决方案。要理解 co ,你必须首先理解 ES6 generator,可以看我之前的文章JS 基础之异步(五):Generator,这里不在赘述。co 现在已经不怎么使用了,一些老版本的库里可能使用它,我是在看 koa 源码的时候看到它的。co 最大的好处在于通过它可以把异步的流程以同步的方式书写出来,并且可以使用 try/cat...原创 2019-02-12 08:54:06 · 2560 阅读 · 0 评论 -
数组扁平化、去重、排序
看一道面试题:已知如下数组:var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];编写一个程序将数组扁平化去并除其中重复部分数据,最终得到一个升序且不重复的数组答案:var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11,...原创 2019-02-12 09:37:49 · 343 阅读 · 0 评论 -
JS异步解决方案的发展历程以及优缺点
JS 异步已经告一段落了,这里来一波小总结1. 回调函数(callback)setTimeout(() => { // callback 函数体}, 1000)缺点:回调地狱,不能用 try catch 捕获错误,不能 return回调地狱的根本问题在于:缺乏顺序性: 回调地狱导致的调试困难,和大脑的思维方式不符嵌套函数存在耦合性,一旦有所改动,就会牵一发而动全身,...原创 2019-02-13 11:12:53 · 2853 阅读 · 0 评论 -
探讨requestAnimationFrame
在JS中,我们可以使用 setTimeout 和 setIntarval 实现动画,但是 H5 的出现,让我们又多了两种实现动画的方式,分别是 CSS 动画(transition、animation)和 H5的canvas 实现。除此以外,H5还提供了一个专门用于请求动画的API,让 DOM 动画、canvas动画、svg动画、webGL动画等有一个专门的刷新机制。1. 是什么requestA...原创 2019-02-13 15:12:28 · 729 阅读 · 0 评论 -
ES6 之 Proxy
Proxy,代理,是ES6新增的功能,可以理解为代理器(即由它代理某些操作)。Proxy 对象用于定义或修改某些操作的自定义行为,可以在外界对目标对象进行访问前,对外界的访问进行改写。1. Proxy 定义var proxy = new Proxy(target, handler)new Proxy()表示生成一个 Proxy 实例target:目标对象handler:一个对象,其...原创 2019-02-14 14:32:30 · 399 阅读 · 0 评论 -
深入diff 算法
深入diff 算法diff 作为 Virtual DOM 的加速器,其算法上的改进优化是React页面渲染的基础和性能保障,本节从源码入手,深入剖析diff算法。React 中醉值得称道的莫过于Virtual DOM与diff的完美结合,尤其是其高效的diff算法,可以帮助我们在页面蔌渲染的时候,计算出Virtual DOM真正变化的部分,并只针对该部分进行的原生DOM操作,而不是渲染整个页面...原创 2019-02-01 15:33:17 · 19395 阅读 · 7 评论 -
['1', '2', '3'].map(parseInt) what & why ?
这是今天在 Advanced-Frontend组织 看到一个比较有意思的题目。主要是讲JS的映射与解析早在 2013年, 加里·伯恩哈德就在微博上发布了以下代码段:['10','10','10','10','10'].map(parseInt);// [10, NaN, 2, 3, 4]parseIntparseInt() 函数解析一个字符串参数,并返回一个指定基数的整数 (数学系统...原创 2019-01-22 10:15:20 · 730 阅读 · 0 评论 -
setTimeout、Promise、Async/Await
一道面试题引发的血案,下面进入主题:// 今日头条面试题async function async1() { console.log('async1 start') await async2() console.log('async1 end')}async function async2() { console.log('async2')}console...原创 2019-01-31 16:48:30 · 1947 阅读 · 2 评论 -
JS基础之instanceof
instanceof在JS中,判断一个变量的类型,常常会用到typeof运算符,但当用来判断引用类型变量时,无论是什么类型的变量,它都会返回Object。为此,引入了instanceof。instanceof相比与typeof来说,instanceof方法要求开发者明确的确认对象为某特定类型。即instanceof用于判断引用类型属于哪个构造函数的方法。var arr = []arr in...原创 2018-12-12 16:18:34 · 5167 阅读 · 1 评论 -
JS深度解析 new 原理及模拟实现
介绍下定义new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。 ——(来自于MDN)举个栗子function Car(color) { this.color = color;}Car.prototype.start = function() { console.log(this.color + " car start");}var car ...转载 2018-12-13 17:12:55 · 191 阅读 · 0 评论 -
JS基础之继承
在ES5中转载 2018-12-17 17:54:08 · 117 阅读 · 0 评论 -
腾讯前端面试篇(一)
又到年尾了,各位小伙伴的心可能又蠢蠢欲动了。。。得不到的永远在骚动,被偏爱的都有恃无恐。。。作为一个前端菜鸟的我,面试经验和工作经验并不丰富,但大大小小也面试过不少互联网圣地,今天就讲讲笔者今年初面试鹅厂的经验,希望对大家有所帮助!后面的答案为自行整理,如有疏漏,欢迎指正!先说整体情况适用范围: 一到两年的菜鸟前端开发工程师笔者情况: 笔者一共面试了好几轮技术面,最终结果技术面通过。...转载 2018-12-22 23:22:47 · 614 阅读 · 0 评论 -
JS 基础之异步(一)
已知,JS是单线程的,天生异步,适合IO密集型,不适合CPU密集型,但是,为什么是异步的喃,异步由何而来的喃,我们将在这里逐渐讨论实现单线程的JavaScript所谓单线程,是指在JS引擎中负责解释和执行JS代码的线程唯一,同一时间上只能执行一件任务。首先为什么要引入单线程喃?原因:避免DOM渲染的冲突浏览器需要渲染DOMJS可以修改DOM结构JS执行时,浏览器DOM渲染停止两段...原创 2018-12-28 18:06:25 · 347 阅读 · 0 评论 -
JS 基础之异步(二):callback
step1:callbackasyncFunction(function(value) { // todo})这种回调函数,大家是最熟悉的。一般是需要在某个耗时操作之后执行某个回调函数。例如:setTimeout(function() { console.log('Time out')}, 1000)其中,我们称setTimeout为发起函数,fn为回调函数。都是...原创 2018-12-28 18:06:52 · 565 阅读 · 0 评论 -
JS 基础之异步(三):Promise源码实现
Step2:PromisePromise就是为了解决callback的问题而产生的。Promise 本质上就是一个绑定了回调的对象,而不是将回调传回函数内部。开门见山,Promise解决的是回调函数处理异步的第2个问题:控制反转。我们把上面那个多层回调嵌套的例子用Promise的方式重构:let getPromise1 = function () { return new Pro...原创 2018-12-28 18:07:35 · 859 阅读 · 0 评论 -
腾讯前端面试篇(二)
在腾讯前端面试篇(一)中,我主要讲了笔者面试腾讯一面和二面的经历,文章得到了不错的反响,笔者一激动大晚上把女朋友晾在一边,写下了第二篇,现在耳朵和膝盖都还有点痛。第二篇会讲述笔者面试腾讯的第三面,第四面会在后续的文章更新。大家看我辛苦的份上,关注一下呗!第三面——电话面加远程机试这一面问的问题不多,问了一下网络相关的问题,还问了几个智力题,其他都为机试!来来来,废话不说,干货搞起来!从输...转载 2018-12-23 21:41:23 · 1003 阅读 · 2 评论 -
JS基础之call、apply、bind
Function.prototype.call()call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。fun.call(thisArg, arg1, arg2, ...)thisArg:在fun函数运行时指定的this值*。*arg1, arg2, …:指定的参数列表。需要注意的是,指定的this值并不一定是该函数执行时真正的this值,如...原创 2018-12-18 15:41:03 · 147 阅读 · 0 评论 -
JS 基础之异步(四):Generator(生成器、迭代器源码实现)
Step3:GeneratorGenerator 是什么**生成器(Generator)**对象是ES6中新增的语法,和Promise一样,都可以用来异步编程。但与Promise不同的是,它不是使用JS现有能力按照一定标准制定出来的,而是一种新型底层操作,async/await就是在它的基础上实现的。generator对象是由generator function返回的,符合可迭代协议和迭代器...原创 2019-01-24 17:16:14 · 1165 阅读 · 0 评论 -
JS基础之原型与原型链
JS原型与原型链一、基础入门对象在JS中,万物皆对象,对象又分为普通对象和函数对象,其中Object、Function为JS自带的函数对象。var obj1 = {}; var obj2 = new Object();var obj3 = new fun1()function fun1(){}; var fun2 = function(){};var fun3 = new ...原创 2018-12-12 16:16:34 · 211 阅读 · 0 评论