nenliu-优快云博客

原创数据结构之树和二叉树

树型结构是一类重要的非线性数据结构，树是以分支关系定义的层次结构。树（Tree）树是n（n>=0）个结点的有限集。在任意一棵非空树中：（1）有且仅有一个特定的根结点（Root）（2）当n>1时，其余节点可分为m（m>0）个互不相交的有限集，其中每一个集合本身又是一棵树，并且称为根的子树（SubTree）一些相关的基本术语：（1）度（Degree）：...

2018-09-23 11:25:40 887

原创数据结构之栈和队列

栈和队列是两种重要的线性结构。从数据结构角度来看，栈和队列也是线性表，它们是操作受限的线性表，被称为限定性的数据结构。栈（Stack）栈是限定仅在表尾进行插入或删除操作的线性表。表尾端被称为栈顶（top），表头端称为栈底（bottom），不含元素的空表称为空栈。栈又称为后进先出（last in first out）的线性表（LIFO结构）。栈要记录的数据：（1）栈顶位置...

2018-09-22 20:40:54 430

原创数据结构之线性表（顺序表&链表）

线性表线性表是数据结构的一种，一个线性表是n个具有相同特性的数据元素的有限序列。线性表的逻辑结构简单，便于实现和操作。线性表的特征：（1）线性表是一个序列（2）n=0时，线性表是一个空表（3）线性表中的第一个元素无前驱，最后一个元素无后继，其他元素有且只有一个前驱和后继。（4）线性表是有长度的，其长度就是元素个数，且线性表的元素个数是有限的。线性表的分类：（1）...

2018-09-22 11:28:44 797

原创再谈DOM原生操作！

前面已经有一篇博文总结了一些DOM的原生操作方法了，今天进个阶吧^^给一个场景，其HTML结构如下（假设页面中只有一个ul标签）：<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li></ul>现在，我们要对其做如...

2018-09-18 21:28:27 310

原创 JavaScript逻辑运算符的计算规则

JavaScript中的逻辑运算符包括三种：&&（与），||（或），！（非）。一般情况下这三种运算符的返回结果均是布尔值true或者false。但是&&和||有例外。1.逻辑非（！）其结果一定是一个布尔值。一般使用方式为双非返回一个数值对应的布尔值。其运算规则如下： !运算数运算数结果布尔值 true false 布尔值...

2018-09-18 10:34:36 683

原创事件循环（Event Loop）之setTimout与Promise

这是我今年秋招笔试面试被考频率最高的一个知识点，没有之一！在连续摔了两跤之后，觉得真的有必要把这个知识点整理一下。首先了解一下事件循环（event loop）。【参考了阮老师的日志http://www.ruanyifeng.com/blog/2014/10/event-loop.html】1.JavaScript是单线程JavaScript语言的一大特点就是单线程，也就是说在同一时间只...

2018-09-18 09:04:15 930 1

原创 HTTP常见的请求方法和状态码

HTTP常见的请求方法：（1）GET（2）POST（3）PUT（4）DELETE（5）HEAD（6）OPTIONS（7）TRACE当浏览器向Web服务器发出请求时，它向服务器传递了一个数据块，也就是请求信息，HTTP请求信息由3部分组成：（1）请求方法URI协议/版本；（2）请求头；（3）请求正文HTTP响应也由3部分组成：（1）协议状态版本代码描述；（2）响应...

2018-09-15 13:22:00 4597

原创 this，apply，call，bind详解

this的指向在ES5中，this总是指向最后一个调用它的那个对象，也就是说this的指向可能会发生变化。在ES6中，箭头函数的this指向其被定义时所在的对象。看看以下的几个例子：var name="windowName";function func(){ var name="funcName"; console.log(this.name);}func(); //打...

2018-09-15 09:30:55 247

原创 new操作符到底做了什么？

new操作符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。语法：new constructor[([arguments])]其中，constructor是一个指定对象实例的类型的类或函数，arguments是一个用来被constructor调用的参数列表。 var a = new A();假设我们要创建一个构造函数A()的实例a，则必须使用new操作符。会经...

2018-09-14 22:13:21 3243

原创 ES6的常用特性

1.变量声明let && constlet用于声明变量，const用于声明常量，两者都为块级作用域。const声明的常量被设置完成之后就不能修改，如果声明的是一个对象，那么可以改变对象的值，只要内存地址不变即可。let声明的变量不存在变量提升特性，而var声明的变量存在变量声明提升，即变量可以在声明之前使用，值为undefined。const在声明时必须被赋值。...

2018-09-14 21:36:46 340

原创 Vue.js——实现vue组件之间的通信

1.父组件->子组件<div id="app"> <son :message="msg"></son></div><script> //创建一个vue实例 const app=new Vue({ el:"#app", data:{ msg:"我是父组件的数

2018-09-14 08:40:26 234

转载纯CSS绘图

基于今天的面试问题“使用CSS画一个三角形”，特作此总结。参考链接：http://www.jb51.net/css/41448.html图形包括基本的矩形，圆形，椭圆，三角形，多边形，也包括一些复杂的爱心，钻石，阴阳八卦等。1.正方形#square{ width:100px; height:100px; background:red; }2....

2018-09-14 08:40:07 276

起源：通过网络获取内容既缓慢，成本又高。大的响应需要在客户端和服务器之间进行多次往返通信，这样拖延了浏览器可以使用和处理内容的时间，同时也增加了访问者的数据成本。所以缓存和重用已获取的资源能够有效地提升网站与应用的性能。web缓存能够减少延迟与网络阻塞，进而减少显示某个资源所用的时间。借助HTTP缓存，web站点变得更具有响应性。缓存：缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。...

2018-09-14 08:39:47 929

原创 ES6——Promise对象

本文参考公众号：web前端教程首先来看一下没有Promise时经常出现的一个回调：//请求A开始$.ajax( success:function(res1){ //请求B开始 $.ajax( success:function(res2){ //请求C开始 $.ajax( success:function(res3){ }); ...

2018-09-14 08:39:35 314

原创 Web前端面试——HTTP部分

1.一次完整的HTTP事务流程（1）域名解析（2）发起TCP的三次握手（3）建立TCP连接后发起http请求（4）服务器响应http请求，浏览器得到HTML代码（5）浏览器解析HTML代码，并请求HTML代码中的资源（6）浏览器对页面进行渲染呈现给用户（7）连接结束2.用什么解析成IP？从网址到IP地址的转换，称为DNS解析，DNS解析是一个递归查询的过程，具体...

2018-09-14 08:39:17 45545 4

原创 CSS布局——两栏布局

题外话：心情不好想虐虐自己。两栏布局要求说明：左侧固定宽度，右侧自适应大小HTML文档结构如下： <body> <div class="outer"> <div calss="inner left">这是左边</div> <div class="inner right">这是右边&a

2018-09-14 08:39:00 302

原创 Web前端面试题——HTML/CSS部分理解题

1.盒子模型（1）是什么：每个元素被表示为一个矩形的盒子，由四部分组成：内容（content）、内边距（padding）、边框（border）、外边距（margin）。它在页面中所占的实际大小（宽高）是content+padding+border+margin之和。（2）盒模型有两种：标准盒模型（W3C盒模型）、IE盒模型。（3）两种盒模型的区别：标准盒模型内容大小就是conten...

2018-09-14 08:38:38 22869 2

原创 Web前端面试——JavaScript部分理解题

1.JavaScript数据类型（1）六种基本数据类型：number、string、boolean、undefined、null、symbol（新）。（2）null和undefined的区别：null表示一个对象被定义了，值为“空值”，而undefined表示不存在这个值；typeof null结果为object，typeof undefined结果为undefined。通常用undefi...

2018-09-14 08:37:29 416

原创 jQuery基础

jQuery是一个JavaScript库。主要是通过jQuery包装DOM对象生成jQuery对象来简化JavaScript编程。基本语法是$(选择器).动作()。常用的jQuery操作方法：用法释义 $("标签").html() 获取标签对应元素内的HTML代码 $("标签").html("html代码段") 设置（新增/修改）标签内的html代码 $("...

2018-09-13 22:12:33 177

原创数组扁平化

数组的扁平化，就是将一个嵌套多层的数组转换为只有一层的数组。如[1,[2,[3,4]]]经扁平化处理后为[1,2,3,4]。数组扁平化实现方法：1.递归循环遍历数组，如果数组元素为一个数组，则递归调用扁平化方法。使用Array.isArray()来判断是否为数组。//1.递归function flatten(arr){ var result=[]; for(var i=0;...

2018-09-13 21:37:36 374

原创 React Native生命周期

这篇文章主要讲讲RN的生命周期，并概述一下在每个阶段都干了些什么。RN的生命周期大致可分为三个阶段，实例化 -> 运行 -> 销毁。首先讲讲大体的三个阶段做了啥：实例化阶段：组件第一次绘制。这个阶段完成组件的加载和初始化。运行阶段：组件进行交互。这个阶段组件可以处理交互，或者接受新的事件更新界面。销毁阶段：组件卸载消亡。这个阶段做一些组件的清理工作。下...

2018-09-13 11:38:28 3555

原创 MVC，MVP，MVVM架构模式

这篇博简单分析了一下MVC，MVP，MVVM三种架构。1. MVC（Model-View-Controller）功能划分：View即视图，表示用户界面；Model即模型，主要存储数据；Controller即控制器，负责业务逻辑。数据关系：View接受到用户的交互请求 -> View将请求转交给Controller -> Controller操作Model更新数据 ->...

2018-09-11 10:50:48 220

原创什么是闭包？

简单来说，可以访问外部环境变量的函数就是闭包。为了更好地理解闭包，需要了解一下局部变量和全局变量，我们只需要知道，在函数内部可以直接读取到全局变量，但是在函数外部是无法读取函数体内的局部变量的。所以就需要考虑以下场景：出于种种原因，我们需要得到函数内部的局部变量。这个时候的做法就是，在函数的内部再定义一个函数，那么此时内部函数是可以访问外部函数中的变量的，所以，我们可以把内部函数作...

2018-09-10 20:27:08 3891

原创 DOM原生遍历、获取、修改节点内容

距离上次发表博客应该已经快有两个月了吧，从4月到如今我囤了很多草稿，基本都是开了个头就没继续了，一直想找时间把它们完成的，然而各种懒，各种借口。。。昨天做了阿里的模拟笔试，时间50min，这个是真正意义上的前端笔试，最后有两个问答题需要写点代码，做完觉得我可能需要回炉重练了哈哈哈哈哈。。。讲正题，这篇博主要是熟悉如何使用原生操作DOM节点，并获取节点内容。HTML主体结构：&...

2018-09-05 11:16:37 3471 2

原创 this对象

this对象是在运行时基于函数的执行环境绑定的：1）在全局函数中，this等于window2）当函数被作为某个对象的方法调用时，this等于那个对象3）匿名函数的执行环境具有全局性，因此其this对象通常指向window（通过call和apply可以改变this的指向）下面来看一些例子：var name="Window";var obj={ name:"Object", getName:fu...

2018-06-07 11:58:53 337

原创 JavaScript事件委托

参考链接：JavaScript 事件委托详解概念事件委托就是把一个元素响应事件（click，keydown...）的函数委托到另一个元素。一般来讲，会把一个或一组元素的事件委托到它的父层或者更外层元素上，所以真正绑定事件的是外层元素，当时间响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件，然后在外层元素上执行函数。事件流/事件传播假设单击一个li标签，标签内有一个a链接（...

2018-04-13 18:14:16 437

原创 CSS单位——px，em，rem...

1. px # px（像素）是一个虚拟长度单位，是计算机系统的数字化图像长度单位 # 特点： #1. px是一种绝对单位（absolute units）。其他的绝对单位有：mm（毫米），cm（厘米），in（英寸），pt（点），pc（十二点活字） #2. IE无法调整使用px作为单位的字体大小（缩放） ...

2018-04-13 11:50:12 369

转载跨域

按照顺序，我们需要先知道什么是跨域（cross-origin）？为什么要跨域？怎么跨域？首先需要了解浏览器的“同源策略”（same-origin policy）：同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。而所谓的“源”（origin）指的是：协议，域名，端口号。然后，对于网络小白，需要补充一下域名（domain name）的知识点。百度告诉我们域名...

2018-04-11 16:48:29 758

转载 Web安全攻防

参考网址：【干货分享】Web安全漏洞深入分析及其安全编码常见 Web 安全攻防总结Web 安全入门之常见攻击来一张镇博图：安全无小事。1.XSS介绍：全英Cross Site Script，跨站脚本攻击。原理：攻击者在Web页面中插入恶意脚本，当用户浏览页面时，嵌入其中的脚本代码会被执行，从而可以达到攻击目的（盗取用户信息或其他侵犯用户安全隐私）示意图：分类：（1）存储型XSS（Stored XS...

2018-04-11 15:39:49 8118

原创算法——二分法查找（binarySearch）

二分法查找，也称为折半法，是一种在有序数组中查找特定元素的搜索算法。二分法查找的思路如下：（1）首先，从数组的中间元素开始搜索，如果该元素正好是目标元素，则搜索过程结束，否则执行下一步。（2）如果目标元素大于/小于中间元素，则在数组大于/小于中间元素的那一半区域查找，然后重复步骤（1）的操作。（3）如果某一步数组为空，则表示找不到目标元素。二分法查找的时间复杂度O(logn)。非递归算法：func...

2018-04-11 14:52:35 170668 18

原创算法——桶排序（BucketSort）

桶排序的思路就是将数组分到有限的桶中，然后再分别排序，最后将各个桶中的数据有序地合起来。具体如下：（1）遍历数组，找到数组的最小值和最大值（2）根据步长和最值的差值，计算桶的个数Math.ceil((max-min+1)/step)（3）再次遍历数组，分档归入所属的桶内，并使用插入排序决定元素应该被放在桶的哪个位置（4）遍历桶中的数据，将数据有序地合起来桶排序的性能：时间复杂度：最好O(n+k) ...

2018-04-10 21:29:50 1398

转载操作系统——进程（process）与线程（thread）

今天把好几篇一个月之前的私密文章开放了，因为发现手机端无法查看私密文章，仓促之间，有些文章其实是参照了别人的东西，暂时就这样吧。以后一定要规划出一个时间用来整理我的博客了。这篇博文其实总结了几篇文章之后，加了一点自己的理解。面试和笔试在考操作系统时，进程和线程其实应该算是挺常见的一个问题了。目前为止我还没有被问到这个，不过在笔试中已经打过照面了。先来点粗暴易懂的吧。贴上阮老师的原文：点击打开链接阮...

2018-04-10 17:06:54 790

转载面试系列——变量提升

本文纯粹是无意间看到知乎一篇前端面试总结，作为面试官角度分析的一篇文章，深有感触。附上链接：https://zhuanlan.zhihu.com/p/25855075写给最初的我。#一个不起眼的问题：for(var i=0;i<5;i++){ setTimeout(function(){console.log(new Date,i)},1000);}console.log(new Da...

2018-04-10 15:40:02 403

原创算法——插入排序（InsertSort）

插入排序的思路就是将一个记录插入到已经排好序的有序表中，从而得到一个新的，记录数增1的有序列表，具体步骤如下：（1）将原数组的第一个数看成是一个有序序列（2）取下一个元素，在已经排序的有序序列中从后向前扫描（3）如果有序序列中某元素大于新元素，则将该元素后移一位（4）重复步骤（3），直到某元素小于或等于新元素，然后将新元素插入到该元素下一个位置（5）重复步骤（2）~（4），直到得到一个长度等于原数...

2018-04-10 15:17:39 324

原创算法——堆排序（Heapsort）

首先需要说明一下“堆”这个数据结构：完全二叉树（Complete Binary Tree）：若设二叉树的深度为h，除第h层外，其他各层（1~h-1）的结点都达到最大个数，第h层所有的结点都连续集中在最左边，这就是完全二叉树。堆是具有以下性质的完全二叉树：每个结点的值都大于或等于其左右孩子结点的值，称为大顶堆；每个结点的值都小于或等于其左右孩子结点的值，称为小顶堆。堆的示意图：上图中，我们对堆中的结...

2018-04-10 15:16:56 284

原创算法——希尔排序（ShellSort）

希尔排序，又称缩小增量排序，也是一种插入排序方法。它与插入排序的不同之处在于，它会优先比较距离较远的元素。希尔排序的核心在于间隔序列的设定。既可以提前设定好间隔序列，也可以动态地定义间隔序列。希尔排序的基本思想是，将整个待排序记录序列分割成若干个子序列，然后对每一个子序列进行直接插入排序。具体如下：（1）先取一个正整数分成d1，把全部记录d1个组，所有距离为d1的倍数的记录看成一组，然后在各组内进...

2018-04-10 15:16:35 376

原创 javascript——数组去重

面视频考数组去重有一下集中常用方法：1.双层循环（适用该法，因为兼容性好）：function unique(array){ var res=[]; for(var i=0;i<array.length;i++){ for(var j=0;j<res.length;j++){ if(array[i]===res[j]){ break; } } if(j...

2018-04-10 15:16:07 250

原创算法——冒泡排序（BubbleSort）

冒泡排序是一种交换排序，它的思路主要是两两比较相邻元素，如果反序则交换，知道没有反序的记录为止。具体步骤如下：（1）依次两两比较相邻的元素，如果第一个元素比第二个大，则进行交换（2）经过第一轮比较后，最大的数已经出现在数组的最后一个位置（3）对除了数组最后一个元素外的所有元素重复步骤（1），倒数第二大的数出现在数组的倒数第二个位置（4）重复步骤（1）~（3），直到排序完毕冒泡排序的时间复杂度和空间...

2018-04-10 15:15:42 1210

原创 Vue的生命周期

去年大致了解过Vuejs的一些特性，最近两天在细看。Vue的生命周期，了解一下。Vue的生命周期通俗点讲，Vue实例从创建到销毁的过程称为Vue的生命周期。具体包括开始创建，初始化数据，编译模板，挂载DOM-->渲染，更新-->渲染，卸载等一系列过程。在Vue的整个生命周期中，它提供了一些生命周期钩子（lifecyclehook），让我们可以执行自定义逻辑。生命周期钩子（lifecyc...

2018-04-10 09:12:06 240

原创 JS实现继承的几种方式

面试中，继承是一大类问题。本文总结了个人对继承的几种方式的理解，并分析了一些优缺点。1.原型继承//父类：Animalfunction Animal(name){ this.name=name || "Animal"; this.master="铲屎官"; this.sleep=function(){ console.log(this.name+ "正在睡觉"); }}//原型属...

2018-04-09 17:34:54 173

空空如也

空空如也