2020最新前端面试题（一）

1.下面代码执行后 d

var c=1,d=1;
for(;c<3;c++){
d+=++c;
}
d=3;

2.请补充代码

var a=[{x:1},{x:2},{x:3}];
//1) 给a数组最前面插入{x:0}
var a=[{x:1},{x:2},{x:3}];
a.unshift({x:0});
//2) 给a数组最后追加 {x:6}
var a=[{x:1},{x:2},{x:3}];
a.push({x:6});
//3) 请使用效率最快的方式清空数组a
a=[];

3.请补充代码，请在控制台打印输出数组中的各对象a的值

var data= [{a:0},{a:1},{b:2},{a:3},{c:5}];
data.forEach (function (v){
console.log(v.a)
});

4.下面代码执行后 a= , b=

var a=6,b={x:1,y:2};
var func1 = function (p,m){
p=++p;
m.x=p; m.y+=m.y;
};
func1(a,b);
a = 6;
b = {x:7, y: 4}

5.请补充代码，计算满足y>0，的x的和

var a=[{x:1,y:0},{x:2,y:1},{x:3,y:2},{x:4}];
sum = 0;
for (var i =0; i< a.length;i++) {
if(a[i].y > 0) {
sum += a[i].y
}
};
console.log(sum);

6.输入框输入数字12345678.6519转化成RMB形式：12,345,678.65

function moneyFormat(inputval){
var num = 12345678.6519;
var str = num + “”;
function rever(str) {
return str = str.split(‘’).reverse().join(‘’);
}
str = rever(str);
var result = ‘’;
for (var i =0; i <= str.length;i++) {
result += str[ i - 1];
if (i%3==0 && i != str.length){
result += ‘,’;
}
}
result = rever(result);
console.log(result);
}

7.有一个数组和一个数，数组里是否有任意两个数之和恰好为给定的数，补充代码实现.并在控制台打印输入匹配到的每一个组合。

var arrs=[1,5,8,2,6,3] , adnum = 9;
function matchNums(arrs, adnum){
for(var i =0; i<arrs.length;i++) {
for (var n = i+1; n<arrs.length; n++) {
if ( arrs[i] + arrs[n] == 9) {
console.log(‘组合:’ + arrs[i] + ‘和’ + arrs[n])
}
}
}
}
matchNums(arrs, adnum);

8.请定义CSS类并补充代码（不需要JS代码），满足要求：1>当输入框无内容或仅有空格则下边框显示红线，2>当输入框全部输入数字，无红线并且输入内容显示为绿色，3>当输入非数字内容，输入内容显示为红色（已引入angularjs 或vue）

9.请定义CSS类，满足要求：让一个div悬浮在屏幕底部，div宽度是屏幕宽度减去100px

< style>
.footertips{
position: fixed;
left: 0;
bottom: 0;
width: calc(100% - 100px);
}
< /style>
< div class=”footertips”> ……< /div>

10.请定义CSS类，满足要求：有四个div块，1>电脑屏幕上单排显示,总宽度不超过800，2>手机屏幕分两排显示，横向占满手机屏幕

< style>

{
margin: 0;
padding: 0;
}
@media screen and (min-width: 375) {
.tipsa {
display: flex;
flex-flow: row wrap;
}
.tipsa div {
width: 50%;
height: 200px;
}
/ *为了区分这里把 第二个和 第四个 div 换了个颜色 /
.tipsa div:nth-child(2),
.tipsa div:nth-child(2) {
background-color: aqua;
}
}
/ 横屏及电脑 */
@media screen and (min-width: 812){
.tipsa {
display: flex;
}
.tipsa div {
width: 200px;
height: 200px;
}
tipsa div:nth-child(2),
.tipsa div:nth-child(2) {
background-color: aqua;
}
}
< style>
< div class=”tipsa”>
< div>A< /div>< div>B< /div>< div>C< /div>< div>D< /div>
< /div>

11.在浏览器禁用Cookie的情况下，如何预防CSRF攻击？简要说明。
(1)根据 HTTP 协议，在 HTTP 头中有一个字段叫 Referer，它记录了该 HTTP 请求的来源地址。在通常情况下，访问一个安全受限页面的请求来自于同一个网站，比如需要访问 http://bank.example/withdraw?account=bob&amount=1000000&for=Mallory，用户必须先登陆 bank.example，然后通过点击页面上的按钮来触发转账事件。这时，该转帐请求的 Referer 值就会是转账按钮所在的页面的 URL，通常是以 bank.example 域名开头的地址。而如果黑客要对银行网站实施 CSRF 攻击，他只能在他自己的网站构造请求，当用户通过黑客的网站发送请求到银行时，该请求的 Referer 是指向黑客自己的网站。因此，要防御 CSRF 攻击，银行网站只需要对于每一个转账请求验证其 Referer 值，如果是以 bank.example 开头的域名，则说明该请求是来自银行网站自己的请求，是合法的。如果 Referer 是其他网站的话，则有可能是黑客的 CSRF 攻击，拒绝该请求。
(2)这种方法也是使用 token 并进行验证，和上一种方法不同的是，这里并不是把 token 以参数的形式置于 HTTP 请求之中，而是把它放到 HTTP 头中自定义的属性里。通过 XMLHttpRequest 这个类，可以一次性给所有该类请求加上 csrftoken 这个 HTTP 头属性，并把 token 值放入其中。这样解决了上种方法在请求中加入 token 的不便，同时，通过 XMLHttpRequest 请求的地址不会被记录到浏览器的地址栏，也不用担心 token 会透过 Referer 泄露到其他网站中去。
然而这种方法的局限性非常大。XMLHttpRequest 请求通常用于 Ajax 方法中对于页面局部的异步刷新，并非所有的请求都适合用这个类来发起，而且通过该类请求得到的页面不能被浏览器所记录下，从而进行前进，后退，刷新，收藏等操作，给用户带来不便。另外，对于没有进行 CSRF 防护的遗留系统来说，要采用这种方法来进行防护，要把所有请求都改为 XMLHttpRequest 请求，这样几乎是要重写整个网站，这代价无疑是不能接受的。
12.成绩表如下，请写一条SQL语句，查询出每门课都大于70分的学生姓名
姓名 课程 分数
张三 语文 81
张三 数学 65
王五 语文 71
王五 数学 86
王五 英语 90

create table test1(
id int auto_increment,
name varchar(10),
course varchar(10),
score int,
primary key pk_test1(id)
)engine=InnoDB,charset=utf8mb4;
insert into test1 values
(0,‘张三’,‘语文’,81),(0,‘张三’,‘数学’,65),
(0,‘王五’,‘语文’,71),(0,‘王五’,‘数学’,86),
(0,‘王五’,‘英语’,90);
selcet * from test1;
select name from test1 group by name having count(1) = 3 and min(score) >= 70;

13.成绩表如下，写一条SQL语句满足要求：数据编号不会重复，但其它数据存在完全一致的情况，请保留编号最小的一条数据，删除完全一致的多条的重复数据.
数据编号 学号 姓名 课程编号 课程名称 分数
a1c1 2005001 张三 0001 数学 65
a2b1 2005002 李四 0001 数学 81
a3d1 2005001 张三 0001 数学 65

In select xxx,xxx
xx from rable1 group by xx,xxx,
xx having count() >1 and 数据编号 not in (select min(数据编号)) from
table1 group by xxx,xxx,xxx
Having count() >1

14.写一个SQL语句，实现如下要求：表A 和B ，均有 “物料号”和“消耗量”两个字段，如果B 的“物料号” 在A 中有，就把B 的“消耗量”更新为A 中对应的“消耗量”
表A: 表B：
数据编号 物料号 消耗量 数据编号 物料号 消耗量
a1c1 2015001 15.30 b1c1 2015006 12.11
a2b1 2015002 21.12 b2b1 2015002 19.78
a3d1 2015003 35.45 b3d1 2015003 21.90

update B b set b.消耗量=(select max(a.消耗量) from A a where b.物料号=a.物料号)where exists(select 1 from A c where b.物料号=c.物料号)
UPDATE A a,(select a.物料号,b.消耗量 from A INNER JOIN B on a.物料号=b.物料号) b SET a.消耗量 = b.消耗量 WHERE a.物料号 = b.物料号

15.批量并发上传多张图片，要求任何一张图片上传失败，整个任务则失败，并且要求使用Promise.all()封装任务，请写出基本过程，可以不写代码。
Promise.all()接收一个数组为参数，当数组的所有Promise都为resolve的状态时，Promise.all()才会成功；若有一个失败，都会被认为是失败的。写一个简单的demo：

Promise.all = arr =>{
let aResult = [];
return new _Promise(function (resolve, reject)){
let i =0;
next ();
function next() {
arr[i].then(function (res)) {
aResult.push(res);
i++;
if ( i == arr.length) {
resolve(aResult);
} else {
next();
}
}
}
}

16.ng-repeat迭代数组的时候，如果数组中有相同值，会有什么问题，如何解决？

会提示 Duplicates in a repeater are not allowed. 加 track by $index 可解决。当然，也可以 trace by 任何一个普通的值，只要能唯一性标识数组中的每一项即可（建立 dom 和数据之间的关联）。

简单描述AngularJS的数据双向绑定是怎么实现的？
当你写下表达式如{{ aModel }}时，AngularJS在幕后会为你在scope模型上设置一个watcher，它用来在数据发生变化的时候更新view。这里的watcher和你会在AngularJS中设置的watcher是一样的：
对于所有绑定给同一scope元素的UI对象，只会添加一个scope元素的UI对象，只会添加一个scope元素的UI对象，只会添加一个watch到watch列表中（一个数据一个watch列表中（一个数据一个watch列表中（一个数据一个watcher,对象会有一个，里面的值还会有，数组中每个对象都有一个 ）。这些watch列表会在watch列表会在watch列表会在digest循环中通过一个叫做“脏值检查”的程序解析
假设你在一个ng-click指令对应的handler函数中更改了scope中的一条数据，
此时AngularJS会自动地通过调用digest()来触发一轮digest()来触发一轮digest()来触发一轮digest循环。
当$digest循环开始后，它会触发每个watcher。
这些watchers会检查scope中的当前model值是否和上一次计算得到的model值不同。
如果不同，那么对应的回调函数会被执行。调用该函数的结果，就是view中的表达式内容(译注：诸如{{ aModel }})会被更新。

18.请补充代码确保在页面点击按钮的时候函数只能执行一次，并且5秒后才可以继续点击.

$scope.submitImp = function(entry){
}
$(function(){
$(“button”).on(click,function(){
$this = $(this);
var oldText = $this.text();
var i =6;
$this.attr(‘disabled’,true);
var btnTimer = null;
btnTimer = setInterval(function(){
i–;
if(i <= 0){
$this.removeAttr(‘disabled’);
$this.text(oldText);
clearInterval(btnTimer);
}else{
$this.text(i)
}
},1000)
})
)

19.开发人员实现了一个综合查询功能，可以输入编号精确查询，输入名称模糊查询，可设定查询的起始时间以及截止时间，查询结果可能有成千上万行数据，数据以表格形式展示。现在要进行单元测试，请写出尽可能多的测试用例（只写测试项）：
…

20.在上述“综合查询功能”完成开发后进行单元测试的时候，输入起始时间和截止时间，发现查询的数据不正确，有可能是哪些类型的问题？如何定位问题？（请简要说明）