前端基础练习题第29天 答案及解析

本篇文章是前端基础练习题第二十九天的答案及解析部分，纯题目部分请移步前端基础练习题 第29天

正文

1.试利用JS代码在body中生成16个div，每个div的宽高为60 * 60px，里面内容为1-16自身序号，背景颜色为红橙蓝绿随机显示，布局为4行4列排列，具体如下图所示：

参考代码如下所示：

// CSS部分
body {
  position: relative;
}
body div {
  position: absolute;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  color: #fff;
  border-radius: 50%;
}

// JS部分
var str = '';
var colors = ['red', 'orange', 'blue', 'green'];
for (var i = 0; i < 16; i++) {
  str += '<div style="left:' + i%4*60 + 'px;top:' + Math.floor(i/4)*60 + 'px;background:' + colors[Math.floor(Math.random()*4)] + ';">' + (i + 1) + '</div>';
}
document.body.innerHTML += str;

本题目主要利用定位，通过改变元素的top和left的位置，使其呈现规律的排布。随机背景方面，用到了随机数，即Math.random()的相关知识。

2.如何在数组的开头添加、删除元素？如何在数组的末尾添加、删除元素？

在数组开头添加元素应使用unshift()方法，可添加一或多个；移除数组中的第一个元素应使用shift()方法；在数组末尾添加元素应使用push()方法，可添加一或多个；移除数组中的最后一个元素应使用pop()方法。

3.在JS中，如何让a == 1 && a == 2 && a == 3这个表达式返回true？

可利用隐式转换的相关知识，代码如下所示：

const a = {
  i: 1,
  toString() {
    return this.i++;
  }
}

本题利用了隐式转换，当对象/数组进行比较时，会调用toString和valueOf方法，通过修改这两个方法，就可以自定义转换时的返回值。

4.在JS中，如何让a === 1 && a === 2 && a === 3这个表达式返回true？

可利用劫持getter的知识来设计，代码如下所示：

var i = 1;
Object.defineProperty(window, 'a', {
  get() {
    return i++;
  }
});

本题利用了劫持getter的知识，当访问变量a时，就会调用get方法，使其自增，下一次访问a时，a的值已经被修改过了。

5.分析下列代码的执行结果：

function a(b) {
  console.log(b);
  var b = 22;
  console.log(b);
  function b() {
    console.log(b);
  }
  console.log(b);
}
a(11);

答案：function b() { console.log(b);}、22、22 。

此题涉及到变量声明提升和函数声明优先的知识点。在函数体内，函数声明被提升到了顶部，故第一次输出的为函数，后面的变量赋值又覆盖了函数声明，故后续的访问值都为22。

6.试描述浏览器对网页的渲染过程。

浏览器对网页的渲染过程为：

1. 解析HTML以构建DOM(DOM树)，并行请求CSS/JS/image等
2. CSS文件下载完成，构建CSSOM(CSS树)
3. CSSOM构建结束后，和DOM一起生成渲染树(Render Tree)
4. 布局(Layout)，计算出每一个节点在屏幕中的位置
5. 显示(Painting)，通过显卡将页面显示到屏幕上

7.试简述重绘与回流的区别和关系。

重绘(repaint)是指当渲染树中的元素部分属性发生变化，如颜色、透明度等不会引起布局变化而重新渲染的过程；回流(reflow)是指当渲染树中的元素布局发生改变而需要重建的过程。回流必将引起重绘，而重绘不一定会引起回流。

说明

1. 题目中出现的JS指的是采用ECMAScript 2015及之后标准的JavaScript

2. 答案中，若有错误和需完善的地方，可在下方留言反馈哈~~

3. 查看纯习题版，请点击前端基础练习题 第29天