FOREACHMAPFILTERSOMEEVERY五个数组方法

Posted marinnn

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了FOREACHMAPFILTERSOMEEVERY五个数组方法相关的知识，希望对你有一定的参考价值。

数组函数

（这里的回调函数中的index和arr都可以省略，回调函数后有参数是设置调整this指向的，这里暂时不使用）

 

  • forEach()
  • map()— —更新数组
  • filter()、includes()、find()、findIndex()— —筛选（删除）数组
  • some()、every()— —判断数组
  • reduce()— —叠加数组

 

arr.forEach()

遍历数组全部元素，利用回调函数对数组进行操作，自动遍历数组.length次数，且无法break中途跳出循环

因此不可控

不支持return操作输出，return只用于控制循环是否跳出当前循环

因此难操作成新数组，新值，故不作多分析

示例：
[javascript] view plain copy
 
  1. var arr = [1,2,3,4,5,] ;  
  2. arr.forEach(function(item,index){  
  3.     console.log(item);  
  4. });  

技术分享图片

arr.map()— —更新数组

1、创建新数组

2、不改变原数组

3、输出的是return什么就输出什么新数组

4、回调函数参数，item(数组元素)、index(序列)、arr(数组本身)

5、使用return操作输出，会循环数组每一项，并在回调函数中操作

示例：
[javascript] view plain copy
 
  1.  var arr = [1,2,3,4,5] ;  
  2.  var newArr = arr.map(function(item,index){  
  3.         return item*2 ;        //操作更新数组  
  4.  })  
  5.  console.log(newArr);                  //打印新数组  
  6.  console.log(arr);                     //打印原数组，map()没有改变原数组  
  7.  var newArr2 = newArr.map(function(item,index){  
  8.         return `<li>${item}</li>` ;  
  9.               //ES6语法，模版字符串，波浪号键，变量使用${}  
  10.           //["<li>NaN</li>", "<li>NaN</li>", "<li>NaN</li>", "<li>NaN</li>", "<li>NaN</li>"]  
  11.  })  
  12.  console.log(newArr2.join(‘‘));     //数组.join()，把数组每一项连接起来，形成字符串string  
  13.  console.log(newArr);                   //打印数组，map()没有改变原数组  

技术分享图片

 

arr.filter()、includes()、find()、findIndex()— —筛选数组

一、arr.filter()

1、创建新数组

2、不改变原数组

3、输出的是判断为true的数组元素形成的新数组

4、回调函数参数，item(数组元素)、index(序列)、arr(数组本身)

5、使用return操作输出，会循环数组每一项，并在回调函数中操作

示例：
[javascript] view plain copy
 
  1. var arr = [1,2,3,4,5] ;  
  2. var newArr = arr.filter(function(item,index){  
  3.         return item>2&&item<5 ;         //根据判断为true来遍历循环添加进新数组  
  4. })  
  5. console.log(newArr);                            //打印新数组  
  6. console.log(arr);                               //打印原数组，map()没有改变原数组  

技术分享图片

 

二、arr.includes()

只是判断数组是否含有某值，不用return，不用回调函数，输出一个true或false

无用

示例：
[javascript] view plain copy
 
  1. //include():  
  2. var arr = [1,2,3,4,5] ;  
  3. var new1 = arr.includes(5);    //不用回调函数，且是完全匹配才行如原数组是55则flase（实用性不如正则）  
  4. console.log(new1);  
  5. console.log(arr);  

技术分享图片

三、arr.find()

1、不创建新数组

2、不改变原数组

3、输出的是一旦判断为true则跳出循环输出符合条件的数组元素

4、回调函数参数，item(数组元素)、index(序列)、arr(数组本身)

5、使用return操作输出，会循环数组每一项，并在回调函数中操作

示例：
[javascript] view plain copy
 
  1. var arr = [1,2,3,4,5] ;  
  2. var new1 = arr.find(function(item,index){  
  3.         return item>2&&item<5 ;    //当遍历循环到判断到一个为true则跳出循环，输出当前数组元素，不再循环  
  4. })  
  5. var new2 = arr.find(function(item,index){  
  6. <span style="white-space:pre;">     </span>return item.toString().indexOf(5)>-1 ;<span style="white-space:pre;"> </span>//把当前数组元素转为字符串，则可index()>-1判断是否含有某字符  
  7. })  
  8. console.log(new1);       //打印操作后的结果  
  9. console.log(new2)        //打印是否含有某字符（用正则会更好，这里学习使用一下）  
  10. console.log(arr);        //打印原数组，find()没有改变原数组  

技术分享图片

四、arr.findIndex()— — 与find()相同

1、不创建新数组

2、不改变原数组

3、输出的是一旦判断为true则跳出循环输出符合条件的数组元素序列

4、回调函数参数，item(数组元素)、index(序列)、arr(数组本身)

5、使用return操作输出，会循环数组每一项，并在回调函数中操作

（较无用）

示例：
[javascript] view plain copy
 
  1. var arr = [1,2,3,4,5] ;  
  2. var new1 = arr.findIndex(function(item,index){  
  3.         return item>2&&item<5 ;    //当遍历循环到判断到一个为true则跳出循环，输出当前数组元素序列，不再循环  
  4. })  
  5. var new2 = arr.findIndex(function(item,index){  
  6.         return item.toString().indexOf(5)>-1 ;   //把当前数组元素转为字符串，则可index()>-1判断是否含有某字符  
  7. })  
  8. console.log(new1);       //打印操作后的结果  
  9. console.log(new2)        //打印是否含有某字符（用正则会更好，这里学习使用一下）  
  10. console.log(arr);        //打印原数组，findIndex()没有改变原数组  

技术分享图片

arr.some()、every()— —判断数组

(不常用)

一、some()

 

1、不创建新数组

2、不改变原数组

3、输出的是判断为true则马上跳出循环并return成true

4、回调函数参数，item(数组元素)、index(序列)、arr(数组本身)

5、使用return操作输出，会循环数组每一项，并在回调函数中操作

示例：
[javascript] view plain copy
 
  1. //arr.some()  
  2. var arr = [1,2,3,4,5] ;  
  3. var new1 = arr.some(function(item,index){  
  4.         return item>2&&item<5 ;   //判断出一个符合条件则跳出循环并输出true  
  5. })  
  6. var new2 = arr.some(function(item,index){  
  7.         return item>5 ;          //判断出数组全部元素都不符合条件则输出flase  
  8. })  
  9. console.log(new1);  
  10. console.log(new2);  
  11. console.log(arr);  

技术分享图片

 

一、every()— —与some相反

1、不创建新数组

2、不改变原数组

3、输出的是判断为false则马上跳出循环并return成false

4、回调函数参数，item(数组元素)、index(序列)、arr(数组本身)

5、使用return操作输出，会循环数组每一项，并在回调函数中操作

示例：
[javascript] view plain copy
 
  1. //arr.every()  
  2. var arr = [1,2,3,4,5] ;  
  3. var new1 = arr.every(function(item,index){  
  4.         return item>2&&item<5 ;   //判断出一个不符合条件则跳出循环并输出flase  
  5. })  
  6. var new2 = arr.every(function(item,index){  
  7.         return item<10 ; //判断出数组全部元素都符合条件则输出true  
  8. })  
  9. console.log(new1);  
  10. console.log(new2);  
  11. console.log(arr);  

技术分享图片

reduce()— —叠加数组

不一定在数学意义上的叠加计算，这里叠加指：可以利用前遍历操作的结果到下一次遍历使用，重复叠加使用下去

 

1、创建新数组

2、不改变原数组

3、输出的是return叠加什么就输出什么 新数组

4、回调函数参数

 

  • pre(第一次为数组第一项，之后为上一操作的结果)
  • next(数组的下一项)
  • index(next项的序列)
  • arr(数组本身)
  • 回调函数后的改变第一项参数。（不影响原数组）

5、使用return操作输出，会循环数组每一项，并在回调函数中操作

示例：
[javascript] view plain copy
 
  1. //reduce()：  
  2. //求和计算  
  3. var arr1 = [1,2,3,4,5] ;  
  4. var new1 = arr1.reduce(function(sum,next,index){  
  5.         return sum+next ;     
  6.         /* 
  7.          *第一次：pre-->1  next-->2  index-->1 
  8.          *遍历计算return得结果为pre+next=1+2=3 
  9.          *第二次：pre-->3  next-->3  index-->2 
  10.          *遍历计算return得结果为pre+next=3+3=6 
  11.          *第三次：pre-->6  next-->4  index-->3 
  12.          *遍历计算return得结果为pre+next=6+4=10 
  13.          *第四次：pre-->10  next-->5  index-->4 
  14.          *遍历计算return得结果为pre+next=10+5=15 
  15.         */  
  16. })  
  17.   
  18. //扁平化数组  
  19. var arr2 = [[1,2,3],[4,5],[6,7]] ;  
  20. var new2 = arr2.reduce(function(pre,next,index){  
  21.         return pre.concat(next);    //前数组拼接后数组 .concat()  
  22. })  
  23.   
  24. //对象数组叠加计算  
  25. var arr3 = [{price:10,count:1},{price:15,count:2},{price:10,count:3}];  
  26. var new3 = arr3.reduce(function(pre,next,index){  
  27.         return pre+next.price*next.count;  
  28.         //当需要对第一项进行操作时，后面pre使用上一项操作结果，不再需要操作  
  29.         //所以当需要操作第一项的时候，利用reduce(callbreak(){},往数组第一项前添加一项，如:0)  
  30. },0)    //在原数组第一项添加为0，不改变原数组，则可不操作第一项  
  31.   
  32. console.log(new1);  
  33. console.log(new2);  
  34. console.log(new3);  
  35.   
  36. console.log(arr1);      //普通数组  
  37. console.log(arr2);      //多重数组  
  38. console.log(arr3);      //对象数组  

技术分享图片

以上是关于FOREACHMAPFILTERSOMEEVERY五个数组方法的主要内容，如果未能解决你的问题，请参考以下文章