剑指 Offer 09. 用两个栈实现队列
题目详情难度:简单
用两个栈实现一个队列。队列的声明如下,请实现它的两个函数 appendTail 和 deleteHead ,分别完成在队列尾部插入整数和在队列头部删除整数的功能。(若队列中没有元素,deleteHead 操作返回 -1 )
示例 1:
输入:[“CQueue”,”appendTail”,”deleteHead”,”deleteHead”][[],[3],[],[]]输出:[null,null,3,-1]
示例2
输入:[“CQueue”,”deleteHead”,”appendTail”,”appendTail”,”deleteHead”,”deleteHead”][[],[],[5],[2],[],[]]输出:[null,-1,null,null,5,2]
提示
1 <= values <= 10000
最多会对 appendTail、deleteHead 进行 10000 次调用
思路分析代码方面,因为我这边是用JavaScript,所以栈就通过数组来模拟。
首先我们先分析一下需求,需要实现两个函数,appendTail 和 delete ...
Vue2的双向绑定实现
双向绑定主要就是包括两个方面:数据变化更新视图,视图变化更新数据。
所以需要去进行双向的监听,页面上的变化可以通过事件来监听,例如:input标签可以通过监听 ‘input’ 事件获取页面上输入的变化,进而进行相应的操作。
所以,关键点在于如何监听data以及如何更新view,vue2是通过Object.defineProperty()进行数据的监听。数据的更新则是通过发布订阅模式实现的。
这样就实现了:数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变。
基本实现下面就是通过Object.defineProperty()实现最简单的双向绑定。
随着input输入文字的变化,p标签中会同步显示相同的文字内容;点击button模拟了value的变化,随着value的变化p标签中会同步显示相同的文字内容。这样就实现了 model => view 以及 view => model 的双向绑定
123456<!-- html --><div class="main"> <p class=&q ...
Vue中的data属性
实例和组件定义data的区别vue实例的时候定义data属性既可以是一个对象,也可以是一个函数。
12345678910111213const app = new Vue({ el:"#app", // 对象格式 data:{ foo:"foo" }, // 函数格式 data(){ return { foo:"foo" } }})
组件中定义data属性,只能是一个函数。
1234567Vue.component('component1',{ template:`<div>组件</div>`, data:{ foo:"foo" }})//The "data" option should ...
SPA(单页应用)首屏加载速度优化
定义首屏时间(First Contentful Paint),指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完成,但需要展示当前视窗需要的内容。
计算方法123456789101112131415// 方案一:document.addEventListener('DOMContentLoaded', (event) => { console.log('first contentful painting');});// 方案二:performance.getEntriesByName("first-contentful-paint")[0].startTime// performance.getEntriesByName("first-contentful-paint")[0]// 会返回一个 PerformancePaintTiming的实例,结构如下:{ name: "first-contentful-pai ...
Vue中的v-if和v-for的使用技巧
v-if用于条件性的渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染。
12// isShow = true<p v-if="isShow"><p/>
v-for基于一个数组来渲染列表。v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组或者对象,而 item 则是被迭代的数组元素的别名。
123<li v-for="item in items" :key="item.id"> {{ item.label }}</li>
使用技巧问题v-if与v-for都是vue模板系统中的指令。
在vue模板编译的时候,会将指令系统转化成可执行的render函数。
v-for和v-if在同一个标签的的时候,渲染的时候会先进行列表渲染再进行if判断。这样就造成了性能浪费,本身不需要渲染的内容会在渲染后再销毁。
解决方案
永远不要把 v-if 和 v-for 同时用在同一个元素上, ...
v-if和v-show
共同点v-show和v-if的作用效果上是相同的,都能控制元素是否在页面上显示,用法上也是相同的,通过一个布尔类型判断。
123456// isShow = true<p v-show="isShow"><p/><p v-if="isShow"><p/>//当表达式为true的时候,都会占据页面的位置//当表达式都为false时,都不会占据页面位置
区别
控制手段不同
编译过程不同
编译条件不同
控制手段:v-show隐藏则是为该元素添加css--display:none,dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除
编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换
编译条件:v-if是真正的条件渲染,它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时,并不做操作,直到为真才渲染
v-show 由false变为true的时候不会触发组件的生命 ...
Vue的生命周期
在Vue中实例从创建到销毁的过程就是生命周期,即指从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程。
在Vue生命周期钩子会自动绑定 this 上下文到实例中,因此你可以访问数据,对 property 和方法进行运算这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。
生命周期Vue生命周期总共可以分为8个阶段:创建前后, 载入前后,更新前后,销毁前销毁后,以及一些特殊场景的生命周期。
生命周期
描述
beforeCreate
组件实例被创建之初
created
组件实例已经完全创建
beforeMount
组件挂载之前
mounted
组件挂载到实例上去之后
beforeUpdate
组件数据发生变化,更新之前
updated
组件数据更新之后
beforeDestroy
组件实例销毁之前
destroyed
组件实例销毁之后
activated
keep-alive 缓存的组件激活时
deactivated
keep-alive ...
JavaScript数据类型判断
typeof问题:typeof null为object。引用类型数据用typeof来判断的话,除了function会被识别出来之外,其余的都输出object。
123456789101112131415typeof str // "string" 字符串typeof num // "number" 数值typeof array // "object" 对象(可以和函数区别开)// 👆注意,数组也是一个对象typeof date // "object" 对象 typeof func // "function" 函数typeof symbol // "symbol"typeof null // object// 对于未声明的变量typeof test // undefined 未定义// 对于声明过,但是未赋值的变量let message;typeof message // undefined 也是未定义,因为只声明但没有赋 ...
var、let、const的区别
var
声明变量的时候存在声明提升
什么是声明提升?JavaScript 中,函数及变量的声明都将被提升到函数的最顶部。JavaScript 中,变量可以在使用后声明,也就是变量可以先使用再声明。
12console.log(a) //undefinedvar a = 1
作用域范围是整个函数,不存在块级作用域
123456function test() { if(1) { var a = 1 } console.log(a) // 1}
同一作用域下可以声明同名变量
123var a = 1var a = 2console.log(a) // 2
let
不存在声明提升
12console.log(a)//Cannot access 'a' before initializationlet a = 1
作用域是块级作用域
let定义的变量,只能在块作用域里访问,不能跨块访问,也不能跨函数访问,而var可以跨块访问
块级作用域:即在 {}花括号内的域,由 { }包括,比如if {}块 ...
