JavaScript变量和数据类型初学者指南

Scott Molinari ， Vildan Softic和Chris Perry同行评审了《 JavaScript变量和数据类型初学者指南》。 感谢所有SitePoint的同行评审人员使SitePoint内容达到最佳状态！

因此，您已经决定学习JavaScript，这是网络的编程语言。 如果这似乎是艰巨的旅程，并且您不知道从哪里开始，那么这里有一个小秘密：学习编程技巧不需要任何特殊技能，每个人都从零开始。 一次迈出一步，您就会到达那里。

本指南适合我吗？

如果有任何适合您的内容，您将从本指南中受益：

• 您以前从未使用过编程语言。
• 您以前从未使用过JavaScript。
• 您曾经尝试过学习JavaScript，但是发现资源不足或很难遵循。
• 您了解一些JavaScript，但是想重温基础知识。

在本文中，我们将重点介绍基础知识：语法，变量，注释和数据类型。 这样做的好处是，您可以将在此了解到的JavaScript概念应用于将来学习另一种编程语言。

免责声明：本指南适用于JavaScript和编程的完整初学者。 这样，将以简化的方式介绍许多概念，并使用严格的ES5语法。

准备？ 让我们开始吧！

什么是JavaScript？

JavaScript是用于使网站动态和交互式的编程语言。 它是一种客户端编程语言，这意味着代码将在用户的Web浏览器中执行。 随着Node.js和其他技术的出现，它也可以用作服务器端语言，使其功能极为丰富。 JavaScript主要用于前端Web开发，并与HTML和CSS紧密协作。

注意： Java不是JavaScript。 这是另一种语言，名称令人困惑。

要求

您已经具有开始编写和使用JavaScript的先决条件。 您所需要的只是一个Web浏览器来查看代码，以及一个文本编辑器来编写代码。 您当前使用的浏览器非常完美（Chrome，Firefox，Safari，Edge等）。 您的计算机已预装了记事本（Windows）或TextEdit（Mac），但我建议您安装Atom或Brackets ，它们是专门为编码而设计的免费程序。

CodePen是一个允许您编写代码和进行实时演示的网站，它是开始遵循和练习的最简单方法。

基本术语

程序员编写程序，就像作者编写书一样。

程序只是计算机可以读取并用来执行任务的一组指令。 每个单独的指令都是称为语句的代码行，类似于书中的句子。 英文句子以句点结尾，而JavaScript语句通常以分号结尾。 语法是指定义语言结构的符号和规则，类似于语法和标点符号，并且以JavaScript语句结尾的分号是语法的一部分。

注释

注释是用代码编写的易于阅读的注释。

注释以简单的英语编写，以解释代码。 尽管注释从技术上讲不会在程序中执行任何功能，但养成适当的文档习惯以帮助您或将来的合作者理解代码意图的关键至关重要。

JavaScript有两种类型的注释：

• 一行注释 ，写为两个正斜杠//然后是注释。

// This is a single line comment.

• 多行注释 ，它夹在/*和*/ ，可以跨越多行。

/* This is a comment.
It's a multi-line comment.
Also a haiku. */

变数

变量是存储数据值的容器。

您知道变量可以更改。 在基本代数中，它是代表数字的字母。 x是一个公共变量名，但是可以很容易地用y ， z或其他名称表示。

最初， x没有值或意义，但是您可以对其应用值。

x = 5

现在， x代表5 。 您可以将x视为存储5的容器，这是一个数字。

在JavaScript中，变量的工作原理相同，除了变量可以包含多个数字以外，还可以包含各种数据值，我们将在本文结尾处进行介绍。

使用var关键字创建和声明变量。 我们可以使用上面的代数示例创建一个JavaScript语句。

var x = 5; // the variable x contains the numeric value of 5.

基于到目前为止所学的知识，您可以看到我们有一个JavaScript语句，该语句声明一个变量（ x ），为数字数据类型（ 5 ）分配一个等号（ = ），并用普通英语解释它带有注释（ // ）。 该语句以分号（ ; ）结尾。

变量仅在首次使用时才需要用var声明，并且顾名思义，变量可以更改。

var x = 5; // x was worth 5
x = 6; // now it's worth 6

一个变量一次只能包含一个值，并且由于该程序是从上到下执行的，因此x的值现在为6 。

这是具有不同数据类型的变量的示例。

var greeting = "Oh hi, Mark!";

现在greeting变量包含字符串Oh hi, Mark! 。

有关变量的一些重要事项：

• 变量名称可以包含字母，数字，美元符号（ $ ）和下划线（ _ ），但不能以数字开头。
• 变量不能是保留关键字列表中的任何单词。
• 变量区分大小写。
• 命名约定为camelCase ，其中变量始终以小写字母开头，但随后的每个单词都以大写字母开头。

提示：尽管变量可以有任何名称，但选择描述性且简洁的名称很重要。

资料类型

既然我们了解了变量，就可以了解变量可以容纳的数据类型。

数据类型是数据的分类。 编程语言需要具有不同的数据类型才能与值正确交互。 您可以使用数字进行数学运算，但不能使用句子进行数学运算，因此计算机会对它们进行不同的分类。 有六种原始 （基本）数据类型：字符串，数字，布尔值，null，未定义和符号（ES6中的新增功能）。 基元只能保存一个值。 不属于这些原语之一的任何对象都是Object 。 对象可以包含多个值。

JavaScript被称为弱类型语言 （或宽松类型 ），这意味着该语言将根据您使用的语法自动确定数据类型。

测试中

alert()和console.log()是在JavaScript中打印值的两种简单方法。

var x = 5;

alert(x);
console.log(x);

这是这些方法的演示。 alert是一个弹出窗口， console.log将打印到Inspector，您可以通过右键单击浏览器并选择Inspect来找到 。 在整篇文章中，我将不再引用这些内容，因此您可以选择最适合自己练习的一种。 我建议避免使用alert ，因为这很烦人。

您总是可以使用typeof找出变量的类型。

var answer = 42;

typeof answer // returns number

弦乐

字符串是一系列字符。

包含文本的任何数据都将由字符串表示。 名称字符串很可能起源于早期的程序员，他们回想起字符串上的珠子。

• 字符串可以用双引号 （ " " ）引起来：

  "Pull the string, and it will follow wherever you wish."; // double   quoted string
  

• 或单引号 （ ' ' ）：

  'Push it, and it will go nowhere at all.'; // single quoted string
  

注意：单引号通常称为撇号，不要与反引号混淆，反引号始终位于键盘的左侧。

字符串的两端必须匹配，否则，两者之间没有区别–它们只是编写字符串的不同方式。

但是，如果我想要写什么我在一个单引号字符，或一个双引号字符串报价人吗？ 那不会破坏字符串吗？

它将，并且有两种选择可以解决这一问题。 您可以安全地使用相反类型的引号：

"Damn it, man, I'm a doctor, not a torpedo technician!"; // using single quotes within a double quoted string
'"Do. Or do not. There is no try." - Yoda'; // using double quotes in a single quoted string

在整个项目中，为字符串选择一种样式以保持一致性很重要。 您可以使用反斜杠（ \ ）来转义字符串。

'Damn it, man, I\'m a doctor, not a torpedo technician!'; 
"\"Do. Or do not. There is no try.\" - Yoda";

我们可以将字符串应用于变量。 让我们使用我的greeting示例。

var greeting = "Oh hi, Mark!";

字符串也可以在称为串联的过程中链接在一起。 可以使用加号（ + ）将变量和字符串连接在一起。

var greeting = "Oh hi, " + "Mark" + "!"; // returns Oh hi, Mark!

请注意，空格也是字符串中的字符。 在下面的示例中，我们将看到串联如何有用。

var message = "Oh hi, ";
var firstName = "Mark";
var bam = "!";

var greeting = message + firstName + bam; // returns Oh hi, Mark!

现在，所有字符串都由可以更改的变量表示。 如果您曾经登录过某个应用程序（例如您的电子邮件）并收到了您的姓名打招呼，则可以看到您的姓名只是他们系统中变量中的一个字符串。

号码

数字是数值。

数字没有像字符串那样与它们关联的任何特殊语法。 如果将数字放在引号（ "5" ）中，则它不会被视为数字，而是字符串中的字符。 数字可以是整数或小数（称为浮点数），并且可以具有正值或负值。

var x = 5; // whole integer
var y = 1.2; // float
var z = -76; // negative whole integer

一个数字最多可以是15位数字。

var largeNumber = 999999999999999; // a valid number

您可以使用数字进行常规数学运算-加法（ + ），减法（ - ），除法（ / ）和乘法（ + ）。

var sum = 2 + 5; // returns 7
var difference = 6 - 4; // returns 2

您可以使用变量进行数学运算。

var elves = 3;
var dwarves = 7;
var men = 9;
var sauron = 1;

var ringsOfPower = elves + dwarves + men + sauron; // returns 20

还有其他两种特殊数字类型。

N

NaN意思是不是数字，即使从技术上讲它是数字类型。 NaN是尝试对其他数据类型进行不可能的数学运算的结果。

var nope = 1 / "One"; // returns NaN

例如，尝试将数字除以字符串会导致NaN 。

无限

Infinity技术上讲， Infinity也是一个数字，要么是除以0的乘积，要么是计算的数字太大。

var beyond = 1 / 0; // returns Infinity

布尔型

布尔值是true或false的值。

布尔值在编程中非常常用，用于何时值可以在yes和no，on和off或true和false之间切换。 布尔值可以表示可能更改的事物的当前状态。

例如，我们将使用布尔值来指示是否选中了复选框。

var isChecked = true;

通常，布尔值用于检查两个事物是否相等，或者数学方程式的结果是对还是错。

/* Check if 7 is greater than 8 */
7 > 8; // returns false

/* Check if a variable is equal to a string */
var color = "Blue";

color === "Blue"; // returns true

注意：单个等号（ = ）将一个值应用于另一个。 双（ == ）或三等号（ === ）检查两个事物是否相等。

未定义

未定义的变量没有值。

使用var关键字，我们声明了一个变量，但是直到为其赋值之前，它都是不确定的。

var thing; // returns undefined

如果不使用var声明变量，那么它仍然是未定义的。

typeof anotherThing; // returns undefined

空值

空值是什么都不表示。

Null是故意没有任何值。 它表示不存在的东西，也不是其他任何数据类型。

var empty = null;

null和undefined之间的区别相当细微，但是主要区别是null是有意为空的值。

符号

符号是唯一且不可变的数据类型。

符号是随最新的JavaScript版本（ ES6 ）出现的一种新的原始数据类型。 其主要特征是每个符号都是完全唯一的令牌，这与其他可以覆盖的数据类型不同。

由于它是一种高级且很少使用的数据类型，因此我不再赘述，但是知道它的存在很有用。

var sym = Symbol();

对象

对象是名称/值对的集合。

任何不只是字符串，数字，布尔值，null，未定义或符号的值都是一个object 。

您可以创建带有一对花括号（ {} ）的对象。

var batman = {};

对象由属性和方法组成 。 属性是对象的作用 ，方法是对象的作用 。 回到类比，属性像名词和形容词，方法像动词。

属性	方法
batman.firstName	batman.fight（）
蝙蝠侠定位	batman.jump（）

我们可以使用名称/值对（有时称为键/值对）将某些属性应用于batman对象。 它们将以逗号分隔并写为propertyName: propertyValue 。

var batman {
  firstName: "Bruce", // string
  lastName: "Wayne", 
  location: "Gotham", 
  introduced: 1939, // number
  billionaire: true, // Boolean
  weakness: null // null
};

注意：对象属性列表中的最后一项不以逗号结尾。

如您所见，我们可以将任何原始数据类型用作对象中的值。 我们可以用点（ . ）检索单个值。

batman.firstName; // returns Bruce, a string

我们还可以使用方括号表示法检索值。

batman["firstName"]; // returns Bruce

JavaScript属性名称必须是有效的JavaScript字符串或数字文字。 如果名称以数字开头或包含空格，则必须使用方括号表示法对其进行访问。 阅读：MDN

batman.secret identity; // invalid
batman["Secret Identity"]; // valid

一种方法执行一个动作。 这是一个简单的例子。

var batman {
  firstName: "Bruce",
  lastName: "Wayne", 
  secretIdentity: function() { // method
    return this.firstName + " " + this.lastName;
  }
};

我有一个function ，而不是简单的数据类型作为值。 该function this对象的firstName和lastName串联起来并返回结果。 在示例中， this与batman相同，因为它位于对象（ {} ）内。

batman.secretIdentity(); // returns Bruce Wayne, a concatenation of two properties

用括号表示方法。 （ () ）。

数组

数组将列表存储到单个变量中。

由于数组包含多个值，因此它是一种对象。

您可以创建带有一对直括号（ [] ）的数组。

var ninjaTurtles = [];

数组不包含名称/值对。

var ninjaTurtles = [
  "Leonardo",
  "Michelangelo",
  "Raphael",
  "Donatello"
];

您可以通过引用数组的index来获得单个值。 在编程中，计数从零开始，因此列表中的第一项始终为[0] 。

var leader = ninjaTurtles[0]; // assigns Leonardo to the leader variable

您可以使用length属性查看数组中有多少个项目。

ninjaTurtles.length; // returns 4

概括

我们在本文中介绍了很多内容。 您现在应该对常见的编程概念，术语，语法和基础知识有了更好的了解。 至此，您已经了解了有关JavaScript变量和数据类型的所有知识，现在您可以继续操作这些数据和构建程序了！

From: https://www.sitepoint.com/beginners-guide-javascript-variables-and-datatypes/