一、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);
说明:
- map() 可以正常的遍历数组,获取到数组的元素和下标;
2.在 map 的方法中设置 return 新数据,最终这些“新数据”会组成一个新数组。通过console.log(result变量名)方式
注意:
- 新数组和原数组的长度一定是一致的;
- 新数组中的数据和原数组中的数据可以不一致;
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);
说明:
- filter() 可以正常的遍历数组,获取到数组的元素和下标;
- 在 filter 方法中设置 return 筛选条件,最终满足“筛选条件”的 item 会组成一个新数组。
注意:
- 新数组和原数组的长度可以不一致;
- 新数组中的数据,一定是来源于原数组且不会发生改变;
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;
});
结论:
- every():一假得假;
- 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);
总结:
- forEach() 可以遍历得到元素和下标;不能使用 break 和 continue;
- map() 可以遍历得到元素和下标;可以得到新数组,且与原数组长度一致,内容可以不一致;
- filter() 可以遍历得到元素和下标;可以得到新数组,且与原数组内容一致,长度可以不一致;
- some() 可以遍历得到元素和下标;可以得到布尔值,一真得真;
- every() 可以遍历得到元素和下标;可以得到布尔值,一假得假;
- reducer() 可以遍历得到元素;
- 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);