7 个常见的 JavaScript 测验及解答

1.声明

查看以下代码，并回答输出的内容(以及原因)。

// situation 1
console.log(person);
var person = 'John';
// situation 2
console.log(person);
let person = 'Phill';
// situation 3
console.log(person);
const person = 'Frank';
// situation 4
const person = 'Vanessa';
console.log(person);
person = 'Mike';
console.log(person);
// situation 5
var person = 'John';
let person = 'Mike';
console.log(person);
// situation 6
var person = 'John';
if (person) {
let person = 'Mike';
console.log(person);
}
console.log(person);

</pre>

说明

Situation 1: 预期结果是在控制台中看到文本 John，但是令人惊讶的是，我们看到记录了undefined。想知道为什么吗?

好吧，这是经典的 JavaScript 在起作用。这种行为被称为提升。在后台，该语言将变量声明和值分配分为两部分。不管变量最初由开发人员在哪里声明，变量都将移动到顶部，声明时将其值设置为 undefined。看起来像这样：

var person;
console.log(person);
person = 'John';

</pre>

Situation 2: 在这里，结果将是引用错误。

Uncaught ReferenceError: Cannot access 'person' before initialization

</pre>

错误文本说明了一切。因为我们使用了关键字 let，所以我们的变量被提升，但没有初始化，并且抛出该错误，通知我们正在尝试访问未初始化的变量。在 ES6 中引入了关键字 let，使我们能够使用块作用域中的变量，从而帮助我们防止意外行为。

在这里，我们会得到与 Situation 2 中相同的错误。

不同之处在于我们使用了关键字 const，从而防止在初始化后重新分配变量。 ES6 中也引入了此关键字。

Situation 4: 在这种情况下，我们可以看到关键字 const 是如何工作的，以及它如何避免无意中重新分配变量。在我们的示例中，首先会在控制台中看到 Vanessa，然后是一个类型错误。

Uncaught TypeError: Assignment to constant variable

</pre>

const 变量的使用随着我们的代码库呈指数增长。

Situation 5: 如果已经在某个作用域内使用关键字 var 定义了变量，则在同一作用域中用关键字 let 再次声明该变量将会引发错误。

因此，在我们的示例中，将不会输出任何内容，并且会看到语法错误提示。

Uncaught SyntaxError: Identifier 'person' has already been declared

</pre>

Situation 6: 我们分别有一个函数作用域的变量，和块作用域的变量。在这种情况下，它们是否有相同的名字或标识符并不重要。

在控制台中，我们应该看到 Mike 和 John 被依次输出。为什么?

因为关键字 let 为我们提供了块作用域内的变量，这意味着它们仅存在于自己创建的作用域内，在这种情况下，位于if...else 语句中。内部变量优先于外部变量，这就是为什么我们可以使用相同标识符的原因。

2.继承

考虑以下类，并尝试回答输出了什么以及为什么。

class Person {
constructor() {
this.sayHello = () => {
return 'Hello';
}
}
sayBye() {
return 'Bye';
}
}
class Student extends Person {
sayHello() {
return 'Hello from Student';
}
}
const student = new Student();
console.log(student.sayHello());

</pre>

说明

如果你的答案是 Hello，那是对的!

为什么：每次我们创建一个新的 Student 实例时，都会将 sayHello 属性设置为是一个函数，并返回字符串 Hello。这是在父类(Person)类的构造函数中发生的。

在 JavaScript 中，类是语法糖，在我们的例子中，在原型链上定义了 Student 类中的 sayHello 方法。考虑到每次我们创建 Student 类的实例时，都会将 sayHello 属性设置为该实例，使其成为返回字符串 Hello 的 function，因此我们永远不会使用原型链上定义的函数，也就永远不会看到消息 Hello from Student 。

3.对象可变性

思考以下情况中每个部分的输出：

// situation 1
const user = {
name: 'John',
surname: 'Doe'
}
user = {
name: 'Mike'
}
console.log(user);
// situation 2
const user = {
name: 'John',
surname: 'Doe'
}
user.name = 'Mike';
console.log(user.name);
// situation 3
const user = {
name: 'John',
surname: 'Doe'
}
const anotherUser = user;
anotherUser.name = 'Mike';
console.log(user.name);
// situation 4
const user = {
name: 'John',
surname: 'Doe',
address: {
street: 'My Street'
}
}
Object.freeze(user);
user.name = 'Mike';
user.address.street = 'My Different Street';
console.log(user.name);
console.log(user.address.street);

</pre>

说明

Situation 1: 正如我们在上一节中所了解的，我们试图重新分配不允许使用的 const 变量，所以将会得到类型错误。

控制台中的结果将显示以下文本：

Uncaught TypeError: Assignment to constant variable

</pre>

Situation 2: 在这种情况下，即使我们改用关键字 const 声明的变量，也会有不同的行为。不同之处在于我们正在修改对象属性而不是其引用，这在 const 对象变量中是允许的。

控制台中的结果应为单词 Mike。

Situation 3: 通过将 user 分配给 anotherUser 变量，可以在它们之间共享引用或存储位置(如果你愿意)。换句话说，它们两个都会指向内存中的同一个对象，因所以更改一个对象的属性将反映另一个对象的更改。

控制台中的结果应为 Mike。

Situation 4: 在这里，我们使用 Object.freeze 方法来提供先前场景(Situation 3)所缺乏的功能。通过这个方法，我们可以“冻结”对象，从而不允许修改它的属性值。但是有一个问题!它只会进行浅冻结，这意味着它不会保护深层属性的更新。这就是为什么我们能够对 street 属性进行更改，而 name 属性保持不变的原因。

控制台中的输出依次为 John 和 My Different Street 。

4.箭头函数

运行以下代码段后，将会输出什么以及原因：

const student = {
school: 'My School',
fullName: 'John Doe',
printName: () => {
console.log(this.fullName);
},
printSchool: function () {
console.log(this.school);
}
};
student.printName();
student.printSchool();

</pre>

说明

控制台中的输出将依次为 undefined 和 My School。

你可能会熟悉以下语法：

var me = this;
// or
var self = this;
// ...
// ...
// somewhere deep...
// me.doSomething();

</pre>

你可以把 me 或 self 变量视为父作用域，该作用域可用于在其中创建的每个嵌套函数。

当使用箭头函数时，这会自动完成，我们不再需要存储 this 引用来访问代码中更深的地方。箭头函数不绑定自己，而是从父作用域继承一个箭头函数，这就是为什么在调用 printName 函数后输出了 undefined 的原因。

5.解构

请查看下面的销毁信息，并回答将要输出的内容。给定的语法是否允许，否则会引发错误?

const rawUser = {
name: 'John',
surname: 'Doe',
email: 'john@doe.com',
displayName: 'SuperCoolJohn',
joined: '2016-05-05',
image: 'path-to-the-image',
followers: 45
}
let user = {}, userDetails = {};
({ name: user.name, surname: user.surname, ...userDetails } = rawUser);
console.log(user);
console.log(userDetails);

</pre>

说明

尽管有点开箱即用，但是上面的语法是允许的，并且不会引发错误! 很整洁吧?

上面的语法功能强大，使我们能够轻松地将任何对象分成两个更具体的对象，上面的示例在控制台的输出为：

// {name: "John", surname: "Doe"}
// {email: "john@doe.com", displayName: "SuperCoolJohn", joined: "2016-05-05", image: "path-to-the-image", followers: 45}

</pre>

6.异步/等待

调用以下函数后将输出什么?

(async () => {
let result = 'Some Data';
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve('Some data retrieved from the server'), 2000);
});
result = await promise;
console.log(result);
})();

</pre>

说明

如果你认为是两秒钟后输出 Some data retrieved from the server ，那么你是对的!

代码将会暂停，直到 promise 得到解决。两秒钟后，它将继续执行并输出给定的文本。这意味着 JavaScript 引擎实际上会等到异步操作完成。可以说 async/await 是用来获得 promise 结果的语法糖。也有人认为它是比 promise.then 更具可读性的方式。

7. Return 语句

const multiplyByTwo = (x) => {
return
{
result: x * 2
};
}
console.log(multiplyByTwo(2));

</pre>

说明

如果你的答案是 {result: 4}，那你就错了。输出是 undefined。但是不要对自己太苛刻，考虑到我也写 C# 代码，这也曾经困扰着我，这在 C# 那儿不是个问题。

由于自动分号插入的原因，上面的代码将返回 undefined。 return 关键字和表达式之间不允许使用行结束符

解决方案是用以下列方式之一去修复这个函数：

const multiplyByTwo = (x) => {
return {
result: x * 2
};
}

</pre>

要么

const multiplyByTwo = (x) => {
return (
{
result: x * 2
}
);
}

</pre>

【编辑推荐】

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,732评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,496评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,264评论 0赞 338
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,807评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,806评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,675评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,029评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,683评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 41,704评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,666评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,773评论 1赞 332
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,413评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,016评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,978评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,204评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,083评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,503评论 2赞 343

7 个常见的 JavaScript 测验及解答

1.声明

2.继承

3.对象可变性

4.箭头函数

5.解构

6.异步/等待

7. Return 语句

推荐阅读更多精彩内容