JavaScript中数组方法 forEach、map、ever

一、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、返回值的情况：只要回调函数返回的值当中有一个是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、返回值的情况：只要回调函数返回的值当中有一个是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方法：
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