javascript常用方法之条件判断和循环

青旅半醒 2023-02-19 12:28 3阅读 0赞

###  条件判断 ###

### JavaScript使用`if () { ... } else { ... }`来进行条件判断 ###

var age = 20;
    if (age >= 18) { // 如果age >= 18为true，则执行if语句块
        alert('adult');
    } else { // 否则执行else语句块
        alert('teenager');
    }

### 多行条件判断 ###

var age = 3;
    if (age >= 18) {
        alert('adult');
    } else if (age >= 6) {
        alert('teenager');
    } else {
        alert('kid');
    }

上述多个`if...else...`的组合实际上相当于两层`if...else...`：

var age = 3;
    if (age >= 18) {
        alert('adult');
    } else {
        if (age >= 6) {
            alert('teenager');
        } else {
            alert('kid');
        }
    }

### 循环  ###

JavaScript的循环有两种，一种是`for`循环，通过初始条件、结束条件和递增条件来循环执行语句块：

### `for`循环 ###

要计算1+2+3+...+10000

var x = 0;
    var i;
    for (i=1; i<=10000; i++) {
        x = x + i;
    }
    x; // 50005000

`for`循环最常用的地方是利用索引来遍历数组：

var arr = ['Apple', 'Google', 'Microsoft'];
    var i, x;
    for (i=0; i<arr.length; i++) {
        x = arr[i];
        console.log(x);
    }

`for`循环的3个条件都是可以省略的，如果没有退出循环的判断条件，就必须使用`break`语句退出循环，否则就是死循环：

var x = 0;
    for (;;) { // 将无限循环下去
        if (x > 100) {
            break; // 通过if判断来退出循环
        }
        x ++;
    }

### for ... in  ###

`for`循环的一个变体是`for ... in`循环，它可以把一个对象的所有属性依次循环出来：

var o = {
        name: 'Jack',
        age: 20,
        city: 'Beijing'
    };
    for (var key in o) {
        console.log(key); // 'name', 'age', 'city'
    }

要过滤掉对象继承的属性，用`hasOwnProperty()`来实现：

var o = {
        name: 'Jack',
        age: 20,
        city: 'Beijing'
    };
    for (var key in o) {
        if (o.hasOwnProperty(key)) {
            console.log(key); // 'name', 'age', 'city'
        }
    }

由于`Array`也是对象，而它的每个元素的索引被视为对象的属性，因此，`for ... in`循环可以直接循环出`Array`的索引：

var a = ['A', 'B', 'C'];
    for (var i in a) {
        console.log(i); // '0', '1', '2'
        console.log(a[i]); // 'A', 'B', 'C'
    }

*请注意*，`for ... in`对`Array`的循环得到的是`String`而不是`Number`

### 用`for ... of`循环遍历集合， ###

### 用法如下： ###

### forEach ###

var a = ['A', 'B', 'C'];
    a.forEach(function (element, index, array) {
        // element: 指向当前元素的值
        // index: 指向当前索引
        // array: 指向Array对象本身
        console.log(element + ', index = ' + index);
    });

*注意*，`forEach()`方法是ES5.1标准引入的，你需要测试浏览器是否支持。

`Set`与`Array`类似，但`Set`没有索引，因此回调函数的前两个参数都是元素本身：

var s = new Set(['A', 'B', 'C']);
    s.forEach(function (element, sameElement, set) {
        console.log(element);
    });

`Map`的回调函数参数依次为`value`、`key`和`map`本身：

var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
    m.forEach(function (value, key, map) {
        console.log(value);
    });

如果对某些参数不感兴趣，由于JavaScript的函数调用不要求参数必须一致，因此可以忽略它们。例如，只需要获得`Array`的`element`：

var a = ['A', 'B', 'C'];
    a.forEach(function (element) {
        console.log(element);
    });

### while ###

`while`循环只有一个判断条件，条件满足，就不断循环，条件不满足时则退出循环。比如我们要计算100以内所有奇数之和，可以用while循环实现：

var x = 0;
    var n = 99;
    while (n > 0) {
        x = x + n;
        n = n - 2;
    }
    x; // 2500

在循环内部变量`n`不断自减，直到变为`-1`时，不再满足`while`条件，循环退出。

### do ... while ###