前端
努力努力再努力12138
勇往直前,不忘初心
展开
-
js deepClone实现考虑到对象, 数组, Date, 正则和函数
js deepClone实现考虑到对象, 数组, Date, 正则和函数function deepClone(target) { const map = new WeakMap() function isObject(target) { return (typeof target === 'object' && target ) || typeof target === 'function' } function clone(da原创 2021-11-17 19:27:23 · 327 阅读 · 0 评论 -
VUE3.0 创建项目 简单易上手 小白 vue-cli
前提:已安装好nodejs,npmtips:安装nodejs后npm也就安装好了可以通过命令检测版本来看是否已成功安装1、打开cmd命令窗口,输入以下命令安装vuenpm install -g @vue/cli2、也许命令会显示手动安装某个模块,此时使用npm install '模块名’就可以搞定3、新建一个文件夹,名为vue34、使用vscode或其他工具打开此文件夹5、打开终端,输入vue create hello-vue3 创建名为hello-vue3的项目6、如不需要路由,原创 2021-07-24 12:59:06 · 240 阅读 · 0 评论 -
创建对象属性,方法
创建对象属性,方法let person = { name : 'ning', age : 19, say : function() { return "hello world!"; }};let person = {};person.name = 'ning';person.age = 19;person.say = function() { return "hello world!";}let person = { nam原创 2021-05-13 23:28:40 · 113 阅读 · 0 评论 -
js 0-1背包
0-1背包问题给定背包容量W,一系列物品{weight,value},每个物品只能取一件,求最大价值采用动态规划解决(动态规划从前往后,后面的值取决于前面的直接用就可以,像填格子)找到关键位置第i个物品,装还是不装装如果装,则最大价值取决于前i-1个物品在背包重量为W-weight(i)的情况下的值和不装的值的最大值f[i][j] = Math.max(f[i-1][j],values[i]+f[i-1][j-weights[i]])不装如果不装,则最大价值取决于前i-1个物品在原创 2021-04-24 00:30:42 · 316 阅读 · 1 评论 -
css居中
1、块元素居中1、flex布局主轴,交叉轴设为center2、子绝父相2、1 绝对定位移到一半后再移回来知道子元素宽高 position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -50px; 不知道子元素宽高 position: absolute; top原创 2021-04-21 20:27:14 · 55 阅读 · 0 评论 -
圣杯布局和双飞翼布局 清除浮动
1、先序知识 – 清除浮动clear:bothfloat:脱离文档流CSS中说脱离文档流是指盒子从普通的布局排版中拿出来,其他盒子进行放置时,会当其不存在而进行布局。而脱离文档流分为两种:完全脱离文档流:例如position:absolute,使用绝对定位的盒子,其他盒子无论是其本身还是里面的任何元素都会无视这个绝对定位的盒子进行布局。部分脱离文档流:即float盒子,使用float属性后,其他block盒子会无视float盒子进行布局,但是其他盒子内的inline元素和inline-block原创 2021-04-16 20:00:12 · 116 阅读 · 0 评论 -
实现数字->汉字的转化 js
三个case:12345 -> 一万二千三百四十五10002 -> 一万零二10080 -> 一万零八十思路:1、设立两个数组,一个放数字读音,一个放单位读音2、将数组依次放入数组中3、依据读音依次给字符串赋值4、将字符串中多的零去掉;// 12345 -> 一万二千三百四十五// 10002 -> 一万零二// 10080 -> 一万零八十function revert(num) { let r_num = ['零','一','二','三原创 2021-04-15 21:07:08 · 170 阅读 · 0 评论 -
js 事件循环机制
可直接跳到总结JavaScript定义:单线程(代码执行时只有一个主线程来处理所有任务),非阻塞(当代码需要进行一项异步任务时不会等待,主线程会挂起这个任务,在异步任务返回结果时再执行相应的回调)的脚本语言用途:与浏览器交互事件循环用途:js引擎(网页浏览器中专门处理js脚本的虚拟机)实现非阻塞浏览器环境下js引擎的事件循环机制js代码执行时将不同变量存于内存中的不同位置堆:放对象栈:基础类型变量,对象指针执行栈:存放执行环境并依次调用执行的地方当调用一个方法时,js会生成一个与这个方原创 2021-04-14 16:46:58 · 154 阅读 · 0 评论 -
Iterator Generator基础概念
IteratorIterator是一个接口,为不同数据结构提供统一接口任何数据结构只要部署 Iterator 接口,就可以完成遍历操作可以使用for…of一种数据结构只要部署了 Iterator 接口,我们就称这种数据结构是“可遍历的”(iterable)一个数据结构只要具有Symbol.iterator属性,就可以认为是“可遍历的”(iterable)所以Symbol.iterator属性实现Iterator 接口,有Symbol.iterator属性,就是可遍历的。如果原生具有Symbol原创 2021-04-12 16:13:02 · 75 阅读 · 0 评论 -
Set WeakSet Map WeakMap
都是接受一个数组作为参数,将数组成员加入自身set没有重复值,去重很好用mapkey保存的是地址(对象要谨慎)WeakSet WeakMap1、弱引用,但WeakMap是对key的弱引用一旦没有东西引用key,就自动删除了,不会造成内存泄漏(明明这块内存没用了,但是垃圾处理机制发现你没有手动取消引用,就还有东西引用它,一直占着内存,页面会卡顿)2、WeakSet-只能Object作为成员,WeakMap-只能Object为key3、不可遍历(不知道啥时候就被垃圾回收了,就没了)4、比如:私原创 2021-04-10 17:23:04 · 88 阅读 · 0 评论 -
js this原理及用法 简单 var let const简单介绍
this作用:隐式传递对象引用,复用更容易this指向:this在运行时被绑定,但总会指向,调用函数的那个对象this关键:弄清楚是谁在调用函数,是window全局对象还是某个对象例子:var length = 10;function fn () { console.log(this.length);} var obj = { length: 5, method: function (fn) { fn();//window调用,所以为10原创 2021-04-10 14:12:51 · 185 阅读 · 0 评论 -
js arguments call apply bind array.from array.of 简单实用
一个进程中的回退—查漏补缺这段代码看的不太明确?没事,最后回头再看function doSomething(){ console.log(arguments); // var arg = [].slice.call(arguments); // console.log(arg); //与下面同义,将类数组对象转为数组 var args = Array.prototype.slice.call(arguments); console.log(args);原创 2021-04-09 21:30:14 · 83 阅读 · 0 评论 -
js Promise 简单
根据阮一峰ES6编写Promise是一个对象,里面包含着一个异步操作(会在本轮同步操作都结束后才执行)。有三种状态:pending(进行中),fulfilled(已成功),rejected(已失败),只有异步操作的结果可以决定状态一旦创建,立即执行,无法中途取消如果事件不断反复发生,Stream模式更好特点:1、对象状态不受外界影响,也不影响外部:只有异步操作的结果可以决定状态,若内部有错误但没被捕获,错误会被吞掉,不会反映到外部2、一旦状态改变,就不会再变。对象状态改变只有两种可能:从pen原创 2021-04-09 16:46:20 · 137 阅读 · 0 评论 -
js 内存泄漏 简单
内存泄漏:此块内存已经没用了,但依然占着位置没有被释放原创 2021-04-09 14:37:53 · 73 阅读 · 0 评论 -
地址栏输入地址到浏览器显示页面 简单易懂 高能无废话
地址栏输入地址到浏览器显示页面浏览器进程通过IPC向渲染进程提交访问,渲染进程继续加载资源并渲染页面,结束后会给浏览器进程发送消息表明加载完毕------访问过程---------在浏览器地址栏输入时,浏览器进程的UI线程会判断要搜索内容还是访问站点按下回车开始访问时,浏览器进程的UI线程将请求地址传给浏览器进程的网路线程(访问站点资源),浏览器页签出现加载图标浏览器进程的网络线程收到来自服务器的数据时会了解数据格式, (若为HTML,将数据传给渲染进程做渲染;若为压缩文件,传给下载管理器下载)原创 2021-04-05 15:59:55 · 387 阅读 · 1 评论 -
TCP/IP 三次挥手,四次握手 一看就懂
客户端与服务器的消息互通三次握手客户端发送消息给服务器服务器:服务器成功获取了客户端发来的消息(客户端->服务器)客户端:客户端知道了服务器成功获取了客户端发的消息(服务器->客户端)服务器:服务器知道了客户端成功获取了服务器发的消息(客户端->服务器)四次挥手...原创 2021-04-02 14:27:37 · 50 阅读 · 0 评论 -
React vue区别
vueReact数据双向绑定单向数据流语法简单,适用于小型项目适用于web端,原生APP开发,侧重于大型项目应用渲染速度更快,体积更小更大的生态圈,更多工具支持拓展的HTML语法渲染jsx渲染react的优点:render函数支持闭包,import的组件在render中可以直接调用...原创 2021-03-31 23:13:32 · 58 阅读 · 0 评论 -
html重点回顾
**通过为图片搭配说明文字的方式来解说图片**<figure> <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg" alt="一只恐龙头部和躯干的骨架,它有一个巨大的头,长着锋利的牙齿。" width="400" height="341"原创 2021-03-31 20:17:34 · 46 阅读 · 0 评论 -
react入门 2021最新版
可在官网教程开始前食用,简单易懂,干货1.安装1.node.js安装2.对应文件夹中输入命令(cmd)npx create-react-app my-appcd my-appnpm start2.什么是reactReact is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small an原创 2021-03-22 15:06:28 · 564 阅读 · 0 评论 -
javascript 函数 事件
function draw() { //定义函数}myButton.onclick = function() { alert('hello'); //匿名函数通常来运行负载的代码以响应事件触发}draw();//调用函数每个可用的事件都会有一个事件处理器,也就是事件触发时会运行的代码块。当我们定义了一个用来回应事件被激发的代码块的时候,我们说我们注册了一个事件处理器。注意事件处理器有时候被叫做事件监听器。监听器留意事件是否发生,然后处理器就是对事件发生做出的回应。有时候在原创 2021-03-19 20:24:49 · 64 阅读 · 0 评论 -
剑指 Offer 05. 替换空格 javascript js
剑指 Offer 05. 替换空格三种方法请实现一个函数,把字符串 s 中的每个空格替换成"%20"。示例 1:输入:s = “We are happy.”输出:“We%20are%20happy.”return s.replace(/\s/g, '%20');return s.replace(/[]/g, '%20');let res ='';for (let c of s) { res += c.charCodeAt() === 32 ? '%20' :原创 2021-03-04 16:20:14 · 224 阅读 · 1 评论 -
剑指 Offer 03. 数组中重复的数字 javascript
剑指 Offer 03. 数组中重复的数字找出数组中重复的数字。在一个长度为 n 的数组 nums 里的所有数字都在 0~n-1 的范围内。数组中某些数字是重复的,但不知道有几个数字重复了,也不知道每个数字重复了几次。请找出数组中任意一个重复的数字。示例 1:输入:[2, 3, 1, 0, 2, 5, 3]输出:2 或 3var findRepeatNumber = function(nums) { var s = new Set(); for (const i in原创 2021-03-04 15:59:16 · 140 阅读 · 1 评论 -
传统css布局
css布局重点浮动float定位position盒模型flexgrid/layout1.正常布局流块元素(display:block):下一个元素会另起一行内联元素(display:inline):与上一个元素在同一行,不能设置宽高内联块(display: inline-block)ps:外边距叠加如果两个相邻的元素都设置了margin 并且两个margin有重叠,那么更大的设置会被保留,小的则会消失2.弹性盒子(display:flex)...原创 2021-03-03 16:40:10 · 183 阅读 · 0 评论 -
css元素选择器
1.类型选择器html {color:black;}p {color:gray;}2.h2, p {color:gray;}两个都应用右边3.通配符选择器* {color:red;}整体都应用4.#intro {font-weight:bold;} id选择器:唯一.important {color:red;} 类选择器(可以重名)5.后代选择器p.important {color:red;}h1 em {color:red;}<p class="imp原创 2021-01-26 19:06:49 · 284 阅读 · 0 评论 -
css 布局知识
css布局1、正常布局流(基础,建议学习,若已了解,可跳到下一标题)块状元素:占一行,宽度与父元素一样,高度与内容高度一样(内联元素转块元素方法)设置display: block; (或者,display: inline-block; inline-block 混合了inline 和 block的特性。)常见块状元素:div,form,h1```h6,hr,caption,p,列表,表格标签。行内元素:宽度与内容宽度一样,相邻的行内元素会排在一行,排满才进入下一行或溢出。不原创 2020-11-01 21:01:14 · 419 阅读 · 0 评论 -
css基础知识2
css基础知识2代码可直接运行盒子模型介绍outlinemargin,padding嵌套选择器third.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"/> <meta name="茜崽" content="css学习"> <title>我爱万茜!</title> &l原创 2020-09-28 19:42:46 · 130 阅读 · 0 评论 -
CSS基础知识1
CSS基础知识1连载系列可直接运行second.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="万茜的乖乖"> <title>我爱万茜</title> <link href="../css/2.css" rel="stylesheet" type="t原创 2020-09-26 21:39:52 · 65 阅读 · 0 评论 -
html基础知识2
html基础知识2可直接运行html2.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>我爱万茜</title> <meta name="万茜的崽崽" content="html学习2"> </head> <body> <!原创 2020-09-23 21:00:15 · 87 阅读 · 0 评论 -
html基础知识集合
html基础知识1和我一起学习前端吧,后续将沿着前端学习路线不断更新博客,想了解此方面的朋友关注我吧!废话不多说,直接上代码,跟着代码一起学习html的知识点吧(ps:作者万茜粉丝,文中包含大量万茜,理性看代码,爱你们)<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <title>我爱万茜</title> <原创 2020-09-22 19:58:35 · 113 阅读 · 1 评论