[Just JavaScript] 02. JavaScript的宇宙 React核心成员Dan Abramov的JavaScript教程中文翻译版

2020-03-24 09:02:15

什么是值,JavaScript中哪几种类型,每种类型的用途的是什么?如何通过表达式向JavaScript提问,如何检查值的类型。本节让我们一起探索JavaScript的宇宙。


让我们从值说起


什么是值?很难说。

这就像问数学中的数字是什么,或者几何中点是什么。值是JavaScript的宇宙中的一样东西

数字是值,但是其他一些东西也是值,比如对象和函数。但是,很多东西,比如if语句和变量声明,都不是值。


· 代码和值


为了我的JavaScript程序中的所有值和其他值区分开来,让我想像一下Antoine de Saint exupperéry绘制的小王子:

Antoine de Saint exupperéry绘制的小王子


我站在一颗小行星上,这是我程序的代码。

从表面上看,我看到了if语句和变量声明、逗号、大括号以及JavaScript代码中可能找到的所有其他东西。

我的代码包含“调用函数”或“多次执行此操作”,甚至“抛出错误”等指令。我一步步地完成了这些指令 —— 在我的小行星上奔跑着。


但是偶尔,我会抬头看看。


在一个晴朗的夜晚,我在JavaScript的宇宙中看到了不同类型的值:布尔值、数字、字符串、符号、函数和对象、空值和未定义的值。天那!我可以在代码中引用它们,但它们不存在于代码中。


在我的JavaScript的宇宙中,值在空间中飘动。

值在JavaScript星空中飘动,构成JavaScript星空

“坚持住!”你可能会说,“我一直认为上面在我的代码里!”在这里,我要你坚定信念。要想完善这个思维模型,还需要几个更多的模块。给它五分钟。

回到值,通常,有两种值类型:


·原始值


原始值包括数字和字符串等,打开浏览器的控制台并使用console.log()打印原始值:

console.log(2);
console.log("hello");
console.log(undefined);

所有原始值都有一些共同点。在我们的代码中没有什么可以影响它们的。这听起来有点模糊,所以我们将在下一个模块中具体探讨原始值意味着什么。现在,我要说的是,原始值就像星星一样 —— 冰冷而遥远,但在我需要它们的时候,它们总在那里。

这是第一种价值观。


· 对象和函数


对象和函数也有值,但它们不是原始类型。这使得它们非常特别。继续并将其中一些记录到浏览器控制台:

console.log({});
console.log([]);
console.log(x => x * 2);

请注意浏览器控台如何以不同的原始值显示它们。有些浏览器可能会在它们前面显示一个箭头,或者在单击它们时,执行一些特殊的操作。如果你安装了一些不同的浏览器(例如Chrome和Firefox),请比较它们如何可视化对象和函数。

对象和函数是特殊的,因为我可以在代码中操作它们。例如,我们可以将它们连接到其他值。这是相当模糊的 —— 所以我们将在后面的模块中完善这个想法。现在,我可以说,如果原始值像遥远的恒星,那么对象和函数更像漂浮在代码附近的岩石。它们离得很近,我可以操纵它们。


这是第二种值类型。


你可能有问题。很好,如果你问了一个问题,JavaScript的宇宙可能会回答它!当然,前提是你知道怎么问。

三个JavaScript值在Chrome浏览器打印的结果


· 表达式


有很多问题JavaScript无法回答。如果你想知道,向你最好的朋友坦白你真实的感受,直到你们都变成骷髅,JavaScript都不会帮助你。

但是JavaScript很乐意回答一些问题。这些问题有一个特殊的名字 —— 它们被称为表达式。

如果我们“询问”表达式 2+2,JavaScript将用值4“回答”。

console.log(2 + 2); // 4

表达式是JavaScript可以回答的问题。

JavaScript以它知道的唯一方式使用值回答表达式。

JavaScript使用值回答表达式的演示动画


如果“表达式”这个词让你感到困惑,请将其视为一段代码。你可能会听到人们说2+2的结果或者总和为4。这些都是说同一件事的不同方式。


我们问JavaScript 2+2,它的答案是4。表达式总能产生唯一结果。现在我们意识到表达式是有风险的。

之前我们说过,JavaScript值有很多类型:数字、字符串、对象等等。我们如何知道任何特定值的类型?

这听起来像个问题。我们敢问吗?


·检查类型


首先,JavaScript的宇宙中的所有值可能看起来都是一样的 —— 它们就像宇宙中的亮点。单是如果你仔细观察,你会发现只有是不到十种不同类型的值。相同类型的值的行为方式类似。

如果我们想检查一个值的类型,我们可以用typeof运算符来询问它。

JavaScript将用一个预先确定的字符串值来回答我们的问题,比如“number”、“string”或“object”。

typeof像观察JavaScript星空的望远镜,用来检查JavaScript中值的类型

以下是几个可以尝试在浏览器控制台中尝试的示例:

console.log(typeof(2)); // "number"
console.log(typeof("hello")); // "string"
console.log(typeof(undefined)); // "undefined"

这里,typeof (2) 是一个表达式,它产生"number"值。

严格地说,typeof不需要括号。例如,typeof 2 可以像 typeof (2) 一样工作。然而,有时需要括号来避免歧义。如果我们在 typeof 后面省略了 括号,下面中的一个例子就会中断。试着猜猜看是哪一个:

console.log(typeof({})); // "object"
console.log(typeof([])); // "object"
console.log(typeof(x => x * 2)); // "function"

您可以在浏览器中验证您的猜测。

typeof像观察JavaScript星空的望远镜,用来检查JavaScript中值的类型的演示动画


现在再来看看最后三个例子——这次要密切关注它们的结果。

你又没有发现这些结果令人惊讶?为什么?

使用typeof不用扣号包裹值检查类型在Chrome浏览器的输出结果


· 值的类型


作为一个有抱负的天文学家,你可能想知道JavaScript宇宙中可以观察到的值的类型有多少。经过近25年的JavaScript研究,科学家只发现了9种值的类型:


·原始值


1. Undefined(undefined),用于意料之外的空值

2. Null(null),用于意料之中的空值(译者注:1和2的翻译参考犀牛书)

3. 布尔值(true和false),用于逻辑运算

4. 数值型(-100,3.14和其他),用于数学运算

5. 字符串型("hello"、"abracadabra"和其他),用于文本

6. Symbols(不常见),用于隐藏详细信息

7. BigInts(不常见和新),用于表示大于 2的53次方 - 1 的整数(超过Number的最大数字),可以表示任意大的整数


·对象和函数


1. 对象({}和其他),用于对相关数据和代码进行分组

2. 函数(x => x * 2 和其他),用于包含代码


·没有其他类型


你可能会问:“单是我用过的其他类型呢,比如数组?”

在JavaScript中,除了我们刚刚枚举的值类型之外,没有其它基本值类型。剩下的都是对象!例如,即使数组、日期和正则表达式基本上都是JavaScript中的对象:

console.log(typeof([])); // "object"
console.log(typeof(new Date())); // "object"
console.log(typeof(/(hello|goodbye)/)); // "object"

“我明白了”你也许会回答,“这是因为一切都是对象!”哎,这是一个流行的都市传说,但这并不是真的。尽管像“hi.toUpperCase()”这样的代码使“hi”看起来像一个对象,但这只是一个幻觉。JavaScript会在执行时,自动创建一个字符串对象,然后用完后立即将其丢弃(译者注:这种机制被称为类型的隐式转换)。

如果没有机制就好理解了。现在你只需要记住原始值(如数字和字符串)不是对象。


·要点回顾


让我们回顾一下目前所知道的:

1. 先有值,然后才有一切。我们可以将值看作是,漂浮在JavaScript宇宙中的不同事物。它们不存在我们的代码中,但是我们可以在代码中使用它们。

2. 值分为两种类型:原始值,对象及函数。总共有九种类型,每种类型都有特殊用途,但是一些很少用到。

3. 一些值类型很孤独。例如,null是Null类型中唯一的值,undefined是Undefined类型中唯一的值。正如我们稍后将了解到的,这两个特立独行的值类型是相当的麻烦制造者。

4. 我们可以通过表达式提问。JavaScript将用值回答我们。例如,表达式 2 + 2 的答案是 4。

5. 我们可以通过用 typeof 表达式包裹值,来检查值的类型。例如,typeof(4)的答案是 “number”。


·练习


现在,是时候学以致用了。

即使你已经有了相当丰富的JavaScript经验,也不要跳过练习题!

点击下面的连接开始练习:

完成练习并向作者发送关于本章节的反馈。当你完成练习,我将发送下一模块给你。

https://eggheadio.typeform.com/to/PLyTKB

接下来,我们将更详细地讨论原始值。让我们看看这些不同的原始类型(如数字和Null)有什么共同点,并学习一些关于在JavaScript中相等意味着什么的东西。

我们还将继续完善我们的思维模型,下面的网址里提供了一种类比草图。我们将把焦点放在图片的不同部分,并用更多的细节填充它们,就像是渐进式JPEG图像:

https://www.liquidweb.com/kb/what-is-a-progressive-jpeg

这些看起来是小步骤,正在为未来的一切奠定基础,让我们一起构建JavaScript的宇宙。


原作者:Dan Abramov

原标题:[Just JavaScript]02. The JavaScript Universe

网站: https://overreacted.io 

翻译:小宇


上一节:

 

下一节:

115210
小宇
ShopXO插件 ▶力扣 ▶Github ▶M站
将近酒
https://zzzxx0.com/intr/f94ad40b7cee99f5
119584
http://s.crimoon.net/do.Sa5avH互点
JustJavaScript
DanAbramov
[Just JavaScript] 03. 变量和值 React核心成员Dan Abramov的JavaScript教程中文翻译版
JavaScript原始值可以改变吗?可以给原始值设置属性吗?变量是值吗?变量和值的联系是什么?让我们连线JavaScript宇宙中的变量和值,重构你对JavaScript变量和值的思维模式。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
https://www.youtube.com/watch?v=otCpCn0l4Wo
https://eggheadio.typeform.com/to/RWJg3m
JustJavaScript
DanAbramov
[Just JavaScript] 01. 思维模型 React核心成员Dan Abramov的JavaScript教程中文翻译版
还记得你初学JavaScript时,是如何理解变量的吗?本教程将从心理学入手,教你重新认识JavaScript,培养正确高效的思维模式。来自React核心团队成员和Redux作者Dan Abramov的全新JavaScript教程《Just JavaScript》第一节——思维模型中文翻译版。
https://overreacted.io