for循环遍历
var arr = ["vue","js","jq"];
for(var i = 0;i<arr.length;i++){
console.log(arr[i]); // arr[i]代表的是数组中的每一个元素i
}
console.log(arr);
forEach()方法
-
forEach() 这种遍历方法只支持IE8以上的浏览器。IE8及以下的浏览器均不支持该方法。
所以如果需要兼容IE8,则不要使用forEach,改为使用for循环来遍历即可 -
forEach()方法需要一个函数作为参数
这种函数,是由我们创建但是不由我们调用的,我们称为回调函数 -
数组中有几个元素,该回调函数就会执行几次。执行完毕后,浏览器会将遍历到的元素
-
回调函数中传递三个参数:
第一个参数,就是当前正在遍历的元素
第二个参数,就是当前正在遍历的元素的索引
第三个参数,就是正在遍历的数组
注意:
forEach() 的返回值是 undefined。也就是说,它没有返回值
var arr = ["vue", "js", "jq"];
arr.forEach(function (item, index, obj) {
console.log("item:" + item);
console.log("index:" + index);
console.log("obj:" + obj);
console.log("----------");
});
map()方法
对数组中每一项运行回调函数,返回该函数的结果,组成的新数组
(返回的是加工之后的新数组)
举例1:(拷贝的过程中改变数组元素的值)
有一个已知的数组arr1,我要求让arr1中的每个元素的值都加10,这里就可以用到 map 方法
var arr1 = [1, 3, 6, 2, 5, 6];
var arr2 = arr1.map(function (item, index) {
return item + 10; //让arr1中的每个元素加10
});
console.log(arr2);
举例2:【重要案例】
将A数组中某个属性的值,存储到B数组中
const arr1 = [
{ name: "vue", age: "28" },
{ name: "js", age: "32" },
];
const arr2 = arr1.map((item) => item.name);
// 将数组 arr1 中的 name 属性,存储到数组 arr2 中
console.log(arr1);
console.log("arr2:" + JSON.stringify(arr2));
filter()方法
对数组中每一项运行回调函数,该函数返回结果是true的项,将组成新的数组(返回值就是这个新的数组)
**举例1:**找出数组 arr1 中大于4的元素,返回一个新的数组
var arr1 = [1, 3, 6, 2, 5, 6];
var arr2 = arr1.filter(function (item, index) {
return item > 4; //将arr1中大于4的元素返回,组成新的数组
});
console.log(JSON.stringify(arr2));
**举例2:**获取数组A中指定类型的对象,放到数组B中
const arr1 = [
{ name: '许嵩', type: '一线' },
{ name: '周杰伦', type: '过气' },
{ name: '邓紫棋', type: '一线' },
];
const arr2 = arr1.filter(item => item.type == '一线'); // 筛选出一线歌手
console.log(JSON.stringify(arr2));
every()方法
对数组中每一项运行回调函数,如果都返回true,every就返回true;如果有一项返回false,则停止遍历,此方法返回false
注意:every()方法的返回值是boolean值,参数是回调函数
var arr1 = ["1", "23", "456", "25"];
var bool1 = arr1.every(function (item, index, array) {
if (item.length > 2) {
return false;
}
return true;
});
console.log(bool1);
//输出结果:false。只要有一个元素的长度是超过两个字符的,就返回false
var arr2 = ["32", "43", "67", "89"];
var bool2 = arr2.every(function (item, index, array) {
if (item.length > 2) {
return false;
}
return true;
});
console.log(bool2);
//输出结果:true。因为每个元素的长度都是两个字符。
some()方法
对数组中每一项运行回调函数,只要有一项返回true,则停止遍历,此方法返回true
注意:some()方法的返回值是boolean值
reduce()方法
为数组中的每一个元素,依次执行回调函数
arr.reduce(
function(previousValue, item, index, arr) {
}, initialValue)
- previousValue:上一次调用回调函数时的返回值,或者初始值
- item:当前正在处理的数组元素
- index:当前正在处理的数组元素下标
- arr:调用reduce()方法的数组
- initialValue:可选的初始值(作为第一次调用回调函数时传给 previousValue 的值)
举例1: 计算数组中所有元素项的总和
var arr = [2, 0, 1, 9, 6];
sumValue = arr.reduce(function (total, item) {
// 计算 arr 数组中,所有元素项的综合
return total + item;
}, 0);
console.log("sumValue:" + sumValue); // 打印结果:18