1.前言
ES6中有一些数组的方便高阶函数,每个都有不同的使用方法,常用的有四个every、some、filter、map。
2.every()
every()的逻辑:检测每个元素相当于逻辑运算符 且 &&
返回值:true-全部符合 ,false-有不符合
参数:一个带有三个参数的回调函数
语法:Array.every((value,index,array)=>{
return 条件
})
案例1:
<script>
var nums=[1,23,4,56,75,77,33]
//value:数组中元素的值,index:元素的下表,array:所遍历的对象
var x = nums.every((value, index, array) => {
console.log('value', value) // 我是谁
console.log('index', index) // 序号
console.log('array', array) // 来自哪个数组
// 三个值的关系是: value == array[index]
return value > 0
})
//ES6语法糖,当只有一个参数时省略(),函数体只有一行省略{return}
var x=nums.every(value=>value>0)
//注:every()遍历数组只要数组中的元素有一个不满足所给的条件,就会返回false,
//所有都满足的时候则返回true
console.log(x ? '都是正数' : '非都是正数')
</script>`
案例2:案例一写了基本的用法,可以用在构造函数的方法中
<script>
class Emp {
constructor(ename, age, married) {
this.ename = ename
this.age = age
this.married = married
}
}
const emps = [
new Emp('孙悟空', 18, true),
new Emp('猪八戒', 32, false),
new Emp('沙和尚', 38, true),
new Emp('白龙马', 34, true),
]
console.log(emps)
// 1. 判断 是否所有员工 都超过20岁
var x = emps.every(value => {
// 数组中每个元素是 Emp 类型的对象
console.log('value', value)
// 年龄是对象中的属性
return value.age > 20
})
console.log(x ? '都大于20' : '非都大于20');
// 2. 判断 是否所有员工 都已婚
// 注意:married 属性本身就是 布尔类型, 不需要再 == true 来比较
var x = emps.every(v => v.married)
console.log(x ? '都结婚' : '非都已婚');
</script>
3.some()
some()逻辑:遍历所有元素只要有一个满足返回true,相当于逻辑运算或 ||
返回值:true-至少有一个符合条件,false-一个都不满足
参数:一个带有三个参数的回调函数
语法:Array.some((value,index,array)=>{
return 条件
})
案例1:
<script>
// some: 一些, 至少有一个;
// 判断数组中的元素 是否 至少有一个满足条件
// 类似 逻辑或 || , 有真则真, 全假则假
var nums = [21, 4, 43, 154, 6, 76]
// 是否有数字大于100
//value:数组中元素的值,index:元素的下表,array:所遍历的对象
var x = nums.some((value, index, array) => {
return value > 100
})
var x = nums.some(v => v > 100)
console.log(x ? '有超过100的' : '没有超过100的');
</script>
案例2:
<script>
class Emp {
constructor(ename, age, married) {
this.ename = ename
this.age = age
this.married = married
}
}
const emps = [
new Emp('孙悟空', 18, true),
new Emp('猪八戒', 32, false),
new Emp('沙和尚', 38, true),
new Emp('白龙马', 34, true),
]
//1. 是否有人年龄小于20
var x = emps.some(v => v.age < 20)
console.log(x ? '有小于20' : '没有小于20');
// 2. 是否有未婚
var x = emps.some(v => v.married == false)
// ! 逻辑非
var x = emps.some(v => !v.married)
console.log(x ? '有未婚' : '没有未婚');
</script>
4.filter()
filter()逻辑:遍历整个元素把符合条件的筛选出来
返回值:返回满足条件的元素
参数:一个带有三个参数的回调函数
语法:Array.filter((value,index,array)=>{在这里插入代码片
return 条件
})
案例1
<script>
// filter: 过滤; 把满足条件的元素过滤出来
var nums = [12, 32, 43, 54, 7676, 87, 78, 9889]
// 找出所有的偶数
//value:数组中元素的值,index:元素的下表,array:所遍历的对象
var x = nums.filter((value, index, array) => {
// 反馈 元素是否满足条件
return value % 2 == 0
})
var x = nums.filter(v => v % 2 == 0)
console.log(x)
</script>
案例2:
<script>
class Emp {
constructor(ename, age, married) {
this.ename = ename
this.age = age
this.married = married
}
}
const emps = [
new Emp('孙悟空', 18, true),
new Emp('猪八戒', 32, false),
new Emp('沙和尚', 38, true),
new Emp('白龙马', 34, true),
]
//1. 找出年龄大于20
var x = emps.filter(v => v.age > 20)
console.log(x)
//2. 找出所有已婚
var x = emps.filter(v => v.married)
console.log(x)
</script>
5.map()
map()逻辑:遍历所有元素然后按着自己给的条件进行变化
返回值:返回整个变化后的数组
参数:一个带有三个参数的回调函数
语法:Array.filter((value,index,array)=>{在这里插入代码片
return 条件
})
案例1
<script>
// map: 映射; 通过一定的规则 把数组中的每个元素进行转换, 得到新的数组
var nums = [12, 34, 457, 45, 76, 76, 878, 7]
// 数组中每个元素 翻倍
var x = nums.map((value, index, array) => {
return value * 2
})
var x = nums.map(v => v * 2)
// map 不会修改原数组
console.log(x)
/
var names = ['lucy', 'lily', 'shirley', 'john']
// 把每个元素变全大写
var y = names.map(v => v.toUpperCase())
console.log(y);
</script>
6.总结
es6中数组的方法很多这四个是比较常用的,其中filter、map应用最多,map在ajax发送请求接受返回的数组时经常使用。