2020前端基础知识学习第二节
1.
var a = { n: 1 };
var b = a;
a.x = a = { n: 2 };
console.log(a);
console.log(b);
答案：{ n: 2 }，{ n: 1, x: { n: 2 } }
分析：这里最核心的地方就是a.x运算优先级高于=，因为a.x优先级高于=，所以在a还是{ n: 1 }的时候添加了x: { n: 2 }这个属性，
因为前面b = a;使的b和a指向了同一个地址，所以b就是{ n: 1, x: { n: 2 } }。下面有更专业和更详细的解答一起学习下，
1).var a = { n: 1 };执行完，假设产生引用地址addr_1，那么此时a指向地址addr_1的。
2).var b = a;定义b指向a，也即地址addr_1。此时，无论修改b.n还是a.n都会引起另一个值的改变，应为引用了同一个地址。
3).a.x = a = { n: 2 };这句是关键，赋值顺序从右向左。成员属性访问优先级要高于=赋值操作。所以，拆解一下步骤
3.1 a持有了地址addr_1，等待给.x进行赋值
3.2 按照赋值顺序，执行{ n: 2 }，此时a引用地址变为addr_2
3.3 往左继续执行，a.x引用地址{ n: 2 }
4).按照以上执行，可以得出。b指向地址addr_1，addr_1中的.x指向了addr_2
5).a指向addr_2
2.
console.log(1);
setTimeout(() => {
console.log(2);
});
process.nextTick(() => {
console.log(3);
});
setImmediate(() => {
console.log(4);
});
new Promise((resolve, reject) => {
console.log(5);
resolve();
console.log(6);
}).then(() => {
console.log(7);
});
Promise.resolve().then(() => {
console.log(8);
process.nextTick(() => {
console.log(9);
});
});
答案：1 5 6 3 7 8 9 2 4
分析：整个过程分三步来进行，
第一步script整体代码被执行，执行过程为
打印1
创建setTimeout macro-task
process.nextTick 创建micro-task
创建setImmediate macro-task
创建micro-task Promise.then 的回调，并执行console.log(5);resolve();console.log(6);此时打印5 6，虽然调用了resolve，
但是整体代码还没执行完，无法进入Promise.then流程
创建micro-task Promise.then 的回调
第一个过程之后打印出来1 5 6
第二步由于micro-task的优先级高于macro-task，此时micro-task中有三个任务按照优先级process.nextTick高于Promise
所以输出3 7 8，这是有又有新的micro-task被添加进来直接执行打印出来9
第三部micro-task任务列表已经执行完毕，接下来macro-task，由于setTimeout优先级高于setImmediate，所以打印2 4
总结：同步代码执行顺序优先级高于异步代码执行顺序优先级，new Promise(fn)中的fn是同步执行
process.nextTick() > Promise.then > setTimeout > setImmediate
3.
[‘1‘, ‘2‘, ‘3‘, ‘4‘, ‘5‘].map(parseInt)
答案：1 NaN NaN NaN NaN
分析：
参见这篇博客的详细分析https://www.cnblogs.com/typeof/p/12168571.html
4.
CSS实现九宫格布局，有多种方式可以实现九宫格布局，下面列出来比较常用的方法，
1). flex方案，比如有以下的html结构布局
<div class="square flex">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
5.
根据方法调用返回结果完成函数的实现
function add() {}
function one() {}
function two() {}
one(add(two())); // 3
two(add(one())); // 3
答案：function add(val) {
return function(val2) {
return val + val2;
}
}
function one(fn) {
let a = 1;
return typeof fn == ‘function‘ ? fn(a) : a;
}
function two(fn) {
let b = 2;
return typeof fn == ‘function‘ ? fn(b) : b;
}
6.
a11y
作为一名开发人员，你可能时常看到 “Accessibility” 这个词。在Web发展的初期，人们习惯性将其翻译成“无障碍”，
因为它的初衷主要是考虑如何让残障人士更容易地访问Web内容。比如有行动障碍的人士他更依赖于键盘与Web做交互；
有视觉障碍人士更依赖于放大屏幕与Web交互；有听力障碍人士更依赖于阅读方式等。但随着互联网的发展，
访问Web的场景、设置和人群都更复杂化，多样化。“Accessibility”已不再局限于满足残障人士的需求，
它也涵盖了在特定场景下的网站可用性，比如移动终端，弱网环境、忘带鼠标，触模板坏了，老年人访问等等。
在面对这样的新场景、新群体之下，“Accessibility”更多时候被译为可访问性。常常也被缩写为a11y（其中11是指a和y之间有11个字母）。
因此，在整个社区你会看到有很多以a11y为名的网站或应用，一般这些网站都是围绕着“Accessibility”相关的内容，
比如A11y.meThe A11Y Project和A11yWeeky等。
7.
解释一下BFC、IFC、FFC
BFC（Block Formatting Contexts）直译为“块级格式化上下文”，触发BFC的元素是一个隔离的渲染区域，容器内的子元素不会在布局上，
影响到外面的元素，外边的元素也不会影响到内部的。下面看下哪些元素会产生BFC
1) 根元素
2) float属性不为none
3) position为absolute或fixed
4) display为inline-block, table-cell, table-caption, flex
5) overflow不为visible
元素产生BFC之后的布局规则如下
内部的盒子会在垂直方向上，一个个放置
盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠
每个元素的左边与包含它的盒子的左边相接触，即使存在浮动也是如此
BFC的区域不会与float重叠
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也是如此
计算BFC的高度时，浮动元素也参与计算
IFC（Inline Formatting Contexts）直译为“内联格式化上下文”
FFC（Flex Formatting Contexts）直译为“自适应格式化上下文”
8. DOCTYPE的标准模式与兼容模式各有什么区别？
标准模式用于呈现遵循最新标准的网页，兼容模式用于呈现为传统浏览器而设计的网页
标准模式的排版和js运行模式都以该浏览器支持的最高标准运行
兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作
具体区别：
盒模型
严格模式下：width是内容宽度，元素真正的宽度等于width
兼容模式下：width等于width + padding + border
兼容模式下可设置百分比的高度和行内元素的高宽
在标准模式下，给span等行内元素设置wdith和height都不会生效，而在兼容模式下，则会生效
在标准模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的
用margin:0 auto设置水平居中在IE下会失效
使用margin:0 auto在标准模式下可以使元素水平居中，但在兼容模式下却会失效（用text-align属性解决）
body{text-align:center};#content{text-align:left}
兼容模式下Table中的字体属性不能继承上层的设置，white-space: pre会失效，设置图片的padding会失效
9.
HTML5为什么只需要写DOCTYPE html
HTML5不基于SGML（标准通用标记语言），因此不要对DTD进行引用，但是需要DOCTYPE来规范浏览器的行为（让浏览器按照他们的方式来运行）
而HTML4.0.1基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型
SGML（标准通用标记语言）是比HTML、XML更老的标准，这两个都是由SGML发展而来的，HTML5不是
10.
编写一个算法来判断一个数是不是“快乐数”
一个“快乐数”定义为：对于一个正整数，每一次将该数替换为它每个位置上的数字的平方和，然后重复这个过程直到这个数变为 1，
也可能是无限循环但始终变不到 1。如果可以变为 1，那么这个数就是快乐数
答案：
// var list = [];
var isHappy = function(num) {
num = (‘‘ + num).split(‘‘);
num = num.map(cur => Math.pow(cur, 2)).reduce((sum, cur) => {
return sum + cur;
}); // 1^2 + 9^2 = 82
if (num == 1) { // 是快乐数
return true;
}
if (num == 4) { // 不是快乐数，跳出递归来源于@墨尘大神的灵感
// if (list.includes(num)) { // 不是快乐数，跳出递归
return false;
}
// list.push(num);
return isHappy(num);
}