【前端面试】前端语法

例题 （ <input> 标签）

<input>标签的（ ）属性规定必需在提交表单之前填写输入字段

A multiple
B pattern
C placeholder
D required

解析：

• required：该属性用于指定输入字段是必填项。若该属性存在，表单在提交之前必须填写该字段，否则无法提交。

• multiple：该属性通常与文件上传（<input type="file">）或选择多个选项时使用，允许用户选择多个文件或选项。

• pattern：该属性用于规定输入字段的模式或格式，必须匹配提供的正则表达式，但它并不强制字段必填。

• placeholder：该属性用于显示输入字段的提示文本，指示用户应该输入的内容，但并不影响字段是否为必填项。

例题（background组合属性）

在background: #eee url(1.png) no-repeat 0 0 / contain;中，属性值“0 0”表示的属性是（）

A background-clip
B background-size
C background-position
D background-origin

解析

在 background 属性的简写形式中，0 0 表示的是 background-position，即背景图像的位置。

• background-position: 0 0 表示背景图像从容器的左上角（X轴和Y轴的起点）开始显示。

其他属性解释如下：

• background-clip：规定背景的绘制区域，即背景是否延伸到内容、内边距或边框。
• background-size：定义背景图像的尺寸大小，但在这个简写中，contain 是对应的 background-size。
• background-origin：规定背景图像的定位区域，决定从内容区、内边距区或边框开始绘制背景。

在background组合属性中，能使用“/”的属性只有background-position和background-size，且background-position在前，background-size在后，也就是，属性值“0 0”表示的属性为background-position，属性值“contain“表示的属性是background-size

例题（BFC方法）

执行以下代码，为了清除浮动，下列做法可行且属于 BFC 应用的是（）

<style>
    .box1 {
        width: 200px;
    }
    .box2 {
        float: left;
        width: 100px;
        height: 100px;
    }
</style>
<div class="box1">
    <div class="box2"></div>
</div>

A 在 box2 盒子后面添加加代码：<div style="clear: both;"></div>
B 在 box1 盒子后面添加加代码：<div style="clear: both;"></div>
C 在 box1 盒子中设置属性：overflow: hidden
D 在 box2 盒子中设置属性：overflow: hidden

正确答案是：C. 在 box1 盒子中设置属性：overflow: hidden

解析

清除浮动问题通常出现在父元素包含了浮动的子元素时，父元素的高度会无法包裹住浮动的子元素。为了解决这个问题，可以使用一些清除浮动的方法，其中使用 BFC（Block Formatting Context，块级格式化上下文） 是一种有效的方法。

• A. 在 box2 盒子后面添加 <div style="clear: both;"></div>：

  • 这种方式确实可以清除浮动，但它并不属于 BFC 的应用，而是通过 clear: both 来手动清除浮动。

• B. 在 box1 盒子后面添加 <div style="clear: both;"></div>：

  • 在父容器（box1）后面添加 clear: both 无法解决父容器无法包裹浮动元素的问题，因为 clear: both 应用于浮动元素的后方，而非父容器。

• C. 在 box1 盒子中设置属性：overflow: hidden：

  • 这是解决浮动问题的常见方式，overflow: hidden 触发了 BFC，能够使父容器自动包含浮动的子元素，因此这属于 BFC 的应用。

• D. 在 box2 盒子中设置属性：overflow: hidden：

  • 在 box2 中设置 overflow: hidden 并不能清除浮动，反而可能改变浮动元素的显示效果。

例题（<meta>标签）

下列选项不属于<meta>标签的http-equiv的取值的是（）

A content-type
B default-style
C refresh
D keywords
正确答案是：D. keywords

解析

<meta> 标签的 http-equiv 属性用于向浏览器传递一些有关页面的指令，它的取值通常与 HTTP 头部信息有关。

• A. content-type：指定页面的字符集，如 text/html; charset=UTF-8，这个是常见的 http-equiv 值。

• B. default-style：用于指定页面的默认样式表。

• C. refresh：用于设置页面自动刷新或跳转，如 refresh 设置 5 秒后自动刷新页面或跳转到指定 URL。

• D. keywords：这是 <meta> 标签中的 name 属性的一个常见取值，用于提供页面的关键字，而不是 http-equiv 属性的取值。

因此，keywords 不属于 http-equiv 的取值，而是用于 name 属性。

例题（JS代码）

下列代码的输出结果是？

console.info('a');
console.info('b');
setTimeout(() => {
    console.info('c');
}, 0);
console.info('d');

这段代码的输出结果是：

a
b
d
c

解析：

1. console.info('a');

   • 直接输出 'a'，这是同步代码，立刻执行。

2. console.info('b');

   • 直接输出 'b'，也是同步代码，立即执行。

3. setTimeout(() => { console.info('c'); }, 0);

   • setTimeout 是一个异步函数，它将回调函数（输出 'c' 的操作）放入 任务队列（task queue）。即使延迟时间是 0，它也不会马上执行，而是要等到 同步代码执行完毕 后，JavaScript 事件循环才会处理任务队列中的异步任务。因此，输出 'c' 会被延迟到最后执行。

4. console.info('d');

   • 同步代码，立即执行，输出 'd'。

执行顺序：

• JavaScript 是单线程的，代码会按照从上到下的顺序依次执行，但遇到异步任务（如 setTimeout）时，它会将其推到任务队列，等到所有同步任务完成后才处理异步任务。

因此，先执行 'a' 和 'b'，然后 'd'，最后 'c' (异步任务)。

例题（JS代码）

请问以下 JS 代码最终输出的结果是（）

function func1() {};
function func2() {};
func1.prototype = func2.prototype = {};
const son = new func1();
console.log(son instanceof func1, son instanceof func2);

这段代码的最终输出结果是：

true true

解析：

1. func1 和 func2 定义

   • 两个空函数 func1 和 func2 被定义了，它们的原型对象（prototype）将会参与后续的原型链判断。

2. func1.prototype = func2.prototype = {};

   • 这行代码非常关键。它将 func1 的原型对象和 func2 的原型对象都指向了同一个空对象 {}。即 func1.prototype 和 func2.prototype 都是指向同一个共享对象。
   • 这意味着通过这两个构造函数创建的对象，其原型对象是同一个引用。

3. const son = new func1();

   • 使用 func1 作为构造函数创建了一个实例对象 son。
   • 在这个时候，son.__proto__ 就指向 func1.prototype，而 func1.prototype 又与 func2.prototype 指向的是同一个对象 {}。

4. son instanceof func1 和 son instanceof func2

   • instanceof 操作符会检查对象的原型链，看某个对象的原型是否在构造函数的 prototype 属性中。

   • son instanceof func1：

     • son.__proto__ 是 func1.prototype，而 func1.prototype 指向 {}，所以 son 是 func1 的实例，返回 true。

   • son instanceof func2：

     • 虽然 son 是通过 func1 创建的，但是由于 func1.prototype 和 func2.prototype 指向的是同一个对象 {}，所以 son.__proto__ 也是 func2.prototype，因此 son 也是 func2 的实例，返回 true。

说白了，这段代码的关键在于 func1 和 func2 的原型对象被设置成同一个共享的对象 {}。所以通过 func1 创建的实例对象 son，它的原型同时指向了 func1 和 func2 的原型，也就是同一个共享对象。

当你用 instanceof 检查时：

• son instanceof func1 会检查 son 的原型链，发现它的原型确实是 func1 的原型，所以返回 true。
• 同样地，son instanceof func2 也会检查 son 的原型链，发现它的原型也是 func2 的原型，因为它们俩共用了同一个原型对象，所以也返回 true。

结果就是 son 同时被认为是 func1 和 func2 的实例，输出 true true。

结论：

最终输出 true true，因为 son 同时是 func1 和 func2 的实例。

例题（JS代码）

下列程序的输出结果是？

let func1 = (a, b) => a + b;
console.info(func1(1, 1));
 
let func2 = (a, b) => {a + b};
console.info(func2(1, 1));
 
let func3 = (a, b) => {return a + b};
console.info(func3(1, 1));

这段代码中的箭头函数写法有一些细微的差别，导致输出结果不完全相同。我们来逐个分析：

1. func1:

   let func1 = (a, b) => a + b;
   console.info(func1(1, 1));
   

   • 这是箭头函数的简写形式，a + b 作为表达式自动返回结果。
   • 结果是 1 + 1 = 2，因此输出 2。

2. func2:

   let func2 = (a, b) => {a + b};
   console.info(func2(1, 1));
   

   • 这里箭头函数的 {} 表示代码块，而不是表达式。虽然 a + b 会被计算，但它的值没有被返回。
   • 没有显式的 return 语句，返回值是 undefined。
   • 因此，输出 undefined。

3. func3:

   let func3 = (a, b) => {return a + b};
   console.info(func3(1, 1));
   

   • 这里明确使用了 return 语句，函数会返回 a + b 的值。
   • 结果是 1 + 1 = 2，因此输出 2。

总结：

• func1(1, 1) 输出 2
• func2(1, 1) 输出 undefined
• func3(1, 1) 输出 2

最终输出结果是：

2
undefined
2

例题（JS代码）

'\\\\\\'.replace(new RegExp('\\\\\\\\', 'gi'), '/') 

的执行结果是？

解析

1. 理解字符串 '\\\\\\'

在 JavaScript 中，反斜杠 \ 是转义字符，所以在字符串中要表示一个真正的反斜杠，必须写成 \\。

因此，字符串 '\\\\\\' 实际上代表的内容是 三个反斜杠，即 '\\\'。

2. 理解正则表达式 new RegExp('\\\\\\\\', 'gi')

• new RegExp('\\\\\\\\', 'gi') 是动态创建正则表达式的写法。
• 在正则表达式中，双反斜杠 \\ 表示一个普通的反斜杠。由于反斜杠本身需要转义，所以 \\\\ 实际上匹配的是一个单独的反斜杠。

我们创建的正则表达式 new RegExp('\\\\\\\\', 'gi') 需要匹配 两个连续的反斜杠。

3. 替换操作

现在我们知道，'\\\\\\' 代表的是 '\\\'，而正则表达式 \\\\\\\\ 匹配两个反斜杠。

让我们逐步执行替换操作：

• 在字符串 '\\\' 中，存在一个匹配，即前两个反斜杠被匹配上（\\），剩下一个单独的反斜杠。
• 替换的结果是，将匹配到的两个反斜杠替换成斜杠 /。

因此，替换的过程是：

'\\\\\\' -> '/' + '\'

结果是：'/\'。

4. 最终结果

最终的执行结果是：'/\'。

说白了，这道题就是在处理字符串中的反斜杠，然后用正则表达式把连续的两个反斜杠替换成斜杠 /。

• 首先，字符串 '\\\\\\' 实际上是三个反斜杠，写出来就是 '\\\'。
• 然后，new RegExp('\\\\\\\\', 'gi') 这个正则表达式的意思是匹配两个连续的反斜杠。由于在正则表达式里反斜杠需要转义，所以要写成 \\\\ 才能表示一个反斜杠，而 \\\\\\\\ 实际上就是匹配两个反斜杠。
• 接下来，在字符串 '\\\' 中，前两个反斜杠会被匹配上，然后用 / 替换掉它们。所以替换之后剩下的结果就是 '/\'，也就是把前两个反斜杠替换成了一个 /，剩下一个反斜杠原封不动地留下。

最终结果就是 '/\'。

例题（JS代码）

请问以下 JS 代码最终输出的结果是？

let method;
let obj = {
  go() {
    console.log(this);
  }
};
(obj.go)();
(method = obj.go)();
(obj.go || obj.stop)();

解析

1. (obj.go)();

这一行执行的是 obj.go()，但加了括号 (obj.go)，在 JavaScript 中，括号不会影响 this 的绑定。

因此，这里的 this 指向的是 obj 对象。执行结果为：

{ go: f }

2. (method = obj.go)();

这里用赋值表达式把 obj.go 方法赋给了变量 method。在这个过程中，method 变成了一个普通函数，它不再与 obj 绑定，因此 this 指向了全局对象（在严格模式下是 undefined，在非严格模式下是 window）。

因此，这里的 this 是全局对象，输出结果为：

• 如果在 严格模式 下，输出 undefined。
• 如果在 非严格模式 下，输出 window。

3. (obj.go || obj.stop)();

这一行执行的是 (obj.go || obj.stop)()。这里的逻辑是：

• obj.go 存在，因此 obj.go 被选中。
• 再次，我们执行的是一个函数调用 (obj.go)()，由于这种调用方式实际上是调用一个独立函数，因此 this 不再绑定 obj，而是像上面第二步一样，指向全局对象。

所以，这里的 this 也是全局对象，输出为：

• 严格模式 下输出 undefined。
• 非严格模式 下输出 window。

最终输出：

• 第一行 输出 { go: f }（this 是 obj）。
• 第二行 输出 undefined（严格模式下）或 window（非严格模式下）。
• 第三行 输出 undefined（严格模式下）或 window（非严格模式下）。

因此，在严格模式下，输出结果为：

{ go: f }
undefined
undefined

在非严格模式下，输出结果为：

{ go: f }
window
window

---

补充

BFC

BFC（Block Formatting Context，块级格式化上下文） 是W3C CSS2.1 规范中的一个概念，它是页面中一个独立的渲染区域，决定了元素如何定位及其子元素如何相互影响。形成 BFC 的元素可以阻止其内部的元素与外部的元素发生相互作用，因此它在布局和清除浮动中起到了关键作用。

触发 BFC 的条件

• 设置 overflow 属性为 hidden、auto 或 scroll
• 使用 display: table、display: flow-root、display: inline-block
• 使用 position: absolute 或 position: fixed
• 使用 float: left 或 float: right

BFC 的应用场景

1. 清除浮动：父容器可以包含浮动的子元素，防止高度塌陷。
2. 避免外边距重叠：同一 BFC 内部元素的外边距会重叠，而不同 BFC 的元素之间则不会。

---

说白了，BFC 就是一个“独立的小盒子”，它里面的东西不会跑到外面去，外面的东西也不会跑进来。这个盒子不仅可以用来解决浮动的问题（父容器高度塌陷），还可以避免一些让人头疼的布局问题，比如边距重叠。

简单理解 BFC

• 如果给某个容器加上 overflow: hidden，它就好像自己形成了一个独立的小世界，里面的浮动元素都不会跑出来，父元素也不会塌陷。
• 想要清除浮动？只要让父元素形成 BFC，就能自动包裹住浮动的元素，再也不用担心布局问题了。

BFC 其实就是让 CSS 布局变得更可控的一种机制！

<meta> 标签的 http-equiv 取值

常见的 <meta> 标签的 http-equiv 取值包括：

1. content-type：

   • 指定页面的 MIME 类型和字符集，通常用来告诉浏览器如何解读页面内容。
   • 示例：

     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     

2. refresh：

   • 设置页面在指定时间后自动刷新或跳转。
   • 示例：

     <meta http-equiv="refresh" content="5">  <!-- 5秒后刷新 -->
     <meta http-equiv="refresh" content="5; url=http://example.com">  <!-- 5秒后跳转 -->
     

3. default-style：

   • 用于指定页面的默认样式表。
   • 示例：

     <meta http-equiv="default-style" content="default.css">
     

4. X-UA-Compatible：

   • 指定页面在 IE 浏览器中使用的渲染模式，常用于解决浏览器兼容性问题。
   • 示例：

     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     

5. cache-control：

   • 控制页面的缓存方式，可以指定浏览器是否应缓存页面以及缓存多长时间。
   • 示例：

     <meta http-equiv="cache-control" content="no-cache">  <!-- 不缓存页面 -->
     

6. pragma：

   • 类似 cache-control，用于禁止浏览器缓存页面，但兼容性较旧。
   • 示例：

     <meta http-equiv="pragma" content="no-cache">
     

7. expires：

   • 设置页面过期时间，指定浏览器缓存页面的有效期。
   • 示例：

     <meta http-equiv="expires" content="Wed, 21 Oct 2025 07:28:00 GMT">  <!-- 设置具体过期时间 -->
     

总结

这些 http-equiv 取值主要用于影响页面的行为和浏览器对页面的处理方式，帮助实现页面缓存控制、自动刷新、浏览器兼容性设置等功能。