628笔试题

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

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分别输出

<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。

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

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

ul {transform: rotate(180deg)}

li {transform: rotate(180deg)}

4、写出以下输出结果

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处分别输出什么内容？

<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结构

<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、根据需求，给出优化方案

// 需求：
// 如图左边为操作区，右边为缩略图。当用户在左边区域操作 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触发回流和重绘，然后问题就变成了重绘和回流的优化。

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

<body>
 <div class="dragDom">
</body>

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

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

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、以下是匀速直线运动，请分别写出匀速圆周运动、自由落体运动。

<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>

我的答案

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

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

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

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

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