提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

前端基础知识1

基础知识前端
2023-06-13 09:11:32 时间

大家好，又见面了，我是你们的朋友全栈君。 

'use strict'
var name = 'Jay'
var person ={ 
   
    name : 'Wang',
    pro:{ 
   
        name:'Michael',
        getName:function(){ 
   
                return this.name;
        }    
    }
}
console.log(person.pro.getName());
var pepole = person.pro.getName;
console.log(pepole());
答案
Michael
throw error
因为在'use strict'严格模式下，this无法指向全局，所以报错。当把'use strict'拿掉之后就是this.name的this指向person全局的name
结果为 michael Wang
setTimeout(function(){ 
   

console.log(1)
},0);
new Promise(function executor(resolve){ 
   
    console.log(2);
    for(var i= 1; i<10000; i+=1 ){ 
   
        i>=9999&&resolve();
    }
        console.log(3)
}).then(function(){ 
   
    console.log(4)
})
console.log(5)
//答案
2
3
5
4
1
解析：首先将定时器里的回调函数添加到宏任务队列中，实例化Promise对象，同步执行执行器的executor（）函数输出2，改变promise的状态为resolve，输出3，将then回调函数的添加到微任务队列中，输出5.同步代码执行完毕，执行异步任务；查看微任务队列，执行then回调函数输出4，微任务执行完毕，查看宏任务队列，执行settimeout的回调函数输出1
function fn(str,arr){ 
   
        for(let item of arr){ 
   
            let len = item.length
            let ret = new RegExp(`${ 
     item}`,'g')
            str = str.replace(ret,'*'.repeat(len))
        }
        return str 
    }
     
     
console.log(fn('想要轻生，have sex,sexy,babe',['轻生','sex']))


//结果
VM1759:11 想要**，have ***,***y,babe
A.git是由github创造的代码管理工具
B.git和svn实现的原理是一样的
C.从git原理设计上来讲，执行git pull和先执行git fetch再执行git merge效果是一样的。
D.git将代码提交到远程仓库的命令是git commit
E.git rm只会将文件从git提交记录中删除，不会删除磁盘上的物理文件
F.git push -f将会重新提交当前的commit节点，不会重写历史commit
答案C
A.Cookie，LocalStorage和IndexedDB都会受到同源策略的限制
B.postMessage，JSONP，WebSocket都是常用的解决跨域的方案
C.跨域资源共享规范中规定了除了GET之外的HTTP请求，或者搭配某些MINE类型的POST请求，浏览器都需要先发一个OPTIONS请求
D.http://www.bilibili.com和https://www.bilibili.com是相同的域名，属于同源

答案：d
https和http是不同协议
A.在并行程度中，当两个并行的线程，在没有任何约束的情况下，访问一个共享变量或者共享对象的一个域，而且至少要有一个操作是写操作，就可能发生数据竞争错误。
B.原语Compare-and-swap(CAS)是实现无锁数据结构的通用原语。
C.获得内部锁的唯一途径是：进入这个内部锁保护的同步块或方法。
D.volatile变量具有synchronized的可见性特性，但是不具备原子特性。
E.减小竞争发生可能性的有效方式是尽可能缩短把持锁的时间

答案ABCDE
下面数据结构能够支持随机的插入和删除操作、并具有较好的性能的是____。
正确答案: B   你的答案: F (错误)
A.数组和链表
B.链表和哈希表
C.哈希表和队列
D.队列和堆栈
E.堆栈和双向队列
F.双向队列和数组
根据关系型数据库规范范理论，关系数据库中的关系要满足第一范式，在部门关系中，因哪个属性而石塔不满足第一范式？（）

正确答案: B   
A.部门名

B.部门成员

C.部门总经理

D.部门号
解析：第一范式要保证原子性，不能进行再次分层。
现有4个同时到达的作业J1,J2,J3和J4,它们的执行时间分别是1小时，3小时，5小时，7小时，系统按单道方式运行且采用短作业优先算法，则平均周转时间是（）小时
正确答案: D   
A.4
B.5
C.6
D.7.5
解析：谁短谁先执行，所以执行顺序为 J1 J2 J3 J4，J1执行完时间为1,轮到J2执行时，前面已经过了一小时，所以J2执行完时间为1+3 =4，同理，平均周转时间为 （1  + （1+3）  + （1+3+5 ）+ （ 1+3+5+7））/4=7.5
var foo = "Hello";

(function(){

var bar = " World";

alert(foo + bar);

})();

alert(foo + bar);
其中alert两次输出结果为？
hello world 报错
考察就是作用域问题
寝室有6个同学打dota，分为对立的两方，一方是天灾军团，一方是近卫军团。现请你设置赛程以及每场的对阵（每方最少1人、最多5人），请问至少得进行多少场比赛，才能使得赛程结束后每位同学都和其他同学做过对手（）
假设 A B C D E F 六位同学
第一场： ABC *  DEF   
第二场： ABF * DEC
第三场： BDF * EAC
计算机内的传输是并行传输，通信线路上的传输是串行传输
setTimeout(() => console.log('a'));
Promise.resolve().then(
   () => console.log('b’);
 ).then(
   () => Promise.resolve('c').then(
     (data) => { 
   
       setTimeout(() => console.log('d'));
       console.log('f');
       return data;
     }
   )
 ).then(data => console.log(data));
 
 
 //
 // 定时器任务属于宏任务，并且需要先在任务队列等待，等到同步任务执行完，执行栈清空，才会在任务队列中按顺序选任务进去
setTimeout(() => console.log('a'));//4. 打印a
 
//Promise 属于异步微任务，在本轮同步任务结束之前执行
Promise.resolve().then(
    // 1. 打印 b
   () => console.log('b')  // 单引号要改为',然后去掉;号
 ).then(
    // 箭头函数的resolve传递的参数作为下一个then的参数
   () => Promise.resolve('c').then(
     // 执行箭头函数
     (data) => { 
   
        // 把定时器任务也放入任务队列中等待，在第一个定时器之后
       setTimeout(() => console.log('d')); //5. 打印d
       // 2.打印 f
       console.log('f');
       // 此时返回的 数据作为下一个then的参数
       return data;
     }
   )
 ).then(data => console.log(data)); // 3.打印 c
  
``` * `打印bfcad`

请写出下面ES6代码编译后所生成的ES5代码；

class Person { 
   
     constructor (name) { 
   
          this.name = name;
     }
     greet () { 
   
          console.log(`Hi, my name is ${ 
     this.name}`);
     }
     greetDelay (time) { 
   
          setTimeout(() => { 
   
               console.log(`Hi, my name is ${ 
     this.name}`);
          }, time);
     }
}



 var Person = (function () { 
   
     function Person (name) { 
   
          this._name = name;
     }
     Person.prototype.greet = function () { 
   
          console.log(“Hi, my name is “ + this._name);
     }
     Person.prototype.greetDelay = function (time) { 
   
          var _this = this;
          setTimeout(function () { 
   
               console.log(“Hi, my name is “ + _this.name);
          }, time);
     }
})();

形如1, 1, 2, 3, 5, 8, 13, 21, 34, 55的数列，后一位是前面两位相加（斐波那契数列），写出函数要求找到第 N 位是多少，如：fib(3) => 3 ， fib(5) => 8, 要求时间复杂度为O(n)。

function fib(n){ 
   
    let top=1,bottom=0,res=0
    for(let i=0;i<n;i++){ 
   
        res=top+bottom
        bottom=top
        top=res
    }
    return res
}

给定一个包含非负整数的 M x N 迷宫，请找出一条从左上角到右下角的路径，使得路径上的数字总和最小。每次只能向下或者向右移动一步。

const readline = require('readline')
const rl = readline.createInterface({ 
   
    input: process.stdin,
    ouput: process.stdout
})
let inArr = []
rl.on('line', line=>{ 
   
    if(!line) return
    inArr.push(line.trim())
    let mn = inArr[0].split(' ').map(e=>+e)
    let m = mn[0]
    let n = mn[1]
    if(inArr.length === m+1){ 
   
        let arr = []
        for (let i = 0; i < m; i++) { 
   
            arr[i] = inArr[i+1].split(' ').map(e => +e)
        }
        console.log(minPathSum(arr))

    }
})

var minPathSum = function (grid) { 
   
    const m = grid.length,
        n = grid[0].length
    for (let i = m - 1; i >= 0; i--) { 
   
        for (let j = n - 1; j >= 0; j--) { 
   
            if (i + 1 < m && j + 1 < n) { 
   
                grid[i][j] += Math.min(grid[i + 1][j], grid[i][j + 1])
            } else if (i + 1 < m) { 
   
                grid[i][j] += grid[i + 1][j]
            } else if (j + 1 < n) { 
   
                grid[i][j] += grid[i][j + 1]
            }
        }
    }
    return grid[0][0]
};

小团在一次星际旅行中，耗尽了飞船的能量，迷失在了空间魔方中，空间魔方中有N*N**N个能量粒子。美团云AI迅速帮小团分析出了空间魔方的能量分布图。

已知小团的飞船被困在能量值最高的点，能量值最高点有且只有一个。飞船每到达一个能量粒子就会吸收对应粒子的能量，该粒子会坍缩成小黑洞，飞船不可到达。小团驾驶的飞船只能从高能粒子驶向低能粒子，且每次只能从6个方向中选择一个前进。（±x,±y,±z）。

请帮助帮小团吸收最高的能量值。

    new Promise((resolve) => { 
   
console.log('1')
    resolve()
console.log('2')
     }).then(() => { 
   
    console.log('3')
     })
     setTimeout(() => { 
   
    console.log('4')
     })
     console.log('5')

js在处理异步操作时利用的是事件循环机制。事件循环机制处理顺序，同步操作<-异步操作(微任务<-宏任务)

由于javascript是单线程任务所以主线程只能同时处理一个任务，所以把异步的事件放在同步的事件处理完成之后再来依次处理。

异步事件又包括微任务和宏任务：

宏任务和微任务关系：微任务执行完后再执行宏任务

微任务操作：1：Promise,2:MutationObserver

宏任务操作:1:setTimeout,2:setInterval,3:I/O操作

所以上面代码执行顺序为:

同步：console.log(1)->console.log(2)->console.log(5);

异步：(微任务)console.log(3)->（宏任务）console.log(4);

所以答案为：1 2 5 3 4

请列举几个HTML5语义化标签，并说说语义化有什么优点？

<title>：页面主体内容。
<hn>：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。
<ul>：无序列表。
<li>：有序列表。
<header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。
<nav>：标记导航，仅对文档中重要的链接群使用。
<main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
<article>：定义外部的内容，其中的内容独立于文档的其余部分。
<section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
<footer>：页脚，只有当父级是body时，才是整个页面的页脚。
<small>：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。
<strong>：和 em 标签一样，用于强调文本，但它强调的程度更强一些。
<em>：将其中的文本表示为强调的内容，表现为斜体。
<mark>：使用黄色突出显示部分文本。
<figure>：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。
<figcaption>：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。
<cite>：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
<blockquoto>：定义块引用，块引用拥有它们自己的空间。
<q>：短的引述（跨浏览器问题，尽量避免使用）。
<time>：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。
<abbr>：简称或缩写。
<dfn>：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。
<address>：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。
<del>：移除的内容。
<ins>：添加的内容。
<code>：标记代码。
<meter>：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）
<progress>：定义运行中的进度（进程）。

优点：
代码结构清晰，方便阅读，有利于团队合作开发。
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
有利于搜索引擎优化（SEO）。

请列举几种除了px外的CSS度量单位并解释其含义。

1. rem 相对于根字体大小的单位，比如可以设置 1rem=50px
2. em 相对于font-size，比如font-size：16px（浏览器默认），则2em=32px
3. vm 即viewpoint width，视窗宽度，比如1vm的宽度为相对于视窗的宽度的百分之一
4. vh 即viewpoint height ，同上

简述cookie/session记住登录状态机制原理。

用户登录验证成功后，如果是使用 Cookie 记住登录状态，则服务器会将用户名等信息放在响应头的 Set-Cookie 属性中返回给服务器，之后的 HTTP 请求都会携带这个 Cookie ，实现记住登录。如果是 session 的话，则服务器会将用户名等信息存放在本地，再随机生成一个登录标识通过 Cookie 返回给浏览器，之后浏览器每次发送请求也会携带这个 Cookie，服务器收到后便通过这个标识得到已登录的用户信息。

网页中接收事件的顺序（事件流）有哪些？它们之间的区别是什么？

有捕获和冒泡两种，冒泡是事件由子元素传递到父元素的过程，捕获是时间由父元素传递到子元素的过程

css属性position都有哪些值？

absolute绝对定位
relative相对定位
fixed固定定位
sticky粘性定位
static默认值，没有定位
inherit继承父系
initial设置该属性为默认值

简述你对HTTP控制访问（CORS）的理解。

首先要搞明白什么是同源，什么是跨域。

打一个简单的比方，你自己从你家里拿东西，不会有人说，这是同源；但是你要从隔壁的邻居的冰箱去拿可乐，你觉得可能吗，这就是跨域。

从比方中回来，事实其实没有那么简单。理解了概念后，得知道如何去判断同源还是跨域。web服务器有三要素：协议（http、https）、端口号（不过多说）、web服务器域名（比如https://github.com/mamba666
中https://github.com就是域名）。三要素必须全部一致才算同源

个人认为写完上面的东东后已经理解了同源跨域已经如何区分。接下来就来看看真正的干货，不讲同源，只讲跨域（以下参考MDN）

浏览器端
如果发现有一个请求是跨域，那么浏览器会自动先拦截一下，给它的http header加上Origin字段。比如 http://localhost:8080变为Origin:http://localhost:8080。这样一来，服务器端就可以区分这个请求是不是跨域了。

服务器端
当服务器端收到浏览器端发送过来的请求后，会有一个响应header。它会告诉请求的浏览器哪儿些域名可以请求我，哪儿些方法可以执行。

响应回到浏览器端
此时浏览器会根据这个响应自动判断，然后在做决定。

服务器端返回给浏览器端的东西
Access-Control-Allow-Origin 允许跨域的Origin列表
Access-Control-Allow-Methods 允许跨域的方法列表（GET、POST等）
Access-Control-Allow-Headers 允许跨域的Header列表
Access-Control-Expose-Headers 允许暴露给JavaScript代码的Header列表
Access-Control-Max-Age 最大的浏览器缓存时间，单位为s
跨域请求形式
有两种，简单和非简单请求。这里说说我常遇到的 application/json 。这就是一种非简单请求，在以上所写的浏览器端之前，会先进行一次预请求，根据这个结果再去判断是否正式请求。

以下关于块级元素和行内元素的说明正确的是？

A.块级元素在默认情况下，其宽度自动填满其父元素的宽度
B.块级元素的width、height属性可以生效，但padding、margin无效
C.strong属于行内元素, 它的width、height属性设置无效
D.textarea默认属于块级元素，而input属于行内元素
1.块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度。
    行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化。
2.块级元素的padding和margin值的设置都是有效的。行内元素和块级元素都是盒子模型。
    行内元素的padding-top、padding-bottom、margin-top、margin-bottom属性设置是无效的（top bottom）
    行内元素的padding-left、padding-right、margin-left、margin-right属性设置是有效的（left right）
    行内元素的 line-height 属性设置是有效的。
    行内元素的 width、height 属性设置是无效的。
    行内元素的padding-top、padding-bottom从显示的效果上是增加的，但其实设置的是无效的，并不会对他周围的元素产生任何影响
3.strong是行内元素，它的width、height属性设置无效（没错啊？？？）
4. textarea是行内元素 - 多行文本输入框，input也是行内元素
行内inline 块级block 行内块级line-block(拥有内在尺寸，可设置高宽，不会自动换行 )

以下关于cookie和localStorage描述正确的是

A.cookie 和 localStorage 都可以由浏览器自动携带在http请求的header中传递给服务端
B.localStorage无法被用户清除，所以比Cookie更安全，可以放置重要数据
C.localStorage 和 cookie 一样也有跨域限制
D.localStorage 可以和cookie 一样通过特殊的http 头部由服务端进行设置
function fun () { 
   
    return () => { 
   
        return () => { 
   
            return () => { 
   
            console.log(this.name)
                    }
                }
        }
}
var f = fun.call({ 
   name: 'foo'})
var t1 = f.call({ 
   name: 'bar'})()()
var t2 = f().call({ 
   name: 'baz'})()
var t3 = f()().call({ 
   name: 'qux'})
 箭头函数没有自己的this也并不能使用call,apply以及bind去绑定this，会选择去继承父级作用域的this，所以后面几次的call实际上是失败的，所以箭头函数层层向上寻找name，只会在最外层的fun函数作用域中找到this指向{name: 'foo'}对象的name属性。假设此处将fun函数改成箭头函数的声明方式，那么返回的值将会是undefined.

小易有个32G字节的文件，需要从电脑1传送到电脑2，假设两者之间是1024Mbit/s的网络，那么需要多久能传输完 ?

一字节等于8位
32 * 8 * 1024 M bit /1024Mbit/s = 256s

下面代码执行结果是

const a = { 
   
valueOf() { 
   
return 'valueOf'
},
toString() { 
   
return 'toString'
},
get() { 
   
return 'get'
}
}
alert(a) 
这题考查valueOf()与toString()的区别。

在不重写这两个方法时：

toString()方法：返回对象的字符串表示
valueOf()方法：返回指定对象的原始值。
默认情况，会调用toString()方法。例如：
var cc = { 
   };
alert(cc);// [object Object]
var fun = function() { 
   } ; 
alert(fun);// function() {}
var arr = [1];
alert(arr); // 1
从上面的代码来看，默认情况会调用对象的toString()方法，返回对象的字符串表示。

下面看看重写对象的toString()与valueOf()方法，并且同时存在时会发生什么：
var bbb = { 
   
i: 10,
toString: function() { 
   
console.log('toString');
return this.i;
},
valueOf: function() { 
   
console.log('valueOf');
return this.i;
}
}
 alert(bbb);// 10 toString
 alert(+bbb); // 10 valueOf
 alert(''+bbb); // 10 valueOf
 alert(String(bbb)); // 10 toString
 alert(Number(bbb)); // 10 valueOf
 alert(bbb == '10'); // true valueOf
二者并存的情况下，在数值运算中，优先调用了valueOf，字符串运算中，优先调用了toString。而’ '+bbb是字符串操作，为啥也是调用valueOf，那是因为，存在操作符，valueOf的优先级高于toString。

回到本题: alert(obj)不存在数值运算，和其他操作符，所以默认调用toString方法。
结果为：toString。

js将数字转为中文

function transform(tranvalue){ 
   
        try{ 
           //转换整数部分
        var k1=0;//计小单位
        var k2=0;//计大单位
        var sum = 0;
        var str="";
        var len = source[0].length;//整数的长度
        for(i=1;i<=len;i++){ 
   
            var n = source[0].charAt(len-i);//取得某个位数上的数字
            var bn = 0;
            if(len-i-1>=0){ 
   
                bn = source[0].charAt(len-i-1);//取得某个位数前一位上的数字
            }
            sum = sum+Number(n);
            if(sum!=0){ 
   
                str = dw[Number(n)].concat(str);//取得该数字对应的大写数字，并插入到str字符串的前面
                if(n=='0')sum = 0;
            }
            if(len-i-1>=0){ 
   //在数字范围内
                if(k1!=3){ 
   //加小单位
                    if(bn!=0){ 
   
                        str = dw1[k1].concat(str);
                    }
                    k1++;
                }else{ 
   //不加小单位，加大单位
                    k1=0;
                    var temp = str.charAt(0);
                    if(temp=="万" || temp=="亿")//若大单位前没有数字则舍去大单位
                        str = str.substr( 1, str.length-1);
                    str = dw2[k2].concat(str);
                    sum = 0;
                }
            }
            if(k1==3)//小单位到千则大单位进一
            { 
    k2++;}
        }

        //转换小数部分
        var strdig="";
        if(dig!=""){ 
   
            var n = dig.charAt(0);
            if(n!=0){ 
   
                strdig += dw[Number(n)]+"角";//加数字
            }
            var n = dig.charAt(1);
            if(n!=0){ 
   
                strdig += dw[Number(n)]+"分";//加数字
            }
        }
        str += "元"+strdig;
    }catch(e){ 
   
        return "0元";
    }
    return str;
}

//拆分整数与小数
function splits(tranvalue){ 
   
    var value = new Array('','');
    temp = tranvalue.split(".");
    for(var i=0;i<temp.length;i++){ 
   
        value[i] = temp[i];
    }
    return value;
}
 var a = '12345678';
    var b = transform(a);
    console.log(b);

一、减少HTTP请求

上面说到80%~90%时间花在了下载页面中的所有组件进行的HTTP请求上。因此，改善响应时间最简单的途径就是减少HTTP请求的数量。

图片地图：

假设导航栏上有五幅图片，点击每张图片都会进入一个链接，这样五张导航的图片在加载时会产生5个HTTP请求。然而，使用一个图片地图可以提高效率，这样就只需要一个HTTP请求。

二、使用CDN

如果应用程序web服务器离用户更近，那么一个HTTP请求的响应时间将缩短。另一方面，如果组件web服务器离用户更近，则多个HTTP请求的响应时间将缩短。

CDN（内容发布网络）是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容。在优化性能时，向特定用户发布内容的服务器的选择基于对网络慕课拥堵的测量。

CDN还可以进行数据备份、扩展存储能力，进行缓存，同时有助于缓和Web流量峰值压力。

CDN的缺点：

1、响应时间可能会受到其他网站流量的影响。CDN服务提供商在其所有客户之间共享Web服务器组。

2、如果CDN服务质量下降了，那么你的工作质量也将下降

3、无法直接控制组件服务器

五、将样式表放在头部

首先说明一下，将样式表放在头部对于实际页面加载的时间并不能造成太大影响，但是这会减少页面首屏出现的时间，使页面内容逐步呈现，改善用户体验，防止“白屏”。

我们总是希望页面能够尽快显示内容，为用户提供可视化的回馈，这对网速慢的用户来说是很重要的。

将样式表放在文档底部会阻止浏览器中的内容逐步出现。为了避免当样式变化时重绘页面元素，浏览器会阻塞内容逐步呈现，造成“白屏”。这源自浏览器的行为：如果样式表仍在加载，构建呈现树就是一种浪费，因为所有样式表加载解析完毕之前务虚会之任何东西

六、将脚本放在底部

更样式表相同，脚本放在底部对于实际页面加载的时间并不能造成太大影响，但是这会减少页面首屏出现的时间，使页面内容逐步呈现。

js的下载和执行会阻塞Dom树的构建（严谨地说是中断了Dom树的更新），所以script标签放在首屏范围内的HTML代码段里会截断首屏的内容。

下载脚本时并行下载是被禁用的——即使使用了不同的主机名，也不会启用其他的下载。因为脚本可能修改页面内容，因此浏览器会等待；另外，也是为了保证脚本能够按照正确的顺序执行，因为后面的脚本可能与前面的脚本存在依赖关系，不按照顺序执行可能会产生错误。

  1. 有什么方法可以延迟js文件的挂载

使用setTimeOut延迟加载， 把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度

  1. Vue的生命周期

vue生命周期即为一个组件从出生到死亡的一个完整周期，主要包括以下4个阶段：创建，挂载，更新，销毁

创建前：beforeCreate, 创建后:created 挂载前：beforeMount, 挂载后：mounted 更新前：beforeUpdate, 更新后：updated 销毁前：beforeDestroy, 销毁后：destroyed

我平时用的比较多的钩了是created和mounted，created用于获取后台数据，mounted用于dom挂载完后做一些dom操作,以及初始化插件等.beforeDestroy用户清除定时器以及解绑事件等, 另外还新增了使用内置组件 keep-alive 来缓存实例，而不是频繁创建和销毁(开销大)

actived 实例激活 deactived 实例失效

以下为详解版,大家理解就ok: 生命周期钩子函数（11个）Function（类型），标注蓝色的那个是属于类型的意思。 beforeCreate Function 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 created Function 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)， 属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，el 属性目前不可见。 beforeMount Function 在挂载开始之前被调用：相关的 render 函数首次被调用。 mounted Function el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。 beforeUpdate Function 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。 updated Function 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。 activated Function keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。 deactivated Function keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。 beforeDestroy Function 实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。 destroyed Function Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。 errorCaptured（2.5.0+ 新增） (err: Error, vm: Component, info: string) => ?boolean 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

sql注入的危害：

  • 数据库信息泄漏：数据库中存放的用户的隐私信息的泄露，脱取数据库中的数据内容（脱库），可获取网站管理员帐号、密码悄无声息的进行对网站后台操作等。
  • 网页篡改：通过操作数据库对特定网页进行篡改，可严重影响正常业务进行。
  • 网站被挂马：将恶意文件写入数据库，修改数据库字段值，嵌入网马链接，进行挂马攻击。
  • 数据库被恶意操作：数据库服务器被攻击，数据库的系统管理员帐户被窜改。
  • 文件系统操作：列取目录、读取、写入shell文件获取webshell，远程控制服务器，安装后门，经由数据库服务器提供的操作系统支持，让黑客得以修改或控制操作系统。
  • 执行系统命令：远程命令执行，可破坏硬盘数据，瘫痪全系统。
var arr = ["dadaswower", "dadasdaw", "dadaswower"];
let fn = () => { 
   
	for (let i = 0; i < arr[0].length; i++) { 
   
		for (let s = 0; s < arr.length; s++) { 
   
			if (s + 1 < arr.length) { 
   
				if (arr[s][i] != arr[s + 1][i]) { 
   
					return i;
				}
			}
		}
	}
}
var str = fn() === undefined ? arr[0] : arr[0].substr(0,fn());
console.log(str);//dadas

vue组件通信、事件总线（具体怎么实现的）、vuex的实现、

浏览器缓存、

htt状态码、

promise.all手写、

this指向、

看图回答输出、

编程题 90度翻转数组。

2、讲讲csrf、xss攻击

3、vue的双向绑定的原理？

4、http缓存有哪些？

HTTP缓存的分类

根据是否需要重新向服务器发起请求来分类，可分为(强制缓存，协商缓存) 根据是否可以被单个或者多个用户使用来分类，可分为(私有缓存，共享缓存) 强制缓存如果生效，不需要再和服务器发生交互，而协商缓存不管是否生效，都需要与服务端发生交互。下面是强制缓存和协商缓存的一些对比：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vTYHiBMl-1610201845197)(C:\Users\glzpcadm\AppData\Roaming\Typora\typora-user-images\1610199121539.png)]

5、为什么vue里面，组件的data需要返回一个函数？

	组件是可复用的`vue`实例，一个组件被创建好之后，就可能被用在各个地方，而组件不管被复用了多少次，组件中的`data`数据都应该是相互隔离，互不影响的，基于这一理念，组件每复用一次，`data`数据就应该被复制一次，之后，当某一处复用的地方组件内`data`数据被改变时，其他复用地方组件的`data`数据不受影响。

6、箭头函数和普通函数的区别？

箭头函数有两种格式，一种只包含一个表达式，连{ … }和return都省略掉了。还有一种可以包含多条语句，这时候就不能省略{ … }和return。

箭头函数是匿名函数，不能作为构造函数，不能使用new

箭头函数不绑定arguments，取而代之用扩展运算符…解决

箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值

箭头函数没有原型属性

var a = ()=>{ 
   
  return 1;
}

function b(){ 
   
  return 2;
}

console.log(a.prototype);  // undefined
console.log(b.prototype);   // {constructor: ƒ}

箭头函数通过 call() 或 apply() 方法调用一个函数时，只传入了一个参数，对 this 并没有影响。

let obj2 = { 
   
    a: 10,
    b: function(n) { 
   
        let f = (n) => n + this.a;
        return f(n);
    },
    c: function(n) { 
   
        let f = (n) => n + this.a;
        let m = { 
   
            a: 20
        };
        return f.call(m,n);
    }
};
console.log(obj2.b(1));  // 11
console.log(obj2.c(1)); // 11

7、用过webpack吗？在项目中怎么配置？图片文件需要怎么配置？

url-loader进行图片处理

{test:/.(jpg|png|gif|bmp|jpeg)$/,use:‘url-loader?limit=8908&name=[hash:8]-[name].[ext]’},

8、编程题：

1）实现一个fibonacci函数，输入数字n，输出fibonacci数列的第n项数字，并给该函数加入缓存功能。

这里用动态规划来实现会简单一些，但是题目要求有缓存功能

  function fibonacci(n, map = { 
   }){ 
    
 if(n == 1 || n == 2){ 
    
 map[n] = 1; 
 return 1; 
 } 
 if(!map[n]){ 
    
 map[n] = fibonacci(n-1, map) + fibonacci(n-2, map) 
 } 
 return map[n]; 
 }

2）给定一个字符串str，只会出现{}()[]这六种字符，请实现一个函数isMatch(str)判断这个字符串中的括号是否是匹配的。

例如以下字符串均为括号匹配的：(){ {}[]} {}([])

以下字符串不为括号匹配： ({} ([)[{}

这题用栈的思想很容易解

 function isMatch(str){ 
    
 let stack = []; 
 for(let i=0;i<str.length;i++){ 
    
 if(str[i] == '(' || str[i] == '{' || str[i] == '['){ 
    
 stack.push(str[i]) 
 }else if(str[i] == ')' || str[i] == '}' || str[i] == ']'){ 
    
 let target = stack[stack.length-1]; 
 if( 
 target == '(' && str[i] == ')' ||  
 target == '{' && str[i] == '}' || 
 target == '[' && str[i] == ']' 
 ){ 
    
 stack.pop(); 
 }else{ 
    
 return false; 
 } 
 } 
 } 

 return !stack.length 
 }

实现一个函数，返回一个n,m的随机数。

Math.random，要注意的是Math.random返回的是0到1之间的随机数，包括0但是不包括1。

vue的nexttick

this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

vuex

1 vuex有哪几种状态和属性

有五种，分别是 State、 Getter、Mutation 、Action、 Module （就是mapAction等）

vuex的流程

​ 页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation。mutation会修改state中对于的值。

最后通过getter把对应值跑出去，在页面的计算属性中，通过mapGetter来动态获取state中的值

2 vuex的State特性是？

stae就是存放数据的地方，类似一个仓库

特性就是当mutation修改了state的数据的时候，他会动态的去修改所有的调用这个变量的所有组件里面的值（ 若是store中的数据发生改变，依赖这个数据的组件也会发生更新 ）

3 vuex的Getter特性是？

​ getter用来获取数据，mapgetter经常在计算属性中被使用

4 vuex的Mutation特性是？

一、Action 类似于 mutation，不同在于：

二、Action 提交的是 mutation，而不是直接变更状态。

三、Action 可以包含任意异步操作

5 vuex的优势

​ 1 状态管理工具 核心是响应式的做到数据管理

​ 一个页面发生数据变化。动态的改变对应的页面

​ 相比使用localStorage ,localstorge只能纯属字符串数据格式，因此还得封装自己的写入写出，localstorage的优势是永久存储

promise

Promise.all(iterable) 方法返回一个 Promise 实例，此实例在 iterable 参数内所有的 promise 都“完成（resolved）”或参数中不包含 promise 时回调完成（resolve）；如果参数中 promise 有一个失败（rejected），此实例回调失败（reject），失败原因的是第一个失败 promise 的结果。 get post区别及应用场景 浏览器缓存

 // 手写Promise.all()
    Promise.property.all = function (iterators) { 
   
        const promises = Array.from(iterators);
        const len = promises.length;
        let count = 0;
        let resultList = [];
        return new Promise((resolve,reject)=>{ 
   
            promises.forEach((p,index) =>{ 
   
                Promise.resolve(p)
            .then((result)=>{ 
   
                count++;
                resultList[index] = result;
                if(count === len){ 
   
                    resolve(resultList);
                }
        })
        .catch(e=>{ 
   
            reject(e);
        })
        })
        })
    }

手写一个promise

// 首先要明确Promise是一个类，所以我们用class声明。
// 其次，构造函数中接收一个executor，它有两个参数，一个是resolve，一个是reject
// 这里要注意，resolve和reject都是函数
class Promise(){ 
   
    // 构造函数（入参是执行器，包括resolve和reject两个函数）
    constructor(executor){ 
   
        // 必要的初始化，这里用到状态，值和原因三个变量
        this.state = 'pending';
        this.value = undefined;
        this.reason = undefined;
        // 定义成功函数，入参是value
        let resolve = value => { 
   
            // 首先要判断state是否为等待态，如果不是则不做任何处理
            if(this.state === 'pending'){ 
   
                // 修改状态
                this.state = 'fulfilled';
                // 更新值
                this.value = value;
            }
        };
        // 定义失败函数，入参是失败原因
        let reject = reason => { 
   
            // 同样的逻辑
            if(this.state === 'pending'){ 
   
                this.state = 'rejected';
                this.reason = reason;
            }
        };
        // 这是promise对象的的主逻辑，执行executor，如果执行器出错，则捕获错误后执行reject函数
        try{ 
   
            executor(resolve, reject); 
        }catch(err){ 
   
            reject(err);
        }
    }
    // 定义Promise的then函数
    // then方法接收两个参数，如果状态为fulfilled，执行onFulfilled
    // 如果状态为rejected，则执行onRejected
    then(onFulfilled, onRejected){ 
   
        if(this.state === 'fulfilled'){ 
   
            onFulfilled(this.value);
        };
        if(this.state === 'rejected'){ 
   
            onRejected(this.reason);
        };
    }
}
复制代码

= result; if(count === len){ resolve(resultList); } }) .catch(e=>{ reject(e); }) }) }) }

手写一个promise

```js
// 首先要明确Promise是一个类，所以我们用class声明。
// 其次，构造函数中接收一个executor，它有两个参数，一个是resolve，一个是reject
// 这里要注意，resolve和reject都是函数
class Promise(){
    // 构造函数（入参是执行器，包括resolve和reject两个函数）
    constructor(executor){
        // 必要的初始化，这里用到状态，值和原因三个变量
        this.state = 'pending';
        this.value = undefined;
        this.reason = undefined;
        // 定义成功函数，入参是value
        let resolve = value => {
            // 首先要判断state是否为等待态，如果不是则不做任何处理
            if(this.state === 'pending'){
                // 修改状态
                this.state = 'fulfilled';
                // 更新值
                this.value = value;
            }
        };
        // 定义失败函数，入参是失败原因
        let reject = reason => {
            // 同样的逻辑
            if(this.state === 'pending'){
                this.state = 'rejected';
                this.reason = reason;
            }
        };
        // 这是promise对象的的主逻辑，执行executor，如果执行器出错，则捕获错误后执行reject函数
        try{
            executor(resolve, reject); 
        }catch(err){
            reject(err);
        }
    }
    // 定义Promise的then函数
    // then方法接收两个参数，如果状态为fulfilled，执行onFulfilled
    // 如果状态为rejected，则执行onRejected
    then(onFulfilled, onRejected){
        if(this.state === 'fulfilled'){
            onFulfilled(this.value);
        };
        if(this.state === 'rejected'){
            onRejected(this.reason);
        };
    }
}

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/145712.html原文链接：https://javaforall.cn

相关文章