- 博客(123)
- 收藏
- 关注
RSS订阅原创 ES6字符串,数值,布尔值的结构赋值
ES6字符串,数值,布尔值的结构赋值1.字符串的结构赋值字符串也可以解构赋值,因为此时字符串被转换为一个类似数组的对象const [a, b, c, d, e] = 'hello';// a = "h"// b = "e"// c = "l"// d = "l"// e = "o"类似数组的对象都有一个length属性,因此还可以对这个属性进行解构赋值let { length: len } = "hello";// len: 52.数值和布尔值的解构赋值结构赋值时,如果等
2021-03-02 17:56:26
496
原创 ES6对象的结构赋值
ES6 对象的解构赋值对象的结构和数组有一个重要的不同,数组的元素时按照次序排序的,变量的取值是由它的位置决定的,而对象的属性没有次序,变量必须和属性同名才能取到正确的值let { bar, foo } = {foo: 'a', bar: 'b'};// foo = 'a'// bar = 'b'let { ccc } = {foo: 'a', bar: 'b'};// ccc = undefined如果变量名和属性名不一致var {foo: baz} = {foo: 'a',
2021-03-02 14:25:36
1508
原创 ES6 数组的结构赋值
ES6数组的结构赋值读于阮一峰老师的ES6入门书籍1.基本用法ES6允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,这被称为结构;// 以前为变量赋值只能直接指定值let a = 1;let b = 2;let c = 3;// ES6 可以写成let [a, b, c] = [1, 2, 3];1.1 数组结构案例let [, , third] = ['a', 'b', 'c'];// third = 'c'let [x, , y] = [1, 2, 3];
2021-03-01 15:47:17
2239
1
原创 声明变量问题(使用var)
声明变量问题(使用var)使用var 声明变量1.允许重复的变量声明: 导致数据被覆盖var a = 1;function print() { console.log(a);}// 假设有一千行代码// 可能忘记上边声明的变量名字var a = 2;print(); // a=22.变量提升: 怪异的数据访问,闭包2.变量提升,怪异的数据访问// 不小于0.5时,打印两个undefuned,小于0.5时,打印两个aaa, 变量会提升if(Math.random()
2021-02-26 15:13:38
620
原创 重排与重绘
重排reflow和重绘repaint1.重排reflowreflow指的是重新计算页面布局某个节点reflow时会重新计算节点的尺寸和位置，而且还有可能触发其子节点，祖先节点和页面上的其他节点reflow,在这之后再触发一次repaint;当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建,这就成为回流;每个页面至少需要一次回流,就是在页面第一次加载的时候;1.1导致reflow的操作有:1.调整窗口的大小;2.改变字体;3.增加或者移除样式表;
2020-11-02 22:24:49
358
原创 浏览器渲染机制
浏览器渲染机制对于渲染,需要了解设备刷新率设备刷新率是设备屏幕渲染的频率,手机电脑默认的刷新频率都是60FPS,也就是屏幕会在1s内渲染60次,约16.7ms渲染一次屏幕,这就意味着我们的浏览器最佳性能就是所有操作在一帧16.7ms内完成,能否做到1帧内完成直接决定着渲染性,影响用户交互;渲染引擎移开时会从网络层获取请求文档的内容,内容大小一般限制在8000个块以内;基本流程:渲染引擎将开始解析HTML文档,并将各个标记逐个转换成内容树上的DOM节点,同时也会解析外部css文件以及样式元素中的样
2020-10-27 22:57:09
450
2
原创 浏览器是多进程的
浏览器是多进程的1、进程简单的理解就是,进程里边有很多线程,例如进程是QQ,线程就是会话聊天;2、浏览器之所以能够运行,是因为系统给它的进程分配了资源(cpu,内存);3、简单的理解，没打开一个tab页就相当于创建一个独立的浏览器进程；1.浏览器里边的进程1.1、Brower进程：浏览器的主进程（负责协调、主控），只有一个；作用：a、负责浏览器界面显示，与用户交互，如前进后退等；b、负责各个页面的管理，创建和销毁其他进程；c、将Renderer进程得到的内存中的Bitmap,绘制到用户界
2020-10-27 22:00:00
325
原创 浏览器组成
浏览器的组成结构用户界面（User Interface） - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面。浏览器引擎（Browser engine） - 在用户界面和渲染引擎之间传送指令。渲染引擎（Rendering engine） - 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。也可以叫呈现引擎（Rendering Engine）或者布局引
2020-10-14 21:17:15
467
原创 webpack基础
webpack基础1.webpack安装1.全局安装webpack命令npm i webpack webpack-cli -g2.项目中安装webpacknpm i webpack webpack-cli -D注意：需要在node.js环境中使用2.webpack-clinpm在5.2版本中提供一个npx命令npx要解决的主要问题是调用项目内部安装的模块,原理就是在node_modules下边的.bin目录中找到相对应的命令执行使用webpack命令: npx webpack3.web
2020-09-17 00:03:13
315
1
原创 js手写实现new操作符
js手写实现new操作符 // 用函数来实现new function myNew(constructor){ //创建一个对象 let obj = {} //连接原型链,obj.__proto__ 不标准 obj = Object.create(constructor.prototype) //等同于 obj.__proto__ = constructor.prototype
2020-08-03 21:13:03
513
原创 js手写bind
js手写bind Function.prototype.myBind = function(context){ //保存一下this let _this = this //保存一下参数 let args1 = Array.from(arguments).slice(1) function F(){ //保存一下参数 le
2020-08-03 20:43:51
195
原创 js中手写apply(不能使用ES6语法)和使用ES6语法对比
js手写apply(不能使用ES6语法)参考前边手写call// apply和call的区别就是传参方式不同,apply第二个参数传的是数组 Function.prototype.myApply = function(context,args){ if(context === null || context === undefined){ context = window }else{
2020-07-23 16:27:02
347
原创 elementUI-table中点击行和radio按钮都可以实现单选
elementUI-table中点击行和radio按钮都可以实现单选 <el-table :data="mlist" highlight-current-row border style="width: 100%" @current-change="handleCurrentChange"> <el-table-column label="" width="35"
2020-07-23 15:41:57
2331
6
原创 js中手写call(不能使用ES6语法)和使用ES6语法对比
js手写call(不能使用ES6语法)//在myCall中通过this拿到调用myCall的原函数,接下来,当函数被调用时,它作为某个对象的方法(前面加了"."),// this指向这个对象("."前面的对象)改变原函数中this的指向//将原函数作为context的方法调用时,方法名并不影响功能,但是将方法名写死可能会造成方法名冲突//传参问题,可以传递n个参数,使用arguments,第二个参数之后的叫剩余参数,将剩余参数传递给`context[uniqueName]`还可以通过`eval`来拼
2020-07-22 16:08:13
431
原创 elementUi,table,upload每行上传不同图片
elementUI-table每行上传不同图片//在表格的某一行都有一个点击上传图片的按钮,点击按钮弹出dialog弹框,在弹框中使用upload组件上传图片 </el-table> <el-table-column label="图片" width="150px" align="center"> <template slot-scope="scope"> <el-button type="tex
2020-07-22 15:19:50
2776
原创 js中比较数组中的对象下边的某个属性最小值
js中数组中对象下的某属性最小值和最大值最小值var arr = [{a:1,b:'b'},{a:5,b:'bbb'},{a:0,b:'bbbbb'}]//最小值Math.min.apply(Math,arr.map(ele=>{return ele.a}))最大值var arr = [{a:1,b:'b'},{a:5,b:'bbb'},{a:0,b:'bbbbb'}]//最大值Math.max.apply(Math,arr.map(ele=>{return ele.a}))
2020-06-30 16:56:27
691
原创 js数组中相同对象合并对象中不同数据
js数组中相同对象合并该对象中不同字段//数据,水果名称相同的,把数量累加合并起来,根据id是否相同判断var data =[ { id:'5ec223ec306f2300017aa7d4', fruitName:'苹果', num:100, price:30 }, { id:'5ec4fb83ad7caf0001257ed6', fruitName:'香蕉', num
2020-05-22 13:59:16
1295
原创 ElementUi中级联选择器(根据后台返回来数据处理显示在级联选择器中),处理最后一级为空白情况
ElementUi中级联选择器(根据后台返回来数据处理显示在级联选择器中),处理最后一级为空白情况 //封装函数方便调用 handleData(data, newarr) { const len = data.length for (let i = 0; i < len; i++) { //如果子级存在,并且有数据 if (data[i].children && data[i].children.length >
2020-05-19 11:31:52
2902
原创 js中for循环多次请求,返回数据不按照顺序返回的处理
js中for循环多次请求,返回数据不按照顺序的处理//根据使用场景按需处理 //先把所有请求返回的数据使用new Promise来异步处理,把返回来的数据按照顺序存放在一个atemp数组中 const atemp = [] for (let i = 0; i < 7; i++) { atemp.push( // 使用Promise用于异步计算 new Promise((resolve, rej
2020-05-19 11:11:27
4258
原创 js数组中对象去重(根据对象中存在唯一标识)
js数组中对象去重//数组中根据对象唯一标识对象去重//参数1: 是一个数组,数组中是对象//参数2: 每一个对象中的唯一标识function uniqueArrObj(arr, unique) { const tempArr = [] const tempObj = {} for (let i = 0; i < arr.length; i++) { if (!tempObj[arr[i][unique]]) { tempArr.push(a
2020-05-18 11:30:06
1552
原创 js中格式化时间
js中格式化时间函数//格式化时间function parseTime(time, cFormat) { if (arguments.length === 0) { return null } const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}' let date if (typeof time === 'object') { date = time } else {
2020-05-18 11:25:56
1546
原创 python基础(dict和list比较,set)
1.dictpython内置了字典,dict的支持,在其他语言中成为map,使用键-值(key-value)存储,具有极快的查找速度dict和list比较1.查找和插入的速度极快,不会随着key的增加而变慢;2.需要占用大量的内存,内存浪费多;而list相反:1.查找和插入的时间随着元素的增加而增加;2.占用空间小,浪费内存所以来说,dict使用空间来换取时间的一种方式;注意:...
2020-04-10 09:38:19
1086
原创 python基础(条件判断,input,循环,break,continue)
1.条件判断if <条件判断1>: <执行1>elif <条件判断2>: <执行2>elif <条件判断3>: <执行3>else: <执行4>2.input读取用户输入age = input('年龄:')age = int(age)if age<18: ...
2020-04-09 16:15:57
349
原创 python基础(字符串,格式化,list,tuple)
1.字符串1.对于单个字符的编码，Python提供了ord()函数获取字符的整数表示，chr()函数把编码转换为对应的字符：>>> ord('A')65>>> ord('中')20013>>> chr(66)'B'>>> chr(25991)'文'如果知道字符的整数编码，还可以用十六进制这么写str：&...
2020-04-09 16:01:45
597
原创 Vue实现computed(Vue原理之步骤六)
Vue实现computed计算属性(Vue原理之步骤六)基于上一篇(Vue中实现数组)根据计算属性几个特点设计思路:1.他的值是一个函数的运行结果;2.函数里用到的所有属性都会引起计算属性的变化;计算属性仍然属于Vue响应式实现的一种,本质上还是一个watcher,但是又似乎与之前的watcher实现有所不 同,因为之前的watcher是只能监听一个属性; 思路: 前几篇中wa...
2020-03-01 19:06:06
522
原创 实现vue中数组(Vue原理之步骤五)
Vue中实现对数组的处理基于上一个实现$set的一篇笔记上一篇中得__ob__来实现对数组的处理思路1.前边已经说过使用Object.defineProperty的方法劫持数组,会存在问题,所以在实现数据劫持的时候,数组本身不管用,而去循环劫持数组的元素,因为元素也可能是对象;实现方法: 数组的回调也通过__ob__.dep 来收集,在数组调用push或者pop等方法的时候手动去触发__...
2020-02-29 20:27:15
1670
原创 Vue中实现$set方法(Vue原理之步骤四)
Vue中实现$set方法(续上一篇watch侦听器)**注意:**与上一篇紧紧相连可以看到,这个dep和上一篇中defineReactive函数闭包中的"筐"不同的另一个"筐",当属性的值是一个对象时,把触发getter和watcher也收集了一份在自己的subs中,这样就方便之后通过代码命令式的去触发这个属性对象watcher所以$set方法的实现思路基本如下:1.在创建Observe...
2020-02-27 23:22:51
4819
原创 Vue中实现watch侦听器(Vue原理之步骤三)
实现watcher由于模板涉及到Vue的编译和vdom等知识,所以先用watch选项和$watch api来测试对属性的监听注意:问题1: 首先,回调函数肯定不能硬编码到setter中所以,我们每个属性都需要有个自己的**“筐”,不管是使用watch选项初始化还是使用$watch api来监 听某个属性时,我们需要把这些回调添加到这个"筐"中,等到属性setter触发时,从筐中把收集到...
2020-02-27 21:34:47
1036
原创 VUE中实现数据代理和数据劫持(Vue原理之步骤二)
VUE中实现数据代理和数据劫持1.VUE中实现数据代理把所有data中的数据代理到new出来的Vue实例上class Vue { //options是传过来的参数类似一个对象 constructor(options){ //把options存起来,可能会在实例中用到 this.$options = options //dat...
2020-02-27 17:18:51
2143
原创 Object.defineProperty的用法以及存取器getter/setter(Vue原理之步骤一)
Object.definePropertyObject.defineProperty(obj,prop,descriptor)//obj:必需,目标对象//prop:必需, 需定义或修改属性的名字//descriptor: 必需,目标属性所拥有的特性/* value:被定义的属性的值,默认为undefined writable: 是否可以被重写,true可以重写,false不能重写,...
2020-02-26 22:35:47
1040
原创 Axios和(async,await)
Axios和(async,await)1.基于promise用于浏览器和node.js的http客户端2.支持浏览器和node.js;3.支持promise;4.能拦截请求和响应请求;5.自动转换JSON数据;6.能转换请求和响应数据;1.axios基本用法1.get和delete请求传递参数 1.通过传统的url以?的形式传递参数; 2.restful形式传参; ...
2020-02-26 18:19:16
34752
2
原创 fetchAPI
fetch API基本用法1.fetch 1.Fetch Api 是新的ajax解决方案,Fetch 会返回Promise; 2.Fetch 不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象; 3.fetch(URL,options).then();<script type="text/javascript"> /* Fetch A...
2020-02-26 17:43:47
941
原创 前后端交互,Promise 基本API
前后端交互,Promise 基本API1.接口调用方式1.原生ajax;2.基于jQuery的ajax;3.fetch;4.axios;2.异步JavaScript的执行环境是「单线程」所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务。这个任务可称为主线程异步模式可...
2020-02-26 17:27:32
805
原创 http协议相关内容
http协议最常见的协议就是http协议,http协议将和服务器的一次交互看着是两段简单的过程组成:请求(request)和响应(response)1.请求:客户端通过url地址发送数据到服务器的过程;2.响应:服务器收到请求数据后回馈数据给客户端的过程;当请求-响应完成后,本次交互结束,如果需要额外的服务,则需要重新发送新的请求,同时,HTTP1协议约定了请求的消息格式和响应的消息格式...
2020-02-25 20:50:37
401
原创 模块化(commonJs和ES6 module)
模块化模块(Module): 一块具有独立功能的代码,可以是一个函数,一个对象,甚至是一个字符串或者数字,通常存储为一个单独的文件;**模块化出现的原因:**js很难编写大型项目,由于全局变量的污染和难以管理的依赖关系, 这些问题导致了js无法进行精细的模块划分,因为精细的模块划分会导致更多的全局污染以及更加复杂的依赖关系;1.CommonJs模块化目前只有node环境才支持CommonJ...
2020-02-24 18:24:11
1084
原创 ES6异步解决方案(promise)
ES6异步解决方案1.简介js经常会遇到一些异步任务,所谓的异步任务,就是需要经过一段时间或当某个实际到达后才能得到结果的任务如:1.使用ajax请求服务器,当服务器完成响应后拿到响应结果;2.监听按钮是否被点击,当按钮被点击后拿到某个文本框的值;3.使用setTimeout等待一段时间,当时间到达后做某件事情;由于没有一种标准规范代码,会导致不同的人写的异步代码使用方式不一致,E...
2020-02-24 12:07:08
536
原创 JS事件循环
事件循环事件循环是js处理异步函数的具体方法具体做法是:1.执行 执行栈中的代码;2.遇到一些特殊的代码交给浏览器的其他线程处理;3.将执行栈中的代码全部执行完毕4.从事件队列中取出第一个任务放入执行栈,然后重复第一步;事件队列在不同的宿主环境中有所差异,大部分宿主环境会将事件队列进行细分,在浏览器中,事件队列分为两种:1.宏任务(队列) : macroTask,计时器结束的回调...
2020-02-23 18:39:19
220
原创 进程和线程,js单线程,js多任务操作,同步代码和异步代码,执行栈
进程和线程,js单线程,js多任务操作,同步代码和异步代码,执行栈1.浏览器,js , 执行引擎的关系js:一门计算机语言,提供表达程序逻辑语法和实现基本功能的API;浏览器:js语言的真实运行环境,又称为js的宿主环境;js执行引擎:js宿主环境(如浏览器)中的一个功能模块,用于解析并执行js;关系:2.进程和线程2.1进程当一个应用程序运行时,需要使用内存和cpu资源,这些资...
2020-02-23 16:39:30
438
原创 html中重排和重绘问题
HTML页面进行重绘和重排(回流)1 核心问题讲解浏览器的运行机制：构建DOM树（parse）：渲染引擎解析HTML文档，首先将标签转换成DOM树中的DOM node（包括js生成的标签）生成内容树（Content Tree/DOM Tree）；构建渲染树（construct）：解析对应的CSS样式文件信息（包括js生成的样式和外部css文件），而这些文件信息以及HTML中可见的指令（如...
2020-02-21 22:39:04
1928
原创 数据结构---链表小案例
链表的一些小案例/** * 构造函数 表示链表的一个节点 * */function Node(value){ this.value = value; //节点的数据 this.next = null; //下一个节点的地址}var a = new Node('a')var b = new Node('b')var c = new Node('c')a.ne...
2020-02-14 10:38:37
252
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人