只有 10% 的开发人员可以完成的JavaScript 挑战

jerrywus
429 阅读4分钟

原文：only-10-of-developers-can-solve-these-javascript-challenges

下面就直接翻译了

前段时间我们创建了一个带有 JS 测验和解释的电报频道。今天，我们想分享对开发人员来说最难的 TOP-5 JS 挑战。此 TOP-5 是基于数百个已发布测验的失败答案的百分比统计。

介绍

我们已经根据这些测验答案的统计数据发布了一篇包含最难主题的文章。 为了识别这些主题，我们将所有已发布的测验按主题（总共 15 个主题）进行划分，并计算每个主题的平均百分比。

这个实验最有趣的地方在于，除了计算正确答案之外，我们还对 Javascript 最困难的方面进行了调查，结果大相径庭。在调查中，大部分受访者回答他们最困难的话题是Promises，而据统计，Promises 仅排在第 4 位。您可以在下面文章中找到所有结果（需翻墙）：

Top of JS Topics mostly failed by developers

接下来让我们看看TOP-5 最难的 JS 挑战并进行分析。剧透：只有 8% 的响应者正确解决了 TOP-1 测验。

Top5: 默认函数参数和函数长度属性。18% 的人正确解答。

在线尝试

function foo(a, b = 10, c) {
 console.log(foo.length);
}
 
foo(1, 2, 3);

ES2015中引入了默认参数功能。

随着默认参数的引入，长度属性的行为发生了变化。由于具有默认值的参数显然是可选的，因此这样的参数不包含在函数的长度中。按照常识，默认值参数后面的所有参数也是可选的。因此，它们也不包含在函数的长度属性中。

TOP4: Object.defineProperty方法及其默认参数。14% 的人正确解答。

在线尝试

const obj = {};
 
Object.defineProperty(obj, 'myCompany', {
 value: 'intspirit'
});
 
console.log(obj.myCompany);
delete obj.myCompany;
console.log(obj.myCompany);

大多数受访者都回答undefined了这个测验。原因：不知道Object.defineProperty() 方法是如何工作的。

Object.defineProperty() 方法定义对象的新属性，或修改对象的现有属性。

默认情况下，使用Object.defineProperty() 添加的属性不可写、不可枚举且不可配置。

所以说，delete obj.myCompany;是被忽略的，且严格模式会报错

TOP3: Array.map和parseInt。14% 的人正确解答。

这道题，相信大多人人已经看过了

在线尝试

const numbers = ['9', '10', '11'].map(parseInt);
 
console.log(numbers);

Array.map  () 方法接受一个带有 3 个参数的回调函数。我们只会对前两个感兴趣：值和索引。parseInt函数有 2 个参数：一个要转换为数字的字符串和一个index。

所以在我们的例子中， parseInt 将使用以下参数调用：

parseInt(‘9’, 0);

parseInt(‘10’, 1);

parseInt(‘11’, 2);

我们会得到以下结果：

  1. parseInt(‘9’, 0) -> 基数 0 等同于没有基数的调用。因为第一个参数不是以0x或0X开头，所以 radix 将默认为10 -> parseInt(‘9’, 10) -> 9
  2. parseInt(‘10’, 1)-> 1 — 无效基数（超出范围）-> NaN
  3. parseInt(‘11’, 2)-> 2 — 有效基数，二进制中的 11 是 3 -> 3

TOP2: 使用Object.create和Object.assign克隆对象。11% 的人正确解答。

在线尝试

function User() {
 this.verified = true;
}
 
const user = new User();
const admin = Object.create(user);
 
const clone1 = { ...admin };
const clone2 = Object.assign({}, admin);
 
console.log(admin.verified, clone1.verified, clone2.verified);

这题考的是Object.create和对原型链的理解

  • Object.create方法创建一个新对象 ， 使用现有对象作为新创建对象的原型。 1.png

  • 而...和assign在克隆时都忽略了原型。

这些对象的原型如下：

admin.__proto__ User { verified: true },
clone1.__proto__ [Object: null prototype] {},
clone2.__proto__ [Object: null prototype] {}

TOP1: 字符串函数和instanceof运算符。8% 的人正确解答。

在线尝试

var str = 'Hello';
var str2 = String('Hello');
 
console.log(str instanceof String);
console.log(str2 instanceof String);

大部分人会想，有什么难的？

根据答案的统计数据，我们发现受访者的意见在两个错误答案之间大致相等。在本文发表时——38% 的开发人员认为两个表达式都会返回true，35% 的开发人员认为只有第二个语句是true. 下半场更接近了。

事实上，这两个表达式都是false。因为：

  • instanceof运算符仅适用于object。
  • 字符串 'Hello' 是原始类型。
  • 非构造函数上下文中的字符串调用（不使用new关键字调用）返回一个原始字符串。

综上所述。

似乎无论你学习多少 JavaScript，你仍然会学到一些新东西。一如既往，我们希望鼓励您继续学习您每天编写的语言，让我们让 IT 变得更好！

avatar
文章
阅读
粉丝