2018年07月_banggan

原创数组和对象的深拷贝、浅拷贝

数组的浅拷贝首先看一下代码：let arr1=[1,3,3];let arr2 = arr1;console.log(arr2);//[ 1, 3, 3 ]arr1[1]=8;console.log(arr2)//[ 1, 8, 3 ]在js中，数组和对象的复制如果使用=号来进行复制，那只是浅拷贝，如上，arr的修改，会影响arr2的值，这显然在绝大多数情况下，并不是我们所需...

2018-07-30 10:25:05 353

原创如何看待typeof？

typeof判断基本数据类型这种方法对于一些常用的类型来说那算是毫无压力，比如Function、String、Number、Undefined等，如：numbertypeof(10);typeof(NaN);//NaN在JavaScript中代表的是特殊非数字值,它本身是一个数字类型。typeof(Infinity);booleantypeof(true);typeof(fa...

2018-07-30 09:56:09 315

原创 TCP与UDP的区别

一、TCP TCP的优点：可靠，稳定 TCP的可靠体现在TCP在传递数据之前，会有三次握手来建立连接，而且在数据传递时，有确认、窗口、重传、拥塞控制机制，在数据传完后，还会断开连接用来节约系统资源。 TCP的缺点：慢，效率低，占用系统资源高，易被攻击 TCP在传递数据之前，要先建连接，这会消耗时间，而且在数据传递时，确认机制、重传机制、拥塞控制机制等都会消耗大量的时间，而...

2018-07-26 19:58:54 188

原创 ES6之箭头函数

一、基本用法 ES6 允许使用“箭头”（=>）定义函数。var f = () => 5;// 等同于var f = function () { return 5 };var sum = (num1, num2) => num1 + num2;// 等同于var sum = function(num1, num2) { return num1 + num2;...

2018-07-25 10:12:59 258

原创 JavaScript内存机制

JS内存空间分为栈(stack)、堆(heap)、池(一般也会归类为栈中)。其中栈存放变量，堆存放复杂对象，池存放常量。一、基础数据类型 JS中的基础数据类型，这些值都有固定的大小，往往都保存在栈内存中（闭包除外），由系统自动分配存储空间。我们可以直接操作保存在栈内存空间的值，因此基础数据类型都是按值访问数据在栈内存中的存储与使用方式类似于数据结构中的堆栈数据结构，遵循后进先出的原则。 ...

2018-07-24 22:26:14 266

Web Workers 使得一个Web应用程序可以在与主执行线程分离的后台线程中运行一个脚本操作。这样做的好处是可以在一个单独的线程中执行费时的处理任务，从而允许主（通常是UI）线程运行而不被阻塞。作用就是给JS创造多线程运行环境，允许主线程创建worker线程，分配任务给后者，主线程运行的同时worker线程也在运行，相互不干扰，在worker线程运行结束后把结果返回给主线程。这样做的好处是主...

2018-07-24 21:28:48 240

转载 jQuery源码浅析

一、 jQuery 闭包结构 // 用一个函数域包起来，就是所谓的沙箱 // 在这里边 var 定义的变量，属于这个函数域内的局部变量，避免污染全局 // 把当前沙箱需要的外部变量通过函数参数引入进来 // 只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数 (function(window, undefined) { ...

2018-07-23 11:00:30 276

转载 ES7之async的理解

ES2017 新特性：Async Functions (异步函数) 2017年08月01日 09:15:48 阅读数：1406 ...

2018-07-21 22:07:28 1610

转载 Javascript异步编程四种方法

这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。为了解决这个问题，Javascript语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchro...

2018-07-20 15:26:05 225

原创阮一峰ES6之Generator函数理解

Generator函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同。 Generator函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号，二是，函数体内部使用yield语句，定义不同的内部状态。一、用法 function* helloWorldGenerator(){ ...

2018-07-19 17:50:45 758

原创阮一峰ES6之Promise对象的理解

一、Promise的含义 Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消...

2018-07-18 21:36:56 7462 1

原创关于图像格式jpg、gif、png、svg、bmp、WebP的区别以及应用场景

在某个公司的在线笔试中，遇到了这个问题，有点理不清，特来整理一次：一、jpg格式全名应该是JPEG。JPEG 图片以 24 位颜色存储单个光栅图像。JPEG 是与平台无关的格式，支持最高级别的压缩，不过，这种压缩是有损耗的。渐近式JPEG文件支持交错。可以提高或降低 JPEG文件压缩的级别。但是，文件大小是以图像质量为代价的。压缩比率可以高达 100:1。（JPEG 格式可在 10...

2018-07-18 11:12:54 8606 1

转载三栏布局的五种实现方式以及优缺点

假设高度已知，请写出三栏布局，左栏、右栏宽度300px，中间宽度自适应。这道题本身的难度并不大，我们在布局页面的时候，写个三栏布局还是挺简单的。但是如果在面试的时候遇到这道题，就没有那么简单了。看似简单的一道题，想把它答好是不简单的。往往越简单的题越不好答。如果看到这题只想到了浮动和绝对定位，那这题你连及格都及格不...

2018-07-18 09:46:54 948

原创关于BFC详解以及如何清除浮动

一、什么是BFC？IFC? BFC（Block Formatting Context）即“块级格式化上下文”， IFC（Inline Formatting Context）即行内格式化上下文。常规流（也称标准流、普通流）是一个文档在被显示时最常见的布局形态。一个框在常规流中必须属于一个格式化上下文，你可以把BFC想象成一个大箱子，箱子外边的元素将不与箱子内的元素产生作用。 BF...

2018-07-17 21:36:19 3906 1

原创 JS算法之背包问题

背包问题是一个组合优化的问题，描述如下：给一个固定大小，能够携重W的背包以及一组有价值重量的物品，找出一个最佳的方案，使得装入包中的物品重量不超过W且总价值最大。1、问题分析数据：物品个数n=5,物品重量weights=[2，2，6，5，4],物品价值values=[6，3，5，4，6],背包总容量W=10。我们设置一个矩阵f来记录结果：f(i.j)可表示可选的物品为{i.....n}...

2018-07-17 21:03:12 6927 1

原创正常元素、浮动元素以及绝对定位元素的居中方式

一、元素的水平居中1、行内元素的水平居中利用父元素设置text-align:center; <div style="width: 200px; height: 100px;border: 1px solid;text-align:center;"> <span>行级元素垂直居中</span> </div> ...

2018-07-17 10:39:51 262

原创 JavaScript中的事件循环详解

JavaScript是一门单线程的非阻塞的脚本语言，单线程意味着在代码执行的任何时候，都只有一个主线程来处理所有的任务；非阻塞则是当代码需要进行一项异步任务时（无法立即返回结果，需要一定的时间才能返回的任务，如I/O事件），主线程会挂起这个任务，然后在异步任务返回结果的时候再根据一定的规则去执行相应的回调。但是在JS当中却无处不存在异步的概念，那JS如何实现的非阻塞呢？-事件循...

2018-07-16 21:08:58 249

原创 http缓存问题

在前后端的http交互中，缓存是一个很重要的点，使用缓存在很大程度上可以提升效率，而且基本上对性能有要求的都必须要求使用缓存。 1、何为缓存？下面两幅图来描述：浏览器第一次请求时：浏览器后续请求：2、缓存可以划分为强缓存和协商缓存：强缓存：状态码200，浏览器如果判断本地缓存未过期，就直接使用，不需要发送请求到服务器；协商缓存：状态码304，浏览器向服务器发起...

2018-07-14 17:08:55 799

原创 TCP三次握手四次挥手

一、为什么需要三次握手？假设有这样的一个场景，client发出的第一个请求链接报文段没有丢失，而是因为在网络结点长时间的滞留了，以致延误到连接释放以后的某个时间才打到sever，这个报文本应该是失效的，如果不是三次握手而是两次握手，会让客服端和服务端再次建立连接，导致不必要的错误和资源的浪费。如果采用的是三次握手，就算是失效的那个报文段发送过来了，服务端收到了那个失效的报文并回复了确认报文...

2018-07-13 15:37:28 440

原创 JS实现选择排序

1，算法简介选择排序是一个简单直观的排序方法，它的工作原理很简单，首先从未排序序列中找到最大的元素，放到已排序序列的末尾，重复上述步骤，直到所有元素排序完毕。2，算法描述1）假设未排序序列的第一个是最大值，记下该元素的位置，从前往后比较2）若某个元素比该元素大，覆盖之前的位置3）重复第二个步骤，直到找到未排序的末尾4）将未排序元素的第一个元素和最大元素交换位置5）重复前面几个步骤，直到所有元素都已...

2018-07-12 15:45:16 11625

原创 JS实现冒泡排序

1，算法简介冒泡排序是一种简单的排序算法，它的工作原理是重复走访要排列的元素，一次比较两个元素，若两个元素有错误，则将它们交换，直到没有元素再交换，排序结束。2，算法描述1）比较相邻元素，如果第一个比第二个大，就交换2）对每一对相邻元素作相同的工作，从第一对到最后一对，最后那个元素会是最大元素3）针对所有元素执行上面的操作，除了最后一个除外4）持续每次对越来越少的元素重复上面的步骤，直到没有任何一...

2018-07-12 15:31:44 202

原创原生ajax的实现

ajax是一种异步通信技术，在ajax出现之前，客服端与服务端直接通信，有了ajax以后，通过在后台与服务器进行少量的数据交换，可以达到在不刷新整个页面的情况下实现局部刷新。 ajax的技术核心是XMLHttpRequest对象，使用ajax一般需要以下四个步骤： 1、创建对象var xhr = new XMLHttpRequest(); 注：xhr对于低版本的IE浏览器...

2018-07-12 09:14:02 246

原创关于JS类型转换那点事

在牛客网上刷题，经常会遇到JS类型转换相关的题目，特总结常考、又很容易出错的考点：1、Boolean转换在JavaScript中，以下的值被当做false:，其余均为trueundefined、null、0、NaN、空字符串2、Boolean与任何类型进行比较，布尔类型转换为Number类型再做比较，如：console.log(([])?true:false);console.log([]==f...

2018-07-11 21:26:03 112

原创 webpack打包工具

概念webpack 是一个 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。首先放一张官网给出的：最主要的是四个核心：入口(entry)输出(output)loader插件(plugi...

2018-07-10 21:08:42 310

原创 JS实现插入排序

一，插入排序1，算法简介插入排序的工作原理就是将未排序数据，对已排序数据序列从后向前扫描，找到对应的位置并插入。插入排序通常采用占位的形式，空间复杂度为O(1),因此，在从后向前扫描的过程中，需要反复的把已排序的元素逐步向后挪位，为新插入元素提供插入的位置。2，算法描述1）从第一个元素开始，该元素可以被认为已经被排序2）取出下一个元素，在已经排好序的序列中从后往前扫描3）直到找到小于或者等于该元素...

2018-07-10 15:29:02 13110

原创 JS实现堆排序

一，堆的概念堆是一棵顺序存储的二叉树其中每个节点的关键字都不大于其子节点的关键字，这样的堆称为小根堆其中每个节点的关键字都不小于其自己点的关键字，这样的堆称为大根堆下面是一个典型的小根堆：二，堆的调整堆的调整是为了保持堆的特性而做的一个操作，对以某一个节点为根的子树做堆调整，其实就是将该根节点进行”下沉操作”(具体是通过和子节点的交换完成的)，一直下沉到合适位置，使得刚才的子树满足堆的性质为止。对...

2018-07-10 15:03:15 3626 2

原创 JS实现快速排序

1.算法思想通过一次排序将要排序的数组分割成两个独立的部分，其中一部分的所有数据小于另外一部分的所有数据，然后按照此方法对两个部分的数据进行快速排序，整个过程采用递归实现，以此达到整个数组变为有序数组。时间复杂度：平均-O(nlogn)，最好-O(nlogn)，最坏-O(n^2)；空间复杂度：O(longn).2.算法思路1.从序列中选取一个基准值；2.遍历整个序列，比基准值小的数放在左边，...

2018-07-10 13:00:16 311

原创关于元素的定位详解

在Web前端中，元素的定位是必须掌握的，然后也是比较容易搞混淆的：positon包含以下值：1.absolute 绝对定位：相对位置为最近一级的非static定位的父元素；2.relative 相对定位：相对正常位置进行布局；3.fixed 固定定位：相对于浏览器窗口进行定位；4.static 没有定位：元素出现在正常的流中，absolute绝对定位：采用绝对定位，会脱离文档流，浮动起来，...

2018-07-10 12:31:10 663

bangbanggangan的博客