- 博客(57)
- 资源 (7)
- 收藏
- 关注
RSS订阅转载 56.你有使用过JSX吗？说说你对JSX的理解
jsx不是一门新的语言，是一种新的语法糖。让我们在js中可以编写像html一样的代码。允许XML语法直接加入到JavaScript代码中，让你能够高效的通过代码而不是模板来定义界面
2022-01-25 10:34:33
131
转载 55.＜template＞＜/template＞有什么用？
包裹嵌套其它元素，使元素具有区域性，自身具有三个特点：*隐藏性：不会显示在页面中*任意性：可以写在页面的任意地方*无效性： 没有一个根元素包裹，任何HTML内容都是无效的
2022-01-25 10:33:29
338
原创 53.什么是FOUC？你是如何避免FOUC的？
FOUC 即 Flash of Unstyled Content，是指页面一开始以样式 A（或无样式）的渲染，突然变成样式B。原因是样式表的晚于 HTML 加载导致页面重新进行绘制。通过 @import 方式导入样式表style 标签在 body 中解决方法：把 link 标签将样式放在 head 中...
2022-01-25 10:29:23
829
转载 52.说说CSS的优先级是如何计算的？
选择器种类严格来讲，选择器的种类可以分为三种：标签名选择器、类选择器和ID选择器。而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用。而 在标签内写入 style="" 的方式，应该是CSS的一种引入方式，而不是选择器，因为根本就没有用到选择器。而一般人们将上面这几种方式结合在一起，所 以就有了5种或6种选择器了。三种基本的选择器类型语法如下：◆标签名选择器，如：p{}，即直接使用HTML标签作为选择器。◆类选择器，如.polaris{}。◆ID选择器，如#polaris{}。伪类
2022-01-25 10:27:03
178
转载 51.下面代码的输出是什么?
function sayHi() { console.log(name) console.log(age) var name = 'Lydia' let age = 21}sayHi()A: Lydia 和 undefinedB: Lydia 和 ReferenceErrorC: ReferenceError 和 21D: undefined 和 ReferenceError答案: D在函数内部，我们首先通过 var 关键字声明了 name 变量。这意味着变量被提升了
2022-01-25 10:25:14
262
转载 50.(单选题)下面代码的输出是什么
String.prototype.giveLydiaPizza = () => { return "Just give Lydia pizza already!";};const name = "Lydia";name.giveLydiaPizza();A: "Just give Lydia pizza already!"B: TypeError: not a functionC: SyntaxErrorD: undefined参考答案：A解析：String是一个内置的构
2022-01-25 10:22:39
375
原创 49.(单选题）当我们这样做时会发生什么?
function bark() { console.log('Woof!');}bark.animal = 'dog';A：Nothing, this is totally fine!B: SyntaxError. You cannot add properties to a function this way.C: undefinedD: ReferenceError参考答案：A解析：这在JavaScript中是可能的，因为函数也是对象！（ 原始类型之外的所有东西都是对象）
2022-01-20 14:38:31
402
原创 48.(单选题)下面代码的输出是什么
let a = 3;let b = new Number(3)let c = 3;console.log(a == b);console.log(a === b);console.log(b === c);A：true false trueB: false false trueC: true false falseD: false true true参考答案：C解析：new Number ()是一个内置的函数构造函数。虽然它看起来像一个数字，但它并不是一个真正的数 字：它有一堆
2022-01-20 14:37:36
819
原创 47.什么是 Virtual DOM？为什么 Virtual DOM 比原生 DOM 快？
参考答案：我对 Virtual DOM 的理解是，首先对我们将要插入到文档中的 DOM 树结构进行分析，使用 js 对象将其表示出来，比如一个元素对象，包含 TagName、props 和 Children 这些属性。然后我们将这个 js 对象树给保存下来，最后再将 DOM 片段插入到文档中。当页面的状态发生改变，我们需要对页面的 DOM 的结构进行调整的时候，我们首先根据变更的状态，重新构建起一棵对象树，然后将这棵新的对象树和旧的对象树进行比较，记录下两棵树的的差异。最后将记录的有差异的地方
2022-01-20 14:27:24
120
原创 46.如何比较两个 DOM 树的差异？
参考答案：两个树的完全 diff 算法的时间复杂度为 O(n^3) ，但是在前端中，我们很少会跨层级的移动元素，所以我们只需要比较同一层级的元素进行比较，这样就可以将算法的时间复杂度降低为 O(n)。算法首先会对新旧两棵树进行一个深度优先的遍历，这样每个节点都会有一个序号。在深度遍历的时候，每遍历到一个节点，我们就将这个节点和新的树中的节点进行比较，如果有差异，则将这个差异记录到一个对象中。在对列表元素进行对比的时候，由于 TagName 是重复的，所以我们不能使用这个来对比。我们需要给每一个子节
2021-11-03 16:01:37
1045
原创 45.vue v-model的实现原理
参考答案：v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：v-bind绑定一个value属性；v-on指令给当前元素绑定input事件。解析：<template> <div id="app"> {{username}} <br/> <input type="text" v-model="username"> </div></template><script
2021-11-03 15:59:32
64
原创 44.说下vue 中的h函数
参考答案：h函数就是vue中的createElement方法，这个函数作用就是创建虚拟dom，追踪dom变化的解析：在讲h函数之前，我们先来了解下虚拟dom：虚拟dom简单来说就是一个普通的JavaScript对象，包含tag，props，children三个属性。。。<div id="app"> <p className="text">lxc</p></div>上边的HTML代码转为虚拟DOM如下：{ tag:"div",
2021-11-03 15:56:21
327
1
原创 43.vue.component和vue.use的区别
参考答案：Vue.use()注册与Vue.component()注册区别就在于一个install方法。Vue.component()：注册一个组件在全局使用；Vue.use()： 可以一次性注册多个组件或添加全局方法或属性；Vue.use( plugin ) 参数： {Object | Function} plugin 用法： 安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方
2021-11-02 17:19:09
540
原创 42.如何将axios异步请求同步化处理？
参考答案：async await// 统一处理axios请求 async getHistoryData (data) { try { let res = await axios.get('/api/survey/list/', { params: data }) this.tableData = res.data.result this.totalData = res.data.count
2021-11-02 17:11:34
535
原创 41.`＜template＞＜/template＞`有什么用？
参考答案：包裹嵌套其它元素，使元素具有区域性，自身具有三个特点：*隐藏性：不会显示在页面中*任意性：可以写在页面的任意地方*无效性： 没有一个根元素包裹，任何HTML内容都是无效的获取资源...
2021-11-02 17:10:20
127
原创 40.使用vue写一个tab切换
参考答案：v-for循环，利用下标和v-show显示<div id="app"> <ul class="tabs"> <li class="li-tab" v-for="(item,index) in tabsParam" @click="toggleTabs(index)" :class="index===nowIndex?'active':''">{{item}}</li> </
2021-11-02 17:09:00
68
原创 39.(单选题)下面代码的输出是什么
[1, 2, 3, 4].reduce((x, y) => console.log(x, y))A: 1 2 and 3 3 and 6 4 B: 1 2 and 2 3 and 3 4C: 1 undefined and 2 undefined and 3 undefined and 4 undefinedD: 1 2 and undefined 3 and undefined 4 参考答案: D解析:reducer函数接收4个参数:• Accumulator (acc)(累计器
2021-11-01 14:46:51
365
原创 38.(单选题)下面代码的输出是什么
function getAge(...args) { console.log(typeof args);}getAge(21);A: "number"B: "array"C: "object"D: "NaN"参考答案: C解析:扩展运算符（…args )返回一个带参数的数组。数组是一个对象，因此typeof args返回object。参与互动获取资源...
2021-11-01 14:43:20
404
原创 37.(单选题)下面代码的输出是什么
let name = "Lydia";function getName() { console.log(name); let name = "Sarah";}getName();A: LydiaB: SarahC: undefinedD: ReferenceError参考答案: D解析:每个函数都有其自己的执行上下文。getName 函数首先在其自身的上下文（范围）内查找，以查看其是否包含我们尝试访问的变量 name。上述情况，getName函数包含其自己的 nam
2021-11-01 14:42:34
506
原创 36.(单选题)下面代码的输出是什么
let newList = [1, 2, 3].push(4);console.log(newList.push(5));A: [1,2,3,4,5]B: [1,2,3,5]C: [1,2,3,4]D: Error参考答案: D解析:.push()方法返回数组的长度，而不是数组的本身。参与互动获取资源
2021-11-01 09:51:29
143
原创 35.(单选题)下面代码的输出是什么
console.log("????" + "????");A: ????????B:257548C:A string containing their code pointsD:Error参考答案: A解析:使用+运算符，您可以连接字符串。上述情况，我们将字符串"????" 与 字 符 串 "????"连 接 起 来 ， 产 生 ????????参与互动获取资源...
2021-11-01 09:49:47
344
原创 34.(单选题)下面代码的输出是什么
const name = "Lydia";console.log(name());A: SyntaxErrorB: ReferenceErrorC: TypeErrorD: undefined参考答案: C解析:变量 name 保存字符串的值，该字符串不是函数，因此无法调用。当值不是预期类型时，到抛出 TypeErrors。JavaScript 期望 name 是一个函数，因为我们试图调用它。但它是一个字符串，因此抛出 TypeError : name is not a functi
2021-11-01 09:48:55
391
原创 33.(单选题)下面代码的输出是什么
const settings = { username: 'lydiahallie', level: 19, health: 90};const data = JSON.stringify(settings, ['level', 'health']);console.log(data);A: "{"level":19, "health":90}"B: "{"username": "lydiahallie"}"C: "{"level", "health"]"D: "{"
2021-11-01 09:46:27
150
原创 32.(单选题)下面代码的输出是什么
const set = new Set();set.add(1);set.add("Lydia");set.add({ name: "Lydia"});for (let item of set) { console.log(item + 2);}A: 3, NaN, NaNB: 3, 7, NaNC: 3, Lydia2, [Object object]2D: "12", Lydia2, [Object object]2参考答案: C解析:“+”运算符不仅用
2021-11-01 09:45:39
290
原创 31.(单选题)我们需要向对象 person 添加什么，以致执行[…person]时获得形如[‘Lydia Hallie‘, 21]的输出？
const person = { name: 'Lydia Hallie', age: 21 } [...person] // ['Lydia Hallie', 21]A: 不需要，对象默认就是可迭代的B: *[Symbol.iterator]() { for (let x in this) yield* this[x]}C: *[Symbol.iterator]() {yield* Object.values(this)}D: *[Symbol.
2021-11-01 09:45:01
156
原创 30.(单选题)下面代码的输出是什么
const name = "Lydia";age = 21;console.log(delete name);console.log(delete age);A: false, trueB: "Lydia", 21C: true, trueD: undefined, undefined参考答案: A解析:delete 操作符返回一个布尔值: true 指删除成功，否则返回 false . 但是通过 var , const 或 let 关键字声明的变量无法用 delete 操作符来删
2021-11-01 09:43:58
108
原创 29.(问答题) 什么是本地存储的有效期？
参考答案：微信JS-SDK：是开发者在网页上通过JavaScript代码使用微信原生功能的工具包，开发者可以使用它在网页上录制和播放微信语音、监听微信分享、上传手机本地图片、拍照等许多能力。JSSDK使用步骤步骤一：绑定域名步骤二：引入JS文件步骤三：通过config接口注入权限验证配置步骤四：通过ready接口处理成功验证步骤五：通过error接口处理失败验证...
2021-10-29 15:36:29
423
原创 28.(问答题) Ajax 和 Fetch 区别
参考答案：ajax 是使用 XMLHttpRequest 对象发起的，但是用起来很麻烦，所以 ES6 新规范就有了 fetch，fetch 发一个请求不用像 ajax 那样写一大堆代码。使用 fetch 无法取消一个请求，这是因为 fetch 基于 Promise，而 Promise 无法做到这一点。在默认情况下，fetch 不会接受或者发送 cookiesfetch 没有办法原生监测请求的进度，而 XMLHttpRequest 可以fetch 只对网络请求报错，对 400，500 都当做成功的
2021-10-29 14:05:42
61
原创 27.(问答题) ajax 如何实现，readyState 的五种状态的含义？
参考答案：0 － （未初始化）还没有调用 send()方法1 － （载入）已调用 send()方法，正在发送请求2 － （载入完成）send()方法执行完成，已经接收到全部响应内容3 － （交互）正在解析响应内容4 － （完成）响应内容解析完成，可以在客户端调用了解析：(0)未初始化此阶段确认 XMLHttpRequest 对象是否创建，并为调用 open()方法进行未初始化作好准备。值为 0 表示对象已经存在，否则浏览器会报错－－对象不存在。(1)载入此阶段对 XMLHttpReq
2021-10-29 14:02:05
72
原创 26.(问答题) 栈和队列的区别?
参考答案：栈的插入和删除操作都是在一端进行的，而队列的操作却是在两端进行的。队列先进先出，栈先进后出。栈只允许在表尾一端进行插入和删除，而队列只允许在表尾一端进行插入，在表头一端进行删除拓展：栈和堆的区别？栈区（stack）— 由编译器自动分配释放，存放函数的参数值，局部变量的值等。堆区（heap）— 一般由程序员分配释放，若程序员不释放，程序结束时可能由 OS 回收。堆（数据结构）：堆可以被看成是一棵树，如：堆排序；栈（数据结构）：一种先进后出的数据结构。参与互动获取
2021-10-29 14:00:34
95
原创 25.(问答题) ajax 请求时，如何解析 json 数据
参考答案：使用 eval() 或者 JSON. parse() 鉴于安全性考虑，推荐使用 JSON. parse()更靠谱，对数据的安全性更好。参与互动获取资源
2021-10-29 11:13:02
56
原创 24.(问答题) XML 和 JSON 的区别？
参考答案：(1). 数据体积方面。JSON 相对于 XML 来讲，数据的体积小，传递的速度更快些。(2). 数据交互方面。JSON 与 JavaScript 的交互更加方便，更容易解析处理，更好的数据交互。(3). 数据描述方面。JSON 对数据的描述性比 XML 较差。(4). 传输速度方面。JSON 的速度要远远快于 XML。参与互动获取资源...
2021-10-29 10:56:13
165
原创 23.(问答题) 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
参考答案：浏览器地址栏输入 url浏览器会先查看浏览器缓存–系统缓存–路由缓存，如有存在缓存，就直接显示。如果没有，接着第三步域名解析（DNS）获取相应的 ip浏览器向服务器发起 tcp 连接，与浏览器建立 tcp 三次握手握手成功，浏览器向服务器发送 http 请求，请求数据包服务器请求数据，将数据返回到浏览器浏览器接收响应，读取页面内容，解析 html 源码，生成 DOM 树解析 css 样式. 浏览器渲染，js 交互绑定多个域名，数量不限；参与互动
2021-10-29 10:54:35
966
原创 22.(问答题) 什么是 json，优缺点
参考答案：JSON (JavaScript Object Notation)优点:数据格式比较简单, 易于读写, 格式都是压缩的, 占用带宽小易于解析这种语言, 客户端 javascript 可以简单的通过 eval()进行 JSON 数据的读取搜索支持多种语言, 包括 ActionScript, C, C#, ColdFusion, Java, JavaScript, Perl, php, Python, Ruby 等语言服务器端语言, 便于服务器端的解析在 PHP 世界, 已经有 PHP-
2021-10-29 10:48:56
214
原创 21.(问答题)什么是 Ajax 和 JSON，它们的优缺点
参考答案：Ajax 是全称是 asynchronous JavaScript andXML，即异步 JavaScript 和 xml，用于在 Web 页面中实现异步数据交互，实现页面局部刷新。优点：可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量，避免用户不断刷新或者跳转页面，提高用户体验缺点：对搜索引擎不友好；要实现 ajax 下的前后退功能成本较大；可能造成请求数的增加跨域问题限制；JSON 是一种轻量级的数据交换格式，ECMA 的一个子集优点：轻量级、易于
2021-10-29 10:46:35
72
原创 20.(问答题)解释 jsonp 的原理，以及为什么不是真正的 ajax, 以及优缺点
参考答案：jsonp 是用来解决跨域获取数据的一种解决方案，具体是通过动态创建 script 标签，然后通过标签的 src 属性获取 js 文件中的 js 脚本，该脚本的内容是一个函数调用，参数就是服务器返回的数据，为了处理这些返回的数据，需要事先在页面定义好回调函数，本质上使用的并不是 ajax 技术优缺点jsonp 优点:完美解决在测试或者开发中获取不同域下的数据, 用户传递一个 callback 参数给服务端，然后服务端返回数据时会将这个 callback 参数作为函数名来包
2021-10-27 14:31:07
164
原创 19.(问答题)ajax 请求的时候 get 和 post 方式的区别
参考答案：get 一般用来进行查询操作，url 地址有长度限制，请求的参数都暴露在 url 地址当中，如果传递中文参数，需要自己进行编码操作，安全性较低。post 请求方式主要用来提交数据，没有数据长度的限制，提交的数据内容存在于 http 请求体中，数据不会暴漏在 url 地址中。参与互动...
2021-10-27 14:30:07
76
原创 18.(问答题)ajax 的缺点
参考答案：Ajax干掉了Back和History功能，即对浏览器机制的破坏：在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现的 ，后退按钮是一个标准的web站点的重要功能，但是它没法和js进行很好的合作。这是Ajax所带来的一个比较严重的问题；Ajax的安全问题：Ajax技术给用户带来很好的用户体验的同
2021-10-27 14:29:03
83
原创 17.(问答题)Ajax 的最大的特点是什么？
参考答案：Ajax 可以实现异步通信效果，实现页面局部刷新，带来更好的用户体验；按需获取数据，节约带宽资源；参与互动
2021-10-27 14:28:31
118
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人