![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端基础
jwz934738949
这个作者很懒,什么都没留下…
展开
-
浅拷贝与深拷贝
数据存储方式在JS中数据类型有基本数据类型(string, number, boolean, null, undefined, symbol)与引用数据类型(数组,函数,对象)基本数据类型都存放在栈内存中,栈内存中会存放变量的名与值拷贝该基本数据类型会在栈内存中开辟新的空间存放变量的名与值。修改原变量不会影响新的变量而引用数据类型会使用栈内存与堆内存来存放变量,变量的名存放在栈内存中,值存放在堆内存中,栈内存中会存放堆内存中的地址此时拷贝引用数据类型的变量,会在栈内存中开辟空间,存放变量的名,而原创 2021-06-28 19:42:45 · 54 阅读 · 0 评论 -
Gulp基础
概念Gulp是与Grunt类似的前端项目构建工具,也是基于Nodejs的自动任务运行器与Grunt一样,可以实现文件的压缩、合并,对js代码语法进行检查等功能Gulp可以实现异步多任务,更易于使用使用步骤全局安装gulp-clinpm install -g gulp-cli局部安装gulpnpm install gulp --save-dev配置gulpfile.js文件let gulp = require("gulp");// 创建任务// gulp.task原创 2021-06-28 19:42:04 · 55 阅读 · 0 评论 -
Grunt
概念Grunt是一个前端自动化构建工具,一个基于nodeJS的命令行工具Grunt是一个任务运行器,配合其丰富强大的插件可以实现合并文件、压缩文件以及语法检查、less/sass预编译处理等功能使用全局安装grunt-clinpm install -g grunt-cli安装gruntnpm install grunt --save-dev配置Gruntfile.js文件,该文件是使用Grunt所必须的文件module.exports = function(grunt原创 2021-06-28 19:41:32 · 157 阅读 · 0 评论 -
AMD规范与require.js
AMD规范AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行AMD也采用require()语句加载模块,但是不同于CommonJS,它要求两个参数:require([module], callback)第一个参数[module],是一个数组,里面的成员就是要加载的模块;第二个参数callback,则是加原创 2021-06-28 19:40:55 · 282 阅读 · 1 评论 -
去除掉数组中重复的元素
遍历数组中的每一个元素,将数组中的元素存在对象的属性中,判断对象中是否存在该元素 function distinct(arr) { let obj = {}; let result = []; arr.forEach(function (value, index) { if (!obj[value]) { obj[value] = true; result.push(value.原创 2021-06-28 19:40:24 · 47 阅读 · 0 评论 -
实现一个sleep函数
sleep函数指的是等待一段时间之后才去执行函数使用Promise const sleep = (time) => { return new Promise((resolve) => { setTimeout(resolve, time); }); }; sleep(1000).then(() => { console.log("abc"); })使用Generator function.原创 2021-06-28 19:39:54 · 150 阅读 · 0 评论 -
判断数据类型
function getType(target) { // 先处理最特殊的null if (target === null) { return "null"; } // 判断是否为基本数据类型 let type = typeof target; if (type !== 'object') { return type; } // 为引用数据类型 const te...原创 2021-06-28 19:39:18 · 48 阅读 · 0 评论 -
函数柯里化
柯里化又称为部分求值,是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回一个新的函数的技术,新函数接受余下参数并返回运算结果 function curry(func) { // 存储已存入的参数 let _args = []; function _curry(...args) { _args = _args.concat(args); if (_args.length >= .原创 2021-06-27 08:09:38 · 46 阅读 · 0 评论 -
观察者模式
观察者模式指的是函数自动观察数据对象,一旦对象有变化,函数就会自动执行。而 js 中最常见的观察者模式就是事件触发机制 class eventObs { // 要有一个对象,存储着它自己的触发函数。而且这个对象的触发函数可能有很多种 // 那么 handler 的属性应该是一个数组,每个数组的值都是一个函数。type1:[func1,func2...] constructor() { this.handleFunc = {}; }.原创 2021-06-27 08:09:01 · 41 阅读 · 0 评论 -
防抖与节流
函数防抖当一个函数被频繁触发时,为了进行优化,使用函数防抖函数防抖指的是在一段时间内,只触发一次函数当触发一次事件之后,等待一段时间之后才执行函数。当在这段时间之内,又发生了触发事件,则重新开始计时 function debounce(fn, delay) { // 定义一个定时器 let timer = null; return function () { if (timer) { // 当原创 2021-06-27 08:08:22 · 47 阅读 · 0 评论 -
序列化URL中的查询字符串
将URL地址中的查询字符串提取出来,并以键值对的形式保存到对象中去 function parseUrl() { let parsed = {}; // 通过location.search获取到URL地址 const url = location.search; if (url.length <= 1) { return parsed; } // 将查询字符串提取出来 .原创 2021-06-27 08:07:55 · 154 阅读 · 0 评论 -
前端编程题(2)
声明一个50个长度数组,再不使用循环的条件下,使得数组中的每个元素的值与它的索引想对应。即arr[0]=0,arr[1]=1 // 首先设置数组长度为51,但是使用1将每个值都连接起来之后,只会出现50个1 // 再把50个1分离放在一个数组中,则该数组的长度为50 let arr = Array(51).join("1").split("").map(function (value, index) { return index; })判断原创 2021-06-27 08:07:18 · 63 阅读 · 0 评论 -
实现倒计时功能
实现一个倒计时功能,显示现在到截止日期之间的时间,并且每一秒都会发生变化 const end = new Date("2020-11-11 00:00"); document.getElementById("deadTime").innerHTML = "2020-11-11 00:00"; function countdown() { let now = new Date(); let day, hour, minute, seco.原创 2021-06-27 08:06:15 · 227 阅读 · 0 评论 -
前端编程题
编写一个函数,让两个并不大的小数正确相乘两个不太大的小数,可以先忽略到小数点,对这两个数先进行相乘之后,再将小数点向左移动相对的位数 function mul(num1, num2) { let m = 0; // 将两个数字转为字符串 let s1 = num1.toString(), s2 = num2.toString(); // 获取这两个数字的小数的位数 m += s1.split('.')[1].原创 2021-06-27 08:05:40 · 99 阅读 · 0 评论 -
编写add()函数
编写一个add()函数,能正常执行下面的代码,并且能在控制台输出注释中的数字 console.log(add(1, 2)) //3 console.log(add(1, 2, 3)) //6 console.log(add(1)(2)) //3 console.log(add(1)(2)(3)) //6add()函数具有多个实参数量,实参数量不定;并且使用了柯里化柯里化是一种部分求值的技术,能把一个完整的函数调用分解成多次函数调.原创 2021-06-27 08:04:59 · 4282 阅读 · 0 评论 -
前端封装函数
封装一个函数isInteger()函数,用于检测传入的值是整数 /* 该函数为判断输入的数字是否为整数 1. 首先要判断该数字的类型是否为“number” 2. 类型为"number"时,可能为整数,也可以是小数、NaN、Infinity、-Infinity 3. 使用isFinite()方法可以确定输入的数值是否是有限的数字 4. 最后还需要剔除小数,当该数除以1取余为0时代表该数为整数 */ functi.原创 2021-06-27 08:04:12 · 465 阅读 · 0 评论 -
在页面上实现一个可以点击的圆形区域
map+area使用map标签与area标签。前提是页面中必须存在图片格式,在图片中存在一个可以点击的圆形区域<!--usemap可以连接到map标签,通过map标签的name属性来连接--><img src="timg.jpg" alt="" usemap="#map" width="500" height="500"><!--map标签必须定义id属性与name属性,并且这两个属性的值必须相同--><map id="map" name="map"&原创 2021-06-27 08:03:22 · 490 阅读 · 0 评论 -
三握手与四挥手
文章目录三握手四挥手为什么连接是三握手,关闭是四挥手为什么TIME_WAIT状态需要经过2MSL才能返回到CLOSE状态为什么不能用两次握手进行连接?如果已经建立了连接,但是客户端突然出现故障了怎么办三握手首先客户端与服务器端都打开,服务器端进入LISTEN(收听)状态客户端向服务器端发起请求,SYN=1,seq=x,客户端进入SYN_SEND(同步已发送)状态服务器端收到客户端传来的消息之后,向客户端发起响应,SYN=1,ACK=1,ack=x+1,seq=y,服务器端进入SYN_RECV(同原创 2020-09-28 09:36:53 · 136 阅读 · 0 评论 -
HTTP/2.0
文章目录HTTP/1.1的不足二进制分帧层多路通信请求优先级服务器推送首部压缩HTTP/1.1的不足在传输中会出现队首阻塞问题响应不分轻重缓急,只会按照先来后到的顺序执行并行通信需要建立多个TCP连接服务器不能主动推送客户端想要的资源,只能被动的等待客户端发起请求由于HTTP是无状态的,所以每次请求和响应都会携带大量冗余信息二进制分帧层在HTTP/2.0中,要先对数据进行二进制编码,再把数据分成一个一个的帧,接着把帧送到数据流中,最后对方接接收帧并拼成一条消息,再处理请求在2.0版原创 2020-09-26 20:34:22 · 146 阅读 · 0 评论 -
HTTPS
文章目录定义HTTP不安全加密对称加密非对称加密数字签名数字证书安全通信机制HTTPS有哪些缺点定义HTTPS是一种构建在SSL或TLS上的HTTP协议。HTTPS协议的URL都以“https://”开头,在访问某个Web页面时,客户端会打开一条到服务器443端口的连接HTTP不安全数据以明文传递,有被窃听的风险接收到的报文无法证明是发送时的报文,不能保障完整性,因此报文有被篡改的风险不验证通信两端的身份,请求或响应有被伪造的风险加密对称加密对称加密在加密和解密的过程中只使原创 2020-09-26 19:51:25 · 565 阅读 · 0 评论 -
TCP与UDP有什么区别
UDP是一种简单、不可靠的通信协议,只负责将数据发出,但不保证它们能否到达目的地UDP没有顺序控制,所以当出现数据包乱序到达时,没有纠正功能UDP没有重传控制,所以当数据包丢失时,也不会重发UDP在通信开始时,不需要建立连接,结束时也不用断开连接UDP无法进行流量控制、拥塞控制等避免网络拥堵的机制UDP的包头长度不到TCP包头的一半,并且没有重发、连接等机制,故而在传输速度上比起TCP有更大的优势,比较适合即时通信、信息量较小的通信和广播通信...原创 2020-09-26 19:08:02 · 80 阅读 · 0 评论 -
RESTful架构风格
RESTREST表示转述性状态转移。转述性状态转移的目的是操作资源,通过转移和控制资源的表述就能实现什么是RESTful API?如何设计RESTful API?RESTful API是指符合REST设计风格的Web API。为了使得借口安全、易用、可维护和可扩展通信使用HTTPS安全协议在URL中加入版本号URL中的路径不能有动词,只能用名词用HTTP方法对资源进行增删改查的操作用HTTP状态码传达执行结果和失败原因为集合提供过滤、排序、分页等功能用查询字符串或HTTP首部Acc原创 2020-09-26 17:14:22 · 70 阅读 · 0 评论 -
HTTP
文章目录定义HTTP协议HTTP报文缓存缓存处理过程新鲜度检测no-cache与no-store日期比对法进行再验证实体标记法进行再验证在浏览器中,一个页面从输入URL到加载完成,都有哪些步骤?GET和POST的区别定义HTTP是超文本传输协议,是获取网络资源的应用层协议,由请求和响应构成客户端发起HTTP请求,用传输层的TCP协议建立连接,服务器响应请求,做出应答,回传数据报文URI:统一资源标识符,用于标识某个互联网资源,由URL和URN构成URL:统一资源定位符,俗称网址。URL语法为原创 2020-09-26 16:30:23 · 969 阅读 · 0 评论 -
HTML元素知识点
defer与asyncdefer代表延迟,延迟脚本执行,直到文档解析完成之后,才会进行脚本的执行。但是,脚本的加载与HTML文档的解析是同步进行的async代表异步,尽快执行脚本。在脚本下载阶段,脚本的下载与HTML的解析是同步进行的,当脚本下载完毕时,优先执行脚本,脚本执行完毕以后,再进行HTML的解析content属性中的关键字content属性是meta元素的一个属性,经常与viewport连用,代表设置浏览器的视口,用于移动设备width:视口的宽度,值为像素值initial-sc原创 2020-09-25 19:56:28 · 154 阅读 · 0 评论 -
HTML与HTML5的区别
旧版本的HTML比较依赖浏览器的插件,例如播放视频要安装Flash插件HTML5不再依赖SGML,文档声明类型DOCTYPE只有一种HTML5消除了过时或冗余的元素新增了许多语义化的元素,例如article、header等,许多新的功能video或者canvas等,提供更好的跨平台支持HTML5指定了一些全新的全局属性与元素属性,全局属性有draggable、contenteditable等,元素属性有accept、placeholder等...原创 2020-09-25 19:30:18 · 146 阅读 · 0 评论 -
Flex布局
Flex布局基本概念Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性Webkit 内核的浏览器,必须加上-webkit前缀采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)主轴的开始位置(与边框的交叉点)叫做main start原创 2020-09-24 21:21:12 · 115 阅读 · 0 评论 -
Javascript中的事件循环
任务队列JS分为同步任务与异步任务所有的同步任务都会被放入执行栈(Call Stack)中,等待所有的同步任务执行完毕以后,开始执行异步任务主线程之外,事件触发线程会管理着一个任务队列(Task Queue),只要异步任务有了运行结果,就可以将该异步任务放到任务队列中去当执行栈中的同步任务执行完毕之后, 系统会读取任务队列中的异步任务,并将它们放入执行栈当中去执行宏任务宏任务(macro task)指的是在执行栈中执行的代码,或者是从事件队列中获取的异步任务浏览器在执行异步任务的时候,每原创 2020-09-24 20:18:07 · 92 阅读 · 0 评论 -
HTTP状态码
1XX 指示信息状态码英文名称中文描述100Continue继续。客户端应继续其请求101Switching Protocols切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议2XX 成功状态码英文名称中文描述200OK请求成功201Created指POST请求的结果,已在服务器上成功创建了一个或多个新资源202Accepted表示已接受处理请求,但处理尚未完成,表异步204No conten原创 2020-09-24 19:22:40 · 77 阅读 · 0 评论 -
WebSocket的使用
为什么使用WebSocket通常的浏览器通信协议为HTTP协议,在HTTP协议中要想实现通信,必须是客户端发起请求,等待服务器接收请求之后,再发回响应信息,这种情况下通信效率比较低。并且无法实现服务器向客户端发送信息如果服务器存在连续的状态变化,客户端必须使用轮询的方法来进行通信。每隔一段时间,就发起一个询问,了解服务器有没有新的变化WebSocket最大的特点就是可以由服务器发送消息,客户端来进行接收,也可以实现客户端发送消息,由服务器端进行接收,实现双向的信息通信WebSocket的特点原创 2020-09-24 17:07:03 · 152 阅读 · 0 评论 -
自适应布局与响应式布局
定义自适应布局: 自适应布局指的是页面对于不同的设备,例如手机、电脑,不同的设备会对自动根据屏幕大小调整页面的布局与大小响应式布局:响应式布局对于不同的设备会首先识别屏幕大小,会根据不同的屏幕大小调整网页设计,可能会改变网页布局与网页内容使用原因屏幕分辨率越来越多,如果每个分辨率都进行不同的网页设计,这样会加大工作量,不便于维护开发使用meta-viewport也可以解决不同设备分辨率的问题,但是仅仅是修改页面的缩放比例,其中的内容与布局并没有发生变化,不利于用户的使用解决办法使用百原创 2020-09-24 11:14:03 · 135 阅读 · 0 评论 -
使用flex布局实现九宫格
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>flex布局设置九宫格</title> <style> .content { width: 600px; height: 600px; margin: 0 auto; display: flex; /*设置排原创 2020-09-24 09:28:15 · 3263 阅读 · 0 评论 -
排序算法
冒泡排序// 冒泡排序法function bubbleSort(arr) { for (let i = 1; i < arr.length; i++) { for (let j = 0; j < arr.length - i; j++) { if (arr[j] < arr[j + 1]) { let temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp;原创 2020-09-22 16:06:50 · 63 阅读 · 0 评论 -
实现数组扁平化
数组扁平化指的是在一个数组对象中存在着一个或者多个数组成员,对其进行扁平化处理,将这个数组中的元素从数组成员中取出来,成为一个数组例如:[1, [2, 3, [4 , 5]],6, [7, 8]],扁平化之后为[1, 2, 3, 4, 5, 6, 7, 8] function flatten(arr) { let res = [] arr.map((item) => { if (Array.isArray(item)) { re.原创 2020-09-21 15:21:40 · 134 阅读 · 0 评论 -
求字符串的字节长度
假设一般字符为1个字节长度,而汉字为2个字节长度,求字符串的字节长度 function getBytes(str) { const len = str.length let bytes = len for (let i = 0; i < len; i++) { if (str.charCodeAt(i) > 255) { bytes++ } } return bytes .原创 2020-09-21 15:00:19 · 958 阅读 · 0 评论 -
用Array的reduce方法实现map方法
Array的reduce方法适用于对数组中的每两项进行累加处理,最后得到唯一的值map方法是用于对数组中的每一项都分别进行处理,得到一个新的数组 const map = function (arr, fn) { return arr.reduce((mappeedArr, ele) => { return [...mappeedArr, fn(ele)] }, []) } const arr = [2,4,5,6] cons.原创 2020-09-21 14:53:59 · 690 阅读 · 0 评论 -
普通函数与箭头函数的区别
普通函数function的声明优先级最高,会进行变量提升,优先对函数进行声明,而箭头函数不会变量提升;箭头函数没有this、arguments属性;箭头函数无法被new,没有构造函数与property属性;箭头函数不能使用yield命令,因此箭头函数不能用作Generator函数;箭头函数不能使用new:没有this,无法使用call、apply函数;没有prototype属性,使用new命令时,需要将函数的prototype属性复制给创建对象的__proto__属性...原创 2020-09-22 14:40:27 · 129 阅读 · 0 评论 -
var、let、const的区别
var定义的是全局变量,会挂载到window对象上,而let与const不会;var定义的变量存在变量提升,变量声明会自动提到作用域顶部,而let与const不会;var的作用域范围是函数作用域,而let与const作用域范围是块级作用域同一作用域下,let与const声明的变量不允许再次声明,而var可以重复声明同一变量;同一作用域下,在let与const声明变量之前使用变量会进入暂时性死区,浏览器会报错,而var可以在声明之前使用,输出为undefined;const声明时必须赋值,并且不能.原创 2020-09-20 09:34:00 · 143 阅读 · 0 评论 -
CSS特殊布局
BFC两栏布局页面实现两栏布局,左边区域设置为左浮动,右边区域不设置浮动效果当右边区域高度超过左边区域高度时,会出现右边区域来到左边区域的下方原因是右边区域不是BFC(块格式化上下文),把右边区域设置为BFC之后,即使右边区域高度高于左边区域,右边区域也不会到左边去<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>BFC两栏布局</t原创 2020-09-15 15:02:37 · 123 阅读 · 0 评论 -
CSS网格布局
网格容器display设置为grid时,网格按行排列,宽度自动占满整个屏幕display设置为inline-grid时,网格按行排列,宽度为元素本身宽度 .box1 { display: grid; } .box2 { height: 50px; background-color: aquamarine; margin-bottom: 10px; } .box1 { display: inlin原创 2020-09-14 20:54:24 · 240 阅读 · 0 评论 -
CSS水平居中
方式一父元素使用text-align居中所有子元素,子元素使用定位inline或者inline-block<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>text-align设置水平居中</title> <style> .wrapper { width: 100%; height:原创 2020-09-14 10:06:31 · 72 阅读 · 0 评论