这是用户在 2024-5-24 17:08 为 https://justjavascript.com/the-javascript-universe 保存的双语快照页面,由 沉浸式翻译 提供双语支持。了解如何保存?
Skip to content

The JavaScript Universe

Dan Abramov
Dan Abramov
episode 02

In the beginning was the Value.
起初有价值。

What is a value? It’s hard to say.
什么是价值?很难说。

What is a point in geometry? What is a word in human language? A value is a fundamental concept in JavaScript—so we can’t define it through other terms.
什么是几何中的点?什么是人类语言中的词?在 JavaScript 中,值是一个基本概念——因此我们无法通过其他术语来定义它。

Instead, we’ll define it through examples. Numbers and strings are values. Objects and functions are values, too.
相反,我们将通过示例来定义它。数字和字符串是值。对象和函数也是值。

There are also a lot of things that are not values, like the pieces of our code—our if statements, loops, and variable declarations, for example.
还有很多东西不是值,比如我们的代码片段——我们的 if 语句、循环和变量声明等。

Values and Code 值和代码

As we start building our mental model, one of the first common misconceptions we need to clear up is that values are our code. Instead, we need to think of them separately—our code interacts with values, but values exist in a completely separate space.
当我们开始构建我们的心理模型时,我们需要澄清的第一个常见误解是,值就是我们的代码。相反,我们需要将它们分开思考——我们的代码与值交互,但值存在于完全独立的空间。

To distinguish between values and code in my JavaScript program, I like to imagine this drawing of the Little Prince by Antoine de Saint-Exupéry:
为了在我的 JavaScript 程序中区分值和代码,我喜欢想象安托万·德·圣-埃克苏佩里画的小王子这幅画:

I’m standing on a small planet, holding a list of instructions. This list is my program—my code. As I read through my list of instructions, I can see a lot going on—there are if statements, variable declarations, commas and curly braces.
我站在一个小星球上,手里拿着一份指令清单。这份清单就是我的程序——我的代码。当我阅读我的指令清单时,我可以看到很多内容——有 if 语句、变量声明、逗号和大括号。

My code contains instructions like “make a function call,” “do this thing many times,” or even “throw an error.” I read through these instructions step by step from the surface of my little world.
我的代码包含诸如“调用一个函数”、“多次执行此操作”甚至“抛出错误”之类的指令。我从我的小世界的表面一步一步地阅读这些指令。

But every once in a while, I look up.
但每隔一段时间,我会抬头看看。

On a clear night, I see the different values in the JavaScript sky: booleans, numbers, strings, symbols, functions and objects, null and undefined—oh my! I might refer to them in my code, but they don’t exist inside my code.
在一个晴朗的夜晚,我看到 JavaScript 天空中的不同值:布尔值、数字、字符串、符号、函数和对象, nullundefined ——天哪!我可能会在我的代码中引用它们,但它们并不存在于我的代码中。

In our JavaScript universe, values float in space.
在我们的 JavaScript 宇宙中,值漂浮在空间中。

“Hold on,“ you might say, “I always thought of values as being inside of my code!” Here, I’m asking you to take a leap of faith. It will take a few more modules for this mental model to pay off. Give it five minutes. I know what I’m doing.
“等一下,”你可能会说,“我一直以为值存在于我的代码中!”在这里,我要求你做一次信任的飞跃。这需要几个模块后这种思维模型才能得到回报。给它五分钟。我知道自己在做什么。

Values 价值

Broadly, there are two kinds of values.
广义上,有两种价值。

Primitive Values 原始值

Primitive values are like stars—cold and distant, but always there when I need them. Even from the surface of my small planet, I can find them and point them out. They can be numbers and strings, among other things. All primitive values have something in common: They are a permanent part of our JavaScript universe. I can point to them, but I can’t create, destroy, or change them.
原始值就像星星——寒冷而遥远,但总是在我需要它们的时候出现。即使在我这个小星球的表面,我也能找到它们并指出它们。它们可以是数字和字符串,等等。所有原始值都有一个共同点:它们是我们 JavaScript 宇宙的永久部分。我可以指向它们,但不能创建、销毁或更改它们。

To see primitive values in practice, open your browser’s console and log them:
要在实践中查看原始值,请打开浏览器的控制台并记录它们:

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

Objects and Functions 对象和函数

Objects and functions are also values but, unlike primitive values, I can manipulate them from my code. If primitive values are like distant stars, then objects and functions are more like asteroids floating around my planet. They’re not part of my code, but they’re close enough to manipulate.
对象和函数也是值,但与原始值不同,我可以从我的代码中操作它们。如果原始值像遥远的星星,那么对象和函数更像是围绕我的星球漂浮的小行星。它们不是我代码的一部分,但它们足够接近可以操作。

Fun Fact 有趣的事实

Functions are objects, but because they include a few unique additional features, we’re going to refer to them separately to avoid confusion.
函数是对象,但由于它们包含一些独特的附加功能,我们将单独提及它们以避免混淆。

Go ahead and log a few of them to the browser console:
继续将其中一些记录到浏览器控制台:

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

Notice how the browser console displays them differently from primitive values. Some browsers might display an arrow before them, or do something special when you click them. If you have a few different browsers installed, compare how they visualize objects and functions.
注意浏览器控制台如何与原始值不同地显示它们。一些浏览器可能会在它们前面显示一个箭头,或者在你点击它们时做一些特别的事情。如果你安装了几个不同的浏览器,请比较它们如何可视化对象和函数。

Types of Values 值的类型

At first, all values in the JavaScript cosmos might look the same—just bright dots in the sky. But we are here to study all of the different things floating above us in our JavaScript universe, so we’ll need a way to categorize them.
起初,JavaScript 宇宙中的所有值看起来可能都一样——只是天空中的亮点。但我们在这里是为了研究我们 JavaScript 宇宙中漂浮的所有不同事物,所以我们需要一种方法来对它们进行分类。

We can break values down into types—values of the same type behave in similar ways. As an aspiring astronomer, you might want to know about every type of value that can be observed in the JavaScript sky.
我们可以将值分解为类型——相同类型的值以类似的方式表现。作为一个有抱负的天文学家,你可能想知道在 JavaScript 天空中可以观察到的每种类型的值。

After almost twenty-five years of studying JavaScript, the scientists have only discovered nine such types:
经过将近二十五年的研究,科学家们只发现了九种这样的类型:

Primitive Values 原始值

  • Undefined (undefined), used for unintentionally missing values.
    未定义 ( undefined ),用于无意中缺失的值。
  • Null (null), used for intentionally missing values.
    空 ( null ),用于有意缺失的值。
  • Booleans (true and false), used for logical operations.
    布尔值( truefalse ),用于逻辑运算。
  • Numbers (-100, 3.14, and others), used for math calculations.
    数字( -1003.14 和其他),用于数学计算。
  • BigInts (uncommon and new), used for math on big numbers.
    大整数(不常见且新),用于大数的数学运算。
  • Strings ("hello", "abracadabra", and others), used for text.
    字符串( "hello""abracadabra" ,以及其他),用于文本。
  • Symbols (uncommon), used to perform rituals and hide secrets.
    符号(不常见),用于进行仪式和隐藏秘密。

Objects and Functions 对象和函数

  • Objects ({} and others), used to group related data and code.
    对象( {} 及其他),用于分组相关数据和代码。
  • Functions (x => x * 2 and others), used to refer to code.
    函数( x => x * 2 和其他),用于指代代码。

No Other Types 没有其他类型

You might ask: “But what about other types I have used, like arrays?”
你可能会问:“但是我用过的其他类型,比如数组呢?”

In JavaScript, there are no other fundamental value types other than the ones we have just enumerated. The rest are all objects! For example, even arrays, dates, and regular expressions fundamentally are objects in JavaScript:
在 JavaScript 中,除了我们刚刚列举的那些基本值类型之外,没有其他的基本值类型。其它的都是对象! 例如,即使是数组、日期和正则表达式从根本上来说也是 JavaScript 中的对象:

console.log(typeof []); // "object"
console.log(typeof new Date()); // "object"
console.log(typeof /(hello|goodbye)/); // "object"
Fun Fact 有趣的事实

“I see,” you might reply, “this is because everything is an object!” Alas, this is a popular urban legend, but it’s not true.
“我明白了,”你可能会回答,“这是因为一切都是对象!”唉,这是一种流行的都市传说,但这不是真的。

Although code like "hi".toUpperCase() makes "hi" seem like an object, this is nothing but an illusion. JavaScript creates a temporary object when you do this, and then immediately discards it. It’s fine if this mechanism doesn’t click for you yet. It is indeed rather confusing!
虽然像 "hi".toUpperCase() 这样的代码使 "hi" 看起来像一个对象,但这只是一个幻觉。JavaScript 在你这样做的时候创建了一个临时对象,然后立即将其丢弃。如果这个机制还没有让你理解,那也没关系。这确实相当令人困惑!

For now, you only need to remember that primitive values, such as numbers and strings, are not objects.
目前,你只需要记住,原始值(如数字和字符串)不是对象。

Checking a Type 检查类型

There are only nine types of values, but how do we know a particular value’s type?
只有九种类型的值,但我们如何知道特定值的类型?

If we want to check a value’s type, we can ask with the typeof operator. Below are a few examples you can try in the browser console:
如果我们想检查一个值的类型,可以使用 typeof 运算符。以下是一些可以在浏览器控制台中尝试的示例:

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

Strictly speaking, using parens isn’t required with typeof. For example, typeof 2 would work just as fine as typeof(2). However, sometimes parens are required to avoid an ambiguity. One of the cases below would break if we omitted the parens after typeof. Try to guess which one it is:
严格来说,使用括号并不是 typeof 的必要条件。例如, typeof 2typeof(2) 一样好用。然而,有时为了避免歧义需要使用括号。以下案例之一在省略 typeof 后的括号时会出错。猜猜是哪一个:

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

You can verify your guess in the browser console.
你可以在浏览器控制台中验证你的猜测。

You might have questions. Good. If you ask a question, our JavaScript universe might answer it! Provided, of course, that you know how to ask.
你可能会有问题。很好。如果你问一个问题,我们的 JavaScript 宇宙可能会回答你!当然,前提是你知道如何提问。

Expressions 表达式

There are many questions JavaScript can’t answer. If you want to know whether it’s better to confess your true feelings to your best friend or to keep waiting until you both turn into skeletons, JavaScript won’t be of much help.
有很多问题是 JavaScript 无法回答的。如果你想知道是否该向你最好的朋友坦白你的真实感情,或者继续等待直到你们都变成骷髅,JavaScript 也无能为力。

But there are some questions that JavaScript would be delighted to answer. These questions have a special name—they are called expressions.
但是有一些问题,JavaScript 会很乐意回答。这些问题有一个特殊的名字——它们被称为表达式。

If we “ask” the expression 2 + 2, JavaScript will “answer” with the value 4.
如果我们“询问”表达式 2 + 2 ,JavaScript 会用值 4 “回答”。

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

For another example, remember how we determined the type of a value with typeof. In fact, that was also an expression! Our “question” was typeof(2) and the JavaScript universe answered it with the string value "number".
再举一个例子,记得我们如何用 typeof 确定一个值的类型。事实上,那也是一个表达式!我们的“问题”是 typeof(2) ,JavaScript 宇宙用字符串值 "number" 回答了它。

console.log(typeof 2); // "number"

Expressions are questions that JavaScript can answer. JavaScript answers expressions in the only way it knows how—with values.
表达式是 JavaScript 可以回答的问题。JavaScript 用它唯一知道的方式来回答表达式——用值。

If the word “expression” confuses you, think of it as a piece of code that expresses a value. You might hear people say that 2 + 2 “results in” or “evaluates to” 4. These are all different ways to say the same thing.
如果“表达式”这个词让你感到困惑,把它想象成表达一个值的代码片段。你可能会听到人们说 2 + 2 “结果是”或“计算为” 4 。这些都是表达同一个意思的不同方式。

We ask JavaScript 2 + 2, and it answers with 4. Expressions always result in a single value. Now we know enough about expressions to be dangerous!
我们问 JavaScript 2 + 2 ,它用 4 回答我们。表达式总是得到单一的值。现在我们对表达式有足够的了解,可以无所畏惧了!

Recap 回顾

Let’s recap what we know so far:
让我们回顾一下到目前为止我们所知道的:

  1. There are values, and then there’s code. We can think of values as different things “floating” in our JavaScript universe. They don’t exist inside our code, but we can refer to them from our code.
    有值,然后有代码。我们可以将值视为在我们的 JavaScript 宇宙中“漂浮”的不同事物。它们不存在于我们的代码中,但我们可以从代码中引用它们。
  2. There are two categories of values: there are Primitive Values, and then there are Objects and Functions. In total, there are nine separate types. Each type serves a specific purpose, but some are rarely used.
    有两类值:原始值和对象与函数。总共有九种不同的类型。每种类型都有特定的用途,但有些类型很少使用。
  3. Some values are lonely. For example, null is the only value of the Null type, and undefined is the only value of the Undefined type. As we will learn later, these two lonely values are quite the troublemakers!
    有些值是孤独的。例如, null 是 Null 类型的唯一值,而 undefined 是 Undefined 类型的唯一值。正如我们稍后将了解到的,这两个孤独的值是相当麻烦的!
  4. We can ask questions with expressions. Expressions exist in our code, so they are not values. Rather, JavaScript will answer our expressions with values. For example, the 2 + 2 expression is answered with the value 4.
    我们可以用表达式来提问。表达式存在于我们的代码中,所以它们不是值。相反,JavaScript 会用值来回答我们的表达式。例如, 2 + 2 表达式的答案是值 4
  5. We can inspect the type of something by wrapping it in a typeof expression. For example, typeof(4) results in the string value "number".
    我们可以通过将某物包装在 typeof 表达式中来检查其类型。例如, typeof(4) 会产生字符串值 "number"

These might seem like small steps, but we’re laying the foundation for everything else to come. We’re building our JavaScript universe, together. There are 9 more chapters with exercises for you to practice.
这些步骤看起来可能很小,但我们正在为接下来的一切奠定基础。我们正在一起构建我们的 JavaScript 宇宙。还有 9 章练习供你练习。

Ready for more? 准备好迎接更多挑战了吗?

Just JavaScript is my distilled mental model of how JavaScript works and a collaboration with Maggie Appleton.
纯粹的 JavaScript 是我对 JavaScript 工作原理的提炼心智模型,并与 Maggie Appleton 合作完成。

a crystal ball
US$42
yours forever 永远属于你

Includes all 10 episodes + quiz exercises.
包括所有 10 集+测验练习。

  • Mental Models ・心理模型
  • The JavaScript Universe ・JavaScript 宇宙
  • Values and Variables ・数值和变量
  • Studying from the Inside
    ・从内部学习
  • Meeting the Primitive Values
    ・遇见原始值
  • Meeting Objects and Functions
    ・会议对象和功能
  • Equality of Values ・值的相等性
  • Properties ・属性
  • Mutation ・突变
  • Prototypes ・原型
30 day money back guarantee
30 天退款保证
原文
请对此翻译评分
您的反馈将用于改进谷歌翻译