#数组遍历
#初始化数组
代码示例
var arr = [
{
id: 1,
name: "zhangsan",
},
{
id: 2,
name: "lisi",
},
{
id: 3,
name: "xiaoming",
},
{
id: 4,
name: "huasheng",
},
];#1、for 循环
代码示例
var arr1 = [];
for (var i = 0, len = arr.length; i < len; i++) {
arr1.push(arr[i].id);
}
console.log(arr1); // [1, 2, 3, 4]#2、forEach 循环
代码示例
var arr2 = [];
/**
* item:数组元素(必选)
* index:数组元素索引值(可选)
* array:参数本身(可选)
**/
arr.forEach(function (item, index, array) {
console.log(item);
console.log(index); // 0,1,2,3,4
arr2.push(item.id);
});
console.log(arr2); // [1, 2, 3, 4]#3、for...in 循环
代码示例
/* for...in循环可用于遍历对象和数组,推荐用于遍历对象 */
var arr3 = [];
for (var key in arr) {
console.log(key); // 0,1,2,3
arr3.push(arr[key].name);
}
console.log(arr3); // ["zhangsan", "lisi", "xiaoming", "huasheng"]#4、for...of 循环
代码示例
/**
* for...of循环
* 可用于遍历数组和对象,推荐遍历数组
* key():对键名的遍历
* value():对键值的遍历
* entries():对键值对的遍历
*/
let arr4 = ["iOS", "Android", "Linux"];
// 遍历数组元素
for (let item of arr4) {
console.log(item); // iOS,Android,Linux
}
// 遍历数组索引
for (let item of arr4.keys()) {
console.log(item); // 0,1,2
}
// 遍历数组索引和值
for (let [index, item] of arr4.entries()) {
console.log(index + ":" + item); // 0:iOS,1:Android,2:Linux
}#5、map 循环
代码示例
/**
* map循环
* 会返回一个新的数组,数组中的元素为原数组元素调用函数处理后的值
* 该方法会按照原数组元素顺序依次处理元素
* 该方法不会修改调用它的原始数组本身
* 该方法回调函数可接收三个参数,参数一:数组元素,参数二(可选):数组元素索引值,参数三(可选):数组本身
* */
arr.map(function (item, index, array) {
console.log(index + ":" + item.name);
});
var arr5 = arr.map(function (item) {
return item.name;
});
console.log(arr5); // ["zhangsan", "lisi", "xiaoming", "huasheng"]#6、reduce()方法
代码示例
var arr6 = [
{
id: 10,
name: "小明",
age: 20,
},
{
id: 21,
name: "小康",
age: 24,
},
{
id: 16,
name: "小凯",
age: 20,
},
];
/* array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
* total(必需):初始值or计算结束后返回的值
* currentValue(必需):当前元素
* currentIndex(可选):当前元素的索引
* arr(可选):当前元素所属的数组对象
* initialValue(可选):传递给函数的初始值
*/
// 求年龄总和
var totalAge = arr6.reduce(function (total, item) {
return total + item.age;
}, 0);
console.log(totalAge);
// 求年龄最大的那个人
var ageMax = arr6.reduce(function (item, people) {
return (item.age || 0) > people.age ? item : people;
}, {});
console.info(ageMax);
console.log(ageMax.age);#7、filter()方法
代码示例
/* filter()方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素 */
let arr7 = [
{
id: 1,
num: 101,
},
{
id: 3,
num: 201,
},
{
id: 2,
num: 10,
},
];
/* 参数一:数组元素
* 参数二:数组元素索引
* 参数三:原数组对象
* */
// 组合使用
var totalScore = arr6
.filter(function (item) {
return item.name;
})
.map(function (choose) {
return choose.age;
})
.reduce(function (total, age) {
return total + age;
}, 0);
console.log(totalScore);#8、Array.from()方法
代码示例
let arrTest = [1, 7, "", 6, 8, ""];
let arr8 = Array.from(arrTest, (n) => n || 0);
console.log(arr8); // [1,7,0,6,8,0]