Hannaaa-CSDN博客

原创 ES6相对于ES5的优化（二）

一、关于扁平化数组一个部门JSON数据当中，属性名是部门id，属性值是各个部门成员id数组的集合，现在要把有部门的成员id提取出来放到一个数组集合中。const deps = { '人事部' : [1,2,3], '采购部' : [3,4,5], '研发部' : [5,6,7], '教育部' : [8,9,10],}let member = [];for(let item in deps){ const value = deps[item];

2021-11-06 15:42:26 237

原创 ES6相对于ES5的优化（一）

一、关于取值的写法取值在写程序当中非常常见，比如从对象obj中取值。const obj = { a:1, b:2, c:3, d:4, e:5,}//取值const a = obj.a;const b = obj.b;const c = obj.c;const d = obj.d;const e = obj.e;//或者const f = obj.a + obj.d;const g = obj.c + obj.e;使用以上.

2021-11-06 15:08:58 284

原创 console.log() 的小技巧

众所周知，我们开发项目通常会使用前端框架，前端调试变得更加有难度，除了用一些插件以外，使用console.log()是最多的。console.log()为我们提供了很多打印的方法，下面是一些console对象包含的方法：一、基本打印1.console.log()console.log()就是最最基本和常用的用法。它可以再JavaScript代码的任何地方，这样就可以在浏览器的控制台中看到打印信息。基本使用方法如下：let name = "HHHHH";let age = 18;cons

2021-11-04 20:55:08 8231

原创 await 到底在等啥？

一般来说，开始都认为是在等得一个async函数完成。但是按照语法说明的话，await是在等一个表达式，这个表达式的计算结果是Promise对象或者其它值（也就是说，，没有什么特殊限定）。因为async函数返回一个Promise对象，所以可以用于对待一个async函数的返回值——这也可以说是await在等async函数，但是要清楚的是，它等的实际是一个返回值。注意到await不仅仅用于等Promise对象，它可以等任意表达式的结果，所以await后面实际是可以接普通函数调用或者直接量的。所以下面这个示例完

2021-11-02 20:52:40 1317 1

原创 ES6中的Class、extends是什么，有什么作用？

ES6的class可以看作只是一个ES5生成实例对象的构造函数的语法糖。它参考了java语言，定义了一个类的概念，让对象原型写法更加清晰，对象实例化更像是一种面向对象编程。Class类可以通过extends实现继承。它和ES5构造函数的不同点：1.类的内部定义的所有方法，都是不可枚举的。//ES5:function Fun5(x,y){ this.x = x; this.y = y;}Fun.prototype.toString = function(){ retu

2021-11-02 19:56:01 895

原创手写防抖和节流

防抖防抖也就是一段时间之内只执行一次。比如在验证表单某个字段是否重复时发生请求次数控制，防止表单多次提交等。function debounce(fun,time){ let timer return function(){ clearTimeout(timer) //及时清除延时器（在执行debounce时要先清除之前的延时器，再重新计时） let args = arguments timer=setTimeout(()=>{ //使用延时器，在隔多少...

2021-10-23 17:01:35 99

原创迭代器和生成器

一、迭代器1.什么是迭代？迭代就是一个数据集合中按照一定的顺序，不断去除数据的过程。2.迭代和遍历的区别？迭代强调的是依次取出数据，不能确定取出的数据有多少，也不能保证数据是否取完。遍历则是保证数据的长度，循环不断的去除数据，针对数据量过大的时候会花费很多时间。3.迭代器是什么？对于迭代过程的封装，通常表现为对象的数据形式（也有数组的形式），在不同的语言中，表现出的形式是不一样的。4.迭代器满足的条件是？（1）有得到下一个数据的能力。（2）判断是否有后续数据的能力。

2021-10-16 14:53:33 175

原创 ES6中的Promise

1.Promise的含义Promise 是异步编程的一种解决方案。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。Promise对象的特点：（1）promise对象的状态不受外界影响。Promise对象代表一个异步操作，它有三种状态：pending（等待状态）处于未决阶段、fulfilled（resolved 已成功）处于已决阶段、rejected（已失败）处于已决阶段。只有异步操作的结果，可以决定当前时哪一种状态，任何其他操作都无法改变这个

2021-10-16 12:35:33 119

原创浅谈跨域问题

一、浏览器同源政策“同源”：协议相同、域名相同、端口相同。1995年，同源政策由Netscape公司引入浏览器，最初的目的是某页面所设置的cookie，只能由其“同源”页面打开。如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个目的：同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。限制：随着互联网的发展，"同源政策"越来越严格。目前，如果非同源，共有三种行为受到限制： (1)Cookie、LocalStorage 和 IndexDB 无法读

2021-10-06 18:21:39 133

原创前端面试题（三）

GET请求和post请求方式的区别？GET和POST还有一个重大区别，简单的说：GET产生一个TCP数据包；POST产生两个TCP数据包。复杂的说：对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。也就是说，GET只需要汽车跑一趟就把货送到了，而POST得跑两趟，第一趟，先去和服务器打个招呼“

2021-10-06 18:04:35 105

原创初学ajax

一、ajax简介ajax (Asynchronous Javascript And XML)其实就是异步的javaScript和XML。XML：<html>这是html标签，XML格式是一样的可以自定义<name> <age> 满足标记语言的格式就可以了。AJAX不是一门新语言，是综合HTTP异步通信、JS、XML、以及JSON等多种网络技术的一种编程模型。AJAX ~= JS+ xml+JSON + HTTP通信，本质就是在HTTP协议的基础上以异步

2021-10-06 17:55:59 109

原创经典前端面试题（二）

在浏览器地址栏中输入一段网址，计算机会发生那些过程？1.确定通信协议，保持通信畅通。常用的通信协议TCP/IP协议。HTTP工作原理首先客户端和服务端先建立连接(TCP三次握手) 发送HTTP请求服务器接受请求并返回HTTP响应客户端收到响应后断开连接(TCP四次挥手) 客户端浏览器解析HTML内容 2.通过域名查询DNS系统找到ip地址三级域名 www3.根据ip地址找到xx服务器4.通过80端口找到xx服务器所在的应用程序Ap

2021-10-06 17:45:47 1510

原创常见面试题：三次握手和四次挥手（一）

TCP的三次握手所谓三次握手即TCP连接的建立。这个连接必须是一方主动打开，另一方被动打开的。以下为客户端主动发起连接的图解：通俗理解：举个例子把客户端比作男孩，服务器比作女孩。用他们的交往来说明“三次握手”过程：（1）男孩喜欢女孩，于是写了一封信告诉女孩：我爱你，请和我交往吧！;写完信之后，男孩焦急地等待，因为不知道信能否顺利传达给女孩。（2）女孩收到男孩的情书后，心花怒放，原来我们是两情相悦呀！于是给男孩写了一封回信：我收到你的情书了，也明白了你的心意，其实，我也喜欢你！我.

2021-10-06 17:19:59 245

原创 bootstrap基础入门

1、bootstrap简介Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架。Bootstrap 是基于HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。官网：http://getbootstrap.com/中文网：http://www.bootcss.com/2、bootstrap的优点标准化的html+css编码规范提供了一套简洁、直观、强悍的组件有自己的生态圈，不断的更新迭代让开发

2021-10-06 11:44:07 166

原创移动端常见布局

移动端单独制作1、流式布局（百分比布局）流式布局：就是百分比布局，也称为非固定像素布局。通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。流式布局的方式是移动web开发使用的比较常见的布局方式。2、flex 弹性布局（可参照之前的常见的弹性盒子布局）3、less+rem+媒体查询布局①假设设计稿是750px。②假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）。③每一份作为html字体大小，这里就是50px。④

2021-10-06 11:12:02 192

原创 jQuery对象的增删改查

1.增删改查的相关方法方法说明备注 .next() 获取下一个兄弟元素节点 .prev() 获取上一个兄弟元素节点 .nextAll() 获取当前查找元素后面的所有兄弟元素 .prevAll() 获取当前查找元素前面的所有兄弟元素 .nextUntil() 查找当前元素之后的所有同辈元素，直到遇到匹配的元素位置。参数不加跟nextAll一样掐头 jquery对象或dom .prevUntil(

2021-09-25 17:11:30 233

原创初学jQuery

一、什么是jQueryjQuery其实是一堆普通的js函数（库）1、为什么会出现jQuery？减少原生js代码对dom操作时大量记忆方法。 jQuery累积了大量的插件库，极大的简化了项目的开发。 jQuery已经更新到了3.6.0版本，但是兼容性不太好。（jquery (v3.6.0) - jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。 |

2021-09-25 16:57:37 166

原创初学JavaScript

初学JavaScript1、JavaScript的特点简单性。JavaScript是一门解释型语言。所谓解释型语言是指不需要被便以为机器码再执行，而是直接执行，少了编译这一步骤，所以解释型语言开发起来尤为轻松，但是解释型语言运行比较慢。JavaScript的变量类型采用弱类型，并未使用严格的数据类型。动态性。JavaScript是一门动态语言。所谓的动态语言可以暂时理解为在语言中的一切内容都是不确定的。跨平台性。JavaScript是依赖浏览器本身，与操作环境无关，只要能运行浏览器的计算机，

2021-07-28 20:57:35 110

原创常见的弹性盒子布局

常见的弹性盒子布局1.等分布局所谓等分布局就是指一行被分为若干行，每一列的宽度是相同的值。代码实现如下：body主体部分代码如下： <div class="container">  <div class="content">天猫</div> <div class="content">淘宝</di.

2021-07-27 20:22:03 603 1

原创 2021-07-27

第一阶段的前端知识已经接近尾声，自己也收获许多，通过第一次的项目发现自己许多的不足，以及需要弥补复盘重新复习的地方。首先这次小组的项目选题是微信的官网页面，我负责的部分是微信支付、微信支付次级页面以及公众号的部分。在这次项目练习的过程中出现最大的问题还是过渡（transition）和动画（animation）的使用不够熟练，其次是页面布局不合理，多次出现页面缩小时，内容塌陷的bug，最后还有细节部分没有注意到，可能自己当时觉得细节部分很简单可以偷懒，但是通过答辩完之后，了解到在真正做项目的时候不可以偷懒

2021-07-27 17:02:55 115 1

Hannaaa的博客