又来八道让我萌币的前端面试题

var b = 10;

(function b() {

‘use strict’

b = 20;

console.log(b)

})() // “Uncaught TypeError: Assignment to constant variable.”

其他情况例子：

有window：

var b = 10;

(function b() {

window.b = 20;

console.log(b); // [Function b]

console.log(window.b); // 20是必然的

})();

有var:

var b = 10;

(function b() {

var b = 20; // IIFE内部变量

console.log(b); // 20

console.log(window.b); // 10

})();

第 3 题：（京东）下面代码中 a 在什么情况下会打印 1？

答案解析 因为==会进行隐式类型转换 所以我们重写toString方法就可以了

var a = {

i: 1,

toString() {

return a.i++;

}

}

if( a == 1 && a == 2 && a == 3 ) {

console.log(1);

}

解法二：

let a = [1,2,3];

a.toString = a.shift;

if( a == 1 && a == 2 && a == 3 ) {

console.log(1);

}

第 4 题：实现一个 sleep 函数

4种方式：

//Promise

const sleep = time => {

return new Promise(resolve => setTimeout(resolve,time))

}

sleep(1000).then(()=>{

console.log(1)

})

//Generator

function* sleepGenerator(time) {

yield new Promise(function(resolve,reject){

setTimeout(resolve,time);

})

}

sleepGenerator(1000).next().value.then(()=>{console.log(1)})

//async

function sleep(time) {

return new Promise(resolve => setTimeout(resolve,time))

}

async function output() {

let out = await sleep(1000);

console.log(1);

return out;

}

output();

//ES5

function sleep(callback,time) {

if(typeof callback === ‘function’)

setTimeout(callback,time)

}

function output(){

console.log(1);

}

sleep(output,1000);

第 5 题：分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景。

• display: none;

1. DOM 结构：浏览器不会渲染 display 属性为 none 的元素，不占据空间；

2. 事件监听：无法进行 DOM 事件监听；

3. 性能：动态改变此属性时会引起重排，性能较差；

4. 继承：不会被子元素继承，毕竟子类也不会被渲染；

5. transition：transition 不支持 display。

• visibility: hidden;

1. DOM 结构：元素被隐藏，但是会被渲染不会消失，占据空间；

2. 事件监听：无法进行 DOM 事件监听；

3. 性 能：动态改变此属性时会引起重绘，性能较高；

4. 继 承：会被子元素继承，子元素可以通过设置 visibility: visible; 来取消隐藏；

5. transition：transition 不支持 display。

• opacity: 0;

1. DOM 结构：透明度为 100%，元素隐藏，占据空间；

2. 事件监听：可以进行 DOM 事件监听；

3. 性 能：提升为合成层，不会触发重绘，性能较高；

4. 继 承：会被子元素继承,且，子元素并不能通过 opacity: 1 来取消隐藏；

5. transition：transition 不支持 opacity。

第 6 题：使用 sort() 对数组 [3, 15, 8, 29, 102, 22] 进行排序，输出结果

我的答案：

[102, 15, 22, 29, 3, 8]

解析：

根据MDN上对Array.sort()的解释，默认的排序方法会将数组元素转换为字符串，然后比较字符串中字符的UTF-16编码顺序来进行排序。所以'102' 会排在 '15' 前面。以下是MDN中的解释原文：

The sort() method sorts the elements of an array in place and returns the array. The default sort order is built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values.

第 46 题：输出以下代码执行的结果并解释为什么

var obj = {

‘2’: 3,

‘3’: 4,

‘length’: 2,

‘splice’: Array.prototype.splice,

‘push’: Array.prototype.push

}

obj.push(1)

obj.push(2)

console.log(obj)

以下为个人猜想没有确切的理论依据：

push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

根据MDN的说法理解，push方法应该是根据数组的length来根据参数给数组创建一个下标为length的属性

我们发现，push方法影响了数组的length属性和对应下标的值。

在对象中加入splice属性方法，和length属性后。这个对象变成一个类数组。

这个时候控制台输出的是一个数组，但是实际上它是一个伪数组，并没有数组的其他属性和方法。

所以我认为题目的解释应该是：

1. 使用第一次push，obj对象的push方法设置 obj[2]=1;obj.length+=1

2.使用第二次push，obj对象的push方法设置 obj[3]=2;obj.length+=1

3.使用console.log输出的时候，因为obj具有 length 属性和 splice 方法，故将其作为数组进行打印

4.打印时因为数组未设置下标为 0 1 处的值，故打印为empty，主动 obj[0] 获取为 undefined

第一第二步还可以具体解释为：因为每次push只传入了一个参数，所以 obj.length 的长度只增加了 1。push方法本身还可以增加更多参数

第 7 题：箭头函数与普通函数（function）的区别是什么？构造函数（function）可以使用 new 生成实例，那么箭头函数可以吗？为什么？

箭头函数是普通函数的简写，可以更优雅的定义一个函数，和普通函数相比，有以下几点差异：

1、函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。

2、不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

3、不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。

4、不可以使用 new 命令，因为：

• 没有自己的 this，无法调用 call，apply。

• 没有 prototype 属性 ，而 new 命令在执行时需要将构造函数的 prototype 赋值给新的对象的 __proto__

new 过程大致是这样的：

function newFunc(father, …rest) {

var result = {};

result.proto = father.prototype;

var result2 = father.apply(result, rest);

if (

(typeof result2 === ‘object’ || typeof result2 === ‘function’) &&

result2 !== null

) {

return result2;

}

return result;

}

第 8 题：介绍下 BFC 及其应用。

一、常见定位方案

---

在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案:

• 普通流 (normal flow)

在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。

• 浮动 (float)

在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。

• 绝对定位 (absolute positioning)

在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

二、BFC 概念

---

Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

那么 BFC 是什么呢？

BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。**

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-lRwDKKA7-1715139239860)]

[外链图片转存中…(img-ctU5arnt-1715139239860)]

[外链图片转存中…(img-NAx3jPP2-1715139239861)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！