关键词搜索

全站搜索
×
密码登录在这里
×
注册会员

已有账号? 请点击

忘记密码

已有账号? 请点击

使用其他方式登录

js循环遍历数组方法forEach()、map()、filter()的用法详情

发布2023-11-27 浏览148次

详情内容

在前端开发当中,我们通常要对后端返回的数据进行一些处理再渲染到页面,而其中常用的就是数组的不同遍历方法,因此熟练掌握这些方法是非常有必要的,而对于初学者来说,这些方法不太容易理解也容易被混淆,今天我们就通过本篇教会大家区别数组的forEach,map,filter,reduce,some,every这6种遍历方法。

除了reduce方法语法略有不同(后面单独讲解),其他五个方法forEach,map,filter,some,every传入的第一个参数语法相同:

最近进行前端开发时使用到了filter()、forEach()、map()方法,这里介绍一下它们的大致用法:

1、filter()是通过删选oldArray,来生产newArray的方法

语法:

array.filter(function(value, index, arr),thisValue)

value:必须,代表当前元素,其他四个参数都是可选,index代表当前索引值,arr代表当前的数组,thisValue代表传递给函数的值,一般用this值,如果这个参数为空,undefined会传递给this值

返回值:返回数组,包含了符合条件的所有元素,如果没有符合条件的则返回空数组

用法:

var arr = [1,2,3,4,5,6,7];
 var ar = arr.filter(function(elem){
     return elem>5;
 });
 console.log(ar);//[6,7]

简单用法:

var arr = [1,2,3,4,5,6,7];
 var ar = arr.filter(elem => {
     return elem>5;
 });
 console.log(ar);//[6,7]

2、forEach()用于遍历数组中的每个元素,并将元素传递给回调函数。它没有返回值,直接修改原数组中的数据。跟for循环用法类似。

语法:

array.forEach(function(value, index, arr),thisValue)

value:必须,代表当前元素,其他四个参数都是可选,index代表当前索引值,arr代表当前的数组,thisValue代表传递给函数的值,一般用this值,如果这个参数为空,undefined会传递给this值。

用法:

let arr = [
  {   name: '1',
      id: '1'
  },{ name: '2',
      id: '2'
  },{   name: '3',
      id: '3'
  }
]
arr.forEach(item=>{
  if(item.name==='2'){
    item.name = 'zding'
  }
})

console.log(arr)
 [
  {   name: '1',
      id: '1'
  },{ name: 'zding',
      id: '2'
  },{   name: '3',
      id: '3'
  }
]

它没有产生新的数组,修改的是原来的数组。

当数组中为单类型数据时:string、int等类型,这种方式的修改就不起作用了

例如:

let arr = [1,3,5,7,9]
arr.forEach(function(item){
        item = 30
 })
console.log(arr)  //输出  [1, 3, 5, 7, 9]

我们期望输输出  [30, 30, 30, 30, 30],但实际上输出为 [1, 3, 5, 7, 9],修改没有起作用。

这个时候我们可以使用for循环,或者map()方法。

map()返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值,map()方法按照原始数组元素顺序依次处理元素.

语法:

array.map(function(value, index, arr),thisValue)

用法:

var arr = [1,2,3,4,5,6,7];
 var ar = arr.map(function(elem){
    return elem*4;
 });
 console.log(ar);//[4, 8, 12, 16, 20, 24, 28]
console.log(arr);//[1,2,3,4,5,6,7]

3.some

let list = [1, 2, 3, 4, 5];
list.some((d, i) => {
  console.log(d, i);
  return d > 3;
});
// print: 1,0 2,1 3,2 4,3
// return false

4.every

返回一个boolean,判断每个元素是否符合func条件,有一个元素不满足func条件,则循环终止,返回false。

let list = [1, 2, 3, 4, 5];
list.every((d, i) => {
 console.log(d, i);
 return d < 3;
});
// print: 1,0 2,1 3,2
// return false


点击QQ咨询
开通会员
上传资源赚钱
返回顶部
×
  • 微信支付
  • 支付宝付款
扫码支付
微信扫码支付
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载