es6面试题,前端经典面试题(60道前端面试题包含JS、CSS、React、浏览器等)

es6面试题,前端经典面试题(60道前端面试题包含JS、CSS、React、浏览器等)详细介绍

本文目录一览：

• 1、
• 2、

前端经典面试题(60道前端面试题包含JS、CSS、React、浏览器等)

您提供的内容主要涉及了JavaScript的一些基础概念和编程技巧，包括作用域、变量提升、事件流、柯里化、原型链、函数式编程等。下面我会根据您提供的内容进行详细的解释和回答。

1. **事件流**：

事件流描述的是从页面中接收事件的顺序。DOM2级事件流包括捕获阶段和冒泡阶段。`addEventListener`方法可以指定事件处理程序在捕获阶段或冒泡阶段被调用。

2. **获取对象原型**：

在Chrome中，可以通过`__proto__`形式获取对象的原型。ES6中，可以通过`Object.getPrototypeOf()`方法获取。至于`Function.proto`，它是函数的原型，所有函数都继承自`Function.prototype`。

3. **柯里化**：

函数柯里化是将一个接受多个参数的函数转化为一系列使用单一参数的函数的技术。它的主要作用是参数复用、提前返回和延迟执行。

4. **call、apply和bind**：

这三个方法都是为了改变函数的`this`指向。它们的区别主要在于参数的传递方式。`bind`会返回一个新函数，这个新函数在调用时会以`bind`的第一个参数作为`this`，后续的参数则是传入`bind`的实参。

5. **let的变量提升**：

let存在变量提升，但存在一个“暂时死区”，在变量未初始化或赋值前不允许访问。

6. **关于let、var和function的赋值顺序**：

这个问题的答案通常是D，因为let和var的声明会提升到作用域的顶部，但它们的赋值则按照代码中的顺序进行。

7. **colorChange方法是静态的**：

如果某个方法是在构造函数中定义的并且不打算在实例上使用，那么它是静态的。freddie作为一个子级对象，它不继承静态方法，因此尝试调用不存在的方法会抛出TypeError。

8. **数组的push方法和length属性**：

使用push方法可以向数组添加元素，同时数组的length属性会自动增加。

9. **打印时的输出**：

由于obj具有length属性和splice方法，所以当使用console.log输出时，JavaScript会尝试将其作为数组进行打印。但由于某些属性或方法未被正确设置或定义，可能会输出部分预期外的值或undefined。

10. **对象键的存储**：

所有对象键（不包括Symbols）都会被存储为字符串。即使你没有给定字符串类型的键，JavaScript也会自动将其转换为字符串类型进行存储和比较。

11. **关于Set的数据结构**：

Set是一种特殊的数据结构，它只存储唯一的值。即使你尝试插入相同的值（如'1'和1），Set也会将其视为不同的值进行处理。因此，set.has('1')和set.has(1)可能会有不同的结果。

以上就是对您提供的内容的详细解释和回答。如果您还有其他问题或需要进一步的解释，请随时告诉我。

JS 烧脑面试题大赏

答案解析：

1. 答案2、1解析：

- 基本类型数据是按值传递的，所以函数b接收的a的值是1。在函数b的作用域内，无法访问到上层作用域的同名变量a，因此无论怎么修改a，都不影响外层的a。所以函数内打印的a是2，外面打印的仍是1。

2. 答案报错解析：

- 给函数多个参数设置默认值时，存在暂时性死区的问题。即在定义变量时，前面定义的变量不能引用后面还未定义的变量。

3. 答案10、20解析：

- 这道题涉及到了JavaScript中对象的属性访问和赋值操作。由于存在运算符优先级的问题，先执行a.x，这时a和b共同指向的{n:1}对象变成了{n:1,x:undefined}。然后按照连等操作从右到左执行代码，a={n:2}，这时a指向了一个新对象。接着a.x=a，但由于a.x最开始就执行过了并且赋值为undefined，因此这里的等价操作其实是：({n:1,x:undefined}).x=b.x=a={n:2}。

4. 答案[]解析：

- 这里涉及到ECMAScript版本不同对应方法行为不同的问题。ES6之前的遍历方法会跳过数组未赋值过的位置，即空位，但ES6新增的for...of方法不会跳过。

5. 答案GoodbyeJack解析：

- 这道题考察的是JavaScript中+号的行为。根据运算符的规则，如果有操作数是字符串，则会将另一个操作数转成字符串执行连接；如果有对象且没有valueOf或toString方法可调用，则直接使用对象作为原始值进行加法操作。因此答案中涉及到的操作导致了NaN、13等值的产生。

6. 答案456解析：

- 这道题考察的是对象设置和引用属性的方法。obj.name和obj['name']两种方式都可以设置或引用对象的属性，但最终结果取决于对象的toString方法返回的字符串。由于对象转成字符串的规则与内容无关，结果都是[objectObject]，因此a[b]=a[c]=a['[objectObject]']。

7. 答案25、20、20、25解析：

- 这道题考察的是this指向问题。在函数作为对象的方法被调用时，this指向该对象；在全局环境下调用函数时，this指向window；使用逗号操作符时返回的是最后一个表达式的值；使用赋值表达式时也是返回赋值的结果。根据这些规则，每个表达式的this指向被依次解析。

8. 答案1、2、3解析：

- 这道题考察的是数组解构赋值的问题。解构赋值时按照位置对应的规则进行，因此答案中的变量解构是正确的。

9. 答案[4,5,3]解析：

- 这里考查的是Object.assign方法的使用。assign方法用于合并对象，但会将源对象的属性覆盖目标对象的同名属性。因此，最终合并后的数组是[4,5,3]。

10. 答案4解析：

- 这道题考查自增运算符的用法。后缀版的自增运算符会在语句被求值后才发生，因此x的值在匹配case时会以1的值进行，然后执行自增操作。

11. 答案true、true解析：

- 对于typeof操作符，当作用于函数时返回'function'，class本质也是函数，因此两者用typeof操作符得到的结果相同，都是'function'。

12. 答案true、false解析：

- 这道题考查运算符优先级以及全等比较。由于逻辑非!的优先级高于全等===，所以先执行!!typeof count得到true，然后再与字符串'number'进行全等比较得到false。