Javascript这八个数组方法应该要牢牢记住
- filter
- map
- forEach
- find
- some
- every
- reduce
- includes
上面八个方法中，前六个的回调函数都可传入三个参数，第一个是当前迭代的值，第二个是当前迭代值的数组下标，第三个是表示原来数组的数组。
依次用例子来解释这八个数组方法，原始的数组如下所示
const items = [
{ name: "Bike", price: 100 },
{ name: 'car', price: 1000 },
{ name: 'Album', price: 10 },
{ name: 'Book', price: 5 },
{ name: 'Phone', price: 500 },
{ name: 'Computer', price: 10000 },
{name:'cup',price:20}
]
filter
filter方法顾名思义，就是用来过滤掉数组的一些子元素，回调函数返回一个bool值，若为true，则该元素被选取，为false则表示该元素被过滤
选取价格低于100的子元素
const filter = items.filter((item, _, arr) => {
return item.price<=100
})
//输出如下
[
{ name: 'Bike', price: 100 },
{ name: 'Album', price: 10 },
{ name: 'Book', price: 5 },
{ name: 'cup', price: 20 }
]
map
map的作用就是映射，原数组被映射成新数组
给每个子元素加上一个discount元素，表示打折后的价格
const mapedItems = items.map(item => {
return {
...item,
discount:item.price*0.5
}
})
console.log(mapedItems);
//输出如下
[
{ name: 'Bike', price: 100, discount: 50 },
{ name: 'car', price: 1000, discount: 500 },
{ name: 'Album', price: 10, discount: 5 },
{ name: 'Book', price: 5, discount: 2.5 },
{ name: 'Phone', price: 500, discount: 250 },
{ name: 'Computer', price: 10000, discount: 5000 },
{ name: 'cup', price: 20, discount: 10 }
]
forEach
forEach应该是最常见的方法了，就跟for循环一样，可以遍历每一个元素
items.forEach((_, idx, arr) => {
console.log(arr[idx])
})
//输出如下
{ name: 'Bike', price: 100 }
{ name: 'car', price: 1000 }
{ name: 'Album', price: 10 }
{ name: 'Book', price: 5 }
{ name: 'Phone', price: 500 }
{ name: 'Computer', price: 10000 }
{ name: 'cup', price: 20 }
find
find方法用于查找数组的满足条件的第一个元素，用filter则是返回一个新的数组
const item = items.find(item => {
return item.price<50
})
console.log(item)
//找到数组中的第一个价格小于50的元素，注意输出的元素在原数组中的位置
{ name: 'Album', price: 10 }
some
some方法表示迭代回调中，至少有一次回调的返回值为true时，则该方法返回true，若全返回false，则返回结果为false
const item = items.some(item => {
return item.price>=10000
})
console.log(item)
//原数组只有最后一个元素的价格大于一万，同样返回true
every
every与some类似，但它要求每一个回调都返回true，它的返回值才为true
const res = items.every(item => {
return item.price>5
})
console.log(res);
//查询是否所有的元素价格都大于5，因为有一个元素价格为5，所以返回false
reduce
reduce方法常用来迭代数组进行累加，最常见的便是number型数组进行求和，它第一个参数是回调方法，第二个参数是初始值
//求出所有价格的总和
const res = items.reduce((prev, cur) => {
return prev+cur.price
},0)
console.log(res);
includes
includes方法用于检查数组中是否含有与传入参数相等的元素，如果有则返回true。很多情况下，它都可以用来简化if判断条件的写法。例如判断一个月的天数，代码如下
function aaa(month) {
if (month === 1 || month === 3 || month === 5 || month === 7 || month === 8 || month === 10 || month === 12) {
return 31
} else if (month === 2) {
if (isLeapYear) return 29
return 28
} else {
return 30
}
}
//aaa是一个返回月天数的函数，我第一印象的写法可以就是这么写，写很多的全等号和逻辑或
//这样写很烦很混乱，使用数组的includes方法可以简化此函数
function aaa(month) {
const arr = [1, 3, 5, 7, 8, 10, 12]
if (arr.includes(month)) return 31;
if (month === 2) {
...
} else {
return 30
}
}
