前端学习，JavaScript实战总结

声明JavaScript变量

在计算机科学中, data(数据)大于一切，因为它对于计算机的意义重大。JavaScript提供七种不同的data types(数据类型)，它们是undefined（未定义）, null（空）, boolean（布尔型）, string（字符串）, symbol(符号), number（数字）, and object（对象）。

举个例子, 计算机能够分辨不同的数字, 例如数字 12，但是"12“和”dog", 或"123 cats", 却是字母的集合。 计算机能够精确地运算数字， 但是无法处理字符串中的数字。

Variables（变量）允许计算机以动态的形式来存储和操作数据，通过操作指向数据的指针而不是数据本身来避免了内存泄露，以上的七种数据类型都可以存储到一个Variables（变量）中。

Variables（变量 ）类似于您在数学中使用的x和y变量，这意味着它们通过一个简单的名称来表示我们要引用的数据。 计算机中的Variables（变 量）与数学变量不同，因为它们可以在不同时间存储不同的值。

通过在变量的前面使用关键字var，我们告诉 JavaScript 来创建或者 declare（声明）一个变量,就像这样：

var ourName;

上面代码的意思是创建一个名为ourName的variable（变量），在JavaScript中我们使用;（分号）来结束一段声明。

Variable （变量）的名字可以由数字、字母、$ 或者 _组成，但是不能包含空格或者以数字为首。

任务:
使用var 关键字来创建一个名为myName的变量。

// 举例
var myName;

// Define myName below this line

JavaScript 使用=为变量赋值

在JavaScript中，您可以使用=赋值运算符将值存储在变量中。

myVariable = 5;

把Number数字5赋给变量myVariable。

赋值过程是从右向左进行的。所有 = 赋值运算符右边的值都会被赋到左边的变量中。

myVar = 5;    
myNum = myVar;

数值 5 被赋给变量 myVar 中， 然后变量 myVar 又赋给变量 myNum ，这样子 myNum 变量中的值也是 5 了。

任务:
把数值 7 赋给变量 a。
把变量 a 中的内容赋给变量 b。

// Setup
var a;
var b = 2;

// Only change code below this line

var a = 7;
var b = a;

JavaScript 使用=为变量赋初始值

通常地我们会在initialize初始化声明变量的时候就会给变量赋一个初始值。

var myVar = 0;

创建一个名为 myVar 的变量并指定初始值为 0。

任务:
通过关键字 var 定义一个变量 a 并且指定初始值为 9。

// 举例
var ourVar = 19;

// Only change code below this line

var a = 9;

理解JavaScript未定义变量

当 JavaScript 中的变量被声明的时候，它们的初始值为 undefined。如果对一个值为 undefined 的变量进行运算操作的时候，那么结果将会是 NaN，NaN 的意思是 “Not a Number”。如果将一个没有 定义 的变量跟字符串进行连接的时候，你将获得一个字符串"undefined"。

任务:
定义3个变量 a、b、c ，并且分别给它们赋值：5、10、"I am a" ，这样它们就不会变成 undefined（未定义的了）。

// Initialize these three variables
var a;
var b;
var c;

// Do not change code below this line


a = 5;
b = 10;
c = "I am a";


a = a + 1;
b = b + 5;
c = c + " String!";

理解JavaScript变量的大小写敏感性

在 JavaScript 中所有的变量都是大小写敏感的。这意味着你要区分大写字母和小写字母。

MYVAR与MyVar和myvar 是截然不同的变量。这就有可能导致多个不同的变量却有着有相似的名字。正是由于以上原因所以强烈地建议你, 不要使用这一特性。（尽量避免设置名字相近难以区分的变量名）

最佳实践
使用 驼峰命名法 来设置一个 Javascript 变量，在 驼峰命名法 中，变量名的第一个单词的首写字母小写，后面的单词的第一个字母均为大写。

举个栗子:

var someVariable;
var anotherVariableName;
var thisVariableNameIsTooLong;

任务:
修正声明的变量，使它们的命名符合 驼峰命名法 的规范。

// Declarations
var studlyCapVar;
var properCamelCase;
var titleCaseOver;

// Assignments
studlyCapVar = 10;
properCamelCase = "A String";
titleCaseOver = 9000;

JavaScript加法运算

Number 是JavaScript中的数据类型，表示数字数据。
现在让我们尝试在JavaScript中做加法运算。

JavaScript 中使用 + 运算符来让两个数字执行加法运算。

举个栗子

myVar = 5 + 10; // 等于 15

任务:
改变数字 0 让变量 sum 的值为 20.

var sum = 10 + 10;

JavaScript减法运算

我们可以在 JavaScript 中执行减法运算。

JavaScript 中使用 - 运算符来做减法运算。

举例

myVar = 12 - 6; // 等于 6

任务:
改变数字 0 让变量 difference 的值为 12。

var difference = 45 - 33;

JavaScript乘法运算

我们可在 JavaScript 中使用乘法运算。

JavaScript 中可以使用 * 运算符来让两个数字相乘。

举个栗子

myVar = 13 * 13; // assigned 169

任务:
改变数值 0 来让变量 product 的值等于 80。

在这里插入代码片

var product = 8 * 10;

JavaScript除法运算

我们可以在 JavaScript 中做除法运算。

JavaScript 中使用 / 运算符做除法运算。

举个栗子

myVar = 16 / 2; // assigned 8

任务:
改变数值0来让变量 quotient 的值等于2。

var quotient = 66 / 33;

JavaScript自增运算++

使用 ++ 运算符，我们可以轻易地对变量进行自增或者+1运算。

i++;

等效于

i = i + 1;

提示
i++;这种写法，省去了使用=运算符的必要。

任务:
重写代码，使用 ++ 来对变量 myVar 进行自增操作。

var myVar = 87;

// Only change code below this line
myVar++;

JavaScript自减运算

使用自减运算符符号 -- ，你可以轻易地对一个变量执行 自减 或者-1操作。

i--;

等效于

i = i - 1;

提示
i--;这种写法，省去了使用=运算符的必要。

任务:
重写代码，使用 -- 对 myVar 执行自减操作。

var myVar = 11;

// Only change code below this line
myVar--;

JavaScript浮点数

我们可以把小数存储到变量中。小数也被称作 浮点数 。

提示
不是所有的实数都可以用 浮点数 来表示。因为可能存在四舍五入的错误，详情在这儿。

任务:
创建一个变量 myDecimal 并给它赋值一个浮点数。 (e.g. 5.7)。

var ourDecimal = 5.7;

// Only change code below this line

var myDecimal = 5.7;

JavaScript 浮点数陷阱及解法

JavaScript小数乘法运算

在 JavaScript 中，你可以用小数进行计算，就像整数一样。

让我们把两个小数相乘，并得到它们相乘的结果。

任务:
改变 0.0 的数值让变量product的值等于 5.0。

var product = 2.0 * 2.5;

JavaScript小数的除法运算

现在让我们来用一个小数做除法运算。

任务:
改变数值 0.0 的值让变量 quotient 的值等于 2.2.

var quotient = 4.4 / 2.0;

JavaScript取余运算%

使用%运算符来对两个数字进行求余运算。

举个栗子

5 % 2 = 1

用法
在数学中，看一个数是奇数还是偶数，只需要看这个数除以2得到的余数是0还是1。

17 % 2 = 1 (17 is 奇数)    
48 % 2 = 0 (48 is 偶数)

任务:
使用 % 操作符，计算11除以3剩下的余数，并把余数赋给变量remainder。

// Only change code below this line

var remainder;

remainder = 11 % 3;

JavaScript +=赋值操作

在编程当中，通常通过赋值来修改变量的内容。请记住，先计算=右边，然后把计算出来的结果赋给左边。

myVar = myVar + 5;

以上是最常见的运算赋值语句，先运算、再赋值。

还有一类操作符是一步到位合并了运算与赋值的操作。

这类运算符的其中一种就是 += 运算符。

myVar += 5; 也是把数值 5 加到变量 myVar上。

任务:
使用 += 操作符实现同样的效果。

var a = 3;
var b = 17;
var c = 12;

// Only modify code below this line

a += 12;
b += 9;
c += 7;

JavaScript -=赋值操作
与 += 操作符类似，-= 操作符用来对一个变量进行减法赋值操作。

myVar = myVar - 5;

将会从变量 myVar 中减去数值 5。

也可以写成这种形式：

myVar -= 5;

任务:
使用 -= 操作符实现同样的效果。

var a = 11;
var b = 9;
var c = 3;

// Only modify code below this line

a -= 6;
b -= 15;
c -= 1;

JavaScript *=赋值操作

*= 运算符是让变量与一个数相乘并赋值。

myVar = myVar * 5;

将会把变量 myVar 与数值 5相乘并赋值。

也可以写作这样的形式:

myVar *= 5;

任务:
使用 *=运算符实现同样的效果。

var a = 5;
var b = 12;
var c = 4.6;

// Only modify code below this line

a *= 5;
b *= 3;
c *= 10;

JavaScript /=赋值操作
/= 运算符是让变量与另一个数相除并赋值。

myVar = myVar / 5;

会把变量 myVar 的值除于 5并赋值。

也可以写作这样的形式:

myVar /= 5;

任务:
使用 /=操作符实现同样的效果。

var a = 48;
var b = 108;
var c = 33;

// Only modify code below this line

a /= 12;
b /= 4;
c /= 11;

JavaScript 基本运算综合练习

为了测试你的学习效果，我们结合之前的知识点来做一个摄氏度转华氏度的小程序。

从Celsius摄氏度转换为Fahrenheit华氏度的算法是：摄氏度的温度乘于9除于5，再加上32。
创建一个变量 fahrenheit，然后计算出摄氏度对应的华氏度。

function convert(celsius) {
// Only change code below this line
fahrenheit = celsius * 9 / 5 + 32;

// Only change code above this line
return fahrenheit;
}

// Change the inputs below to test your code
convert(30);

JavaScript 声明字符串变量

先前我们使用过的代码：

var myName = "your name";

"your name" 被称作 字符串。 字符串是用单引号或双引号包裹起来的一连串的零个或多个字符。

任务:
创建两个新的 字符串 变量：myFirstName 和 myLastName 分别为它们赋上你的姓和名的值。

// 举例
var firstName = "Alan";
var lastName = "Turing";

// Only change code below this line
var myFirstName = "x";
var myLastName = "zw";

JavaScript 转义字符串中的引号

当你定义一个字符串时，你必须以单引号或双引号作为开头和结尾。那么当你需要在字符串中使用一个: " 或者 ' 时该怎么办呢?

在 JavaScript 中，你可以通过在引号前面使用 反斜杠 (\) 来转义引号。

var sampleStr = "Alan said, \"Peter is learning JavaScript\".";

这标志着提示 JavaScript 该单引号或双引号并不是字符串的结尾，而是出现在字符串内的字符。所以，如果你要打印字符串到控制台，你将得到：

Alan said, "Peter is learning JavaScript".

任务:
使用 反斜杠 将一个字符串以双引号包裹并赋值给变量 myStr，当你将它打印到控制台的时候，你会看到：

I am a "double quoted" string inside "double quotes"

var myStr; // Change this line

myStr = "I am a \"double quoted\" string inside \"double quotes\"";

JavaScript 使用单引号引用字符串

在 JavaScript 中的 字符串 要用单引号或双引号来包裹它，只要你在开始和结束都使用相同类型的引号，单引号和双引号的功能在JavaScript中是相同的。

"This string has \"double quotes\" in it"

当我们需要在字符串中使用与开头结尾相同的引号时，我们需要对引号进行 转义 。如果你有很多双引号的字符串，使用转义字符可能导致难以阅读。这时候可以使用单引号。

'This string has "double quotes" in it. And "probably" lots of them.'

任务:
更改myStr字符串用于开始和结束的双引号为单引号，并移除转义符号。

var myStr = '<a href="http://www.example.com" target="_blank">Link</a>';

JavaScript 转义字符串中的特殊符号

字符串中的转义序列

引号不是字符串中唯一的可以被转义字符。下面是常见的转义序列列表:

Code	        Output

\'				单引号
\"				双引号
\\				反斜杠符
\n				换行符
\r				回车符
\t				制表符
\b				退格符
\f				换页符

注意，如果你想要显示一个反斜杠就必须要转义它。

任务:
按照下面的顺序，并且用空格来分割：
反斜杠 制表符 回车符 换行符 并把它赋值给变量 myStr
注意：请使用双引号包含内容，并且注意内容前后不要留有非必要的空格

var myStr;

myStr = "\\ \t \r \n";

JavaScript字符串连接方式

在 JavaScript 中，当 + 运算符与 字符串 一起使用的时候，它被称作 连接 运算符。你可以通过和其他字符串连接 来创建一个新的字符串。

举个栗子：

'My name is Alan,' + ' I concatenate.'

注意：
注意空格。连接操作不会添加两个字符串之外的空格，所以想加上空格的话，你需要自己在字符串里面添加。
任务：
使用 + 运算符，把字符串 "This is the start. " 和 "This is the end." 连接起来并赋值给变量 myStr。

// 举例
var ourStr = "I come first. " + "I come second.";

// Only change code below this line

var myStr = "This is the start." + " This is the end.";

JavaScript +=连接字符串操作

我们还可以使用 += 运算符来将字符串 连接 到现有字符串变量的末尾。对于那些非常长的字符串来说，这是十分有用的。

注意：
注意空格。连接操作不会添加两个字符串以外的空格，所以如果想要加上空格的话，你需要自己在字符串里面添加。
任务：
通过使用 += 操作符来连接这两个字符串:
"This is the first sentence. " 和 "This is the second sentence." 并赋给变量 myStr。

// 举例
var ourStr = "I come first. ";
ourStr += "I come second.";

// Only change code below this line

var myStr = "This is the first sentence.";
myStr &#