前端笨鸟

题目给你一个整数数组 nums 。你需要选择 恰好 一个下标（下标从 0 开始）并删除对应的元素。请注意剩下元素的下标可能会因为删除操作而发生改变。 比方说，如果 nums = [6,1,7,4,1] ，那么： 选择删除下标 1 ，剩下的数组为 nums = [6,7,4,1] 。 选择删除下标 2 ，剩下的数组为 nums = [6,1,4,1] 。 选择删除下标 4 ，剩下的数组为 nums = [6,1,7,4] 。 如果一个数组满足奇数下标元素的和与偶数下标元素的和相等，该数组就是一个 平衡数组 。 请你返回删除操作后，剩下的数组 nums 是 平衡数组 的 方案数 。 示例 1：12345678输入：nums = [2,1,6,4]输出：1解释：删除下标 0 ：[1,6,4] -> 偶数元素下标为：1 + 4 = 5 。奇数元素下标为：6 。不平衡。删除下标 1 ：[2,6,4] -> 偶数元素下标为：2 + 4 = 6 。奇数元素下标为：6 。平衡。删除下标 2 ：[2,1,4] -> 偶数元素下标为：2 + 4 = 6 。奇数元素下标为：1 。不平衡 ...

highlight: vs2015为什么要用diff算法当页面上的数据发生变化时，Vue 不会立即渲染。而是经过 diff 算法，判断出哪些是不需要变化的，哪些是需要变化更新的，只需要更新那些需要更新的 DOM 就可以了，这样就减少了很多不必要的 DOM 操作，大大提升了性能。 diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。 diff算法原理diff 的核心就是同层节点进行比较，深度优先 虚拟DOM虚拟DOM就是 用普通js对象来描述DOM结构，举个例子来加深理解，如下 1234<ul class="list"> <li class="item">A</li> <li class="item">B</li></ul> 对应的虚拟dom如下 12345678910111213141516171819202122232425262728293031{ ...

箭头函数不绑定this 箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值 12345678var id = 1const obj = { id: 2, foo: () => { console.log(this.id) }}obj.foo() 答案输出是1 为什么呢？因为箭头函数this指向等于定义时上层作用域中的this，所以是指向最外层window 再看一个例子 12345678910111213var id = 1const obj = { id: 2, foo: function () { setTimeout(() => { console.log(this.id) }, 1000) }}const bar = obj.foobar() // 1obj.foo.call(obj) // 2 为什么他们输出结果会不一致呢？ 不是说箭头函数不会被外部影响改变，call和apply方法对箭头函数无效 ...

浏览器缓存（Browser Caching）是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览。 缓存资源缓存资源分为 memory cache（内存缓存） 和 disk cache（磁盘缓存） memory cache 不访问服务器，直接读缓存，从内存中读取缓存。此时的数据时缓存到内存中的，当kill进程后，也就是浏览器关闭以后，数据将不存在。但是这种方式只能缓存派生资源。 我们经常看到的返回200显示from memory cache，其实就是取得是内存里的缓存 disk cache 不访问服务器，直接读缓存，从磁盘中读取缓存，当kill进程时，数据还是存在。这种方式也只能缓存派生资源 当我们关闭页面，在缓存还未过期的时候访问的一些访问过的派生资源时，就显示200 from disk cache其实就是磁盘缓存 三级缓存原理 (访问缓存优先级) 先在内存中查找,如果有,直接加载。 如果内存中不存在,则在硬盘中查找,如果有直接加载。 如果硬盘中也没有,那么就进 ...

promise一个 Promise 必然处于以下几种状态之一： 等待（pending） : 初始状态，既没有被兑现，也没有被拒绝。 成功（fulfilled） : 意味着操作成功完成。 失败（rejected） : 意味着操作失败。 我们来看看原生promise 1234567891011121314var p0 = new Promise((resolve,reject) => {})var p1 = new Promise((resolve,reject) => { resolve('成功')})var p2 = new Promise((resolve,reject) => { reject('失败')})var p3 = new Promise((resolve,reject) => { resolve('成功') reject('失败')}) console.log(p0, ...

跨域跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。 同源策略（Sameoriginpolicy） 是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓 同源 （即指在同一个域）就是两个页面具有相同的 协议**（protocol），主机**（host）和 **端口号**（port） 跨域的解决方法1. jsonp我们在做项目的时候是不是经常会通过script标签来引入资源，但是 1<script src="https://unpkg.com/vue/dist/vue.js"></script> 我们先引入一个vue文件，然后看看network 可以发现script标签的src属性可以跨域,其实不止script标签可以跨域，还有<img> <link>标签。jsonp的原理其实就是通过script标签的src属性来实现的。我 ...

js继承1. 原型链继承其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。构造函数、原型和实例之间的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个原型对象的指针。大家可以根据下面这张图片，并结合上面这句话一起理解原型链，这里就不详细描述了。 来看看原型链继承的代码 12345678910111213141516function SuperType(){ this.property = true; } SuperType.prototype.getSuperValue = function(){ return this.property; }; function SubType(){ this.subproperty = false; } // 继承了 SuperType SubType.prototype = new SuperType(); SubType.prototype.getSubValue = function (){ ...

先丢个效果图，本人前端菜鸟一枚，只是实现了一个简单的demo，有很多瑕疵，和考虑不周到的地方，欢迎大家提出建议。 先看个大致原理流程图，图片是从前端攻城狮大佬那里复制的。下面会一步步根据流程图一块块解析。 1. 实现数据劫持相信大家都知道vue2的双向绑定的原理是通过 Object.defineProperty() 来实现数据劫持的。那什么是数据劫持呢？具体是怎么劫持的呢？数据劫持 ：指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。那我们来继续看看 Object.defineProperty() 怎么实现数据劫持的。 1234567891011121314const obj = {}let name = '张三'Object.defineProperty(obj, 'name',{ get () { return name }, set (newVal) { name = newVal console.log(&#x ...

大文件切片上传 秒传 断点续传 大文件的切片上传1.大致流程 将大文件切片 分别上传切片至后端 后端接收切片并存储在文件夹 合并切片成大文件，并删除切片和文件夹 1. 实现切片文件File的原型上提供了一个 slice 方法，通过这个方法可以对文件进行切割。以每5m分一个切片。 12345678910111213141516171819202122232425<input type="file" @change="handleFileChange"/>data() { return { chunkList: [], file: null };},function handleFileChange (e) { this.file = e. target.files[0] this.chunkList = createChunk(this.file) console.log(this.chunkList ...

问题 当数据过多时，渲染出现卡顿。因为 dom 数量过大。 实现方案 将树形数据和 dom 扁平化 虚拟长列表控制 dom 渲染数量 1.扁平化 扁平化tree的DOM结构图-1 由上图可以看出经过扁平化处理后的父子节点dom是同级的，接下来我们来实现将tree数据扁平化处理。 1234567891011121314151617181920212223242526272829 const treeData = [  {    id: 1,    title: "课程1",    children: [      { id: 4, title: "课程1-1" },      {        id: 5,        title: "课程1-2",       children: [          { id: 6, title: "课程1-2-1" },          { id: 7, title: & ...