javascript 符號
by Kevin Kononenko
凱文·科諾年科(Kevin Kononenko)
理解JavaScript中“ =”符號的直觀指南 (A Visual Guide to Understanding the “=” Sign in JavaScript)
實際上,對于第一次學習編碼的人來說,賦值運算符(或“ =”符號)實際上會產生誤導。 (The assignment operator, or “=” sign, is actually very misleading for anyone that is learning to code for the first time.)
You are taught about the concept of the equals sign for your entire life in math class.
在數學課上,您會學到一生的等號概念。
2 x 3 = 6
2 x 3 = 6
x2-4 = 0
x2-4= 0
The things on the left side of the equation are equal in value to the things on the right side of the equation. They could be flipped at any time, and the statement would still be true.
等式左側的值與等式右側的值相等。 它們可以隨時翻轉,但聲明仍然正確。
And then JavaScript comes in like the Kool-Aid man and completely destroys this understanding.
然后,JavaScript像Kool-Aid一樣出現,并徹底破壞了這種理解。
Oh, and don’t get me started with the concept of variables. In algebra class, we are taught that variables can only be equal to numbers that satisfy the equation. For example,
哦,別讓我開始使用變量的概念。 在代數課上,我們被教導變量只能等于滿足方程式的數字。 例如,
x2-4x+3 = 0
x2-4x+ 3 = 0
In the equation above, x can only be 1 or 3. But in JavaScript, the concept of a variable is actually quite different than what you learnt in algebra class.
在上面的等式中, x只能是1或3。但是在JavaScript中,變量的概念實際上與您在代數類中學到的完全不同。
This is a huge issue! It means that every time a newbie looks at an “=” sign when they are learning about variables, they need to repeat in their head over and over:
這是一個巨大的問題! 這意味著,每當新手學習變量時,每次查看“ =”符號時,都需要反復反復進行以下操作:
It’s not what you think it means.
這不是您認為的意思。
It’s not what you think it means.
這不是您認為的意思。
It’s not what you think it means.
這不是您認為的意思。
I wanted to create a more memorable way to explain variables than re-teaching what an “=” sign means. By the end of this tutorial, you will understand why the “=” in variable assignment is more like a ramp that loads up a truck.
我想創建一種比重新教“ =”符號更有意義的方式來解釋變量。 在本教程結束時,您將理解為什么變量分配中的“ =”更像是裝載卡車的坡道 。
This should create a clear guide about the purpose of variables and how to use them throughout your script.
這應該為變量的目的以及如何在整個腳本中使用它們創建清晰的指南。
變量的名稱和值 (The Name and the Value of a Variable)
Variables are containers for carrying values within your script. In some ways, they are the opposite of variables from algebra.
變量是用于在腳本中攜帶值的容器。 在某些方面,它們與代數變量相反。
- You can always give them a new value and restart your script. There is no “permanent” equality to satisfy some condition. 您總是可以給他們一個新值,然后重新啟動腳本。 沒有滿足某些條件的“永久”平等。
The left side of the statement has a completely different purpose than the right side of the statement.
該語句的左側與該語句的右側具有完全不同的目的。
Here is an example:
這是一個例子:
let days = 7;
This is called declaring the variable. It creates a new truck called days that can drive around your script and deliver its value OR pick up a new value.
這稱為聲明變量。 它創建了一個名為days的新卡車,可以圍繞您的腳本行駛并提供其價值或獲取新的價值 。
The let keyword announces that you are creating a new variable. Or, in the analogy we are about to use, creating a new truck.
let 關鍵字宣布您正在創建一個新變量。 或者,以此類推,我們將使用它來創建一輛新卡車。
The variable needs a unique name, which is days here. This distinguishes this truck from all the other trucks.
變量需要一個唯一的名稱 ,這里是天 。 這使這輛卡車與所有其他卡車區分開來。
The assignment operator, or “=” sign, loads the value 7, into the truck.
分配運算符 (或“ =”符號)將值 7裝入卡車。
It is very hard to break the habit of looking at this like it is math class all over again, so I am going to explain a little more about the different parts of the variable truck.
很難重新習慣像數學課這樣的習慣,所以我將對可變卡車的不同部分進行更多的解釋。
This is the left side of the variable statement. It is not an equation! We are creating a truck with a specific name that we can use over and over again. Any time we look at the left side of the statement, we are calling in a truck with a specific name.
這是變量語句的左側。 這不是方程式! 我們正在創建具有特定名稱的卡車,我們可以反復使用它。 每當我們查看語句的左側時,我們都在呼叫帶有特定名稱的卡車。
The assignment operator is just like the ramp of a truck. It loads up a new value. You can load up a new value pretty much any time with the let keyword.
分配操作員就像卡車的坡道。 它加載了一個新值。 您幾乎可以隨時使用let 關鍵字加載新值。
As a programmer, we are continuously creating new variables, loading up values and watching the changes around the script.
作為程序員,我們正在不斷創建新變量,加載值并觀察腳本周圍的變化。
將值重新分配給變量 (Reassigning Values to Variables)
So far, we can create a truck that can drive around the script and deliver its value. But what about changing the value that the truck is carrying around?
到目前為止,我們可以創建一輛可以圍繞腳本行駛并實現其價值的卡車。 但是,如何改變卡車隨身攜帶的價值呢?
The let keyword allows us to create mutable variables whose values can be changed. If we used the const keyword, it would mean that the value is immutable and unchangeable.
let 關鍵字使我們可以創建可變變量,其值可以更改。 如果我們使用const關鍵字,則意味著該值是不可變的且不可更改。
In JavaScript, unlike math, you can simply assign a new value to the variable. Our days variable currently stands for the 7 days in a week. But what if we wanted it to stand for the 5 weekdays? Here is the code we could use.
在JavaScript中,與數學不同,您可以簡單地為變量分配一個新值。 我們的天數變量當前代表一周中的7天。 但是,如果我們希望它能在5個工作日內站立,該怎么辦? 這是我們可以使用的代碼。
In line 2, we create the days variable with a value of 7.
在第2行中,我們創建的days變量的值為7。
On line 4, we re-assign the value of the variable. It is now 5.
在第4行,我們重新分配變量的值。 現在是5。
- On line 6, the days truck arrives with the value of 5. 在第6行,天卡車到達的值為5。
In the GIF above, line 4 puts a new value in the truck that is later used in line 6.
在上面的GIF中,第4行在卡車中添加了一個新值,該值隨后在第6行中使用。
Here is what happens in line 6.
這是第6行發生的情況。
The variable days is not “equal” to anything! It merely carries around the value that you assign to it. This is much more control than you have in math class, where you must discover the value of the variable that satisfies the equation. Now, you are in control!
可變的天數不等于任何東西! 它僅包含您為其分配的值。 這比您在數學類中擁有的控制要多得多,在數學類中,您必須發現滿足方程式的變量的值。 現在,您已掌控一切!
為什么需要變量? (Why Do You Need Variables?)
Imagine that you are building an App that tells patients when to take their medication. You need to change the number of days per week based on the medication. Here is a quick snippet.
想象一下,您正在構建一個告訴患者何時服藥的應用程序。 您需要根據藥物更改每周的天數。 這是一個簡短的摘要。
- In line 2, days gets loaded up with a value of 7. 在第2行中,天的值是7。
- In line 4, the value of 5 gets loaded up instead. 在第4行中,取值為5。
In lines 4 and 6, you use the value of the days variable. Could you hard code this by simply putting the number 7 in line 4 and the number 5 in line 6? Of course you could!
在第4和第6行中,使用days變量的值 。 您能通過簡單地在第4行中輸入數字7和在第6行中輸入數字5來對此進行硬編碼嗎? 當然可以!
But, as your App grows, you will find that variables are helpful for 2 reasons:
但是,隨著您的應用程序的增長,您會發現變量有幫助的原因有兩個:
Instantly changing all the appropriate values at once. Let’s say you had three medications that need to be taken for 7 days a week, and three medications that need to be taken for 5 days a week. You don’t want to constantly change the value of days back and forth! You would instead want to use two separate variables. That gives you two separate trucks to drive values around your script.
立即一次更改所有適當的值。 假設您有三種藥物需要每周7天服用,而三種藥物則需要每周5天服用。 你不想不斷地改變天的值來回! 相反,您想使用兩個單獨的變量。 這樣就可以給您兩個單獨的卡車來驅動腳本中的值。
Remembering what a value stands for. If you hard code a value, you may look back and say, why the heck is that 7? But, if you create a variable, you will remember that it stands for 7 days of the week so you can quickly change it if needed.
記住價值的含義。 如果您硬編碼一個值,您可能會回頭說,為什么那是7? 但是,如果創建一個變量,您會記住它代表一周的7天,因此您可以根據需要快速進行更改。
賦值運算符右側的變量名 (Variable Names on Right Side of the Assignment Operator)
So far, we have had a pretty hard rule. The name of the variable is on the left side of the assignment operator, while the value is on the right side.
到目前為止,我們有一個非常嚴格的規則。 變量的名稱在賦值運算符的左側,而值在右側。
But what if we have a situation like this?
但是,如果我們遇到這種情況怎么辦?
In line 4, the variable name is on both sides of the assignment operator! This is yet another reason why it is NOT an equals sign! In fact, the relationship between the two sides of the statement stays the same.
在第4行中,變量名稱在賦值運算符的兩側! 這是為什么它不是等號的另一個原因! 實際上,聲明兩側的關系保持不變。
In line 4, we load up a new value onto the days variable. Here is what that looks like.
在第4行中,我們將新值加載到days變量中。 看起來像這樣。
Notice how we start at the assignment operator and calculate the right side of the statement first? That is because we are assigning a new value to days here. We cannot touch the left side of the statement. Here is what happens next.
請注意,我們如何從賦值運算符開始并首先計算語句的右側? 那是因為我們在這里為天分配一個新值。 我們無法觸及聲明的左側。 接下來會發生什么。
The days truck pulls up twice in this case. The first time is on the right side of the equation to deliver the old value. And the second time is on the left side of the equation to pick up the new value for days.
在這種情況下,天卡車兩次起升。 第一次是在等式的右側,以傳遞舊值。 第二次是在等式的左側,以獲取幾天的新值。
Our new value for the days variable is 9. In our log statement on line 6, the console would log 9.
我們的days變量的新值為 9。在第6行的log語句中,控制臺將記錄9。
呼吁采取行動 (Call To Action)
Did you enjoy this? Give it a clap so others can discover it as well. And, if you want to get notified when I release future tutorials that use analogies, sign up here:
你喜歡這個嗎? 給它鼓掌,以便其他人也可以發現它。 而且,如果您希望在以后發布使用類比的教程時得到通知,請在此處注冊:
翻譯自: https://www.freecodecamp.org/news/a-visual-guide-to-understanding-the-sign-in-javascript-3de8495ab3f/
javascript 符號