js up
文章平均质量分 92
js一些进阶及记录知识点
风翻火焰
tel:13552106430
eMail:chern1992@163.com
展开
-
前端笔试&面试爬坑系列---算法
终于来了,算法相关的。 其实个人理解,前端岗位对于算法的要求与其他IT岗位相比,是低得多的。 但是小白我经历了如蚂蚁金服、网易这样的大厂教做人之后,还是觉得,对于一些基本算法、思想的掌握还是必须的。 然后,就把自己遇到的、学到的算法相关的再总结一下,方便自己随时备战面试。系列传送门:1.VK的秋招前端奇遇记(一)2.VK的秋招前端奇遇记(二)3.VK的秋招前端奇遇记(三)4.VK的秋招前端奇遇记(四)5.番外篇:前端面试&笔试算法 Algorithm排序JS本身数组的转载 2020-07-06 23:30:28 · 537 阅读 · 1 评论 -
JS中的算法与数据结构——链表(Linked-list)
链表(Linked-list)前面我们讨论了如何使用栈、队列进行存数数据,他们其实都是列表的一种,底层存储的数据的数据结构都是数组。但是数组不总是最佳的数据结构,因为,在很多编程语言中,数组的长度都是固定的,如果数组已被数据填满,再要加入新的元素是非常困难的。而且,对于数组的删除和添加操作,通常需要将数组中的其他元素向前或者向后平移,这些操作也是十分繁琐的。然而,JS中数组却不存在上述问题,主要是因为他们被实现了成了对象,但是与其他语言相比(比如C或Java),那么它的效率会低很多。这时候,转载 2020-07-06 23:29:06 · 220 阅读 · 0 评论 -
JSBridge 介绍及实现原理
JSBridge 介绍JSBridge是一座用JavaScript搭建起来的桥,一端是web,一端是native。我们搭建这座桥的目的也很简单,让native可以调用web的js代码,让web可以 “调用” 原生的代码。实现原理Android实现:我们来想想如何实现上面的功能。难点有这么几个:1、如何创建一个webview?如何在webview中加载网页?2、web如何调用android?对于第一点,不是本文的重点,你可以参考这个链接来自行解决。 对于第二点,我们继续分析。 w转载 2020-07-01 22:23:52 · 6993 阅读 · 0 评论 -
一文了解文件上传全过程(1.8w字深度解析,进阶必备)
前言平常在写业务的时候常常会用的到的是GET,POST请求去请求接口,GET相关的接口会比较容易基本不会出错,而对于POST中常用的 表单提交,JSON提交也比较容易,但是对于文件上传呢?大家可能对这个步骤会比较害怕,因为可能大家对它并不是怎么熟悉,而浏览器Network对它也没有详细的进行记录,因此它成为了我们心中的一根刺,我们老是无法确定,关于文件上传到底是我写的有问题呢?还是后端有问题,当然,我们一般都比较谦虚, 总是会在自己身上找原因,可是往往实事呢?可能就出在后端身上,可能是他接受写的...转载 2020-06-30 23:43:34 · 448 阅读 · 1 评论 -
近一万字的ES6语法知识点补充
前言ECMAScript 6.0(简称ES6),作为下一代JavaScript的语言标准正式发布于2015 年 6 月,至今已经发布3年多了,但是因为蕴含的语法之广,完全消化需要一定的时间,这里我总结了部分ES6,以及ES6以后新语法的知识点,使用场景,希望对各位有所帮助本文讲着重是对ES6语法特性的补充,不会讲解一些API层面的语法,更多的是发掘背后的原理,以及ES6到底解决了什么问题如有错误,欢迎指出,将在第一时间修改,欢迎提出修改意见和建议话不多说开始ES6之旅吧~~~let/co转载 2020-06-18 19:02:29 · 242 阅读 · 0 评论 -
一次弄懂Event Loop(彻底解决此类面试问题)
前言Event Loop即事件循环,是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制,也就是我们经常使用异步的原理。为啥要弄懂Event Loop 是要增加自己技术的深度,也就是懂得JavaScript的运行机制。 现在在前端领域各种技术层出不穷,掌握底层原理,可以让自己以不变,应万变。 应对各大互联网公司的面试,懂其原理,题目任其发挥。 堆,栈、队列堆(Heap)堆是一种数据结构,是利用完全二叉树维护的一组...转载 2020-06-18 18:57:10 · 637 阅读 · 0 评论 -
从event loop规范探究javaScript异步及浏览器更新渲染时机
异步的思考event loops隐藏得比较深,很多人对它很陌生。但提起异步,相信每个人都知道。异步背后的“靠山”就是event loops。这里的异步准确的说应该叫浏览器的event loops或者说是javaScript运行环境的event loops,因为ECMAScript中没有event loops,event loops是在HTML Standard定义的。event loops规范中定义了浏览器何时进行渲染更新,了解它有助于性能优化。思考下边的代码运行顺序:console.lo转载 2020-06-18 09:42:07 · 183 阅读 · 0 评论 -
Array 原型方法源码实现大解密
引言几个常用数组方法的使用方式已经在【进阶 6-1 期】中介绍过了,今天这篇文章主要看看 ECMA-262 规范中是如何定义这些方法的,并且在看完规范后我们用 JS 模拟实现下,透过源码探索一些底层的知识,希望本文对你有所帮助。#Array.prototype.map完整的结构是Array.prototype.map(callbackfn[, thisArg]),map函数接收两个参数,一个是必填项回调函数,另一个是可选项 callbackfn 函数执行时的 this 值。map方法...转载 2020-06-17 09:29:22 · 250 阅读 · 0 评论 -
深入高阶函数应用之柯里化
引言上一节介绍了高阶函数的定义,并结合实例说明了使用高阶函数和不使用高阶函数的情况。后面几部分将结合实际应用场景介绍高阶函数的应用,本节先来聊聊函数柯里化,通过介绍其定义、比较常见的三种柯里化应用、并在最后实现一个通用的 currying 函数,带你认识完整的函数柯里化。有什么想法或者意见都可以在评论区留言,下图是本文的思维导图,高清思维导图和更多文章请看我的Github。#柯里化#定义函数柯里化又叫部分求值,维基百科中对柯里化 (Currying) 的定义为:在数学和计算机.转载 2020-06-17 09:27:57 · 278 阅读 · 0 评论 -
JavaScript 高阶函数浅析
引言本期开始介绍 JavaScript 中的高阶函数,在 JavaScript 中,函数是一种特殊类型的对象,它们是 Function objects。那什么是高阶函数呢?本节将通过高阶函数的定义来展开介绍。#高阶函数高阶函数英文叫 Higher-order function,它的定义很简单,就是至少满足下列一个条件的函数:接受一个或多个函数作为输入 输出一个函数也就是说高阶函数是对其他函数进行操作的函数,可以将它们作为参数传递,或者是返回它们。 简单来说,高阶函数是一个接收函数作为参数转载 2020-06-17 09:26:50 · 156 阅读 · 0 评论 -
深入浅出防抖函数 debounce
引言上一节我们认识了节流函数 throttle,了解了它的定义、实现原理以及在 underscore 中的实现。这一小节会继续之前的篇幅聊聊防抖函数 debounce,结构是一样的,将分别介绍定义、实现原理并给出了 2 种实现代码并在最后介绍在 underscore 中的实现,欢迎大家拍砖。有什么想法或者意见都可以在评论区留言,下图是本文的思维导图,高清思维导图和更多文章请看我的Github。#定义及解读防抖函数 debounce 指的是某个函数在某段时间内,无论触发了多少次回调,都只.转载 2020-06-17 09:24:43 · 4185 阅读 · 1 评论 -
深入浅出节流函数 throttle
引言上一节我们详细聊了聊高阶函数之柯里化,通过介绍其定义和三种柯里化应用,并在最后实现了一个通用的 currying 函数。这一小节会继续之前的篇幅聊聊函数节流 throttle,给出这种高阶函数的定义、实现原理以及在 underscore 中的实现,欢迎大家拍砖。有什么想法或者意见都可以在评论区留言,下图是本文的思维导图,高清思维导图和更多文章请看我的Github。#定义及解读函数节流指的是某个函数在一定时间间隔内(例如 3 秒)只执行一次,在这 3 秒内无视后来产生的函数调用请求..转载 2020-06-17 09:23:28 · 1358 阅读 · 0 评论 -
深入探究 Function & Object 鸡蛋问题
Object.prototype我们先来看看 ECMAScript 上的定义(15.2.4)。The value of the [[Prototype]] internal property of the Object prototype object isnull, the value of the [[Class]] internal property is"Object", and the initial value of the [[Extensible]] internal prop..转载 2020-06-17 09:17:59 · 285 阅读 · 0 评论 -
图解原型链及其继承优缺点
原型链上篇文章中我们介绍了原型链的概念,即每个对象拥有一个原型对象,通过__proto__指针指向上一个原型 ,并从中继承方法和属性,同时原型对象也可能拥有原型,这样一层一层,最终指向null,这种关系被称为原型链(prototype chain)。根据规范不建议直接使用__proto__,推荐使用Object.getPrototypeOf(),不过为了行文方便逻辑清晰,下面都以__proto__代替。注意上面的说法,原型上的方法和属性被继承到新对象中,并不是被复制到新对象,...转载 2020-06-16 13:37:20 · 2482 阅读 · 0 评论 -
重新认识构造函数、原型和原型链
构造函数#什么是构造函数constructor返回创建实例对象时构造函数的引用。此属性的值是对函数本身的引用,而不是一个包含函数名称的字符串。// 木易杨function Parent(age) { this.age = age;}var p = new Parent(50);p.constructor === Parent; // truep.constructor === Object; // false构造函数本身就是一个函数,与普通函数没有任何区别,不过为了.转载 2020-06-16 13:35:29 · 324 阅读 · 0 评论 -
面试题之如何实现一个深拷贝
引言上篇文章详细介绍了浅拷贝Object.assign,并对其进行了模拟实现,在实现的过程中,介绍了很多基础知识。今天这篇文章我们来看看一道必会面试题,即如何实现一个深拷贝。本文会详细介绍对象、数组、循环引用、引用丢失、Symbol 和递归爆栈等情况下的深拷贝实践,欢迎阅读。#第一步:简单实现其实深拷贝可以拆分成 2 步,浅拷贝 + 递归,浅拷贝时判断属性值是否是对象,如果是对象就进行递归操作,两个一结合就实现了深拷贝。根据上篇文章内容,我们可以写出简单浅拷贝代码如下。// 木易杨.转载 2020-06-16 10:28:01 · 261 阅读 · 0 评论 -
Object.assign 原理及其实现
引言上篇文章介绍了赋值、浅拷贝和深拷贝,其中介绍了很多赋值和浅拷贝的相关知识以及两者区别,限于篇幅只介绍了一种常用深拷贝方案。本篇文章会先介绍浅拷贝Object.assign的实现原理,然后带你手动实现一个浅拷贝,并在文末留下一道面试题,期待你的评论。#浅拷贝Object.assign上篇文章介绍了其定义和使用,主要是将所有可枚举属性的值从一个或多个源对象复制到目标对象,同时返回目标对象。(来自 MDN)语法如下所示:Object.assign(target, ...sour...转载 2020-06-16 10:26:05 · 653 阅读 · 0 评论 -
详细解析赋值、浅拷贝和深拷贝的区别
一、赋值(Copy)赋值是将某一数值或对象赋给某个变量的过程,分为下面 2 部分基本数据类型:赋值,赋值之后两个变量互不影响 引用数据类型:赋址,两个变量具有相同的引用,指向同一个对象,相互之间有影响对基本类型进行赋值操作,两个变量互不影响。// 木易杨let a = "muyiy";let b = a;console.log(b);// muyiya = "change";console.log(a);// changeconsole.log(b);// muyiy转载 2020-06-16 10:24:49 · 163 阅读 · 0 评论 -
深度解析bind原理、使用场景及模拟实现
bind()bind()方法会创建一个新函数,当这个新函数被调用时,它的this值是传递给bind()的第一个参数,传入bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。bind返回的绑定函数也能使用new操作符创建对象:这种行为就像把原函数当成构造器,提供的this值被忽略,同时调用时的参数被提供给模拟函数。(来自参考1)语法:fun.bind(thisArg[, arg1[, arg2[, ...]]])bind方法与...转载 2020-06-16 10:20:20 · 1551 阅读 · 0 评论 -
深度解析 call 和 apply 原理、使用场景及实现
call() 和 apply()call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。call()和apply()的区别在于,call()方法接受的是若干个参数的列表,而apply()方法接受的是一个包含多个参数的数组举个例子:var func = function(arg1, arg2) { ...};func.call(this, arg1, arg2); // 使用 call,参数列表func.apply(this...转载 2020-06-16 10:15:55 · 1250 阅读 · 0 评论 -
JavaScript深入之史上最全--5种this绑定全面解析
this的绑定规则总共有下面5种。1、默认绑定(严格/非严格模式) 2、隐式绑定 3、显式绑定 4、new绑定 5、箭头函数绑定#1 调用位置调用位置就是函数在代码中被调用的位置(而不是声明的位置)。查找方法: 分析调用栈:调用位置就是当前正在执行的函数的前一个调用中 function baz() { // 当前调用栈是:baz // 因此,当前调用位置是全局作用域 console.log( "baz" ); bar(); // &转载 2020-06-15 23:21:30 · 238 阅读 · 0 评论 -
JavaScript深入之闭包面试题解
作用域指的是一个变量和函数的作用范围,JS中函数内声明的所有变量在函数体内始终是可见的,在ES6前有全局作用域和局部作用域,但是没有块级作用域(catch只在其内部生效),局部变量的优先级高于全局变量。#作用域#变量提升var scope="global";function scopeTest(){ console.log(scope); var scope="local" }scopeTest(); //undefined上面的代码输出是undefined,这是转载 2020-06-15 23:14:45 · 434 阅读 · 0 评论 -
JavaScript深入之从作用域链理解闭包
红宝书(p178)上对于闭包的定义:闭包是指有权访问另外一个函数作用域中的变量的函数,MDN 对闭包的定义为:闭包是指那些能够访问自由变量的函数。其中自由变量,指在函数中使用的,但既不是函数参数arguments也不是函数的局部变量的变量,其实就是另外一个函数作用域中的变量。使用上一篇文章的例子来说明下自由变量function getOuter(){ var date = '1127'; function getDate(str){ console.log(str + da转载 2020-06-15 23:12:38 · 191 阅读 · 0 评论 -
深入浅出图解作用域链和闭包
红宝书(p178)上对于闭包的定义:闭包是指有权访问另外一个函数作用域中的变量的函数关键在于下面两点:是一个函数 能访问另外一个函数作用域中的变量对于闭包有下面三个特性:1、闭包可以访问当前函数以外的变量function getOuter(){ var date = '815'; function getDate(str){ console.log(str + date); //访问外部的date } return getDate('今天是:'); //"今天是:.转载 2020-06-15 23:10:06 · 224 阅读 · 0 评论 -
JavaScript深入之4类常见内存泄漏及如何避免
上篇文章详细介绍了内存回收和内存泄漏,今天我们继续这个篇幅,不过重点是内存泄漏可能发生的原因。#垃圾回收算法常用垃圾回收算法叫做**标记清除 (Mark-and-sweep) **,算法由以下几步组成: 1、垃圾回收器创建了一个“roots”列表。roots 通常是代码中全局变量的引用。JavaScript 中,“window” 对象是一个全局变量,被当作 root 。window 对象总是存在,因此垃圾回收器可以检查它和它的所有子对象是否存在(即不是垃圾); 2、所有的 roots转载 2020-06-15 22:56:05 · 208 阅读 · 0 评论 -
JavaScript深入之带你走进内存机制
JS内存空间分为栈(stack)、堆(heap)、池(一般也会归类为栈中)。 其中栈存放变量,堆存放复杂对象,池存放常量,所以也叫常量池。昨天文章介绍了堆和栈,小结一下:基本类型:-->栈内存(不包含闭包中的变量) 引用类型:-->堆内存今日补充一个知识点,就是闭包中的变量并不保存中栈内存中,而是保存在堆内存中,这也就解释了函数之后之后为什么闭包还能引用到函数内的变量。function A() { let a = 1 function B() { con..转载 2020-06-15 22:53:55 · 182 阅读 · 0 评论 -
JavaScript深入之内存空间详细图解
堆栈的内容和执行顺序我就不说了,前面两篇已经介绍过了。但是今天补充一个知识点:某些情况下,调用堆栈中函数调用的数量超出了调用堆栈的实际大小,浏览器会抛出一个错误终止运行。对于下面的递归就会无限制的执行下去,直到超出调用堆栈的实际大小,这个是浏览器定义的。function foo() { foo();}foo();现在正式开始今天的主题,内存空间详解#栈数据结构栈的结构就是后进先出**(LIFO)**,如果读过前面两篇文章应该是相当熟悉了。文中使用乒乓球盒子的结构来转载 2020-06-15 22:49:45 · 149 阅读 · 0 评论 -
五、JavaScript深入之4类常见内存泄漏及如何避免
垃圾回收算法常用垃圾回收算法叫做**标记清除 (Mark-and-sweep) **,算法由以下几步组成: 1、垃圾回收器创建了一个“roots”列表。roots 通常是代码中全局变量的引用。JavaScript 中,“window” 对象是一个全局变量,被当作 root 。window 对象总是存在,因此垃圾回收器可以检查它和它的所有子对象是否存在(即不是垃圾); 2、所有的...转载 2019-10-24 17:02:34 · 120 阅读 · 0 评论 -
四、JavaScript深入之带你走进内存机制
今日补充一个知识点,就是闭包中的变量并不保存中栈内存中,而是保存在堆内存中,这也就解释了函数之后之后为什么闭包还能引用到函数内的变量。functionA(){leta=1functionB(){console.log(a)}returnB}闭包的简单定义是:函数 A 返回了一个函数 B,并且函数 B 中使用了函数 A 的变量,函数...转载 2019-10-24 16:38:40 · 146 阅读 · 0 评论 -
三、JavaScript深入之内存空间详细图解
但是今天补充一个知识点:某些情况下,调用堆栈中函数调用的数量超出了调用堆栈的实际大小,浏览器会抛出一个错误终止运行。对于下面的递归就会无限制的执行下去,直到超出调用堆栈的实际大小,这个是浏览器定义的。functionfoo(){foo();}foo();现在正式开始今天的主题,内存空间详解栈数据结构栈的结构就是后进先出(LIFO),如果读过...转载 2019-10-24 16:28:30 · 200 阅读 · 0 评论 -
二、JavaScript深入之执行上下文栈和变量对象
阅读笔记JS是单线程的语言,执行顺序肯定是顺序执行,但是JS 引擎并不是一行一行地分析和执行程序,而是一段一段地分析执行,会先进行编译阶段然后才是执行阶段。翠花,上代码例子一:变量提升foo();//报错varfoo=function(){console.log('foo1');}foo();//foo1,foo重新赋值varfo...转载 2019-10-24 15:48:31 · 81 阅读 · 0 评论 -
一.理解JavaScript 中的执行上下文和执行栈
阅读笔记执行上下文是当前 JavaScript 代码被解析和执行时所在环境的抽象概念。执行上下文的类型执行上下文总共有三种类型 全局执行上下文:只有一个,浏览器中的全局对象就是 window 对象,this指向这个全局对象。 函数执行上下文:存在无数个,只有在函数被调用的时候才会被创建,每次调用函数都会创建一个新的执行上下文。 Eval 函数执行上下文: 指...转载 2019-10-24 14:54:02 · 240 阅读 · 0 评论 -
JavaScript获取浏览器高度和宽度值及鼠标定位
JavaScript获取浏览器高度和宽度值及鼠标定位原创 2019-10-24 15:53:10 · 1076 阅读 · 0 评论