一下JavaScript数组迭代方法,看看他们都有什么妙用?
点击右上方红色按钮关注“web秀”,让你真正秀起来
前言
数组Arrayjs中数组使用,在各种语言中,都是非常常见的一种数据类型。JavaScript数组的方法也是非常之多,其中数组迭代方法就是最多的。
今天我们就来学习一下JavaScript数组迭代方法,看看他们都有什么妙用?
1、forEach() 迭代数组每一项,没有返回值
2、every() 迭代数组每一项,每项都符合条件的才返回true,反之false
3、some() 迭代数组每一项,只要有一项符合条件就返回true,如果全部不符合才返回false
4、map() 迭代数组每一项,可以给特定条件会返回重新组成新的数组
5、filter() 迭代数组每一项,可以给特定的条件进行筛选返回新的数组
下面我们就来仔细品味一下它们
forEach()
forEach() 方法,对数组的每一项迭代,没有返回值
JavaScript数组5种迭代方法各有什么妙用?
使用场景:查看每个商品的价格和名字
<pre>let goods = [{
name: '时尚女装',
price: 888.00
}, {
name: '精品手表',
price: 666.00
}]
goods.forEach(item => {
console.log(${item.name}价格为${item.price}
);
})
</pre>
every()
every() 方法,对数组中的每一项进行迭代,如果每一项都符合条件才可以返回true,反之返回false。
JavaScript数组5种迭代方法各有什么妙用?
使用场景:家里面有3个小孩,如果这3个孩子都大于3岁,才能去旅行
<pre>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
</pre>
some()
some() 方法刚好和every相反,对数组的每一项迭代,只有一个选项符合条件的,就可以返回true了js中数组使用,只有全部不符合条件才返回false。
JavaScript数组5种迭代方法各有什么妙用?
使用场景:3.8一家人去吃饭,只要有一个女性,就可以打3.8折
<pre>// 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 打折
</pre>
map()
map() 方法,对数组的每一项迭代,给特定的条件返回重新组成数组。
JavaScript数组5种迭代方法各有什么妙用?
使用场景:春节老板给每个员工发奖金1w,求每个人的当月发的工资为多少
<pre>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时,要注意如不需要修改源数据,就不要修改里面的对象
let employeesWages2 = employees.map(employee=>{
return {
name: employee.name,
wages: employee.wages + 10000
}
})
console.log(employeesWages2)
console.log(employees) // 此时employeesWages2和employees就不同了
</pre>
filter()
filter() 方法,对数组的每一项迭代,根据给出的条件进行筛选且返回新数组
JavaScript数组5种迭代方法各有什么妙用?
使用场景:老板要看看那些员工工资高于8000?
<pre>let employees = [{
name: '张三',
wages: 7000
}, {
name: '李四',
wages: 8000
}, {
name: '王五',
wages: 10000
}]
let employeesFilter = employees.filter(employee=>{
return employee.wages >= 8000
})
console.log(employeesFilter)
</pre>
发表评论
热门文章
Spimes主题专为博客、自媒体、资讯类的网站设计....
一款个人简历主题,可以简单搭建一下,具体也比较简单....
仿制主题,Typecho博客主题,昼夜双版设计,可....
用于作品展示、资源下载,行业垂直性网站、个人博客,....
尘集杂货铺和官网1t5-cn
11月11日
[已回复]
希望主题和播放器能支持SQLite数据库,AI能多个讯飞星火