卷尾猫-优快云博客

txt内容是姓名-成绩，需要拿到内容后按照成绩进行排序再写入新文件1、txt 文件内容小红-99 小白-100 小路-90 小黑-802、读取文件内容const fs = require('fs')fs.readFile('./file/成绩.txt','utf8',function(err,data){ if(err){ console.log('读取失败',err) } console.log(data)})3、处理数据cons

2022-04-27 10:52:17 2359

原创 Vuex学习记录各属性详解以及使用方式

1.1 组件之间共享数据的方式父向子传值： v-bind属性绑定子向父传值： v-on 事件绑定兄弟组件之间共享数据： EventBus$on 接受数据的那个组件$emit 发送数据的那个组件1.2 Vuex是什么Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。通俗来说就是在组件的旁边定义一个共享的数据状态对象（store）...

2020-05-07 09:58:18 374

原创 JavaScript 基于数组实现栈结构

// Method 方法，和某一个对象实例有联系的// function 函数// 封装栈类function Stack() { //栈中的属性 this.items = []; //栈的相关操作 //1、添加一个新元素到栈顶位置 push方法 // this.push = function (this) { // 给实例添加方法 // }; Stack.proto...

2020-05-05 11:20:53 437

原创 leetcode JavaScript 跳跃游戏

给定一个非负整数数组，你最初位于数组的第一个位置数组的每个元素代表你在该位置可以跳跃的最大长度判断你是否能够到达最后一个位置[2,3,1,1,4]trueletarr=[3,3,1,1,4]//一varcanJump=function(arr){if(arr.length==1)returntrue //数组长度为...

2020-05-04 22:28:05 350 1

原创 leetcode JavaScript水桶容积最大

传入一个数组，右边减去左边索引的差值为宽左边和右边数值小的一个为高求水桶容积最大，也就是求宽*高最大的情况可以想象成要给坐标系，索引为x轴，数值为y轴，问：哪一个组合的封闭空间面积最大解决办法一let arr = [1,8,6,2,5,4,8,3,7]//方法1var maxArea = function (height) { let max = 0;...

2020-05-04 22:10:29 436 1

原创 JavaScript 原型对象学习记录，js new一个对象的过程

JavaScript 数据类型分为基本类型，引用类型基本类型：string，number，Boolean，object，null，undefined引用类型：String，Number，Boolean，Object，Function，Array，Date，RegExp，Error每个对象都有内置属性prototype（原型），chrome里是 __proto__对象创...

2020-04-30 14:02:57 257

原创 JavaScript运算符typeof与instanceof学习记录

JavaScript中typeof 检测数据类型，输出类型的名称JavaScript有五种简单数据类型Undefined,Null,Boolean,Number,String复杂数据类型Object常见的检测结果typeof 检测数据类型，会返回一个小写字母的类型字符串，只需要一个操作数，操作数可以是简单数据类型或者函数或者对象JavaScrip...

2020-04-30 12:26:49 203

原创记录JavaScript变量对调的七种方法

临时变量let a = 3, b = 5, c = b;b = a;a = c;加减法var a = 3, b = 5;a = a + b; //a=3+5=8b = a - b; //b=8-5=3a = a - b; //a=8-3=5数组索引值var a = 3, b = 5;a = [a,b]b = a[0...

2020-04-30 11:56:22 241

原创 JavaScript == 和 === 常见题目分析

== 相等运算符会对左右两边的值进行类型转换=== 全等运算符则不会进行类型转换eg:3==3 true number 33===3 true number 33=="3" true number3 == string3---->number33=== "3" false number 3 string...

2020-04-30 10:07:19 226

原创 JavaScript小数精度问题 0.1+0.2

JavaScript是2进制存储的，且存储长度是有限的0.1+0.20.1 转换为二进制0.1*2=0.2 00.2*2=0.4 00.4*2=0.8 0 --------0.8*2=1.6 10.6*2=1.2 10.2*2=0.4 0 ------------0.4*2=0....

2020-04-30 09:42:49 535

原创给一个32位的有符号整数,范围[-2^31,2^31-1].对整数进行反转,考虑溢出和正负数问题,溢出返回0,正负不改变

题目：给一个32位的有符号整数,范围[-2^31,2^31-1].对整数进行反转,考虑溢出和正负数问题,溢出返回0,正负不改变第一种方法,数字=>字符串=>数组(反转)=>字符串=>数字function reverseNum(num) { const max = Math.pow(2, 31) - 1; //32 位最大整数 const min = Mat...

2020-04-29 23:37:25 761

原创 JavaScript 使用正则匹配以什么开头什么结尾的字符串

有一个字符串，要对字符串进行匹配，找到所有以 open 开头， over 结尾的字符串，并存在数组里var str = "fsadjfsfopendfassfoverfsadfopendfadsfsoverfsadfsfopendfasdfsfsover"var res = str.match(/\open.*?\over/g) // \s 会被识别成正则表达式要进行转义...

2020-04-28 22:02:11 21737

原创 HTTP常见状态码整理

100 Continue 继续，如果服务器收到头信息中带有100-continue的请求，这是指客户端询问是否可以在后续的请求中发送附件。在这种情况下，服务器用100(SC_CONTINUE)允许客户端继续或用417 (Expectation Failed)告诉客户端不同意接受附件 200 OK 正常返回信息 201 Created 请求成功并且服务器创建了新的资源 ...

2020-04-28 21:29:15 156

原创对前端重构的理解

在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为，也就是在不改变ui的情况下，对网站进行优化表格布局改为DIV+CSS 兼容各种现代浏览器对移动端的体验优化优化SEO 减少代码耦合代码弹性遵守统一的代码规范设计可扩展的API 对一些支持不太好旧框架进行代替压缩 js,css,image 采用cdn（内容分发网络）来加速资源加载减少j...

2020-04-28 21:19:48 449

原创 ajax的缺点和在IE下的问题

不支持浏览器back按钮暴露了与服务器交互的细节对搜索引擎的支持比较弱破坏了程序的异常机制不容易调试如果在ie浏览器下，请求方式是get,并且请求的url不变，那么这个请求的结果就会被缓存。解决这个办法可以实时改变请求的URL，URL改变了就不会被缓存。在URL末尾加一些随机的时间戳参数或者随机数参数...

2020-04-28 21:14:17 209

原创输入URL到页面加载显示过程的细节

发送一个URL请求，不管这个URL是web页面的URL还是web页面上每个资源的URL，浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询，这能使浏览器获得请求对应的IP地址。浏览器与远程服务器通过TCP 三次握手协议来建立一个TCP/IP 连接，该握手包含，浏览器给服务器一个同步报文，服务器给浏览器一个同步报文和应答报文，浏览器再返回一个应答报文，确定双方可以...

2020-04-28 21:10:48 195

原创 JavaScript中Null和undefined的区别

null 是一个表示 “无” 的对象，转为数值为 0 。 undefined 是一个表示 “无” 的原始值，转为数值为 NaN。当声明的变量还未被初始化时，变量的默认值为undefined。 null 用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。 undefined 表示 “缺少值” 就是此处应该有一个值，但是还没有定义undefined典型用法变量被声...

2020-04-28 20:50:33 210

原创原生JavaScript操作DOM

原生js操作DOM网页加载时，浏览器会创建页面的文档对象模型 Document Object Model通过js操作html元素，查找html元素：通过id查找var doc = document.getElementById('idName')通过class 类名查找var doc = document.getElementsByClassName('classNam...

2020-04-28 09:45:46 189

原创 JavaScript闭包的优缺点和特性

使用闭包主要是为了使用私有的方法和变量优点是可以避免全局变量的污染缺点是闭包会一直存在与内存，会增加内存使用量，还有可能造成内存泄漏闭包特性：函数嵌套函数参数和变量不会被垃圾回收机制回收函数内部可是引用外部的参数和变量...

2020-04-27 20:12:06 393

原创异步加载js文件defer和async

defer和async都可以异步的加载文件 defer加载完成后会按照script标签的顺序执行 async加载完成后立即执行

2020-04-27 20:01:42 261

原创前端可以做的性能优化

减少http请求次数和减小请求资源的大小，堆css和js文件进行压缩使用精灵图，一些图标可以使用svg图标和字体图标对图片进行压缩，采用懒加载，减少第一次的请求压力实现一些效果的优先级 css>js>第三方插件避免为了使用一个小功能去引入一个很大的插件库避免使用iframe 多利用缓存，使用CDN减少DOM操作减少闭包的使用减少css表达式的使用...

2020-04-27 19:55:24 154

原创 Zepto.js 和 JQuery.js 比较优缺点

zepto 优缺点Zepto.js 是专门为现代智能手机浏览器推出的JavaScript框架，有着和jquery相似的语法大小方面，压缩后的zepto.min.js只有21K，使用服务端的gzip 压缩后大小只有5~10k. 功能齐全，多出来了一些触摸屏的事件不支持IE，不过是用来开发iPhone和Android网页的首选无法获取隐藏元素的宽高，jquery...

2020-04-27 19:35:42 728

原创快速排序的思想并实现一个快排

在数据集中，找一个基准点建立两个数组，分别存储左边和右边的数组利用递归进行下次比较//快排function quickSort(arr) { //数组只有一个数，不用操作直接返回 if(arr.length<=1){ return arr; } //数组长度大于1 //找到中间数的索引值，向下取整 let num = Math.floor(arr.leng...

2020-04-27 19:23:30 247

原创栈和队列的区别/栈和堆的区别

栈的插入和删除操作都是在一端进行的，而队列的操作却是在两端进行的队列先进先出，栈先进后出栈只允许在表尾一端进行插入和删除，而队列只允许在表尾一端进行插入，在表头一端进行删除栈区由编译器自动分配释放，存放函数的参数值，局部变量的值的等堆区由程序员分配释放，若程序员不释放，程序结束时可能由OS回收。堆可以被看成时一棵树栈一种先进后出的数...

2020-04-27 19:10:52 232

原创前端跨域请求和解决方案

1. 什么是跨域请求前端开发中，常见的html标签：a,form,img,script,link,iframe以及ajax操作都可以指向一个资源地址或者说可以发起对一个资源的请求，这里的请求就存在同域请求还是跨域请求跨域请求是指：当前发起请求的域与该请求指向的资源所在的域不一致（这里所有的域是协议，域名，和端口号的合集，同域就是协议、域名和端口号均相同，任何一个不同都是跨域）2....

2020-04-26 23:16:56 283

原创 JavaScript 中的函数防抖/节流

原理：触发一个事件，一定时间后再执行时间还没到又触发了一次，那就重新计算等待时间你站在门外，每次有人出去你就关门，会出现什么情况，一个人出去，门关一半又有人出，门就不能关了，这样就很麻烦解决方式：每次有人出去，隔五秒后你关门，你执行关门动作之前又有人出去，就重新计时这样就避免了频繁触发关门事件函数防抖解决什么问题开发中，onresize,scroll...

2020-04-25 17:50:30 189

原创认识、掌握、并使用JavaScript Promise

Promise 是什么？Promise说的简单通俗一点就是一种写代码的方式，并且是用来写JavaScript编程中的异步代码的基本用法let p = new Promise((resolve,reject)=>{ // do something //满足某些条件执行resolve or reject if(条件){ resolve...

2020-04-25 14:59:17 144

原创 JavaScript Async/Await 详解

Async/Await 是什么？Async/Await 是编写异步程序的新方式，它实际上是基于Promise来实现的，他会让异步的代码写起来和同步代码一样Node也已经在7.6版本开始支持Async/Await使用方法学习它是如何使用的，采用了什么样神奇的语法糖在这之前，可以先看一个使用Promise的异步编程：使用axios模块异步获取一条数据function ...

2020-04-25 14:30:50 507

原创 JavaScript Object.keys()方法

最近在学习vue源码，实现Observer劫持并监听所有属性的时候，用到了Object.keys()方法，记录一下语法Object.keys(obj)参数：要返回其枚举自身属性的对象返回值：一个表示给定对象的所有可枚举属性的字符串数组处理对象，返回可枚举的属性数组let person = { name : "zhangs", city : "x...

2020-04-24 23:19:27 430

原创 css position定位属性各属性

absolute 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位，元素的位置通过 left，top，right，bottom来进行规定。 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位，元素的位置通过left，top，right，bottom来进行规定。 relative 生成相对定位的元素，相对于其正常位置进行定位，因此，left:20px 会向元素的lef...

2020-04-24 17:18:13 198

原创 CSS box-sizing 两种属性 border-box,content-box

box-sizing 是什么？css的盒子模型box model 不会将padding与border计算到容器（如div）的宽高中的，这就导致你所设定的容器宽度未必是最终宽度（需要加上padding与border）.因此有了box-sizing：border-box的设定，其效果就是将padding和border纳入容器宽高如何应用box-sizing多用与所有css选择...

2020-04-24 17:00:28 2271

原创 chrome浏览器调试时阻止图片的加载

有时候需要阻止图片加载来查看不同状态的页面效果chrome控制台工具没找到相应的方法只能采用改变浏览器设置，让当前页面不加载图片1 进入浏览器设置2 隐私设置与安全性3 网站设置4 找到图片5 在禁止里添加url就可以6 回到调试页面，刷新，图片就不会被加载了...

2020-04-23 18:38:13 3547 2

原创 JavaScript Array filter() 方法

功能经过filter函数后会创建一个新的数组，回调函数返回的结果是一个boolean值，若结果为真，则返回匹配的项若结果为假，则返回一个空数组不会改变原有数组，返回的是过滤后的新数组写法数组对象.filter(function(currentVal,index,arrs){// to do something})特点filter函数遍历的元素范围在第一次...

2020-04-23 12:47:37 496

原创 JavaScript数组中的forEach以及map方法

forEach功能：循环遍历数组中的每一项，只能遍历数组//写法数组对象.forEach(function(参数变量名1，参数变量名2，参数变量名3））{ // 做一些操作，forEach 没有返回值，返回值为 undefined})特点： callback函数，为数组中每个元素执行的函数，该函数接受三个参数* 变量参数名1 必选，表示的是数组中...

2020-04-23 12:28:29 463

原创 JavaScript es6 解构赋值

const person = { name = "zhangsan" age:12, city:"西安"}有对象person ,要获取里面的值，原来的方式是：const name = person.nameconst age = person.ageconst city = person.city这样获取值是很麻烦的，如果用解构的话怎么做：...

2020-04-22 23:17:43 161

原创常见的几种实现数据双向绑定的做法

常见的几种双向绑定的做法* 发布者-订阅者模式（backbone.js）* 脏值检查（angular.js）* 数据劫持（vue.js）发布者-订阅者模式一般通过sub,pub的方式实现数据和视图的绑定监听，更新数据方式通常做法是vm.set('property',value)脏值检查angular.js 是通过脏值检测的方式对比数据是否有变更，来决定是...

2020-04-21 20:58:12 873

原创 JavaScript代码输出结果-普通函数和箭头函数的this指向

const multi ={ num:10, twonum(){ console.log(this.num*2) }, threenum:()=>{ console.log(this.num*3) }}multi.twonum()multi.threenum()A: 20 and 30B: 20 ...

2020-04-21 19:22:52 196

原创 JavaScript代码输出结果-for循环、setTimeout、let、var

for(var i = 0 ;i<3;i++){ setTimeout(()=>console.log(i),1)}for (let i = 0; i < 3; i++) { setTimeout(()=>console.log(i),1)}A： 0 1 2 和 0 1 2B：0 1 2 和 3 3 3C： 3 3 3 和 0 1...

2020-04-21 19:07:19 858