weixin_45677987的博客

面试题

1: watch 使用的几种方法 通过watch 监听data 数据变化, 数据发生变化时, 就会打印当前值: watch: { data(val, oldValue) { console.log(val); console.log(oldValue); } }2: 通过watch 监听docData 数据的变化， 数据发生变化时, this.change_number++ (使用深度监听) watch: { ha.

1: 闭包函数: 函数内部总是可以访问其所在外部函数中声明的参数和变量, 即使在其外部函数被返回之后。 参数和变量不会被垃圾回收机制收回。2: this 的指向问题 this的指向问题, call/apply/bind, 回调函数问题 1: 一般函数：this 的指向就是全局对象window. 2: 在严格模式下"use strict",为undefined. 3: 对象的方法里调用,this指向调用该方法的对象. 【this指的是，调用函数的那个对象】.

1: 在对一些属性进行操作的时候, 使用这种方法无法进行拦截, 比如通过下表的方式修改数组或者修改数据或者给对象新增属性, 这些都不可以触发组建的重新渲染。 因为 Object.defineProperty 不能拦截到这些操作。更精确的来说，对于数组而言，大部分操作都是拦截不到的，只是 Vue 内部通过重写函数的方式解决了这个问题。2: 在 Vue3.0 中已经不使用这种方式了，而是通过使用 Proxy 对对象进行代理，从而实现数据劫持。使用Proxy 的好处是它可以完美的监听到任何方式的数据改.

1: 常见事件修饰符: 1.1: .stop 等同于javaScript 中的event.stopPropagation(); 防止事件冒泡; 1.2: .prevent： 等同于javaScript 中event.preventDefault(); 防止执行预设的行为。 1.3: .capture: 与事件冒泡方向相反, 事件捕获由外到内。 1.4: .self： 只会触发自己范围内的事件, 不包含子元素。 1.5： .once() 事件 只会触发一次。------.

如何保存页面的当前状态: 既然是要保存页面的当前状态 (其实也就是组件的状态), 那么会出现以后一下两种情况: 1: 前组件会被卸载 2：前组件不会被卸载那么就可以按照两种情况得到以下的方法: 组件会被卸载掉: (1): 将状态存户到LocalStroage / SeesionStroage 只需要在组件即将被销毁的声明周期 componentWillUnmount (React 中声明)localStorage/ Sessionstorage 中把当前组件的state 通.

1：原型与原型链1：原型(prototype)2：显示原型与隐士原型3：原型链4：instance of每一个构造函数都会有一个prototype 属性; 每一个函数都会一个显示原型。 他们默认指向一个Object 空对象(既是原型对象)原型对象中有一个属性 (constructor), 它指向函数对象;原型上的方法是给实例对象使用。 原型上方法是给实例对象使用的。function fun () {}console.log(fun.prototype); // 会返回一个ob

1:v-if: 是真正的条件渲染, 因为它会确保在切换过程中条件块内的事件监听和子组件的适当的被销毁和重建;也还是惰性的. 如果在初始条件渲染为假时, 则什么什么也不做 --- 一直到条件第一次变为真时, 才会开始渲染条件块.v-show: 就简单多了, 不断初始条件是什么, 元素总会被渲染, 并且只是简单的基于CSS 的display 属性进行切换.所以: v-if 适用于运行时很少改变条件吗, 不需要频繁切换条件的场景; v-show: 则适用于需要非常频繁切换条件的场景. ..

1: 探索 instanceof 左边的对象是否为右边类型的实例 2: instanceof 是如何判断的? 表达式: Ainstanceof B A ==> 实例对象 B ===> 构造函数 如果B函数的显示原型对象在A 对象的原型链上, 返回为true, 否则返回false;3: Function 通过new 自己产生实例// 代码function Foo() {};var f1 = new Foo...

1: 原型链的作用是用来查找对象的属性2: 读取对象的属性值时: 不会查找原型链, 如果当前对象没有此属性, 直接添加此属性并设置其值3: 方法一般定义在圆形中, 属性一般通过构造函数定义在对象本身上.function Fn() {}Fn.prototype.a = 'xxx'var fn1 = new Fn();console.log(fn1.a, fn1) // xxx Fn{}[[Prototype]]: Objecta: "xxx"con...

1: 快速排序的思路 1.1: 先将数列中取出一个数作为基准数 1.2: 先将比这个数小的全部放到它的左边, 大于或者等于它的数全部放到它的右边 1.3: 在左区间重复第二步, 直到各个区间只有一个数. 1.4: 在将有序的区间合并起来, 这样这个数组就是有序排列了let arr = [31, 23, 34, 2, 13, 234]function qulickSort (arr) { // 1; 找基准数, 并且将比基准数小的全部放到左边(左数组) ...

1： 求两个数组的交集： // 给定两个数组， 写一个方法来计算它们的交集let nums1 = [1, 2, 2, 3];let nums1 = [2, 2]; // 输出结果[2, 2]方案一:----------------------------------------------------------------let arr = []; // 声明一个数组的用于存储交集数据for (let i=0, i<nums1.length, i++) { ...

1： 对象转化为数组let obj = { 1: 222, 2: 123, 5: 888};// 把数组处理为如下结构: [222, 123, null, null, 888, null, null, null, null, null, null, null ];----------------------------------------------------------------------------方案一:let arr = new Array(12).fi

1： 宏任务和微任务： 结论： 微任务比宏任务执行实际早 宏任务：setTimeout, setInterval, DOM事件，Ajax 请求 微任务： Promise, async... await..... 微任务会比宏任务先执行， 宏任务就是就是可以理解为： 异步任务。 微任务 > DOM 渲染 > 宏任务...

1： 防抖和节流： 限制函数执行次数； 1.1：防抖： 通过设置 setTimeout 的方式，在一定时间间隔内， 将多次触触发事件变成一次触发 1.2：节流： 减少一段时间的触发频率；<input type="text"><input type="submit" id="input"><script> var btn = document.getElementById('input'); // btn.addEvent...

1： 插入排序 代码如下：function insert(ary) { // 1: 准备一个新的数组, 用来存储抓到手里的牌，开始先抓一张牌进来 let handle = []; handle.push(ary[0]); // 从第二项开始依次抓牌， 一直把牌面上的牌抓光 for(let i = 1, i < ary.length; i++) { // A 是新抓的牌 let A = ary[i]; // 和handle...

1： 冒泡排序 （Bubble）2： 插入排序（Insert）3： 快速排序（Quick）4: 经典算法： 递归 （Recursion）冒泡排序的思想： 让数组中的当前项和后一项进行比较， 如果当前项比后一项大， 则两项交换位置（让大的靠后） 即可；let a = 10;let b = 20;实现a 和 b 的值互换？定义一个空的变量let c = null;c = a;a = b;b = c;需要比较length - 1轮， (数组中5个数， 只需要把...

1： 对象的push 方法：数组中内置push方法: 当前数组的最大索引, this.length-1, 新增一项是: this.lengthArray.prototype.push = function @@@() { this[this.length] = val; // this.length 在原来基础上加 1 return this.length; // 返回数组的长度}let obj = { 2: 3, // 1 3: 4, // 2 length

1: a 的值？ 需要满足什么条件 a==1 && a==2&&a==3var a = ?if(a==1 && a==2 && a==3) { console.log(1)}Note： =: 赋值 ==: 比较 ===: 绝对比较(值大小相等, 数据类型也相等)// == 进行比较的时候，如果左右两边的数据类型不一样， 则先转化为相同的数据类型, 然后在进行比较 1： {} == {} // 结果.

1： 变量作用域的问题：let fn = function AAA() {}AAA(); // 就会报错: ReferenceError: AAA is not defined // 1： 本应该匿名的函数如果设置了函数, 在外边是无法调用的。 但是在函数里边是可以执行的---------------------------------------------------------let fn = function AAA() { "use strict";

1： 闭包函数 定时器循环是异步编程， 每一轮循环设置定时器, 无需等定时器触发执行， 继续下一轮循环。 （定时器触发的时候，循环已经结束）； 十次循环都已经结束了， 设置了十次定时器， 循环已经结束， 定时器还没有开始。 循环结束 i = 10；for(var i=0, i<10, i++) { setTimeout(()=> { console.log(i); }, 1000) }1: 修改为： le...

1： 实现数组合并 代码如下：let ary1 = ['A1', 'A2', 'B1', 'B2', 'C1', 'C2', 'D1', 'D2'];let ary2 = ['A', 'B', 'C', 'D'];// 合并以后的数组为 [A1', 'A2', 'A', 'B1', 'B2','B', 'C1', 'C2', 'C', 'D1', 'D2', 'D']方案一:ary2 = ary2.map(item=> { return item + '3'}) ...

1： 英文字母汉字组成的字符串， 用正则给英文单词前后加上空格 代码如下：let str = "hao好xue习, tian天xiang上" reg = /\b[a-z]+b\/ig; str = str.replace(reg, con => { return " " + con + " "; }).trim(); // String.prototype.trim() // 字符串两边空格 .trimLeft() // 去除左边空格 .t...

1： 实现一个$attr(name, value) 遍历： name : 属性名 value: 代表属性值代码实例如下：<body> <div id="AA" class="box clearfix"></div> <div myIn="1"></div> <div class="content box"></div> <div name="BB"></div> &...

1: 编写代码实现图片懒加载 图片懒加载是前端性能优化的重要方案 + 通过图片或者数据的延迟加载， 我们可以加快页面渲染速度， 让第一次打开页面的速度变快 + 只有滑倒某一个区域， 我们才可以加载真实的图片， 这也可以节省加载的流量。2： 处理方案 ： 把所有需要延迟加载的图片有一个盒子包裹起来， 设置宽/ 高/ 和默认的占位符 开始让所有的img 的src 属性为空， 把真实图片的地址放到img 自定义属性上。 等到所有的其他资源都加载完成以后， 我...

上代码:// 创建一个函数 Foofunction Foo() { Foo.a = function() { console.log(1); }, / this 指向构造函数的实例 this.a = function() { console.log(2) }}// 把Foo当作类, 在Foo 原型上设置实例共共有的属性和方法, 实例.a(); 才可以调取。Foo.prototype.a = function() { console.log(3)}.

上代码：1:var a = {}, b = "123"; c = 123; a [b]= 'b'; a [c] = 'c'; console.log(a[b]); // c // =>c 因为： a["123"] <=> a[123] // 可以理解为一个对象当中所有的属性都是字符串2：var a = {}; b = Symbol('123'), c = Symbol('123'); a[b] = 'b'...

1：实现一个字符串匹配算法， 从字符串S中，查找是否存在字符串T, 若存在返回所在位置， 如果不存在就返回-1 （不能基于indexOf 和 includes 等内置方法） 上代码：~ function () { // 循环原始字符串中每一项，让每一项从当前位置向后截取T.Length 个字符， 然后和T 进行比较， 如果不一样，则继续循环； 如果一样则返回当前索引（循环结束） // 还需要检测原始字符串与对比字符串长度需要对比 function myInde...

1：如何把一个字符串的大小写取反（大写变小写， 小写变大写） 例如： 'aBc' 变成 ‘AbC’; 上代码： // 声明一个str let str = "QIANDUANGOngchengshi猕猴桃Jquery很帅！哈哈 haha"; str = str.replace/[a-zA-Z]/g, content => { // 箭头函数 形参content 代表每一次正则匹配的结果 // 方案一: 验证是否为大写字母： 就是把字母转换为...

1： 箭头函数和普通函数区别？ 构造函数（function） 可以使用new 生成实例， 那么箭头函数可以吗？ 为什么？ 1.1：1： // (ES6 中每一个函数都可以使用形参赋默认值和剩余运算符)// 普通函数function fn (x) { return function (y) { return x + y }}// 箭头函数let fn = x => { return y => { return x + y }}...

1: 实现（5）.add (3) .minus (2) 其输出值为 6arr.push（） 方法； 就是因为： arr 是Array 的实例对象， 就可以调用Array.prototype 原型上的方法， push 方法就是其中之一.push(): 在末尾增加增加一项， pop() 方法： 在末尾删除一项 unshift() : 在数组开头添加一项， shift() : 在数组开头删除一项。// 自定义函数// 每一个方法执行完，都需要返回一个Number这个类的实例， 这样...