400个最常见的 JavaScript 面试问答（41）

写在前面的

点击 订阅专栏，即可查阅全部内容及后续更新

大家好，我是 海拥 ，专注于前端知识的分享。今天将给大家带来的是 400 个最常见的 JavaScript 面试问答第 41 部分。本篇是本系列的倒数第二篇，接下来还有最后一小节。

大家一定要记得点赞收藏呀，关注我的牛客账号 海拥 ，并且三连（点赞+收藏+评论）本篇文章，可以找我要一本计算机相关的书。

401.什么是 RxJS？

RxJS (Reactive Extensions for JavaScript) 是一个使用 observables 实现反应式编程的库，它可以更容易地编写异步或基于回调的代码。它还提供了用于创建和使用 observable 的实用函数。

⬆ 返回顶部

402.函数构造函数和函数声明有什么区别？

创建的函数Function constructor不会为其创建上下文创建闭包，但它们始终在全局范围内创建。即，函数只能访问它自己的局部变量和全局范围变量。而函数声明也可以访问外部函数变量（闭包）。

让我们通过一个例子来看看这种差异，

函数构造器：

var a = 100;
function createFunction() {
   var a = 200;
   return new Function('return a;');
}
console.log(createFunction()()); // 100

函数声明：

var a = 100;
function createFunction() {
   var a = 200;
   return function func() {
       return a;
   }
}
console.log(createFunction()()); // 200

⬆ 返回顶部

403.什么是短路状态？

短路条件适用于编写简单 if 语句的精简方式。让我们用一个例子来演示这个场景。如果您想登录带有身份验证条件的门户，则表达式如下，

if (authenticate) {
  loginToPorta();
}

由于 javascript 逻辑运算符从左到右计算，因此可以使用 && 逻辑运算符简化上述表达式

authenticate && loginToPorta();

⬆ 返回顶部

404.调整数组大小的最简单方法是什么？

数组的长度属性可用于快速调整数组大小或清空数组。让我们在数字数组上应用 length 属性以将元素数量从 5 调整为 2，

var array = [1, 2, 3, 4, 5];
console.log(array.length); // 5

array.length = 2;
console.log(array.length); // 2
console.log(array); // [1,2]

数组也可以清空

var array = [1, 2, 3, 4, 5];
array.length = 0;
console.log(array.length); // 0
console.log(array); // []

⬆ 返回顶部

405.什么是可观察的？

Observable 基本上是一个函数，它可以随着时间的推移同步或异步地将值流返回给观察者。消费者可以通过调用subscribe()方法获取值。

让我们看一个 Observable 的简单例子

import { Observable } from 'rxjs';

const observable = new Observable(observer => {
 setTimeout(() => {
   observer.next('Message from a Observable!');
 }, 3000);
});

observable.subscribe(value => console.log(value));

注意： Observable 还不是 JavaScript 语言的一部分，但建议将它们添加到语言中

⬆ 返回顶部

406.函数声明和类声明有什么区别？

函数声明和类声明之间的主要区别是hoisting. 函数声明被提升，但不是类声明。

Classes:

const user = new User(); // ReferenceError

class User {}

构造函数：

const user = new User(); // No error

function User() {
}

⬆ 返回顶部

407.什么是异步函数？

异步函数是一个用async关键字声明的函数，它可以通过避免承诺链以更简洁的风格编写异步的、基于承诺的行为。这些函数可以包含零个或多个await表达式。

让我们看一个下面的异步函数示例，

async function logger() {

 let data = await fetch('http://someapi.com/users'); // 暂停直到 fetch 返回
 console.log(data)
}
logger();

它基本上是 ES2015 承诺和生成器的语法糖。

⬆ 返回顶部

408.如何防止 promises swallowing errors?

在使用异步代码时，JavaScript 的 ES6 承诺可以让您的生活变得更轻松，而无需每两行都有回调金字塔和错误处理。但是 Promises 有一些陷阱，最大的一个是默认吞下错误。

假设您希望在以下所有情况下向控制台打印错误，

Promise.resolve('promised value').then(function() {
      throw new Error('error');
});

Promise.reject('error value').catch(function() {
      throw new Error('error');
});

new Promise(function(resolve, reject) {
      throw new Error('error');
});

但是有许多现代 JavaScript 环境不会打印任何错误。你可以用不同的方式解决这个问题，

1.在每个链的末尾添加 catch 块：您可以在每个承诺链的末尾添加 catch 块

Promise.resolve('promised value').then(function() {
   throw new Error('error');
}).catch(function(error) {
 console.error(error.stack);
});

但是很难为每个承诺链打字，而且也很冗长。

2.添加完成方法：您可以用完成方法替换第一个解决方案的 then 和 catch 块

Promise.resolve('promised value').done(function() {
   throw new Error('error');
});

假设您想使用 HTTP 获取数据，然后异步处理结果数据。您可以编写done如下块，

getDataFromHttp()
 .then(function(result) {
   return processDataAsync(result);
 })
 .done(function(processed) {
   displayData(processed);
 });

将来，如果处理库 API 更改为同步，则可以删除done块，如下所示，

getDataFromHttp()
  .then(function(result) {
    return displayData(processDataAsync(result));
  })

然后您忘记添加done块到then块会导致无提示错误。

3.通过 Bluebird 扩展 ES6 Promises： Bluebird 扩展了 ES6 Promises API 以避免第二个解决方案中的问题。这个库有一个“默认”的 onRejection 处理程序，它将把所有错误从被拒绝的 Promise 打印到 stderr。安装后，您可以处理未处理的拒绝

Promise.onPossiblyUnhandledRejection(function(error){
   throw error;
});

并丢弃拒绝，只需用空捕获处理它

Promise.reject('error value').catch(function() {});

⬆ 返回顶部

409.什么是 deno ？

Deno 是一个简单、现代且安全的 JavaScript 和 TypeScript 运行时，它使用 V8 JavaScript 引擎和 Rust 编程语言。

⬆ 返回顶部

410.如何在javascript中使对象可迭代？

默认情况下，普通对象不可迭代。但是您可以通过Symbol.iterator在其上定义属性来使对象可迭代。

让我们用一个例子来证明这一点，

const collection = {
 one: 1,
 two: 2,
 three: 3,
 [Symbol.iterator]() {
   const values = Object.keys(this);
   let i = 0;
   return {
     next: () => {
       return {
         value: this[values[i++]],
         done: i > values.length
       }
     }
   };
 }
};

const iterator = collection[Symbol.iterator]();

console.log(iterator.next());    // → {value: 1, done: false}
console.log(iterator.next());    // → {value: 2, done: false}
console.log(iterator.next());    // → {value: 3, done: false}
console.log(iterator.next());    // → {value: undefined, done: true}

可以使用生成器函数简化上述过程，

const collection = {
  one: 1,
  two: 2,
  three: 3,
  [Symbol.iterator]: function * () {
    for (let key in this) {
      yield this[key];
    }
  }
};
const iterator = collection[Symbol.iterator]();
console.log(iterator.next());    // {value: 1, done: false}
console.log(iterator.next());    // {value: 2, done: false}
console.log(iterator.next());    // {value: 3, done: false}
console.log(iterator.next());    // {value: undefined, done: true}

⬆ 返回顶部

最后，不要忘了❤或📑支持一下哦，你的支持是海海更新的动力！关注我后面会持续分享面试经验 & 前端相关的专业知识。

🎁粉丝福利

1.关注我的牛客账号 海拥 ，并且三连（点赞+收藏+评论）本篇文章，可以找我要一本计算机相关的书。 2.老粉经常三连的话送两本或者多本书也不是不行。 送书信息收集表🐬：https://docs.qq.com/form/page/DRXl1VWJGU1ZvWmRv

最后祝大家都能找到满意的实习和 offer！

点击下方卡片进入详情页订阅专栏，即可查看完整内容~~