JavaScript | 新手村（一）变量，运算和变量方法

1. 向 html 页面添加 JavaScript

1.1 内部 JavaScript

在 html 文件中的 </body> 标签前插入代码：

<script>

  // 在此编写 JavaScript 代码

</script>

1.2 外部 JavaScript

外部链接的存在是为了让文件更具层次性，更易管理。创建名为 script.js 的文件，并存放在 html 文件同一目录。如果 html 文件链接多个 JavaScript，较好的做法是创建一个 scripts 文件夹统一存放。将原 <script> 元素替换为：

<!-- script.js 存放在与 html 文件同一目录下 -->

<script src="script.js" async></script>


<!-- script.js 存放在与 html 文件同一目录下的 scripts 文件夹中 -->

<script src="scripts/script.js" async></script>

其中属性 async 是布尔属性，指示浏览器是否在允许的情况下异步执行该脚本。该属性对于内联脚本无作用 (即没有 src 属性的脚本）。效果是让你的 js 变成异步执行，并且减少不必要的 js 文件从而提高性能。

2. 变量浅谈

2.1 声明和初始化变量

JavaScript 中的变量是一种存放数据的容器，并不限定数据类型。声明一个变量，实际上就是创建一个可以存放变量的容器。可以使用两种关键词 var 和 let 声明一个变量，以及在声明的同时进行赋值：

let myValue1;

var myValue2;

let myValue3 = 8;

var myValue4 = "Future";

关键词 let 是在现代版本中的 JavaScript 创建的一个新的关键字，用于创建与 var 工作方式有些不同的变量，解决了过程中的问题。两者最大的区别在于 var 可以重复声明变量，而 let 则不能，例如：

var myValue = "China";

var myValue = "Italy";

是合法的，而

let myValue = "China";

let myValue = 16;

却是非法的。但建议尽量使用 let，因为定义和赋值是两种逻辑，而重复定义一个变量是没有意义的，合法的操作是：

let myValue = "China";

myValue = 16;

2.2 变量的类型

Number（数字：不区分整数与浮点数）
```
let myNumber = 58;
```
String（字符串：不区分单字符与字符串）
```
let myString = "Sunday is the day I want."
```
Boolean（布尔值：ture 或 false，可通过条件判断进行赋值）
```
let iAmAlive = true;

let test = 6 < 3;
```
Array（数组：类似于 matlab 元胞数组的概念，是一个容器组）
```
let myArray = ["China",56,true];
```
Object（对象：类似于 c++ 结构体的概念，用属性来描述对象）
```
let dog = { name : 'Spot', breed : 'Dalmatian' };

console.log(dog.name);
```

3. 运算符

3.1 算术运算符

运算符	名称	示例
+	加法	6 + 9
-	减法	12 - 7
*	乘法	3 * 2
/	除法	10 / 5
%	求余	21 % 9
**	幂乘	3 ** 2

3.2 递增和递减运算符

运算符	说明
num++	对于 output = num++，或 output = num - - 先返回值，再自加/自减
num - -	对于 output = num++，或 output = num - - 先返回值，再自加/自减
++num	对于 output = ++num，或 output = - - num 先自加/自减，再返回值
- - num	对于 output = ++num，或 output = - - num 先自加/自减，再返回值

3.3 赋值运算符

运算符	名称	示例	等价于
+=	加法赋值	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;

3.4 比较运算符

运算符	名称	示例
===	严格等于	5 === 2 + 6
!==	严格不等于	5 !== 2 + 3
<	小于	10 < 6
>	大于	15 > 13
<=	小于或等于	2 <= 3
>=	大于或等于	1 >= 7

4. 字符串

4.1 字符串的表达、串联和转换

字符串可以用单引号或双引号表示，但不可混用
```
let myString1 = "we sat on skyline drive and drank a bottle of apple wine.";
let myString2 = 'I feel good.';
```
两种合法表示方式的好处是：当需要输入英文缩略的时候，可以这样
```
let myString = "I'm feeling better.";
```
而不是以下会引发错误的表达
```
let myString = 'I'm feeling better.';
```
但可以使用转义字符 \' 避免该错误
```
let myString = 'I\'m feeling better.';
```

字符串可以通过 + 进行串联，甚至和数字进行串联

let myString1 = "Artificial";

let myString2 = "intellegence";

console.log(myString1 + " " + myString2);

let myString3 = myString1 + 3;

console.log(myString3);

可以通过 Number 对象将把传递给它的任何东西转换成一个数字：
```
let myString = '123';

let myNum = Number(myString);
```
另一方面，每个数字都有一个名为 toString() 的方法，它将把它转换成等价的字符串：
```
let myNum = 123;

let myString = myNum.toString();
```

4.2 字符串的常用方法

这里说的 “方法” 指的是对象可以调用的各种处理函数！不是一般意义的 “方法”！！（对象？属性？方法？脑袋有点烧掉）但是没关系，我们先整理常用的字符串方法，JavaScript 对字符串的处理，是通过使用字符串对象携带的方法来实现的。（但这些方法并不会真正地更改字符串的值！！想要获取更改后的值，需要进行另外的赋值）

获取字符串的长度

let browserType = 'mozilla';

browserType.length;

检索特定的字符串字符

browserType[0];

browserType[browserType.length-1];

在字符串中查找子字符串并提取它

使用 indexOf() 方法查看字符串中是否存在一个子字符串：若有，则返回首字母的索引；若无，则返回 -1。
```
browserType = 'mozilla';

browserType.indexOf('zilla');
```
输入首字符与末字符的索引，使用 slice() 方法提取子字符串。如果只有首字母的索引，将认为末字符为字符串的最后一个字符。
```
let strSlice = browserType.slice(0,3);

strSlice = browserType.slice(2);
```

转换大小写

let radData = 'My NaMe Is MuD';

radData.toLowerCase();

radData.toUpperCase();

替换字符串的某部分

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

5. 数组

创建数组

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

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

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

访问和修改数组元素
```
shopping[0];

shopping[0] = 'tahini';
```
访问二维数组
```
let random = ['tree', 795, [0, 1, 2]];

random[2][2];
```
上面的例子很有意思，第2行是3列的，而第1行却是2列的，但系统不会报错，而是认为这是一个 2×3 的数组，而 random[1][3] 的值为 null。

获取数组长度

sequence.length;

// return 7

random.length;

// return 3;

字符串和数组之间的转换

使用 split() 方法将字符串转换为数组

let myData = "Manchester,London,Liverpool,Birmingham,Leeds,Carlisle";

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

// return myArray = ["Manchester","London","Liverpool","Birmingham","Leeds","Carlisle"]

myData = "New York";

myArray = myData.split("");

// return myArray = ["N","e","w"," ","Y","o","r","k"]

使用 join() 或 toString() 方法将数组转换为字符串

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

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

dogNames.toString();

// return "Rocket,Flash,Bella,Slugger"

添加和删除数组项

在数组末尾添加或删除一个项目，可以使用 push() 和 pop() 方法。
```
myArray.push('Cardiff');

myArray.push('Bradford', 'Brighton');
myArray.pop();
```
在数组开始添加或删除一个项目，使用 unshift() 和 shift()，功能上完全相同。
```
myArray.unshift('Edinburgh');

myArray.shift();
```

小结

JavaScript 新手村大冒险中。勇士，快快加油打怪升级吧！