数组之循环

一、for 循环

var arr = ['a', 'b', 'c', 'd'];

for(var i = 0; i < arr.length; i++) {

    console.log(arr[i]);

}

优化版的 for 循环

将数组的长度先计算出来，避免每一次循环的时候重复计算数组长度：

var arr = ['a', 'b', 'c', 'd'];

for (var i = 0, len = arr.length; i < len; i++) {
    console.log(arr[i]);
}

二、for of

ES6 中新增了 for of 用来遍历数组。

其中 item 是任意变量名，arr 是要遍历的数组名。

var arr = ['a', 'b', 'c', 'd'];

for (var item of arr) {
    console.log(item);
}

item 可以接收到数组中的每一条数据。

三、数组的循环方法

1、forEach()

var arr = ['a', 'b', 'c', 'd'];
arr.forEach(function (item, index) {
    console.log(`当前元素${item}，对应的下标${index}`);
})

注意：forEach() 循环中不能使用 break 和 continue。

2、map()

var arr = [10, 20, 30, 40];

var result = arr.map(function (item, index) {
    console.log(`当前元素${item}，对应的下标${index}`);
    return item * 2;
});
console.log(result);

var result = arr.map(function (item, index) {
    console.log(`当前元素${item}，对应的下标${index}`);
    if (item > 20) {
        return item * 2;
    } else {
        return item;
    }
});
console.log(result);

说明：

1. map() 可以正常的遍历数组，获取到数组的元素和下标；

2.在 map 的方法中设置 return 新数据，最终这些“新数据”会组成一个新数组。通过console.log(result变量名)方式

注意：

1. 新数组和原数组的长度一定是一致的；
2. 新数组中的数据和原数组中的数据可以不一致；

3、filter()

var arr = [10, 20, 30, 40];

var result = arr.filter(function (item, index) {
    console.log(`当前元素${item}，对应的下标${index}`);
    return item > 20;
})
console.log(result);

说明：

1. filter() 可以正常的遍历数组，获取到数组的元素和下标；
2. 在 filter 方法中设置 return 筛选条件，最终满足“筛选条件”的 item 会组成一个新数组。

注意：

1. 新数组和原数组的长度可以不一致；
2. 新数组中的数据，一定是来源于原数组且不会发生改变；

3、数组扁平化。将以下二维数组变成一维数组：

var arr = ['a', 'b', ['c', 'd'], 'e', ['f']];
// 变成 ['a', 'b', 'c', 'd', 'e', 'f']

4、every() 和 some()

every() 和 some() 都可以遍历数组，同时，这两个方法执行完成后，会得到一个布尔值。

var arr = [10, 20, 30, 40];

var everyResult = arr.every(function (item, index) {
    return item >= 10;
});
var someResult = arr.some(function (item, index) {
    return item > 40;
});

结论：

1. every()：一假得假；
2. some()：一真得真；

5、reduce()

var arr = [[10, 20], 30, 40];

var result = arr.reduce(function (item, next) {
    console.log(item, next);
    return item + next;
}, 0)

var result = arr.reduce(function (item, next) {
    // []  10 ---- [10]
    // [10] 20 ---- [10, 20]
    // [10, 20] [30, 40] ---- [10, 20, 30, 40]
    return item.concat(next)
}, [])
console.log(result);

总结： 

1. forEach() 可以遍历得到元素和下标；不能使用 break 和 continue；
2. map() 可以遍历得到元素和下标；可以得到新数组，且与原数组长度一致，内容可以不一致；
3. filter() 可以遍历得到元素和下标；可以得到新数组，且与原数组内容一致，长度可以不一致；
4. some() 可以遍历得到元素和下标；可以得到布尔值，一真得真；
5. every() 可以遍历得到元素和下标；可以得到布尔值，一假得假；
6. reducer() 可以遍历得到元素；
7. find()：直接找到满足条件的第一个item，并且可以直接输出item，不会把item放到新数组里边

练习题：

定义一个构造函数Student，包含id、name、html、css、Javascript 5个属性，利用该构造函数创建5个对象并存入数组arr中。然后对数组进行如下操作：（1）找出html、css、Javascript三门课程总成绩最高的Student对象，输出(2)对数组中对象按javascript成绩降序排列 

  let arr = [];
        var sum = [];
        function Student(id, name, html, css, Javascript) {
            this.id = id;
            this.name = name;
            this.html = html;
            this.css = css;
            this.Javascript = Javascript
            sum.push(this.html + this.css + this.Javascript)
            this.total = this.html + this.css + this.Javascript
        }
        let one = new Student(1, '成楠', 99.9, 99.9, 100)
        let two = new Student(2, '魏亚童', 99.8, 100, 99.9)
        let three = new Student(3, '魏瑞朋', 99, 99, 98)
        let four = new Student(4, '张博文', 61, 62, 63)
        let five = new Student(5, '李富豪', 98.9, 99, 99)
        arr.push(one, two, three, four, five)
        console.log(arr);
        console.log(sum);
        // 第一种方法实现输出总成绩最高的对象
        let maxscore = arr[0]; //定义最大值为第一个对象
        for (let i = 0; i < arr.length; i++) {
            if (arr[i].total > maxscore.total) {
                // maxscore.total =arr[i].total
                //把对象赋给maxsore 
                maxscore = arr[i]
            }
        }
        // console.log(maxscore.total);
        console.log(maxscore);

        // 第二种方法实现输出总成绩最高的对象
        for (let i = 0; i < sum.length; i++) {
            var max = sum[0]
            if (max < sum[i]) {
                max = sum[i]
            }
        }
        console.log(max);
        var first = arr.filter(function (item, index) {
            if (item.html + item.css + item.Javascript == max) {
                return item
            }
        })
        console.log(first);


        // 实现降序排列
        for (let i = 0; i < arr.length; i++) {
            for (let j = i + 1; j < arr.length - 1; j++) {
                // i和j要连接起来
                if (arr[i].Javascript < arr[j].Javascript) {
                    // 换对象不是换成绩
                    let temp = arr[i]
                    arr[i] = arr[j]
                    arr[j] = temp
                }
            }
        }
        console.log(arr);