JavaScript 系列博客（二）

JavaScript 系列博客（二）

前言

本篇博客介绍 js 中的运算符、条件语句、循环语句以及数组。

运算符

• 算术运算符

// + | - | * | / | % | ++ | --
    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 在逻辑判断也会出现短路现象）

• 三目运算符（等同于 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 的简写形式。

程序结构

根据执行方式程序可以分为三大结构：顺序结构、分支结构、循环结构。其实只有一种结构就是顺序结构，像分支结构本质还是顺序执行的，只不过选择多了；而循环结构也是一样的道理。

条件语句

if 结构

if结构首先判断后面表达式的布尔值，然后决定是否执行后面的代码。布尔值只有两个，true 为真，false 为假。

// 语法
if (表达式1) {
	语句; };
// 或
if (表达式2) {语句};

上面是 if 结构的基本形式。需要注意的是，‘’布尔值‘’往往是由一个条件表达式产生的，必须放在圆括号中，表达对该表达式求值。如果表达式的结果为 true，就执行后面的代码语句；如果为 false，则跳过后面的语句。

if...else 结构

跟 python 一样，if 后面也可以跟 else 代码块，表示不满足条件时，要执行的代码块。

if (表达式3) {
    //表达式结构为真时，执行的代码
} else {
    // 表达是结构为假时，执行的代码
}

如果需要对于一个表达式进行多次判断时，多个 if...else 语句可以连到一起。

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没有匹配上，走该分支,该分支也可以省略，代表没有未匹配到的动作。

循环语句

循环语句用于重复执行某个操作，直到条件不满足跳出循环。

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，这样遍历就不会跳过。

本文参考https://wangdoc.com/javascript/types/array.html