2018-10-10 18:03:03 -04:00
|
|
|
---
|
|
|
|
id: 587d7b87367417b2b2512b3f
|
2020-12-16 00:37:30 -07:00
|
|
|
title: 探索 var 和 let 关键字之间的差异
|
2018-10-10 18:03:03 -04:00
|
|
|
challengeType: 1
|
2020-08-04 15:13:35 +08:00
|
|
|
forumTopicId: 301202
|
2021-01-13 03:31:00 +01:00
|
|
|
dashedName: explore-differences-between-the-var-and-let-keywords
|
2018-10-10 18:03:03 -04:00
|
|
|
---
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
# --description--
|
|
|
|
|
|
|
|
使用`var`关键字来声明变量,会出现重复声明导致变量被覆盖却不会报错的问题:
|
2020-08-04 15:13:35 +08:00
|
|
|
|
|
|
|
```js
|
|
|
|
var camper = 'James';
|
|
|
|
var camper = 'David';
|
|
|
|
console.log(camper);
|
|
|
|
// logs 'David'
|
|
|
|
```
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
在上面的代码中,`camper`的初始值为`'James'`,然后又被覆盖成了`'David'`。 在小型的应用中,你可能不会遇到这样的问题,但是当你的代码规模变得更加庞大的时候,就可能会在不经意间覆盖了之前定义的变量。 这样的行为不会报错,导致了 debug 非常困难。
|
|
|
|
在 ES6 中引入了新的关键字`let`来解决`var`关键字带来的潜在问题。 如果你在上面的代码中,使用了`let`关键字来代替`var`关键字,结果会是一个报错。
|
2020-08-04 15:13:35 +08:00
|
|
|
|
|
|
|
```js
|
|
|
|
let camper = 'James';
|
|
|
|
let camper = 'David'; // throws an error
|
|
|
|
```
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
你可以在浏览器的控制台里看见这个错误。 与`var`不同的是,当使用`let`的时候,同一名字的变量只能被声明一次。 请注意`"use strict"`。这代表着开启了严格模式,用于检测常见的代码错误以及"不安全"的行为,例如:
|
2020-08-04 15:13:35 +08:00
|
|
|
|
|
|
|
```js
|
|
|
|
"use strict";
|
|
|
|
x = 3.14; // throws an error because x is not declared
|
|
|
|
```
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
# --instructions--
|
2018-10-10 18:03:03 -04:00
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
请更新这段代码,并且在其中只使用`let`关键字
|
2018-10-10 18:03:03 -04:00
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
# --hints--
|
2018-10-10 18:03:03 -04:00
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
在代码中不应存在`var`。
|
2018-10-10 18:03:03 -04:00
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
```js
|
|
|
|
(getUserInput) => assert(!getUserInput('index').match(/var/g));
|
2018-10-10 18:03:03 -04:00
|
|
|
```
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
`catName`变量的值应该为`'Oliver'`。
|
2018-10-10 18:03:03 -04:00
|
|
|
|
|
|
|
```js
|
2020-12-16 00:37:30 -07:00
|
|
|
assert(catName === 'Oliver');
|
2018-10-10 18:03:03 -04:00
|
|
|
```
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
`quote`变量的值应该为`'Oliver says Meow!'`
|
2018-10-10 18:03:03 -04:00
|
|
|
|
|
|
|
```js
|
2020-12-16 00:37:30 -07:00
|
|
|
assert(quote === 'Oliver says Meow!');
|
2018-10-10 18:03:03 -04:00
|
|
|
```
|
2020-08-04 15:13:35 +08:00
|
|
|
|
2021-01-13 03:31:00 +01:00
|
|
|
# --seed--
|
|
|
|
|
|
|
|
## --seed-contents--
|
|
|
|
|
|
|
|
```js
|
|
|
|
var catName;
|
|
|
|
var quote;
|
|
|
|
function catTalk() {
|
|
|
|
"use strict";
|
|
|
|
|
|
|
|
catName = "Oliver";
|
|
|
|
quote = catName + " says Meow!";
|
|
|
|
|
|
|
|
}
|
|
|
|
catTalk();
|
|
|
|
```
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
# --solutions--
|
|
|
|
|
2021-01-13 03:31:00 +01:00
|
|
|
```js
|
|
|
|
let catName;
|
|
|
|
let quote;
|
|
|
|
function catTalk() {
|
|
|
|
'use strict';
|
|
|
|
|
|
|
|
catName = 'Oliver';
|
|
|
|
quote = catName + ' says Meow!';
|
|
|
|
}
|
|
|
|
catTalk();
|
|
|
|
```
|