一、forEach
1、返回值的情况：无返回值(undefined)；
2、原数组是否改变：如果是通过值类型的方式修改，则不会改变，如果通过下标的方式或者通过引用类型的方式修改，则原数组会发生变化；
3、遍历中断条件：无法中断, 除非 throw Error，但是这样做没有意义，因为会导致整个程序全部终止；
var arr1 = [
{name:'鸣人',age:16},
{name:'佐助',age:17}
];
var arr2 = [1,2,3];
arr1.forEach(item => {
item.age = item.age + 1}
);
//=> [{name:'鸣人',age:17},{name:'佐助',age:18}]
arr2.forEach(item => {
item = item * 2}
)
// => [1,2,3]
image.png
// forEach 方法---不是通过下标的修改方式
const forEachArray1 = [10, 20, 30, 40];
const forEachRet = forEachArray1.forEach(item => item + 1)
console.log('forEach的forEachArray1结果', forEachRet);
console.log('forEach的forEachArray1原有数组', forEachArray1);
// forEach 方法---通过修改下标的方式
const forEachArray2 = [20, 40, 60, 80];
const forEachRet1 = forEachArray2.forEach((item, index) => forEachArray2[index] = item + 1)
console.log('forEach的forEachArray2结果', forEachRet1);
console.log('forEach的forEachArray2原有数组', forEachArray2);
image.png
二、map
1、返回值的情况：如果不return 则无返回值（undefined），否则有返回值；
2、原数组是否改变：如果是通过值类型的方式修改，则不会改变，如果通过下标的方式或者通过引用类型的方式修改，则原数组会发生变化；
3、遍历中断条件：无法中断, 除非 throw Error，但是这样做没有意义，因为会导致整个程序全部终止；
var arr1 = [
{name:'鸣人',age:16},
{name:'佐助',age:17}
];
var arr2 = [1,2,3];
var aa=arr1.map((item)=>{item.age=item.age+1})
image.png
// map 方法---不是通过下标的修改方式
const mapArray1 = [10, 20, 30, 40];
const mapRet = mapArray1.map(item => item + 1);
console.log('map的结果--有返回值', mapRet);
console.log('map的原有数组--无变化', mapArray1);
// map方法---通过修改下标的方式
const mapArray2 = [20, 40, 60, 80];
const mapRet2 = mapArray2.map((item, index) => {
mapArray2[index] = item + 1;
return item
});
console.log('map的mapArray2结果', mapRet2);
console.log('map的mapArray2原有数组', mapArray2);
image.png
三、every
1、返回值的情况：如果是空数组.every，则一律返回true；如果不是空数组，只要回调函数返回的值当中有一个是false，则返回值是false，否则返回值为true；
2、原数组是否改变：如果是通过值类型的方式修改，则不会改变，如果通过下标的方式或者通过引用类型的方式修改，则原数组可能会发生变化；注意返回值的情况，如果返回值为false，则会中断整个循环，导致后续的数组项不会继续执行。
3、遍历中断条件：只要回调函数返回的值为false，则会立即中断；
var arr1 = [
{name:'鸣人',age:16},
{name:'佐助',age:17}
];
var arr2 = [1,2,3];
var aa=arr1.every((item)=>{item.age=item.age+1})
image.png
// every 方法--- 用法1 如果所有都满足条件就返回true 否则返回false
const everyArray1 = [10, 20, 30, 40];
const everyRet = everyArray1.every(item => item > 21)
console.log('every的everyArray1结果', everyRet);
console.log('every的everyArray1原有数组', everyArray1);
// every 方法--- 用法2 通过修改下标的方式修改原有数组
const everyArray2 = [20, 40, 60, 80];
const everyRet1 = everyArray2.every((item, index) => everyArray2[index] = item + 1)
console.log('every的everyArray2结果', everyRet1);
console.log('every的everyArray2原有数组', everyArray2);
// every 方法--- 用法3 回调函数如果返回false 则循环会立刻终止
const everyArray3 = [120, 140, 160, 180];
const everyRet3 = everyArray3.every((item, index) => {
console.log(`【前】index是${index}`);
if (index === 2) {
return false
}
console.log(`【后】index是${index}`);
return true
})
console.log('every的everyArray3结果', everyRet3);
console.log('every的everyArray3原有数组', everyArray3);
image.png
image.png
四、some
1、返回值的情况：如果使用空数组.some，则一律返回false;如果不是空数组，只要回调函数返回的值当中有一个是true，则返回值是true，否则返回值为false；
2、原数组是否改变：如果是通过值类型的方式修改，则不会改变，如果通过下标的方式或者通过引用类型的方式修改，则原数组可能会发生变化；注意返回值的情况，如果返回值为true，则会中断整个循环，导致后续的数组项不会继续执行。
3、遍历中断条件：只要回调函数返回的值为true，则会立即中断；
var arr1 = [
{name:'鸣人',age:16},
{name:'佐助',age:17}
];
var arr2 = [1,2,3];
var aa=arr1.some((item)=>{item.age=item.age+1})
image.png
// some 方法--- 用法1 只要回调函数返回了true 则返回true 否则返回false
const someArray1 = [10, 20, 30, 40];
const someRet = someArray1.some(item => item > 21)
console.log('some的someArray1结果', someRet);
console.log('some的someArray1原有数组', someArray1);
// some 方法--- 用法2 通过修改下标的方式修改原有数组
const someArray2 = [20, 40, 60, 80];
const someRet1 = someArray2.some((item, index) => someArray2[index] = item + 1)
console.log('some的someArray2结果', someRet1);
console.log('some的someArray2原有数组', someArray2);
// some 方法--- 用法3 回调函数如果返回false 则循环会立刻终止
const someArray3 = [120, 140, 160, 180];
const someRet3 = someArray3.some((item, index) => {
console.log(`【前】index是${index}`);
if (index === 2) {
return false
}
console.log(`【后】index是${index}`);
return true
})
console.log('some的someArray3结果', someRet3);
console.log('some的someArray3原有数组', someArray3);
image.png
另：这里简单提一下reduce、filter、find方法：
1、reduce 返回的是累计器累计完后的单个值，原数组不会发生变化；
// reduce 方法
const reduceArray1 = [10, 20, 30, 40];
const firstVal = 100;
const reduceFunc = (lastReturn, item) => lastReturn + item
const reduceRet = reduceArray1.reduce(reduceFunc, firstVal)
console.log('reduce的结果---有返回值', reduceRet);
console.log('reduce的原有数组--无变化', reduceArray1);
image.png
2、filter 返回的是一个新数组，数组里的内容是回调函数运行后为true的各项值；
// filter 方法
const filterArray1 = [10, 20, 30, 40];
const filterFunc = item => item > 22
const filterRet = filterArray1.filter(filterFunc)
console.log('filter的结果---有返回值', filterRet);
console.log('filter的原有数组--无变化', filterArray1);
image.png
3、find 顾名思义，查找
其只返回 第一个符合条件
var potatos = [{ id: '1001', weight: 50 },
{ id: '1002', weight: 80 },
{ id: '1003', weight: 120 },
{ id: '1004', weight: 40 },
{ id: '1005', weight: 110 },
{ id: '1006', weight: 60 }]
var result;
result=potatos.find((item)=>{ console.log(item); return item.id==='1004'})
console.log('result',result,'potatos',potatos)
image.png
推荐阅读:
生动形象解释forEach、filter、map、some、every、find、findIndex、reduce间的区别
