首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >JavaScript数组5种迭代方法各有什么妙用?

JavaScript数组5种迭代方法各有什么妙用?

作者头像
Javanx
发布2019-09-04 10:34:03
发布2019-09-04 10:34:03
9830
举报
文章被收录于专栏:web秀web秀

前言

数组Array,在各种语言中,都是非常常见的一种数据类型。JavaScript数组的方法也是非常之多,其中数组迭代方法就是最多的。

今天我们就来学习一下JavaScript数组迭代方法,看看他们都有什么妙用?

1、forEach() 迭代数组每一项,没有返回值 2、every() 迭代数组每一项,每项都符合条件的才返回true,反之false 3、some() 迭代数组每一项,只要有一项符合条件就返回true,如果全部不符合才返回false 4、map() 迭代数组每一项,可以给特定条件会返回重新组成新的数组 5、filter() 迭代数组每一项,可以给特定的条件进行筛选返回新的数组

下面我们就来仔细品味一下它们

forEach()

forEach() 方法,对数组的每一项迭代,没有返回值

使用场景:查看每个商品的价格和名字

代码语言:javascript
复制
let goods = [{
  name: '时尚女装',
  price: 888.00
}, {
  name: '精品手表',
  price: 666.00
}]
goods.forEach(item => {
    console.log(`${item.name}价格为${item.price}`);
    /**
    * 时尚女装价格为888
    * 精品手表价格为666
    */
})

every()

every() 方法,对数组中的每一项进行迭代,如果每一项都符合条件才可以返回true,反之返回false。

使用场景:家里面有3个小孩,如果这3个孩子都大于3岁,才能去旅行

代码语言:javascript
复制
let childs = [{
  name: '张三',
  age: 1
}, {
  name: '李四',
  age: 2
}, {
  name: '王五',
  age: 2
}]
// 数组中需要每一个项都符合条件才返回true,反之返回false
let isAdults = childs.every(child => child.age >= 3)
console.log(isAdults) // false

let isAdults2 = childs.every(child => child.age >= 1)
console.log(isAdults2) // true

some()

some() 方法刚好和every相反,对数组的每一项迭代,只有一个选项符合条件的,就可以返回true了,只有全部不符合条件才返回false。

使用场景:3.8一家人去吃饭,只要有一个女性,就可以打3.8折

代码语言:javascript
复制
// sex 0:男   1:女
let people1 = [{
  name: '小张',
  sex: 0
}, {
  name: '小刘',
  sex: 0
}, {
  name: '小李',
  sex: 0
}]
// 数组中只要有一个选项符合条件的就返回true,反之返回false
let discount1 = people1.some(p => p.sex === 1)
console.log(discount1) // false 不打折 


let people2 = [{
  name: '小张',
  sex: 0
}, {
  name: '丽丽',
  sex: 1
}, {
  name: '小李',
  sex: 0
}]
// 数组中只要有一个选项符合条件的就返回true,反之返回false
let discount2 = people2.some(p => p.sex === 0)
console.log(discount2) // true 打折

map()

map() 方法,对数组的每一项迭代,给特定的条件返回重新组成数组。

使用场景:春节老板给每个员工发奖金1w,求每个人的当月发的工资为多少

代码语言:javascript
复制
let employees = [{
  name: '张三',
  wages: 7000
}, {
  name: '李四',
  wages: 8000
}, {
  name: '王五',
  wages: 10000
}]
let employeesWages = employees.map(employee=>{
  employee.wages += 10000
  return employee
})
console.log(employeesWages)
console.log(employees) // employees和employeesWages相等,所以使用map时,要注意如不需要修改源数据,就不要修改里面的对象
/**
  [{name: "张三", wages: 17000},
  {name: "李四", wages: 18000},
  {name: "王五", wages: 20000}]
*/
let employeesWages2 = employees.map(employee=>{
  return {
    name: employee.name,
    wages: employee.wages + 10000
  }
})
console.log(employeesWages2)
console.log(employees) // 此时employeesWages2和employees就不同了

filter()

filter() 方法,对数组的每一项迭代,根据给出的条件进行筛选且返回新数组

使用场景:老板要看看那些员工工资高于8000?

代码语言:javascript
复制
let employees = [{
  name: '张三',
  wages: 7000
}, {
  name: '李四',
  wages: 8000
}, {
  name: '王五',
  wages: 10000
}]
let employeesFilter = employees.filter(employee=>{
  return employee.wages >= 8000
})
console.log(employeesFilter)
/**
  [{name: "李四", wages: 8000},
  {name: "王五", wages: 10000}]
*/
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019年4月12日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • forEach()
  • every()
  • some()
  • map()
  • filter()
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档