网站建设技术人员要求,联盟设计库,网站建设的规模与类别,优设网简介如何提取高度嵌套的对象里的指定属性#xff1f;
有时会遇到一些嵌套程度非常深的对象#xff1a;
const school {classes: {stu: {name: Bob,age: 24,}}
}像此处的 name 这个变量#xff0c;嵌套了四层#xff0c;此时如果仍然尝试老方法来提取它#xff1a;
const {…如何提取高度嵌套的对象里的指定属性
有时会遇到一些嵌套程度非常深的对象
const school {classes: {stu: {name: Bob,age: 24,}}
}
像此处的 name 这个变量嵌套了四层此时如果仍然尝试老方法来提取它
const { name } school
显然是不奏效的因为 school 这个对象本身是没有 name 这个属性的name 位于 school 对象的“儿子的儿子”对象里面。要想把 name 提取出来一种比较笨的方法是逐层解构
const { classes } school
const { stu } classes
const { name } stu
name // Bob
但是还有一种更标准的做法可以用一行代码来解决这个问题
const { classes: { stu: { name } }} schoolconsole.log(name) // Bob
可以在解构出来的变量名右侧通过冒号{目标属性名}这种形式进一步解构它一直解构到拿到目标数据为止。
行内元素有哪些块级元素有哪些 空(void)元素有那些
行内元素有a b span img input select strong块级元素有div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p
空元素即没有内容的HTML元素。空元素是在开始标签中关闭的也就是空元素没有闭合标签
常见的有br、hr、img、input、link、meta鲜见的有area、base、col、colgroup、command、embed、keygen、param、source、track、wbr。
同步和异步的区别
同步指的是当一个进程在执行某个请求时如果这个请求需要等待一段时间才能返回那么这个进程会一直等待下去直到消息返回为止再继续向下执行。异步指的是当一个进程在执行某个请求时如果这个请求需要等待一段时间才能返回这个时候进程会继续往下执行不会阻塞等待消息的返回当消息返回时系统再通知进程进行处理。
代码输出结果
Promise.reject(err!!!).then((res) {console.log(success, res)}, (err) {console.log(error, err)}).catch(err {console.log(catch, err)})
输出结果如下
error err!!!
我们知道.then函数中的两个参数
第一个参数是用来处理Promise成功的函数第二个则是处理失败的函数
也就是说Promise.resolve(1)的值会进入成功的函数Promise.reject(2)的值会进入失败的函数。
在这道题中错误直接被then的第二个参数捕获了所以就不会被catch捕获了输出结果为error err!!!
但是如果是像下面这样
Promise.resolve().then(function success (res) {throw new Error(error!!!)}, function fail1 (err) {console.log(fail1, err)}).catch(function fail2 (err) {console.log(fail2, err)})
在then的第一参数中抛出了错误那么他就不会被第二个参数不活了而是被后面的catch捕获到。
代码输出结果
function runAsync (x) {const p new Promise(r setTimeout(() r(x, console.log(x)), 1000))return p
}Promise.all([runAsync(1), runAsync(2), runAsync(3)]).then(res console.log(res))
输出结果如下
1
2
3
[1, 2, 3]
首先定义了一个Promise来异步执行函数runAsync该函数传入一个值x然后间隔一秒后打印出这个x。
之后再使用Promise.all来执行这个函数执行的时候看到一秒之后输出了123同时输出了数组[1, 2, 3]三个函数是同步执行的并且在一个回调函数中返回了所有的结果。并且结果和函数的执行顺序是一致的。
代码输出结果
var a, b
(function () {console.log(a);console.log(b);var a (b 3);console.log(a);console.log(b);
})()
console.log(a);
console.log(b);
输出结果
undefined
undefined
3
3
undefined
3
这个题目和上面题目考察的知识点类似b赋值为3b此时是一个全局变量而将3赋值给aa是一个局部变量所以最后打印的时候a仍旧是undefined。
参考 前端进阶面试题详细解答
什么是 XSS 攻击
1概念
XSS 攻击指的是跨站脚本攻击是一种代码注入攻击。攻击者通过在网站注入恶意脚本使之在用户的浏览器上运行从而盗取用户的信息如 cookie 等。
XSS 的本质是因为网站没有对恶意代码进行过滤与正常的代码混合在一起了浏览器没有办法分辨哪些脚本是可信的从而导致了恶意代码的执行。
攻击者可以通过这种攻击方式可以进行以下操作
获取页面的数据如DOM、cookie、localStorageDOS攻击发送合理请求占用服务器资源从而使用户无法访问服务器破坏页面结构流量劫持将链接指向某网站
2攻击类型
XSS 可以分为存储型、反射型和 DOM 型
存储型指的是恶意脚本会存储在目标服务器上当浏览器请求数据时脚本从服务器传回并执行。反射型指的是攻击者诱导用户访问一个带有恶意代码的 URL 后服务器端接收数据后处理然后把带有恶意代码的数据发送到浏览器端浏览器端解析这段带有 XSS 代码的数据后当做脚本执行最终完成 XSS 攻击。DOM 型指的通过修改页面的 DOM 节点形成的 XSS。
1存储型 XSS 的攻击步骤
攻击者将恶意代码提交到⽬标⽹站的数据库中。⽤户打开⽬标⽹站时⽹站服务端将恶意代码从数据库取出拼接在 HTML 中返回给浏览器。⽤户浏览器接收到响应后解析执⾏混在其中的恶意代码也被执⾏。恶意代码窃取⽤户数据并发送到攻击者的⽹站或者冒充⽤户的⾏为调⽤⽬标⽹站接⼝执⾏攻击者指定的操作。
这种攻击常⻅于带有⽤户保存数据的⽹站功能如论坛发帖、商品评论、⽤户私信等。
2反射型 XSS 的攻击步骤
攻击者构造出特殊的 URL其中包含恶意代码。⽤户打开带有恶意代码的 URL 时⽹站服务端将恶意代码从 URL 中取出拼接在 HTML 中返回给浏览器。⽤户浏览器接收到响应后解析执⾏混在其中的恶意代码也被执⾏。恶意代码窃取⽤户数据并发送到攻击者的⽹站或者冒充⽤户的⾏为调⽤⽬标⽹站接⼝执⾏攻击者指定的操作。
反射型 XSS 跟存储型 XSS 的区别是存储型 XSS 的恶意代码存在数据库⾥反射型 XSS 的恶意代码存在 URL ⾥。
反射型 XSS 漏洞常⻅于通过 URL 传递参数的功能如⽹站搜索、跳转等。 由于需要⽤户主动打开恶意的 URL 才能⽣效攻击者往往会结合多种⼿段诱导⽤户点击。
3DOM 型 XSS 的攻击步骤
攻击者构造出特殊的 URL其中包含恶意代码。⽤户打开带有恶意代码的 URL。⽤户浏览器接收到响应后解析执⾏前端 JavaScript 取出 URL 中的恶意代码并执⾏。恶意代码窃取⽤户数据并发送到攻击者的⽹站或者冒充⽤户的⾏为调⽤⽬标⽹站接⼝执⾏攻击者指定的操作。
DOM 型 XSS 跟前两种 XSS 的区别DOM 型 XSS 攻击中取出和执⾏恶意代码由浏览器端完成属于前端JavaScript ⾃身的安全漏洞⽽其他两种 XSS 都属于服务端的安全漏洞。
代码输出结果
function Person(name) {this.name name
}
var p2 new Person(king);
console.log(p2.__proto__) //Person.prototype
console.log(p2.__proto__.__proto__) //Object.prototype
console.log(p2.__proto__.__proto__.__proto__) // null
console.log(p2.__proto__.__proto__.__proto__.__proto__)//null后面没有了报错
console.log(p2.__proto__.__proto__.__proto__.__proto__.__proto__)//null后面没有了报错
console.log(p2.constructor)//Person
console.log(p2.prototype)//undefined p2是实例没有prototype属性
console.log(Person.constructor)//Function 一个空函数
console.log(Person.prototype)//打印出Person.prototype这个对象里所有的方法和属性
console.log(Person.prototype.constructor)//Person
console.log(Person.prototype.__proto__)// Object.prototype
console.log(Person.__proto__) //Function.prototype
console.log(Function.prototype.__proto__)//Object.prototype
console.log(Function.__proto__)//Function.prototype
console.log(Object.__proto__)//Function.prototype
console.log(Object.prototype.__proto__)//null
这道义题目考察原型、原型链的基础记住就可以了。
浏览器渲染进程的线程有哪些
浏览器的渲染进程的线程总共有五种 1GUI渲染线程 负责渲染浏览器页面解析HTML、CSS构建DOM树、构建CSSOM树、构建渲染树和绘制页面当界面需要重绘或由于某种操作引发回流时该线程就会执行。
注意GUI渲染线程和JS引擎线程是互斥的当JS引擎执行时GUI线程会被挂起GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。
2JS引擎线程 JS引擎线程也称为JS内核负责处理Javascript脚本程序解析Javascript脚本运行代码JS引擎线程一直等待着任务队列中任务的到来然后加以处理一个Tab页中无论什么时候都只有一个JS引擎线程在运行JS程序
注意GUI渲染线程与JS引擎线程的互斥关系所以如果JS执行的时间过长会造成页面的渲染不连贯导致页面渲染加载阻塞。
3时间触发线程 时间触发线程属于浏览器而不是JS引擎用来控制事件循环当JS引擎执行代码块如setTimeOut时也可是来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等会将对应任务添加到事件触发线程中当对应的事件符合触发条件被触发时该线程会把事件添加到待处理队列的队尾等待JS引擎的处理
注意由于JS的单线程关系所以这些待处理队列中的事件都得排队等待JS引擎处理当JS引擎空闲时才会去执行
4定时器触发进程 定时器触发进程即setInterval与setTimeout所在线程浏览器定时计数器并不是由JS引擎计数的因为JS引擎是单线程的如果处于阻塞线程状态就会影响记计时的准确性因此使用单独线程来计时并触发定时器计时完毕后添加到事件队列中等待JS引擎空闲后执行所以定时器中的任务在设定的时间点不一定能够准时执行定时器只是在指定时间点将任务添加到事件队列中
注意W3C在HTML标准中规定定时器的定时时间不能小于4ms如果是小于4ms则默认为4ms。
5异步http请求线程
XMLHttpRequest连接后通过浏览器新开一个线程请求检测到状态变更时如果设置有回调函数异步线程就产生状态变更事件将回调函数放入事件队列中等待JS引擎空闲后执行
为什么需要浏览器缓存
对于浏览器的缓存主要针对的是前端的静态资源最好的效果就是在发起请求之后拉取相应的静态资源并保存在本地。如果服务器的静态资源没有更新那么在下次请求的时候就直接从本地读取即可如果服务器的静态资源已经更新那么我们再次请求的时候就到服务器拉取新的资源并保存在本地。这样就大大的减少了请求的次数提高了网站的性能。这就要用到浏览器的缓存策略了。
所谓的浏览器缓存指的是浏览器将用户请求过的静态资源存储到电脑本地磁盘中当浏览器再次访问时就可以直接从本地加载不需要再去服务端请求了。
使用浏览器缓存有以下优点
减少了服务器的负担提高了网站的性能加快了客户端网页的加载速度减少了多余网络数据传输
点击刷新按钮或者按 F5、按 CtrlF5 强制刷新、地址栏回车有什么区别
点击刷新按钮或者按 F5 浏览器直接对本地的缓存文件过期但是会带上If-Modifed-SinceIf-None-Match这就意味着服务器会对文件检查新鲜度返回结果可能是 304也有可能是 200。用户按 CtrlF5强制刷新 浏览器不仅会对本地文件过期而且不会带上 If-Modifed-SinceIf-None-Match相当于之前从来没有请求过返回结果是 200。地址栏回车 浏览器发起请求按照正常流程本地检查是否过期然后服务器检查新鲜度最后返回内容。
代码输出结果
async function async1() {console.log(async1 start);await async2();console.log(async1 end);setTimeout(() {console.log(timer1)}, 0)
}
async function async2() {setTimeout(() {console.log(timer2)}, 0)console.log(async2);
}
async1();
setTimeout(() {console.log(timer3)
}, 0)
console.log(start)
输出结果如下
async1 start
async2
start
async1 end
timer2
timer3
timer1
代码的执行过程如下
首先进入async1打印出async1 start之后遇到async2进入async2遇到定时器timer2加入宏任务队列之后打印async2由于async2阻塞了后面代码的执行所以执行后面的定时器timer3将其加入宏任务队列之后打印start然后执行async2后面的代码打印出async1 end遇到定时器timer1将其加入宏任务队列最后宏任务队列有三个任务先后顺序为timer2timer3timer1没有微任务所以直接所有的宏任务按照先进先出的原则执行。
大数相加
题目描述:实现一个add方法完成两个大数相加
let a 9007199254740991;
let b 1234567899999999999;function add(a ,b){//...
}
实现代码如下:
function add(a ,b){//取两个数字的最大长度let maxLength Math.max(a.length, b.length);//用0去补齐长度a a.padStart(maxLength , 0);//0009007199254740991b b.padStart(maxLength , 0);//1234567899999999999//定义加法过程中需要用到的变量let t 0;let f 0; //进位let sum ;for(let imaxLength-1 ; i0 ; i--){t parseInt(a[i]) parseInt(b[i]) f;f Math.floor(t/10);sum t%10 sum;}if(f!0){sum f sum;}return sum;
}
异步任务调度器
描述实现一个带并发限制的异步调度器 Scheduler保证同时运行的任务最多有 limit 个。
实现
class Scheduler {queue []; // 用队列保存正在执行的任务runCount 0; // 计数正在执行的任务个数constructor(limit) {this.maxCount limit; // 允许并发的最大个数}add(time, data){const promiseCreator () {return new Promise((resolve, reject) {setTimeout(() {console.log(data);resolve();}, time);});}this.queue.push(promiseCreator);// 每次添加的时候都会尝试去执行任务this.request();}request() {// 队列中还有任务才会被执行if(this.queue.length this.runCount this.maxCount) {this.runCount;// 执行先加入队列的函数this.queue.shift()().then(() {this.runCount--;// 尝试进行下一次任务this.request();});}}
}// 测试
const scheduler new Scheduler(2);
const addTask (time, data) {scheduler.add(time, data);
}addTask(1000, 1);
addTask(500, 2);
addTask(300, 3);
addTask(400, 4);
// 输出结果 2 3 1 4
计算属性和watch有什么区别?以及它们的运用场景?
// 区别computed 计算属性依赖其它属性值并且computed的值有缓存只有它依赖的属性值发生改变下一次获取computed的值时才会重新计算computed的值。watch 侦听器更多的是观察的作用,无缓存性,类似与某些数据的监听回调,每当监听的数据变化时都会执行回调进行后续操作
//运用场景当需要进行数值计算,并且依赖与其它数据时,应该使用computed,因为可以利用computed的缓存属性,避免每次获取值时都要重新计算。当需要在数据变化时执行异步或开销较大的操作时,应该使用watch,使用watch选项允许执行异步操作访问一个API),限制执行该操作的频率并在得到最终结果前设置中间状态。这些都是计算属性无法做到的。
怎么加事件监听两种
onclick 和 addEventListener
什么是同源策略
跨域问题其实就是浏览器的同源策略造成的。 同源策略限制了从同一个源加载的文档或脚本如何与另一个源的资源进行交互。这是浏览器的一个用于隔离潜在恶意文件的重要的安全机制。同源指的是协议、端口号、域名必须一致。 同源策略protocol协议、domain域名、port端口三者必须一致。
同源政策主要限制了三个方面
当前域下的 js 脚本不能够访问其他域下的 cookie、localStorage 和 indexDB。当前域下的 js 脚本不能够操作访问操作其他域下的 DOM。当前域下 ajax 无法发送跨域请求。
同源政策的目的主要是为了保证用户的信息安全它只是对 js 脚本的一种限制并不是对浏览器的限制对于一般的 img、或者script 脚本请求都不会有跨域的限制这是因为这些操作都不会通过响应结果来进行可能出现安全问题的操作。
一个 tcp 连接能发几个 http 请求
如果是 HTTP 1.0 版本协议一般情况下不支持长连接因此在每次请求发送完毕之后TCP 连接即会断开因此一个 TCP 发送一个 HTTP 请求但是有一种情况可以将一条 TCP 连接保持在活跃状态那就是通过 Connection 和 Keep-Alive 首部在请求头带上 Connection: Keep-Alive并且可以通过 Keep-Alive 通用首部中指定的用逗号分隔的选项调节 keep-alive 的行为如果客户端和服务端都支持那么其实也可以发送多条不过此方式也有限制可以关注《HTTP 权威指南》4.5.5 节对于 Keep-Alive 连接的限制和规则。
而如果是 HTTP 1.1 版本协议支持了长连接因此只要 TCP 连接不断开便可以一直发送 HTTP 请求持续不断没有上限 同样如果是 HTTP 2.0 版本协议支持多用复用一个 TCP 连接是可以并发多个 HTTP 请求的同样也是支持长连接因此只要不断开 TCP 的连接HTTP 请求数也是可以没有上限地持续发送
什么是 CSRF 攻击
1概念
CSRF 攻击指的是跨站请求伪造攻击攻击者诱导用户进入一个第三方网站然后该网站向被攻击网站发送跨站请求。如果用户在被攻击网站中保存了登录状态那么攻击者就可以利用这个登录状态绕过后台的用户验证冒充用户向服务器执行一些操作。
CSRF 攻击的本质是利用 cookie 会在同源请求中携带发送给服务器的特点以此来实现用户的冒充。
2攻击类型
常见的 CSRF 攻击有三种
GET 类型的 CSRF 攻击比如在网站中的一个 img 标签里构建一个请求当用户打开这个网站的时候就会自动发起提交。POST 类型的 CSRF 攻击比如构建一个表单然后隐藏它当用户进入页面时自动提交这个表单。链接类型的 CSRF 攻击比如在 a 标签的 href 属性里构建一个请求然后诱导用户去点击。
webpack3和webpack4区别
1.modewebpack增加了一个mode配置只有两种值development | production。对不同的环境他会启用不同的配置。2.CommonsChunkPluginCommonChunksPlugin已经从webpack4中移除。
可使用optimization.splitChunks进行模块划分提取公用代码。
但是需要注意一个问题默认配置只会对异步请求的模块进行提取拆分如果要对entry进行拆分
需要设置optimization.splitChunks.chunks all。3.webpack4使用MiniCssExtractPlugin取代ExtractTextWebpackPlugin。4.代码分割。使用动态import而不是用system.import或者require.ensure5.vue-loader。使用vue-loader插件为.vue文件中的各部分使用相对应的loader比如css-loader等6.UglifyJsPlugin现在也不需要使用这个plugin了只需要使用optimization.minimize为true就行production mode下面自动为trueoptimization.minimizer可以配置你自己的压缩程序
