JavaScript 系列博客（二）
前言
本篇博客介绍 js 中的运算符、条件语句、循环语句以及数组。javascript
运算符
- 算术运算符
// + | - | * | / | % | ++ | --
console.log(5 / 2); // 2.5
// 取整
console.log('%d', 5 / 2); // "2"
var num = parseInt(5 / 2); // 2
console.log(num);
// 取模(求余)
console.log(5 % 2); // 1
// 任何一个天然数对 n 取余, 结果为 [0, n-1]
// 自增|自减 ++|--
// ++就是自增1, --就是自减1
var num = 10
console.log(num++); // 10
console.log(++num); // 12
console.log(num); // 12
// ++在变量后(num++), 先将变量的值拿去使用,再自身自增1
// ++再变量前(++num), 先将变量自身自增1, 再将结果拿去使用
// 总结: 无论++在前在后,运算结束后,变量自身值必定自增1
// res = ++num <==> num++; res = num
// res = num++ <==> res = num; ++num
- 赋值运算符
// = | += | -= | *= | /= | %=
var x = 10; // 将10的值赋值给变量x
y = x; // 将变量x的值传递给变量y
console.log(y); // 10
x += 10; // x = x + 10, 运算方式由右至左, 将x+10的结果从新复制给x
console.log(y); // 10, y的值虽然来源于x, 但y值只由自身控制
// x /= 10 == x = x / 10
- 比较运算符
// 比较运算符, 结果为Boolean类型
// == | ===
console.log("5" == 5); // true, 只作值比较
console.log("5" === 5); // false, 比较值及类型
// != | !==
console.log("5" != 5); // false, 只作值比较
console.log("5" !== 5); // true, 比较值及类型
- 逻辑运算符
// 总结&&: 全真为真, 有假则假
// 总结||: 全假则假, 有真则真
// 总结!: 真则假, 假则真
// 逻辑运算符的结果本质上为表达式值
// 表达式: 由数字,变量,运算符组成的合法式子
res = a < b && c;
console.log(res);
res = (a = 1 || b == c);
console.log(res);
// 针对 && | ||
// 疑问: 逻辑运算符结果可能为逻辑运算符以前表达式的值,也多是以后表达式的值
针对逻辑运算符，会出现短路现象。当运算符为&&时，若是第一个表达式的结果为假，那么第二个表达式就不会执行；同理，||当第一个表达式的结果为真时，第二个表达式就不会执行（python 在逻辑判断也会出现短路现象）html
- 三目运算符（等同于 python 中的三元表达式）
// 语法: 条件表达式 ? 表达式1 : 表达式2
var a = 10, b = 20;
var res = a < b ? a : b; // 取小值
console.log(res);
res = a < b ? b : a; // 取大值
console.log(res);
// 相似于if...esle...
a < b ? console.log("表达式结果为true") : console.log("表达式结果为false")
三目表达式能够看作 if...else 的简写形式。java
程序结构
根据执行方式程序能够分为三大结构：顺序结构、分支结构、循环结构。其实只有一种结构就是顺序结构，像分支结构本质仍是顺序执行的，只不过选择多了；而循环结构也是同样的道理。python
条件语句
if 结构
if结构首先判断后面表达式的布尔值，而后决定是否执行后面的代码。布尔值只有两个，true 为真，false 为假。数组
// 语法
if (表达式1) {
语句; };
// 或
if (表达式2) {语句};
上面是 if 结构的基本形式。须要注意的是，‘’布尔值‘’每每是由一个条件表达式产生的，必须放在圆括号中，表达对该表达式求值。若是表达式的结果为 true，就执行后面的代码语句；若是为 false，则跳事后面的语句。数据结构
if...else 结构
跟 python 同样，if 后面也能够跟 else 代码块，表示不知足条件时，要执行的代码块。函数
if (表达式3) {
//表达式结构为真时，执行的代码
} else {
// 表达是结构为假时，执行的代码
}
若是须要对于一个表达式进行屡次判断时，多个 if...else 语句能够连到一块儿。spa
if (表达式4) {
} else if {表达式5} {
} else if {表达式6} {
} else {
} // 注意：else 代码块老是与离本身最近的那个 if 语句配对
switch 分支
// 语法
switch (结果为整数|字符串的表达式) {
case 值1(值须要和表达式进行类型统一): 代码块; break;
...
case 值n: 代码块; break;
default: 代码块;
}
// 须要注意的是，switch 语句后面的表达是，与 case 语句后面的表达是比较运行结果时，采用的是严格相等运算符(===)，而不是相等运算符(==)，这意味着比较时不会发生类型转换。
// break做用是结束分支结构(结束所属switch语句)，能够省略。
default 分支
default分支，出如今全部case之下，当全部case没有匹配上，走该分支,该分支也能够省略，表明没有未匹配到的动做。设计
循环语句
循环语句用于重复执行某个操做，直到条件不知足跳出循环。code
while 循环
while 循环包括一个循环条件和一段代码块，只要条件为真，就会不断执行代码块。
while (条件表达式) {
语句;
}
while语句的循环条件为一个条件表达式，必须放在圆括号中，表示须要先计算表达式的结果才能进行是否进行循环。代码块部分，若是只有一条语句，能够省略大括号。
var i = 0;
while (i < 100) {
console.log('i 为：' + i);
i++;
}
这段代码会循环100次，直到i 等于100。
for 循环
for 循环是循环结构的另外一种形式，能够指定循环的起点、终点和终止条件。格式以下：
/*
for (循环变量定义并初始化①; 循环变量条件表达式②; 循环变量增量③) {
代码块④;
}
执行顺序 ① ②④③ ... ②④③ ②, ②④③个数就是循环次数
*/
for (var i = 0; i < 5; i++) {
console.log("我最棒, 我最帅, 我是天下第一!");
}
上段代码圆括号里面有三个表达式：
- 表达式①（initialize）：肯定循环变量的初始值，只在循环开始时执行一次。
- 表达式②（test）：每轮循环开始时，都须要执行判断，只有判断为真时，才会继续循环。
- 表达式③（increment）：每轮循环的最后一个操做，一般用来递增循环变量。
全部 for 循环，均可以用 while 循环实现。
for 循环里面的三个表达式能够省略其中任何一个，也能够所有省略。
for ( ; ; ) {
console.log('Hello MUSIBII!');
}
这段代码省略了 for 表达式的三个部分，结果就致使了一个无限循环。
do...while 循环
do...while 循环和 for 循环相似，惟一区别就是 do 循环无论条件满不知足都会执行一次循环，以后进行第二次循环才会进行判断条件。
do
代码块
while (条件表达式);
// 或
do {
代码
} while (条件表达式);
无论条件是否为真，do...while 循环至少须要运行一次，这是和while 循环的本质区别。另外 while 语句后面的分号不要省略。
var x = 3;
var y = 0;
do {
console.log(y);
y++;
} while(y < x);
break 和 continue 语句
只要有循环就少不了 break 和 continue，这两个关键词都具备跳转做用，能够控制代码的执行顺序。
- break 语句用于跳出循环体
var i = 0;
while(i < 100) {
console.log('i 为：' +i);
i++;
if (i === 10) break;
}
当 i 等于10时，if 表达式判断为真，执行 break 跳出循环体
- continue 语句用于当即终止本轮循环，进入下次循环。
var i = 0;
while(i < 100) {
if (i % 2 === 0) continue;
console.log('i 为：' +i);
i++;
}
这段代码只有 i 为奇数时，才会输出 i 的值。若是 i 为偶数，则直接进入下一轮循环。若是存在多重循环，不带参数的 break 语句和 continue 语句都只针对本层循环。
数组
数组的定义
数组（Array）是按照次序排列的一组值。每一个值得索引从0开始，数组使用中括号表示。
var array = ['a', 'b', 'c', 1, 2, 3];
这样，array 就构成一个数组，两端的方括号是数组的标志。'a' 是0号位置，3是5号位置。
除了在定义时赋值，数组也能够先定义后赋值。（经过构造函数（constructor））
var array = []; array[0] = 'hello'; array[1] = 'world';
任何类型的数据，均可以放入数组（类比 python 的列表）。
特别的，若是数组的元素仍是数组，则造成了多维数组。
数组的本质
本质上，数组是对象类型的一种，typeof 运算符会返回数组的类型为 object。
typeof(['a', 'b', 'c']) // object
这代表，数组类型为对象。数组的特殊性体如今，它的键名是按次序排列的一组整数（从0开始）。
var array = ['a', 'b', 'c']; Object.keys(array) // ['0', '1', '2']
经过 Object 的 keys 方法能够返回指定数组的全部键名。
因为数组成员的键名是固定的，所以数组不用为每一个元素指定键名，而对象的每一个成员都必须指定键名。JavaScript 语言规定，对象的键名一概为字符串，因此，数组的键名其实也是字符串。之因此能够用数值取值，是由于非字符串的键名会被转为字符串。
var array = ['a', 'b', 'c']; array[0]; // 'a' array['0']; // 'a'
这点在赋值时也会成立（js 的数据类型转换须要注意），一个值老是先转成字符串，再进行赋值。
var a = []; a[1.00] = 'c'; a[1]; // 'c'
赋值时，先把1.00转为字符串1，赋值结束后能够经过数字键1取值。
length 属性
数组的 length 属性返回数组的成员数量。
array.length // 3
JavaScript 使用一个32位整数，保存数组的元素个数。这意味着，数组成员最多只用（2^32 - 1）个，也就是说 length 属性的最大值就是4294967295。
只要是数组就必定有 length 属性。该属性是一个动态的值（由于能够动态赋值）。数组的数字键不须要连续，length 属性的值老是比最大的那个整数键大1.另外，数组是一种动态的数据结构，能够随时增减数组成员。
注意：length 属性是可写的。若是认为的设置一个小于当前成员个数的值，该数组的成员会自动减小到 length 设置的值。
var array = ['a', 'b', 'c']; array.length; // 3 array.length = 2; array // ['a', 'b']
这代表当数组的 length 属性值设为2，那么整数键2就会被删除。这样清空一个数组就能够直接把 length 属性值设为0就 ok 了。
若是人为设置 length 值大于当前数组元素个数，那么数组的成员数量会增长到这个值，新增的位置都是空（undefined）。
var array = ['a']; a.length = 2; a[1]; // undedined
当 length 属性值设为大于数组个数时，读取新增的位置都会返回 undefined。若是设置的不合法，好比设置一个非整数的值时，JavaScript 会报错。
var array = []; array.length = -1; // RangeError: Invalid array length array.length = Math.pow(2, 32); // RangeError: Invalid array length array.length = 'abc'; // RangeError: Invalid array length
由于数组的本质是一种对象，因此能够为数组添加属性，可是这不会影响数组的 length 属性。
var array = ['a']; array['name'] = 'musibii'; array.length; // 1
注意：若是数组添加的键名超过范围的数值，该键名会自动转化为字符串。
var array = []; array[-1] = 'a'; array[Math.pow(2, 32)] = 'b'; array.length //0 array[-1]; // 'a' array[4294967296]; // 'b'
上面为数组添加了两个不合法的数字键，并不会影响到 length 的值。这些数字键都变成了字符串键名。最后两行会取到值是由于会把数字转为字符串。
in 运算符
检查某个键名是否存在于数组中，使用 in 运算符，这个适用于对象，天然也适用于数组。
var array = ['a', 'b', 'c', 1, 2, 3]; 2 in array; // true '2' in array; // true 6 in array; // false
数组存在键名为2的键，因为键名都为字符串，因此数值2会自动转成字符串。
var array = []; array[100] = 'a'; array.length; // 101 array[1]; // undefined 1 in array; // false
数组 array 只有一个成员，虽然 length 为101，可是其余位置的键名都会返回 false。
for...in 循环和数组的遍历
for...in 循环不只能够遍历对象，也能够遍历数组。由于数组是对象。
var array = ['a', 'b', 'c'];
for (var i in array) {
console.log(array[i]);
}
// 'a', 'b', 'c' 换行打印
for...in 不只会遍历数组全部的数字键，也会遍历非数字键。
var array = ['a', 'b', 'c'];
array.name = 'musibii';
for (var i in array) {
console.log(array[i]);
}
// 'a', 'b', 'c', 'musibii'
在遍历数组时，也会遍历非整数键name，因此不建议使用for...in 遍历数组。可使用 for 循环或者 while 循环。（这样只会遍历出整数的键名）
数组的空位
当数组的某个位置是空元素，即两个逗号之间没有任何值，那么称该数组存在空位。
var array = ['a', '', 'c']; array.length; // 3 array[1]; // undefined
这表名数组的空位不影响 length 属性的值。 而且空位是能够被读取的，只不过值为 undefined。
使用 delete 命令能够删除数组中的某个成员，这样会造成空位，和上面同样不会影响数组的 length 属性。
var array = ['a', 'b', 'c']; delete array[1]; a[1]; //undefined a.length; // 3
使用 delete 删除了数组中的元素，不会影响数组的 length 属性值，这样若是使用 length 对一个数组进行遍历时须要谨慎（这好奇怪啊。。。。）
数组的某个位置是空位，与某个位置是 undefined，是不同的。若是是空位，使用数组的 forEach 方法、for...in 结构以及 Object.keys 方法进行遍历时，空位会被跳过。
不得不说，真的奇怪。这个设计思想也太灵活了8。。。
空位表示数组没有这个元素，因此不会被遍历到，而 undefined 表示数组有这个元素，值为 undefined，这样遍历就不会跳过。