|
本文所有名词解释均采用MDN官方解释
1、<hr> <br> <tr> 标签解析（采用MDN解释）
<hr>：The Thematic Break (Horizontal Rule) element. 即，水平分割线。全拼：horizontal rule
<br>：The Line Break element. 即，换行（回车）。全拼：break & return (注：该全拼为个人理解，不保证正确。)
<tr>: The Table Row element. 即，定义表格中的行。全拼：table row
2、以下JS代码最终输出的结果和num值分别是多少？
var test = (function() {
var num = 0;
return () => {
return num++;
};
}());
for (var i = 0; i < 20; i++) {
test();
};
console.log(test());
解析：
立即调用函数表达式：IIFE（ 立即调用函数表达式）是一个在定义时就会立即执行的 JavaScript 函数。
箭头函数：箭头函数表达式的语法比函数表达式更简洁，并且没有自己的 this、arguments、super 或 new.target 。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且不能用作构造函数。
闭包：一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。闭包让你可以在一个内层函数中访问到其外层函数的作用域。在JavaScript中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。
代码运行逻辑：
循环中执行 test() 函数，即相当于如下代码所示：
for (var i = 0; i < 20; i++) {
() => {
return num++; // 循环未执行时，num === 0；循环结束时，num === 20。
};
};
因为函数 test() 构成闭包，所以匿名箭头函数仍然可以访问到其定义的变量 num。又因为匿名箭头函数体返回后自加num，所以当函数 console.log() 调用函数 test() 时，打印 20，再自加 1，即 最终输出的结果为 20，num值为21。
3、CSS选择器权重
（1）!important，加在样式属性值后，权重值为 10000
（2）内联样式，如：style=""，权重值为 1000
（3）ID选择器，如：#content，权重值为 100
（4）类、伪类和属性选择器，如：div、p、:before 权重值为 1
（5）通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）权重值为 0
4、为使超链接访问后仍然具有 hover 和 active，需改变CSS属性的排列顺序为？
为符合浏览器解析CSS遵循的就近原则，将一般的伪类设置在前，将特殊的伪类设置在后。即 a:hover 须设置在 a:link、a:visited 之后，a:active 须设置在 a:hover 之后。最后顺序为：
a:link、a:visited、a:hover、a:active。
巧记：l o v e h a t e 爱与恨。
5、盒子模型分类
W3C标准盒子模型：块元素总宽度 = margin + border + padding + width ( width = content )
IE盒子模型：块元素总宽度 = margin + width ( width = border + padding + content )
6、根据如下 JS 代码，在位置 A 打印变量 a 与在位置 B 变量 a 各会有怎样的输出？
var a = 1;
function test() {
// 位置 A
class a {
// 位置 B
};
};
test();
解析：
JS关键字 var 描述：变量声明，无论发生在何处，都在执行代码之前进行处理。
var declarations, wherever they occur, are processed before any code is executed.
变量提升（hoisting）：：由于变量声明（以及其他声明）总是在任意代码执行之前处理的，所以在代码中的任意位置声明变量总是等效于在代码开头声明。这意味着变量可以在声明之前使用，这个行为叫做“hoisting”。"hoisting"就像是把所有的变量声明（注意：只会提升其声明，并不会提升其初始化）移动到函数或者全局代码的开头位置。
Because variable declarations (and declaration in general) are processed before any code is executed, declaring a variable anywhere in the code is equivalent to declaring it at the top. This also means that a variable can appear to be used before it`s declared. This behavior is called “hoisting”, as it appears that the variable declaration is moved to the top of the function or global code.
函数变量提升（Function declaration hoisting）：JavaScript 中的函数声明被提升到了函数定义。你可以在函数声明之前使用该函数。
Function declarations in JavaScript are hoisted to the top of the enclosing function or global scope. You can use the function before you declared it;
类声明（class declaration）：class 声明创建一个基于原型继承的具有给定名称的新类。类声明不可以提升。
The class declaration creates a new class with a given name using prototype-based inheritance. Class declarations are not hoisted.
暂存死区（Temporal dead zone TDZ）：与通过 var 声明的有初始化值 undefined 的变量不同，通过 let 声明的变量直到它们的定义被执行时才初始化。在变量初始化前访问该变量会导致 ReferenceError。该变量处在一个自块顶部到初始化处理的“暂存死区”中。
let variables cannot be read/written until they have been fully initialized, which happens when they are declared (if no initial value is specified on declaration, the variable is initialized with a value of undefined). Accessing the variable before the initialization results in a ReferenceError. The variable is said to be in a “temporal dead zone” (TDZ) from the start of the block until the initialization has completed.
代码逻辑：
class 和 let 一样都有暂存死区，在被声明前无法访问，也就是在当前作用域能找到，但是要在声明后才能被访问。
ES6中的class、let、const都不存在提升。
// 提升后代码
var a = 1;
function test() {
console.log(a); // 位置 A。 在函数 test() 作用域中可以找到关于 a 的声明，即 class a
// 但是由于 class a 存在暂时性死去，访问报错
class a {};
console.log(a); // 位置 B。在 class a {} 声明之后执行打印，结果为 class a {}
}
7、以下代码存在几个变量没有被回收？
var i = 1;
var i = 2;
var add = function() {
var i = 0;
return function() {
i++;
console.log(i);
}
}();
add();
解析：
代码回收规则：
（1）全局变量不会被回收。
（2）局部变量会被回收，也就是函数一旦运行完毕，函数体就会被销毁。
（3）被另外一个作用域引用不会被回收。
代码逻辑：
（1）重复定义全局变量 i，后定义的全局变量 i，会覆盖先前定义的全局变量 i，由全局变量不会被回收，因此此时有 1 个变量未被回收；
（2）匿名函数保存在堆中，不会被回收，而变量 add 指向该匿名函数，因此不会被回收；
（3）匿名函数中存在闭包，而闭包中引用了匿名函数的局部变量 i，因此局部变量 i 不会被回收。
即总共 3 个变量未被回收。
8、下列符合ES6语法的有
let x = 10;
const pi = 3.1415926;
let s = symbol();
Object.assign(target, source1, source2);
function* helloWorld() {
yield 'hello';
yield 'world';
return 'ending';
};
解析：
Symbol用法：Symbol 是一种基本数据类型（primitive data type）。Symbol() 函数会返回 symbol 类型的值，作为构造函数来说它并不完整，因为它不支持语法：“new Symbol()”。每个从 Symbol() 返回的 symbol 值都是唯一的。一个 symbol 值能作为对象属性的标识符，这是该数据类型仅有的目的。
Object.assign()：该方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。
语法：
Object.assign(target, …sources);
参数：
target：目标对象。
source：源对象。
Generator：生成器对象由一个 generator function 返回。
语法：
function* gen() {
yield 1;
yield 2;
yield 3;
};
let g = gen();
// "Generator { }"
|