盒子
盒子

628笔试题

1、分别写出以下输出结果

1
2
3
4
5
6
7
var aAry = [1, 2, 3];
var bAry = aAry;
aAry[0] = 8;
bAry[0] = 9;
console.log(aAry, bAry); //写下输出结果
aAry = [4, 5, 6];
console.log(aAry, bAry); //写下输出结果

第一次输出[9,2,3] [9,2,3],第二次输出[4,5,6] [9,2,3]

数组的浅拷贝,数组修改后,会影响拷贝出来的其他的数组。数组的浅拷贝是将数组的地址赋值,数组都指向该地址,该地址的值发生了改变,所有的数组都会发生改变。第二次将另一个数组赋值给a数组,a数组指向的地址发生了改变,b还是指向原来的地址,所以输出结果不同。

2、点击a、b、c分别输出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<script>
//点击 a、b、c 分别输出?
let li = document.querySelectorAll("li");
for (var i = 0; i < li.length; i++) {
li[i].addEventListener("click", () => {
console.log(i);
})
}
</script>

输出结果为3 3 3

Event Loop和作用域问题,var声明全局变量,在Event Loop中先执行同步代码,再执行异步代码,click是异步事件,触发时循环已经运行完,i的值已经变成3。

3、反转container里面的子元素,前提是不使用innerHTML。

1
2
3
4
5
6
7
8
9
<ul class="container">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
...
<li>1000</li>
</ul>

这个不会,这答案是百度了一个

1
2
3
ul {transform: rotate(180deg)}

li {transform: rotate(180deg)}

4、写出以下输出结果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function Animal() {
this.name = "animal";
this.say = function () {
console.log(this.name);
} }
Animal.prototype.look = function () {
console.log("Animal look");
};
function Dog() {
this.name ="dog";
}
Dog.prototype = Object.create(Animal.prototype);
var dog = new Dog();
//写出输出内容
dog.look();
//写出输出内容
dog.say();

输出结果:Animal look dog.say is not a function

继承问题,子类只继承了look方法,要继承name属性和say方法,需要在function Dog(){}中添加Animal.call()继承 。

5、点击图中1,2,3处分别输出什么内容?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
<div class="container">
<div class="subA">subA</div>
<div class="subB">subB</div>
</div>
<script>
document.querySelector(".subA").addEventListener("click", (e) => {
console.log("subA click");
console.log(e.target.getAttribute("class"));
});
document.querySelector(".container").addEventListener("click", (e) => {
console.log("container click");
console.log(e.target.getAttribute("class"));
})
</script>
</body>

点击1:输出container click container,点击2:输出subA click subA container click subA,点击3:输出container click subB

6、利用数据生成对应的DOM结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<body>
<div id="container"></div>
<script>
//假如以下有 1000 个节点,请将以下数据解析生成对应的 dom 结构
var treeData = [
{"name": "A-1"},
{"name": "A-2"},
{"name": "A-3"},
{
"name": "A-4",
"sub": [
{"name": "A-4-1"},
{"name": "A-4-2"},
{
"name": "A-4-3",
"sub": [
{"name": "A-4-3-1"},
{"name": "A-4-3-2"}
]
}
]
}
];
//在下面空白处写下通用方法

</script>
</body

这个不会,当时写的时候,将DOM看作是一个树结构,然后遍历该树。但是感觉非常耗时

7、根据需求,给出优化方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 需求:
// 如图左边为操作区,右边为缩略图。当用户在左边区域操作 dom 时,右边缩略图能实时更新
// 已知条件:
// 1. 截图非常耗性能
// 2. 左则 dom 中所有元素的信息都有记录,如下。当元素信息改变时,数据也会同步刷新
{
a1:{"x":100,"y":200,"width":100,"height:100,",color":"#FF0000"},
a2:{"x":200,"y":100,"width":50,"height:100,",color":"#000000"},
...
}
//------------------- 以下是实现方案(伪代码) -------------------//
//截图函数,能将 dom 截成一张图片(截图非常耗性能)
function domToImage(){
}
a1.on("位置改变",function(){
domToImage();
})
a1.on("大小改变",function(){
domToImage();
})
a1.on("颜色改变",function(){
domToImage();
})
...
// 请根据以上条件优化此方案

这个不会,当时没写。现在想想的话,截图消耗性能的话,应该是操作DOM触发回流和重绘,然后问题就变成了重绘和回流的优化。

优化方法有:批量渲染,减少重绘回流的次数、使元素进行动画效果时脱离文档流等。

1
2
3
<body>
<div class="dragDom">
</body>

mousedown应该注册在dragDom节点上,mouseup和mousemove应该注册在document节点上

9、利用自己掌握的JavaScript知识实现一个能检测页面滚动速度(包括大小和方向)的方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var sign = 80;//定义默认的向上滚与向下滚的边界
window.onscroll = window.onresize = function(){
var oScrollTop=$(window).scrollTop();
if ( oScrollTop > 80) {        //write your code
}
if ( oScrollTop < 80) {      //write your code     }if ( oScrollTop > sign) {
sign = oScrollTop;//更新scrollTop
//console.log('向下');
}
if ( oScrollTop< sign) {
sign = oScrollTop//更新scrollTop
//console.log('向上');
}
}

滚动速度的话,可以根据滚动的像素除以时间得到。

10、以下是匀速直线运动,请分别写出匀速圆周运动、自由落体运动。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="ball"></div>
<script>
var ball = document.querySelector(".ball");
ball.style.position ="absolute";
var s = 0;
var v = 1;
setInterval(() => {
s += v;
ball.style.top = s + "px";
})
//匀速圆周运动

//自由落体运动

</script>
</body>

我的答案

1
2
3
4
5
6
7
8
自由落体运动的公式
setInterval((t) => {
s += ( 10 * t * t) / 2 + v ) t;
ball.style.top = s + 'px';
})

// 匀速圆周运动
匀速圆周运动考虑水平和竖直两个方向,可以通过Math.sin()和Math.cos()和半径获取到水平和竖直方向的距离

这应该是一个做动画的公司

答案是个人意见,并不一定是正确答案,大佬们,那就见丑了,同时希望指出我的问题。

通过这次的一个笔试题,我发现我真的好菜,哭了。

猛男落泪

欢迎关注公众号
扫码关注我的微信公众号-大前端合集
  • 微信公众号-大前端合集