变量是什么

一个变量，就是一个用于存放数值的容器。这个数值可能是一个用于累加计算的数字，或者是一个句子中的字符串。变量的独特之处在于它存放的数值是可以改变的。让我们看一个简单的例子:

Press me

var button = document.querySelector('button');

button.onclick = function() {

var name = prompt('What is your name?');

alert('Hello ' + name + ', nice to see you!'); }

在上面的例子中，点击按钮之后，第一行代码会在屏幕上弹出一个对话框，让你输入名字，然后存储输入的名字到一个变量。第二行代码将会显示包含你名字的欢迎信息，你的名字就是从之前的变量里面读取的。

变量的另一个特性就是它们能够存储任何的东西 -- 不只是字符串和数字。变量可以存储更复杂的数据，甚至是函数。你将在后续的内容中体验到这些用法。

我们说，变量是用来存储数值的，那么有一个重要的概念需要区分。变量不是数值本身，它们仅仅是一个用于存储数值的容器。你可以把变量想象成一个个用来装东西的纸箱子。

声明变量

要想使用变量，你需要做的第一步就是创建它 -- 更准确的说，是声明一个变量。声明一个变量的语法是在var关键字之后加上这个变量的名字

var myName;

var myAge;

提示: 在JavaScript中，所有代码指令都会以分号结尾 (;) — 如果忘记加分号，你的单行代码可能执行正常，但是在多行代码在一起的时候就可能出错。所以，最好是养成主动以分号作为代码结尾的习惯。提示: 千万不要把两个概念弄混淆了，“一个变量存在，但是没有数值”和“一个变量并不存在” — 他们完全是两回事 — 在前面你看到的盒子的类比中，不存在意味着没有可以存放变量的“盒子”。没有定义的值意味着有一个“盒子”，但是它里面没有任何值。

初始化变量

一旦你定义了一个变量，你就能够初始化它. 方法如下，在变量名之后跟上一个“=”，然后是数值:

myName = 'Chris';

myAge = 37; //你还可以向下面这样

var myName = 'Chris';

更新变量

一旦变量赋值，您可以通过简单地给它一个不同的值来更新它。试试在你的控制台中输入

关于变量命名的规则：

你可以给你的变量赋任何你喜欢的名字，但有一些限制。 一般你应当坚持使用拉丁字符(0-9,a-z,A-Z)和下划线字符。

你不应当使用规则之外的其他字符，因为它们可能引发错误，或对国际用户来说难以理解。变量名不要以下划线开头—— 以下划线开头的被某些JavaScript设计为特殊的含义，因此可能让人迷惑。变量名不要以数字开头。这种行为是不被允许的，并且将引发一个错误一个可靠的命名约定叫做 "小写驼峰命名法"，用来将多个单词组在一起，小写整个命名的第一个字母然后大写剩下单词的首字符。我们已经在文章中使用了这种命名方法让变量名直观，它们描述了所包含的数据。不要只使用单一的字母/数字，或者长句。变量名大小写敏感——因此myage与myAge是2个不同的变量。最后也是最重要的一点—— 你应当避免使用JavaScript的保留字给变量命名。保留字，即是组成JavaScript的实际语法的单词！因此诸如 var, function, let和 for等，都不能被作为变量名使用。浏览器将把它们识别为不同的代码项，因此你将得到错误。

age

myAge

init

initialColor

finalOutputValue

audio1

audio2

变量类型

可以为变量设置不同的数据类型。 ps：数据类型与数据结构并不是一回事

Number

你可以在变量中存储数字，不论这些数字是像30（也叫整数）这样，或者像2.456这样的小数（也叫做浮点数）。与其他编程语言不同，在 JavaScript 中你不需要声明一个变量的类型。当你给一个变量数字赋值时，不需要用引号括起来。

var myAge = 17;

String

字符串是文本的一部分。当你给一个变量赋值为字符串时，你需要用单引号或者双引号把值给包起来，否则JavaScript将会把这个字符串值理解成别的变量名。

var dolphinGoodbye = 'So long and thanks for all the fish';

Boolean

Boolean 的值有2种：true或false。它们通常被用于在适当的代码之后，测试条件是否成立。举个例子，一个简单的示例如下

var iAmAlive = true;

通常更加常用的是

var test = 6 < 9;

这是使用“小于”操作符（<）来测试6小于3。正如你所料的，将会返回true

Array-数组

数组是一个单个对象，其中包含很多值，方括号括起来，并用逗号分隔。尝试在您的控制台输入以下行

var myNameArray = ['Chris', 'Bob', 'Jim'];

当数组被定义以后，您可以使用以下所示的语法来访问相对应的值

myNameArray[0]; // should return 'Chris'

myNumberArray[2]; // should return 40

此处的方括号包含一个索引值，该值指定要返回的值的位置。 您可能已经注意到，计算机从0开始计数，而不是像我们人类那样的1。

Object

在编程中，对象是现实生活中的模型的一种代码结构。您可以有一个简单的对象，代表一个停车场，并包含有关其宽度和长度的信息，或者您可以有一个代表一个人的对象，并包含有关他们的名字，身高，体重，他们说什么语言，如何说 你好，他们，等等。

动态类型

JavaScript是一种“动态类型语言”，这意味着不同于其他一些语言(译者注：如C、JAVA)，您不需要指定变量将包含什么数据类型（例如number或string）

例如，如果你声明一个变量并给它一个带引号的值，浏览器就会知道它是一个字符串；

var myNumber = '500'; // oops, this is still a string

typeof myNumber;

myNumber = 500; // much better — now this is a number

typeof myNumber

尝试依次将上述代码输入您的控制台，看看结果是什么（无须输入//之后的注释）。 我们使用了一个名为typeof()的特殊函数 ——它会返回所传递给它的变量的数据类型。 第一次在上面的代码中调用它，它应该返回string，因为此时myNumber变量包含一个字符串'500'。 看看它第二次将返回什么。

JavaScript中的基础数学 - 数字与操作符

好吧，可能不是。有些人喜欢数学，有些人可能从在学校必须学习乘法表和长除法时就讨厌数学，还有人介于两者之间。但我们都不能否认，数学是生活的基本组成部分，我们离不了它。尤其如此，当我们学习编写 JavaScript 程序（或任何其他语言），我们所做的很多事情都依赖于处理数值数据，计算新值等。你将不会惊讶地认识到 JavaScript 有一套可用的全功能的数学功能。

数字类型

整数 例如：100,50，-8浮点数 有小数点的或者有小数位的 例如：12.3,5.4；双精度 这是一种特殊的浮点数，他们具有较高的精度，我们甚至有不同类型的数字系统！ 十进制是基数10（意味着它在每列使用0-9），但是我们也有这样的东西：二进制八进制十六进制十进制 我们经常用的1.首先声明一个变量，分别是浮点数与整数，再输入输入变量名来检查是否正确

var myInt = 5; var myFloat = 6.667

2.在JavaScript中有一个 typeof 的运算符，是用来检查所属对象的类型的

typeof myInt;

typeof myFloat;

算数运算符

算术运算符是我们用来做和的基本运算符

运算符 名称 作用 示例

加法 两个数相加。 6 + 9减法 从左边减去右边的数。 20 - 15乘法 两个数相乘。 3 * 7/ 除法 用右边的数除左边的数 10 / 5% 求余(有时候也叫取模) 在你将左边的数分成同右边数字相同的若干整数部分后，返回剩下的余数

8 % 3 (返回 2，将8分成3份，余下2 。)

运算符优先级

这是因为运算符优先级 - 一些运算符将在计算总和的结果（在编程中称为表达式）时被应用于其他运算符。 JavaScript中的运算符优先级与学校的数学课程相同 - 乘法和除法总是先完成，然后加法和减法（总和总是从左到右进行评估）。

如果要覆盖运算符优先级，可以首先对要显式处理的部分进行括号。

具体的查看这个

递增递减运算符

它们最常用于循环中，您将在以后的课程中了解。 例如，假设您想循环查看价格表，并为每个价格增加销售税。 您可以使用循环依次查看每个值，并在每种情况下进行必要的计算，以添加销售税。 当需要时，增量器用于移动到下一个值。 我们实际上提供了一个简单的例子，显示了如何完成 —— 在线查看效果，并 查看源代码，看看是否可以发现增量器！ 我们稍后将会详细介绍循环。

num++;num--；

您可以使浏览器以其他方式进行操作 - 递增/递减变量，然后返回值 - 将操作符放在变量的开头，而不是结束。 再次尝试上面的例子，但这次使用++ num1和--num2。

操作运算符

运算符 名称 作用 示例 等价于

+= 递增赋值 右边的数值加上左边的变量，然后再返回新的变量。 x = 3;

x += 4; x = 3;

x = x + 4;

-= 递减赋值 左边的变量减去右边的数值，然后再返回新的变量。 x = 6;

x -= 3; x = 6;

x = x - 3;

*= 乘法赋值 左边的变量乘以右边的数值，然后再返回新的变量。 x = 2;

x *= 3; x = 2;

x = x * 3;

/= 除法赋值 左边的变量除以右边的数值，然后再返回新的变量。 x = 10;

x /= 5; x = 10;

x = x / 5;

比较运算符

运算符 名称 作用 示例

=== 严格等于 测试左右值是否相同 5 === 2 + 4

!== 严格不等于 测试左右值是否相同 5 !== 2 + 3

< 小于 测试左值是否小于右值。 10 < 6

大于 测试左值是否大于右值 10 > 20

<= 小于或等于 测试左值是否小于或等于右值。 3 <= 2

= 大于或等于 测试左值是否大于或等于正确值。 5 >= 4

: 您可能会看到有些人在他们的代码中和!=来判断相等和不相等，这些都是JavaScript中的有效运算符，但它们与=/!==不同，前者测试值是否相同， 但是数据类型可能不同，而后者的严格版本测试值和数据类型是否相同。 严格的版本往往导致更少的错误，所以我们建议您使用这些严格的版本。

文本处理-JavaScript中的字符串

接下来，我们将把注意力转向字符串——这是在编程中调用的文本片段。在本文中，我们将了解在学习JavaScript时，您应该了解的所有常见的事情，例如创建字符串、在字符串中转义引号、并将它们连接在一起。

字符串-基本知识

就像我们处理数字一样，我们声明一个变量，用一个字符串值初始化它，然后返回值。这里惟一的区别是，在编写字符串时，我们需要在字符串上加上双引号。

var badString = This is a test;

var badString = 'This is a test;

var badString = This is a test';

这些行不起作用，因为没有引号的任何文本字符串都被假定为变量名、属性名、保留字或类似。如果浏览器不能找到它，那么将会引发语法错误(例如:"missing ; before statement")。

如果浏览器能够识别字符串从哪里开始，但是不能找到字符串的结尾符，如第二行所示，那么它则会提示这样的错误(“unterminated string literal”)。如果您写的程序目前也引发这样的错误，那么请你回过头来仔细检查你的代码，看是否漏写了引号

在引用字符串中引号应该是统一的。

转义字符串中的字符

一般是用来确保一些文本能够使用，而不是被解释器错误的解释为代码，而产生错误。

在JavaScript中，我们通过在字符之前放一个反斜杠来实现这一点。试试这个:

var bigmouth = 'I've got no right to take my place...';

连接字符串

连接是一个很花哨的编程词，意思是“连接在一起”。在JavaScript中连接字符串使用加号(+)操作符，我们用它来将数字加在一起，但是在这种情况下，它做了一些不同的事情。让我们在控制台中尝试一个例子。

var one = 'Hello, ';

var two = 'how are you?';

var joined = one + two;

joined;

变量 joined 的值的结果，它包含的值为 "Hello, how are you?"。

最后一个例子中， 我们只是把两个字符串连接在一起，但是你可以喜欢连接多少就多少个， 只需要在它们之间加上 + 操作符。试试这个：

var multiple = one + one + one + one + two;

multiple;

你还能用真实的字符串和变量来混合。试试这个：

var response = one + 'I am fine — ' + two;

response;

注意: 当您在您的代码中输入一个实际的字符串时，用单引号或双引号括起来，它被称为字符串文字。

数字与字符

当我们尝试添加(或连接)一个字符串和一个数字时，会发生什么?你可能认为他会报错，但是她并没有。在遇到这种情况下，解释器重名的将数字转换为字符串。你可以通过typeof测试一下这个变量类型究竟是数字还是字符串。

让我们在我们的控制台中尝试一下:

'Front ' + 242;

var myDate = '19' + '67';

typeof myDate;

如果您有一个数值变量，您想要将其转换为字符串，但不改变其他方式，或者您想要转换为一个数字而不改变的字符串变量，那么您可以使用以下两个构造:

如果可以的话， Number 对象将把传递给它的任何东西转换成一个数字。

试一试:

var myString = '123';

var myNum = Number(myString);

typeof myNum;

另一方面，每个数字都可以用一个名为 toString() 的方法，它将把它转换成等价的字符串。

试试这个:

var myNum = 123;

var myString = myNum.toString();

typeof myString;

有用的字符串方法

现在我们重申一遍—在javascript中，一切东西都可以被当作对象。例如我们创建一个字符串。

var string = 'This is my string';

获取字符串的长度 采用length方法 var browserType = 'mozilla'; browserType.length;检索特定的字符串字符在相关的注释中，您可以使用方括号表示法返回字符串中的任何字符 - 这意味着您可以在变量名的末尾包含方括号（[]）。 在方括号内，您可以包含要返回的字符的编号，例如，您要检索第一个字母，可以这样做：

browserType[0];

电脑从0开始，不是1！ 要检索任何字符串的最后一个字符，我们可以使用下面这行，将这种技术与我们上面看到的length属性相结合起来：

browserType[browserType.length-1];

mozilla”的长度为7，但由于计数从0开始，所以字符位置为6，因此需要长度为1。 例如，您可以使用它来查找一系列字符串的第一个字母，并按字母顺序排列。

在字符串中查找子字符串并提取它有时候你会想要找出一个较小的字符串是否存在于一个较大的字符串中（我们通常会说一个字符串中存在一个子字符串）。 这可以使用indexOf()方法来完成，该方法需要一个parameter — 你想要搜索的子字符串。 尝试以下：browserType.indexOf('zilla');结果是2，因为子字符串“zilla”从“mozilla”内的位置2（0，1，2 - 所以3个字符）开始。 这样的代码可以用来过滤字符串。 例如，假设我们有一个Web地址列表，但我们只想打印出包含“mozilla”的那些地址。这可以用另一种可能更有效的方式来实现。 尝试以下：browserType.indexOf('vanilla');这应该会得到-1的结果 - 当在主字符串中找不到子字符串（在本例中为“vanilla”）时返回-1。

您可以使用它来查找不包含子串“mozilla”的所有字符串实例，或者如果使用否定运算符，请执行以下操作。 你可以这样做：

if(browserType.indexOf('mozilla') !== -1) {

// do stuff with the string

}

当你知道字符串中的子字符串开始的位置，以及想要结束的字符时，slice()可以用来提取 它。 尝试以下：

browserType.slice(0,3);

这时返回"moz"——第一个参数是开始提取的字符位置，第二个参数是提取的最后一个字符的后一个位置。所以提取从第一个位置开始，直到但不包括最后一个位置。（此例中）你也可以说第二个参数等于被返回的字符串的长度。

此外，如果您知道要在某个字符之后提取字符串中的所有剩余字符，则不必包含第二个参数，而只需要包含要从中提取的字符位置 字符串中的其余字符。 尝试以下：

browserType.slice(2);

这返回“zilla” - 这是因为2的字符位置是字母z，并且因为没有包含第二个参数，所以返回的子字符串是字符串中的所有剩余字符。

转换大小写字符串方法toLowerCase()和toUpperCase()字符串并将所有字符分别转换为小写或大写。 例如，如果要在将数据存储在数据库中之前对所有用户输入的数据进行规范化，这可能非常有用。替换字符串的某部分您可以使用replace()方法将字符串中的一个子字符串替换为另一个子字符串。在基础的层面上， 这个工作非常简单。你当然可以用它做一些更高级的事情，但目前我们不会涉及到。

它需要两个参数 - 要被替换下的字符串和要被替换上的字符串。 尝试这个例子：

browserType.replace('moz','van');

注意，在实际程序中，想要真正更新browserType变量的值，您需要设置变量的值等于刚才的操作结果；它不会自动更新子串的值。所以事实上你需要这样写：browserType = browserType.replace('moz','van');。

数组

数组通常被描述为“像列表一样的对象”; 简单来说，数组是一个包含了多个值的对象。数组对象可以存储在变量中，并且能用和其他任何类型的值完全相同的方式处理，区别在于我们可以单独访问列表中的每个值，并使用列表执行一些有用和高效的操作，如循环 - 它对数组中的每个元素都执行相同的操作。 也许我们有一系列产品和价格存储在一个数组中，我们想循环遍历所有这些产品，并将它们打印在发票上，同时将所有产品的价格统计在一起，然后将总价格打印在底部。

如果我们没有数组，我们必须将每个产品存储在一个单独的变量中，然后调用打印的代码，并为每个产品单独添加。 花费的时间要长得多，效率很低，而且也容易出错。 如果我们有 10 个产品需要添加发票，那就只是有点麻烦而已，但是 100 个，或者 1000 个呢？ 我们稍后将在文章中使用这个例子。

创建数组

数组由方

括号构成，其中包含用逗号分隔的元素列表。

假设我们想在一个数组中存储一个购物清单 - 我们会做一些像下面这样的事情。 在您的控制台中输入以下行：

var shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];

shopping;

在这种情况下，数组中的每个项目都是一个字符串，但请记住，您可以将任何类型的元素存储在数组中 - 字符串，数字，对象，另一个变量，甚至另一个数组。 您也可以混合和匹配项目类型 - 它们并不都是数字，字符串等。尝试下面这些：

var sequence = [1, 1, 2, 3, 5, 8, 13];

var random = ['tree', 795, [0, 1, 2]];

访问和修改数组

然后，您可以使用括号表示法访问数组中的元素，与 访问字符串中的字符 的方法相同。

在您的控制台中输入以下内容：

shopping[0];

// returns "bread"

您还可以简单地为单个数组元素提供新值来修改数组中的元素。 例如：

shopping[0] = 'tahini';

shopping;

PS：我们以前说过，但还是提醒一下 - 电脑从 0 开始计数！

请注意，数组中包含数组的话称之为多维数组。 您可以通过将两组方括号链接在一起来访问数组内的另一个数组。 例如，要访问数组中的另一个数组内第三个元素的值（见上一节），我们可以这样做：

random[2][2];

获取数组长度

你可以通过使用 length 属性获取数组的长度（数组中有多少项元素）。 尝试以下代码：

sequence.length;

// should return 7

虽然 length 属性也有其他用途，但最常用于循环（循环遍历数组中的所有项）。 例如：

var sequence = [1, 1, 2, 3, 5, 8, 13];

for (var i = 0; i < sequence.length; i++) {

console.log(sequence[i]);

}

字符串与数组之间的转换

通常，您会看到一个包含在一个长长的字符串中的原始数据，您可能希望将有用的项目分成更有用的表单，然后对它们进行处理，例如将它们显示在数据表中。 为此，我们可以使用 split() 方法。 在其最简单的形式中，这需要一个参数，您要将字符串分隔的字符，并返回分隔符之间的子串，作为数组中的项。

我们来玩一下这个方法，看看它是如何工作的。 首先，在控制台中创建一个字符串：

var myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';

现在我们用每个逗号分隔它：

var myArray = myData.split(',');

myArray;

最后，尝试找到新数组的长度，并从中检索一些项目：

myArray.length;

myArray[0]; // the first item in the array

myArray[1]; // the second item in the array

myArray[myArray.length-1]; // the last item in the array

您也可以使用 join() 方法进行相反的操作。 尝试以下：

var myNewString = myArray.join(',');

myNewString;

将数组转换为字符串的另一种方法是使用 toString() 方法。 toString（）可以比join（）更简单，因为它不需要一个参数，但更有限制。 使用 join() 可以指定不同的分隔符（尝试使用与逗号不同的字符运行步骤4）。

var dogNames = ["Rocket","Flash","Bella","Slugger"];

dogNames.toString(); //Rocket,Flash,Bella,Slugger

添加和删除数组项

我们还没有涵盖添加和删除数组元素，现在让我们来看看。 我们将使用在上一节中最后提到的 myArray 数组。 如果您尚未遵循该部分，请先在控制台中创建数组：

var myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];

首先，要在数组末尾添加或删除一个项目，我们可以使用 push() 和 pop()。

让我们先使用 push() - 注意，你需要添加一个或多个要添加到数组末尾的元素。 尝试下面的代码：

myArray.push('Cardiff');

myArray;

myArray.push('Bradford', 'Brighton');

myArray;

当方法调用完成时，将返回数组的新长度。 如果要将新数组长度存储在变量中。例如：

var newLength = myArray.push('Bristol');

myArray;

newLength;

从数组中删除最后一个元素的话直接使用 pop() 就可以。 例如：

myArray.pop();

当方法调用完成时，将返回已删除的项目。 你也可以这样做：

var removedItem = myArray.pop();

myArray;

removedItem;

unshift() 和 shift() 从功能上与 push() 和 pop() 完全相同，只是它们分别作用于数组的开始，而不是结尾。

首先 unshift()。尝试一下命令

myArray.unshift('Edinburgh');

myArray;

现在 shift()。 尝试这些！

var removedItem = myArray.shift();

myArray;

removedItem;